澳门新濠影汇登录[官方网站]

澳门新濠影汇登录,professional供给集团官网网站制作,网站策划,建网站效劳

淘宝响应式WebUI策划实践

日期:2013-09-18 点击:

感谢贷岩的邀请,我在本期奶茶会上做了“响应式策划实践”的分享,是接着上一次的话题进一步聊下“如何实现”。响应式Web策划(Responsive Web design)是当下比较流行的话题,什么是响应式策划?easy讲,页面的策划与开发应当按照用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多关键组成,包括弹性网格和计划、图片、CSS media query的使用等。

[slideshare id=12511981&doc=mobileui2-120412050119-phpapp02]

响应式策划听起来非常理想,但其 技术实现 实现则困难重重,因为响应式策划并不单仅包含策划本身,还包含实现,更进一步讲,实现原理易于 这般easy,但要揣摩到开发底、性能、可维护性关键则又是充满了挑战。譬喻说,吾们都知道使用MediaQuery来实现CSS去适配各式终端,但MediaQuery应当从高分辨率灰子 峭褪逝浠易于 谴拥头直媛释呤逝洌咳萜餮绞褂肕ediaQuery来作适配,so计划是不是也适合用MediaQuery作适配?加入MediaQuery适配下的页面体积增加了,如何在小屏幕终端里降低页面体积?带有复杂交互的组件如何作适配?MediaQuery增加了代码复杂度降低了可维护性,如何让MediaQuery来适应改动频繁的被运营的Web页面?这些小case不是一两篇文章能说明白的。吾们需要提炼出一套实现响应式策划的最佳实践。易于 吾们成立了“变色龙”小组(响应式策划小组),来持续对当上Plan进行改进,成立几个月时间以来,淘宝新业务已经有不少页面开始尝试响应式策划,吾们将文档中部分始末提炼出来,分享给众家,瞩望对各位刚刚进修响应式策划的同学兼有扶掖。

对于刚才提到的这些小case,小组在计划和组件开发上给出了一些思路和粗糙的实现,但对于策划师同学来讲,挑战更甚,因为策划师只有在充溢和上端工程师沟通理解的底子上才能策划出完美的响应式UI,毕竟响应式UI上的一点小改动,将会带入极大的开发work量。以是响应式策划从某种程度上讲是一种TEAM协作模式,这也给策划师和上端工程师提出了更高的要旨。

PPT中提到的计划小case稍微有点复杂,如果揣摩到终端兼容,起首应当揣摩容器的宽度可变,最典型的容器为图文混排容器。和英文和拉丁语系的UI策划不同,中文网页排版天生不灵活,图文混排太受文案限制,因为在英文排版中,单词个数不构成影响容器计划的关键圆素,不同单词的长度不一样,中文网页中汉字个数则很大程度影响UI,因为丁文很匆子 侄贸趴嘉娜萜鳎鹤衷虿恍校 诸如菜单项字数限制,列表项不能折行,计划上就缺少流体+灵活的美感。对于视觉策划来说,这是较小的挑战。

在定宽网页策划中流行的栅格,并不适用于多终端兼容的环境。易于 在固定宽度的计划下,CSS网格计划表现出色,在处理浮动圆素的百分比时比较麻烦。然则,大多数的网格系统都供给浮动属性选项,这非常糟糕,当吾们在网格中插入列时,网格样式常常易于 而扭曲变形。其余,固定宽度栅格对“响应”的支持非常糟糕,遭成这些小case的“圆凶”就是吾们现有工具的局限性。导致CSS编码缺少灵动,一套CSS对应一种适配。而Less则是解决CSS语法缺少灵活性的一种尝试解决Plan。Less让CSS变得“可编程”,具有更灵活的适应能力,基于此吾们展开对响应式计划的进一步探讨。

在使用less实现计划时遇到了一个小小case,由于Firefox中width等属性最高只有3个小数点的精度,以是某些极端状况下某一行上Less计算出来圆素宽度总和可能会比总宽度超出0.000x个px,易于 导致错位,目上采取应用hack的方式对每个圆素的计算下的width都减去0.01px暂时规避解决,可能还会有一些可知不可知的小case存在,需要吾们不断地去完竣。而且Less.js在衣食父母端对CSS进行编译使用可能会对性能遭成略微的影响。

还有一个最匆子 侄帽缓雎缘男ase,就是高技术机中的动画性能,在普通的PC平台里,动画的实现大都是通过setInterval函数来完成,jQuery和YUI以及Kissy中亦是如此,只不过帧频兼有异议。下来都各自添加了对内置css3 transition的检测,优先使用css3 transition,动画在现代浏览器中的性能又上升了一个台阶。但在iphone/ipad/android中依然不流畅,更流畅的动画则需要开启webkit的硬件加速。可以参照之上的一个ppt来了解js动画编程的一些背下知识。

css3动画分为两种,transitions和transform,css3 transform本质上是将圆素的始末作平移,而非直接对圆素作属性渐变,易于 性能更好,通过Demo可以看出,移动端的Dom操作性能要比css3 animation慢几个数量级。易于 要在动画中尽量减少Dom操作,而只对动画的始末相对地位作平移。其余还有一个css3动画相关属性就是keyframe,这个是用来辅助作复杂动画时用的,通过设定关键帧来作动画,在Slide控件中的easy动画暂时用不到。易于 css3动画的几个属性小结如下:

  • css3 transition:平滑的改动CSS属性值,和setInterval原理类似,但速度更快
  • css3 2d transform:二维变换,CSS属性值未渐变,未用到webGL加速,速度有提升,但提升程度有限
  • css3 3d transform:三维变换,CSS属性值未渐变,开启WebGL加速,速度明显提升
  • css3 animation:即使用keyframe来模拟动画,用来实现复杂动画,和性能无关

以是吾们推荐使用在支持transition的平台中使用translate3d来启用硬件加速,care要使用transform代替transition。

当上吾们某种程度上实现了响应式策划,但下续还有很多优化的work,特别是页面体积的优化,是需要接下来着要紧思考的。



Tag:响应式WebUI策划 |

推荐消息

最新消息

LATEST NEWS

填写您的网站建造需求给吾们。

*请认真填写需求信息,吾们会在24钟点内与您取得联系。

澳门新濠影汇登录

professional供给深圳集团官网网站建造、定制策划

深圳市龙华新区

东边牛逼商用大楼3066

电话:0755-2868 4353

邮箱:service@sz-qibang.com

  • 深圳网站建造 | 网站建造案例 | 网站建造分享 | 深圳网站建造集团官网 | 网站建造报价咨询 | 深圳网站建造集团官网联系方式

    Copyright ?2019 澳门新濠影汇登录 版权一切 广ICP备13054229号-1 网站地图 会帐方式

XML 地图 | Sitemap 地图