有关html5设计那些事,你真的考虑过前端的实现吗(最近别人经常问我这种问题,所以我就写一篇了,可能也有别人和我一样吐槽过)

很久以前在安卓2.0系统刚刚的时候就对HTML5比较关注!因为我也是那个时候刚刚入行做前端的。那个时候最大的乐趣就是看着w3plus上面各种css3的效果,觉得哇,好牛逼原来可以这样做,然后3年过去了。。。手上的APP做完的没有40个也有30个了!然后去年参加了HTML5峰会。听着一批前辈们说着他们在html5的道路中遇到的挫折,经验,以及流行的框架,制作HTML5的ide。。。也算是小有经验了!。。。然后知道的越多,现实就越残酷(大漠竟然说他不会JS,无语偶曾经的偶像竟然说他真的不会js还发誓!this is so crazy)然后吐槽一下现在(现实就在脚下。。。)

现在么一个个朋友,以前离职的小伙伴,设计师们,都牛气冲天的说她们开始搞APP啦。要搞HTML5了

然后-_-//我只想吐槽你们对HTML5的了解究竟是什么呢!

1.....某个刚刚离职的漂亮设计师妹子表示:她们现在做APP 和H5她们要求设计H5页面都是艺术字

我不得不吐槽!你们设计的页面确定不是在坑人吗!....都是艺术字!你是准备让前端用canvas,载入字体搞呢,还是根本这个字体就是手绘的用图片呢。。

(在他们的眼里或许html5就是让他们不用考虑兼容,可以随意发挥灵感的东西)

但是他们考虑过图片的重量,引入字体库的大小了吗!就算是最后打包成手机APP!这样的做真的合适吗!

如果最后只是一个webapp,他考虑过如果不在wifi的环境下用户使用的话会造成流量大量的浪费在加载图片和字体上

最后如果前端境界很高的话确实可以用linear-gradient制作出很多如本页底部的那些高大上的效果。但是我必须再泼一次冷水,只有safari浏览器也就是水果是完全兼容的

Android4.0(至少我用的是安卓4.0是不完全兼容)。。。

最后关于这个问题!我只想说当前端努力的哪怕从代码的体积哪怕是20K都在努力减少的同时,设计师们是否能考虑到你们做的那么多图片,是否也能减少点体积呢?

毕竟你做的只是一个产品的APP,本来就没什么人主动去下,除了你的客户迫不得已才去下!当然啦如果你的产品能火到别人即使是哪怕烧2M打开你一次页面或是离线

存储个20M的图片。那也无话可说。

2.....某漂亮的设计师问:如何设计出规范的移动端的效果图呢,前端工程师们是怎么实现他的呢

一般写webapp一共大概3种

第一种类似新浪的web页面。。。无脑全屏width:100%,电脑上看还是100%

第二种类似微店网 。。。。。最大宽度680px.....可以下载微点网的手机客户端,打开的话是680的页面(最主要春节摇到20多块钱红包,所以下了一个)

第三种响应式布局(最精准的)设计师需要准备3个分辨率的效果图,然后打开一个页面然后根据屏幕宽度适配(如bootstrap)

剩下的要么比较神奇,要么比较逗比,我就不列举了

关于这个问题,一般来说你要设计的都是单独的所以基本就是第一种和第二种了你只要设计680宽度的效果图

3.....某个小白前端问(设计的时候都是px)我应该用什么字体单位。。。。。没有定性!但是大部分官方都喜欢说EM。。。但是我表示PX用的好的话更加精准

4......我不得不吐槽.......千万不要随意为了做个手机网页设计左右横屏的效果

注意关键词网页   这个问题的关键是左右横屏会在网页上带来灾难性的后果!如,手机浏览器向左向右导致手机浏览器前进后退!!!

打包了我就懒得管了!毕竟phonegap,appcan各种各样的对这个问题都要足够的支持

时间: 2024-10-11 00:59:00

有关html5设计那些事,你真的考虑过前端的实现吗(最近别人经常问我这种问题,所以我就写一篇了,可能也有别人和我一样吐槽过)的相关文章

HTML5设计原理

HTML5是Web标准的巨大飞跃,它为什么要包含那些东西,它背后的设计原则是什么? <JavaScript DOM编程艺术>和<HTML5 For Web Designer>作者Jeremy Keith与大家一起回顾了HTML的发展历程,分享了HTML5的设计原则,并与在场与会者做了精彩互动. 首先,Jeremy回顾了HTML的历史,从HTML 2.0到XHTML 2.0,此处他引用了Postel法则(鲁棒性原则): 对自己发送的东西要严格,对接收的东西则要宽容.指出XHTML 2

