淘宝响应式WebUI设计实践

感谢贷岩的邀请，我在本期奶茶会上做了“响应式设计实践”的分享，是接着上一次的话题进一步讨论“如何实现”。响应式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。

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