淘寶的適配協做模式

前端與設計師的協做應該是比較簡單的，最重要的是要規範設計提供給你的產物，一般對於前端來講，咱們須要設計師提供標註尺寸後的設計稿以及各類元素的切圖文件，有了這些就能夠開始佈局了。考慮到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了，這個切圖保證在全部設備都清晰顯示。