iOS 適配設計與切圖

以iphone5做爲設計標準：標尺圖給的是640，美工給的切圖是960座標系下的素材3x，程序拿到標尺圖，640的標尺除以2就是iphone5下的界面，3x的圖乘以0.67就是2x。

 

以iphone6做爲設計標準：標尺圖給的是750，美工給的切圖是1125座標系下的素材3x，程序拿到標尺圖，750的標尺除以2就是iphone6下的界面，3x的圖乘以0.67就是2x。

 

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

第一步 視覺設計階段

　　設計師按照寬度750px(iPhone 6) 的寬度來作設計稿, 除圖片外全部設計元素均使用矢量路徑來作. 設計定稿後在750px 的設計稿上作標註, 輸出標註圖. 同時等比放大到1.5倍生成1125px 寬度的設計稿, 在1125px 的設計稿裏面切圖.

 

第二步 輸出圖片和設計稿

　　將切好的@3x 圖片資源和750px 的標註圖交付給工程師.

 

第三步 開發標準設備 app

　　開發工程師拿到@3x 的圖片資源和750px 的標註圖, 完成 iPhone6(375pt)的界面開發. 此階段不能用固定方式開發界面, 得用自動佈局(auto Layout), 方便適配後續的其餘尺寸的屏幕.

 

第四步 適配調試階段

　　基於 iPhone6的界面效果, 分別向上適配 iPhone 6Plus 和向下適配 iPhone5(c/s)的界面效果, 由此完成大中小三種屏幕的適配.

 

爲何選擇 iPhone6做爲基準尺寸?

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

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

　　2. iPhone 6Plus 有兩種顯示模式, 標準模式分表率爲1242x2208, 放大模式分辨率爲1125x2001(iPhone6的1.5倍), 可見官方系統裏 iphone6 和 iPhone6Plus 分辨率之間就存在1.5倍的倍率關係, 不少狀況下可用1.5倍等比適配.

　　3. 1242x2208這個奇葩的數值是蘋果官方都不肯公開宣傳的一個分辨率, 不便於記憶和計算柵格.

 

因此 iPhone6是最適合作基準尺寸.

 

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

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

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

 

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

原文摘錄自知乎

來自：ui001

本文連接：http://www.mobileui.cn/a-draft-support-ios-app-design.html
本文標籤: IOS, iPhone, 分辨率, 尺寸, 移動APP, 移動設計