【轉載】iOS屏幕適配設計

移動app開發中多種設備尺寸適配問題，過去只屬於Android陣營的頭疼事兒，只是不少設計師選擇性地忽視android適配問題，只出一套iOS平臺設計稿。隨着蘋果發佈兩種新尺寸的大屏iPhone 6，iOS平臺尺寸適配問題終於仍是來了，移動設計全面進入「雜屏」時代。看看下面三款iPhone尺寸和分辨率數據就知道屏幕有多雜了。

加上Android生態中紛繁複雜的各類奇葩尺寸，如今APP設計開發必須考慮適配大、中、小三種屏幕。因此如何作到交付一套設計稿解決適配大中小三屏的問題？設計和開發之間採用什麼協做模式？一個基本思路是：

一、選擇一種尺寸做爲設計和開發基準；

二、定義一套適配規則，自動適配剩下兩種尺寸；

三、特殊適配效果給出設計效果。

 

手機淘寶的iPhone 6/iPhone 6 Plus適配版本即將提交App store審覈。先曬一下咱們採用的協做模式，再慢慢說明原委。

第一步，視覺設計階段，設計師按寬度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）的界面效果。由此完成大中小三屏適配。

 

爲何選擇iPhone 6做爲基準尺寸？

當面對大中小三種屏幕須要適配的時候，很容易想到先作好一種屏幕，再去適配剩下兩種屏幕。第一個決定是到底以哪一種屏幕做爲設計和開發的基準尺寸。咱們選擇中間尺寸的iPhone 6（750px/375pt）做爲基準，基於幾個緣由：

 

一、從中間尺寸向上和向下適配的時候界面調整的幅度最小。375pt下的設計效果適配到414pt和320pt誤差不會太大。假設以414pt爲基準作出很優雅的設計，到320pt可能元素之間比例就不是那麼回事了，好比圖片和文字之間視覺比例可能失調。

 

二、iPhone 6 plus有兩種顯示模式，標準模式分辨率爲1242x2208，放大模式分辨率爲1125x2001（即iPhone 6的1.5倍）。可見官方系統裏iPhone 6和iPhone 6 plus分辨率之間就存在1.5倍的倍率關係。不少狀況下這兩種尺寸能夠用1.5倍直接等比適配。

 

三、1242x2208這個奇葩的數值是蘋果官方都不肯意公開宣傳的一個分辨率，不便於記憶和計算柵格。640x1136雖然是普遍應用的一個分辨率，可是大屏時代依然以小尺寸爲設計基準顯然不合時宜，設計師會停留在小屏的視角作設計。

 

因此，iPhone6的750x1334是最適合基準尺寸。

 

只交付一套設計稿，默認用什麼規則來適配？

前文提到適配策略是先選擇iPhone 6做爲基準設計尺寸，而後經過一套適配規則自動適配到另外兩種尺寸。這套適配規則總結起來就一句話：文字流式，控件彈性，圖片等比縮放。

控件彈性指的是，navigation、cell、bar等適配過程當中垂直方向上高度不變；水平方向寬度變化時，經過調整元素間距或元素右對齊的方式實現自適應。這樣屏幕越大，在垂直方向上能夠顯示更多內容，發揮大屏幕的優點。

按照上述默認適配規則，大中小三種屏幕顯示效果均相同。有時候想在大屏幕顯示更多內容，須要設計出特殊適配效果。好比App store首頁焦點圖，從iPhone 6適配到iPhone 6 plus時焦點圖尺寸和排版作了特殊處理。底下應用列表也從一排3+個變成一排4+個，真正實現了大屏幕顯示更多內容的理念。這些就須要設計師給出相應設計稿。