HTML5设计网页动态条幅广告(Banner)

横幅广告(Banner): 1.横幅广告是网络广告的常见形式,一般位于网页的醒目位置上:当用户单击这些横幅广告时,通常可以链接到相应的广告页面: 2.设计横幅广告时,要力求简单明了,能够体现出主要的中心主旨,鲜明.形象地表达出最主要的广告意图: 3.横幅广告可以使静态图像,也可以是动态图像.一般而言,与静态横幅广告相比,动态横幅广告更醒目,更能吸引观众的注意力: 4.当然这还是在恰当适合的前提下(讨厌那种弹窗式和悬浮式的广告)使用不当会造成意想不到的后果,甚至因此观看者的反感造成恶性循环,从而对

12个不为大家熟知的HTML5设计小技巧

慎用向右滑动操作.慎用横屏展示效果.按钮原理页面底部.使用SVG格式做矢量图-- 以上提到的技巧全都出自今天这篇好文,简单小巧但实操性很强,作为设计师,也要尽量避开这些坑. 1.交互上,慎用向右滑动的操作方式. 如:刮刮乐涂抹效果,左右滑动翻页等. 原因:苹果手机上,向右滑动容易触发返回"上一级页面"效果. 2.交互上,慎用横屏展示效果. 原因:体验上,需要用户设备开启屏幕旋转功能,才能正常观看,用户操作成本高.对不同屏幕的手机,长宽比例不一,难以展示最佳的视觉效果. 3.视觉上,功能

深入分析:互联网登录界面交互设计那些事

无论网页或是移动APP的设计,很重要的一点是如何能在小而美和功能复杂性之间找到平衡点.本文就移动APP表单设计进行浅析,看设计师是如何在设计与交互体验之间做到小而美的平衡. 一.极致的减法 这是一个异于常规设计思路而得的登录框产物,这不是通常意义上的登录窗.它仅仅保留了用户名的输入,只需按回车便可确定,跳出了登录界面设计中的条条框框,配色方面也足够醒目与简单. 二.引人注目的用户界面 1.模糊背景 最近,模糊背景的运用如雨后春笋般冒了出来,因为模糊背景的运用不仅让整个网站显得更加人性化,并且在很

滴滴、快的合并,我的私生活和我的吐槽

这过年过节越想图个清静,事情反而越多.今天媒体平台最热闹的事应该就是"滴滴.快的合并"了吧.从"传闻"两家合并,到两家真的合并,这两条新闻简直就是前后脚,其中一方的高层表示"合并之事是空穴来风"言犹在耳,合并的事就已经成了. 在这里无暇探讨合并的前因后果(因为也真说不出什么来),还是讲讲我个人的经历和体会吧. 记得很清楚,第一次使用打车软件是在某年冬天,也是在春节前.当时参加一个活动出来,因为手里拎个大件,还是决定打车回家.当时虽然已经晚上十点多

架构设计:前后端分离之Web前端架构设计

在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分离的一种具体实现方案,该方案和我原来设想有了很大的变化,但是核心思想没变,就是控制层是属于Web前端的. 在以前文章里我说道前后端分离的核心在于把mvc的控制层归为前端的一部分,原方案的构想在实际的生产开发里很难做到,我觉得核心还是控制层和视图层的技术异构性,这样后果使得系统改造牵涉面太大,导致在项目团队里,沟通.协调以及管理成本相对较高,

web系统架构设计中需要知道的点(前端篇)

上周没写东西,这周写点互联网系统开发中需要了解的技术点,每个点都可以发散出去,连接更多的知识点,打算做个逐步细化的记录. 一个应用的整个生命周期中(生,老,病,死)都需要有一个整体规划. 前期 评估需求,根据需求提炼出其中隐含的非功能性要求,做为容量评估的参考.一般就是大致估算一下,技术发展到现在,如果是聊天或游戏应用,随便一个服务器单机能能维持100W-160W左右的tcp长连接并进行通讯.所以普通的创业起步阶段的应用一般不必太担心设计问题,可以等业务量慢慢上来慢慢调整系统架构. 互联网上许多

(近万字)一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备

作者 | Jeskson 来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变,变形,动画效果等.HTML5的介绍,常用的元素和属性,表单相关元素和属性,CSS3新添加的选择器,CSS3新的属性. 了解HTML5,和现在主流的浏览器的,与基本语法. 在使用HTML5之前,w3c希望用XHTML来替代HTML,因为HTML与XHTML相比,XHTML是一种更加严格,更加规范的HT

Html5上传后有所见图片效果前端代码实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传一下看看</title> </head> <body> <form action="__SELF__" method="post" onsubmit="return chec