淘宝的适配协做模式

前端与设计师的协做应该是比较简单的，最重要的是要规范设计提供给你的产物，一般对于前端来讲，咱们须要设计师提供标注尺寸后的设计稿以及各类元素的切图文件，有了这些就能够开始布局了。考虑到Retina显示屏以及这么多移动设备分辨率却不同的问题，那么设计师应该提供多套设计稿吗？从网易和淘宝的作法来看，应该是不用了，咱们能够按照设计稿，先作出一套布局，按照以上方法作适配，因为是等比适配，因此各个设备的视觉效果差别应该会很小，固然也排除不了一些须要媒介查询特殊处理的状况，这确定避免不了的。下面这张图是淘宝设计师分享的他们的工做流程：

解释一下就是：

第一步，视觉设计阶段，设计师按宽度750px（iPhone 6）作设计稿，除图片外全部设计元素用矢量路径来作。设计定稿后在750px的设计稿上作标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。

第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另外一个是宽度750px的设计标注图。

第三步，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。

第四步，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及如下（320pt）的界面效果。由此完成大中小三屏适配。

注意第三步，就要使用咱们以上介绍的网易跟淘宝的适配方法了。假如公司设计稿不是基于750的怎么办，其实很简单，按上图作一些相应替换便可，可是流程和方法仍是同样的。解释一下为何要在@3x的图里切，这是由于如今市面上也有很多像魅蓝note这种超高清屏幕，devicePixelRatio已经达到3了，这个切图保证在全部设备都清晰显示。