iOS - 如何切圖適配各類機型

 

關於iPhone6/6+適配問題一直有爭議，今天小編專門爲你們整理了相關的有效方案，但願對大夥兒有幫助！

 

移動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有兩種顯示模式，標準模式分辨率爲1242×2208，放大模式分辨率爲1125×2001（即iPhone 6的1.5倍）。可見官方系統裏iPhone 6和iPhone 6 plus分辨率之間就存在1.5倍的倍率關係。不少狀況下這兩種尺寸能夠用1.5倍直接等比適配。

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

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

 

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

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

 

 

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

 

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

• 劉典，架構師 ：使用 Auto Layout，只須要一個 xib 文件均可以應對全部尺寸的 iPhone

 

從iPhone 6 開始 iOS 的 UI 設計方式更像 web 而不是 app，不一樣尺寸的 iPhone 上 UI 的結構是同樣的，各 UIView 的位置尺寸會有所不一樣。好比一樣的一段文本，iPhone 5S 上要顯示5行， iPhone 6 Plus 上可能只要三行，顯示它們的 UITextView 的尺寸就會不一樣。蘋果從 iOS 6 開始提供了 Auto Layout ，（Auto Layout Guide: Introduction），他的做用相似 web 中的 CSS，能夠用排版語言對 UIView 進行佈局，咱們只要表達出 UIView 應該靠左、靠右、居中、邊距多少等信息，Auto Layout 根據設備尺寸自動計算各 UIView 的 frame。之前 UI 設計喜歡用絕對定位，由於 iPhone 6 以前全部 iPhone 的寬度都是 320 points（注意，不是 pixels），從 iPhone 6 開始將有不一樣的尺寸（因此叫 Resizeable iPhone），若是用絕對定位就須要針對每種設備作調整，設計師會罵孃的。

還有就是 app 的 Launch Image，由於設備尺寸增多，再結合橫屏豎屏，致使的結果是一個 app 要有 n 多個 Launch Image，iOS 8 開始提供了 Launch Screen 的概念，如今能夠用一個 xib 文件來做爲 Launch Screen，而後用 Interface Builder 對 Launch Screen 進行設計，由於可使用 Auto Layout，因此咱們只須要一個 xib 文件均可以應對全部尺寸的 iPhone。

之前一直以爲 iOS 的 UI 開發不如 Android，經過手工計算 frame 位置來佈局簡直是石器時代的作法，如今 iPhone 雖然尺寸變多了，不過由於有了成熟的 Auto Layout， UI 的設計和開發變的反而比之前更容易。

 

• 陳偉，設計師：最好用 Sketch，輸出1倍矢量圖（pdf）程序完美適配

 

1. 換工具，最好用 Sketch，其次推薦 AI。放棄 Photoshop 吧，對矢量支持的太無力
2. 只用輸出一倍的矢量圖（PDF）就能夠了
咱們不再須要計算了，喪心病狂的蘋果已經開始支持矢量圖了，咱們只須要給工程師輸出一倍的矢量圖就能夠了，目前僅發現支持 PDF 格式。
剛纔已經和咱們的工程師調試成功了，在 iPhone 6 plus 模擬器上的對比效果：矢量圖支持的很是完美。

• 劉煒，DineHQ.com：Photoshop 支持用矢量（並且應該只用矢量）元素設計界面，只是沒法輸出矢量資源（能夠經過腳本用 AI 輸出 SVG，但相對不那麼方便）。

 

陳偉答案中對 Photoshop 的見解有些誤導。

Photoshop 支持用矢量（並且應該只用矢量）元素設計界面，只是沒法輸出矢量資源（能夠經過腳本用 AI 輸出 SVG，但相對不那麼方便）。

最新的 Photoshop 是有跟 Sketch 同樣的輸出切圖功能的（Generator），用 2x 的 PSD 輸出 3x 的切圖也能夠。並且 Photoshop 配合 Slicy 輸出切圖比 Sketch 3 快捷不少。

Sketch 至關棒，但目前（v3.1）仍是有很多小問題，加上對中文支持不夠好，在界面設計中還不能徹底取代 Photoshop。

關於題目的問題，首先一份設計稿就不能適用於 iOS 各手機屏幕尺寸。如下是 Bjango 把目前各 iOS 手機屏幕還原爲 1x 的對比圖，可見在設計稿中四種屏幕尺寸寬高都不同，不是簡單地把 iPhone 5 界面縮放一下就變成 iPhone 6 的設計稿了。

 

 

如何支持多個尺寸屏幕，這個要分狀況討論。

對於常規界面咱們能夠偷個懶，只作 iPhone 5 屏幕尺寸的設計稿，請開發在其它屏幕上自適應，最終檢查實機效果沒問題就行。

蘋果官網上屏幕對比頁面裏用到的都是常規界面：

對於一些定製的界面咱們應該根據不一樣屏幕從新適配，好比下面是個簡單的 profile 頁面示例，自動適配到大屏幕的效果挺糟糕的。

此時設計師應該手動爲大屏幕從新調整設計，像下圖同樣。

在上圖中可看出 iPhone 6 Plus 界面中部分切圖尺寸比 3x 更大，要單獨切圖，因此不是說簡單地給 iPhone 6 Plus 統一切 3x 圖就 OK 的了。這時矢量切圖在開發中優點很明顯，只要把大屏幕中切圖的尺寸告訴開發便可，無需針對非 3x 元素額外輸出切圖。

 

* 手機屏幕畢竟仍是像素位圖，像細線圖標即便是矢量的在縮放後仍可能會出現虛化模糊的現象（相似 HTML 裏的 icon font），理論上並不是全部狀況都適合用矢量切圖。可是，iPhone 6 Plus 屏幕自己又是 downscale 的，致使本來 pixel perfect 的切圖也會在縮放後發虛，徹底沒有 pixel perfect 而言，到底是不是 iPhone 6 Plus 屏幕已經優化的看不出像素點了，要等看到實機才能肯定。

切圖方面用 Sketch 的話能夠儘可能試試 PDF 矢量切圖（但要在實機上確認效果）。Photoshop 就只能輸出位圖了，上面提到定製界面裏的一些切圖得單獨輸出，其餘常規的用 2x 的 PSD 輸出 1-3x 切圖便可。

另外，與 Photoshop 和 Sketch 相比，AI 不適合作界面設計。敢於嘗試 Sketch 是好的，但若 Sketch 各類毛病忍不了的話建議仍是用 Photoshop 好些。

* 關於 AI 不適合作界面設計的見解，其實做爲功能強大的矢量設計工具，AI 固然能夠用來設計界面，只是沒那麼方便（我一位客戶給個人設計稿仍是 InDesign 設計的）。Sketch 吸取了很多 AI 與 Fireworks 的優勢，比 AI 好不少，用慣 AI 的朋友不妨試用一下。

————————————————————————————————————————————————————————————————————————————