淘宝响应式WebUI设计实践

标签: 设计探讨 前端技术 | 发表时间:2012-04-14 11:35 | 作者:拔赤
出处:http://ued.taobao.com/blog

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



响应式设计听起来非常理想,但其技术实现则困难重重,因为响应式设计并不仅仅包含设计本身,还包含实现,更进一步讲,实现原理固然简单,但要考虑到开发成本、性能、可维护性方面则又是充满了挑战。比如说,我们都知道使用MediaQuery来实现CSS去适配各式终端,但MediaQuery应当从高分辨率还是往低适配还是从低分辨率往高适配?容器样式使用MediaQuery来作适配,那么布局是不是也适合用MediaQuery作适配?加入MediaQuery适配后的页面体积增加了,如何在小屏幕终端里降低页面体积?带有复杂交互的组件如何作适配?MediaQuery增加了代码复杂度降低了可维护性,如何让MediaQuery来适应变化频繁的被运营的Web页面?这些问题不是一两篇文章能说明白的。我们需要提炼出一套实现响应式设计的最佳实践。为此我们成立了“变色龙”小组(响应式设计小组),来持续对当前方案进行改进,成立几个月时间以来,淘宝新业务已经有不少页面开始尝试响应式设计,我们将文档中部分内容提炼出来,分享给大家,希望对各位刚刚学习响应式设计的同学有所帮助。

对于刚才提到的这些问题,小组在布局和组件开发上给出了一些思路和粗糙的实现,但对于设计师同学来讲,挑战更甚,因为设计师只有在充分和前端工程师沟通理解的基础上才能设计出完美的响应式UI,毕竟响应式UI上的一点小改动,将会带入极大的开发工作量。所以响应式设计从某种程度上讲是一种团队协作模式,这也给设计师和前端工程师提出了更高的要求。

PPT中提到的布局问题稍微有点复杂,如果考虑到终端兼容,首先应当考虑容器的宽度可变,最典型的容器为图文混排容器。和英文和拉丁语系的UI设计不同,中文网页排版天生不灵活,图文混排太受文案限制,因为在英文排版中,单词个数不构成影响容器布局的关键因素,不同单词的长度不一样,中文网页中汉字个数则很大程度影响UI,因为丁文很容易撑开图文容器,汉字则不行,例如菜单项字数限制,列表项不能折行,布局上就缺少流体+灵活的美感。对于视觉设计来说,这是最大的挑战。

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

在使用less实现布局时遇到了一个小问题,由于Firefox中width等属性最高只有3个小数点的精度,所以某些极端状况下某一行上Less计算出来元素宽度总和可能会比总宽度超出0.000x个px,从而导致错位,目前采用hack的方式对每个元素的计算后的width都减去0.01px暂时规避解决,可能还会有一些可知不可知的问题存在,需要我们不断地去完善。而且Less.js在客户端对CSS进行编译使用可能会对性能造成略微的影响。

还有一个最容易被忽略的问题,就是智能机中的动画性能,在普通的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控件中的简单动画暂时用不到。因此css3动画的几个属性小结如下:

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

所以我们推荐使用在支持transition的平台中使用translate3d来启用硬件加速,注意要使用transform代替transition。

当前我们某种程度上实现了响应式设计,但后续还有很多优化的工作,特别是页面体积的优化,是需要接下来着重要思考的。

相关 [淘宝 响应式 webui] 推荐:

淘宝响应式WebUI设计实践

- - Taobao UED Team
感谢贷岩的邀请,我在本期奶茶会上做了“响应式设计实践”的分享,是接着上一次的话题进一步讨论“如何实现”. 响应式Web设计(Responsive Web design)是当下比较流行的话题,什么是响应式设计. 简单讲,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整.

漂亮的后台WebUi框架(有源码下载)

- Bloger - 博客园-首页原创精华区
       今天分享下以前收藏的几个漂亮的后台WebUi框架,之前听人说到“一个项目最重要的是前台,后台谁看啊”,这话说的,是,领导是只看前台界面,但系统管理员呢. 不能不说前台不重要,前台是很重要,但后台怎么能不重要呢,大部分数据要靠后台来输入,操作. 如果一个好的后台界面,漂亮的,易用的页面对系统来说也很重要,如果你是系统管理员看到一个很草的后台,也会不爽吧,今天就给大家分享几套不错的后台框架,有源码下载.

响应式网页设计

- - 前端观察
这个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以 先看下这个PPT. 在说到这个话题前,我们先看下网页设计和前端开发的现状:. 全球有超过53亿手机用户(包括传统手机).

响应式Web设计

- - 葵中剑's Blog - SwordAir.com
响应式Web设计( Responsive Web Design – RWD)一般是指那些使用CSS3 Media Query特性制作站点,其可以适应不同视窗尺寸的布局. 虽然很早就已经有了类似RWD的概念,但直到最近一年里才开始变得特别流行,各种文章、例子、工具、模板,不断地从无到有,诸如:. 响应式Web设计50个例子和最佳实践.

响应式网页设计

- - IT技术博客大学习
响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案. Web设计应该做到根据不同设备环境自动响应及调整. 当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式;我们应当向下兼容、移动优先.

响应式Web设计

- - 阿里巴巴(中国站)用户体验设计部博客
在设计中经常遇到这几个问题:. 1.想要网站兼容手机、平板电脑、pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好. 有没有办法能有效解决这些问题呢.

Android响应式布局

- - 博客 - 伯乐在线
由于目前在做的一款app需要适配手机和平板,所以我在研究怎么构建可适应所有屏幕尺寸的布局方法. 在web的响应式布局上我有很多经验,比如使用网格流,CSS3中的media queries属性等等,这些都可以实现web上的响应式布局,所以我想在Android上试试看. 在Android上,是通过 configuration qualifiers的方式来加载不同的资源,基于不同的手机屏幕尺寸或者屏幕的朝向(竖直还是水平),而我最大的目标就是创建一个可以自动缩放的布局,而不用根据不同的屏幕尺寸加载不同的布局文件.

漫谈响应式设计

- - 新浪UED
学究一些,首先大家先了解一下响应,然后再讲一下设计,响应就是我发出的请求能得到什么样子的回复,比如我说“你好”,你会很容易的给我回复“你好”,因为大家都是中国人,如果我说“hello”,我们这代人如果上过初中,他也会给我说“Hello”,但是如果我给对你说“Bonjour”,那可能只有高配的人才可能知道了.

淘宝“伤”城

- 品味视界 - FT中文网_英国《金融时报》(Financial Times)
秦苏为英国《金融时报》中文网撰稿. 中国互联网的野蛮生长,再次震惊了电子商务市场. 10月11日晚间,为抗议淘宝商城大幅提高技术服务年费和保证金,约7000家中小卖家通过YY网络语音等组织方式,对韩都衣舍、欧莎、七格格、优衣库等大卖家进行攻击,包括利用规则进行购物、给差评、到货付款或申请退款等. 通过集中拍下某商品,导致这些商家的大部分商品下架“被拍死”.

Screenqueri.es:响应式设计测试工具

- - 我爱水煮鱼
当你创建一个响应式的布局的时候,在绝大部分流行的分辨率的设备上进行测试是非常重要的,这可以让你决定页面上的每块是否现实或者优化它们的显示方式. 今天给大家介绍的 Screenqueri.es 就是一个免费的基于 Web 的响应式设计的测试工具,它能够让你输入一个网址,然后选择移动或者平板设备,然后对你的网站在各个分辨率下进行测试.