1. 程式人生 > >如何切圖適配各種機型

如何切圖適配各種機型

關於iPhone6/6+適配問題一直有爭議,今天小編專門為大家整理了相關的有效方案,希望對大夥兒有幫助!

iPhone6-6Plus-022

移動app開發中多種裝置尺寸適配問題,過去只屬於Android陣營的頭疼事兒,只是很多設計師選擇性地忽視android適配問題,只出一套iOS平臺設計稿。隨著蘋果釋出兩種新尺寸的大屏iPhone 6,iOS平臺尺寸適配問題終於還是來了,移動設計全面進入“雜屏”時代。看看下面三款iPhone尺寸和解析度資料就知道螢幕有多雜了。

01

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

1、選擇一種尺寸作為設計和開發基準;

2、定義一套適配規則,自動適配剩下兩種尺寸;

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

手機淘寶的iPhone 6/iPhone 6 Plus適配版本即將提交App store稽核。先晒一下我們採用的協作模式,再慢慢說明原委。

02

第一步,視覺設計階段,設計師按寬度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)作為基準,基於幾個原因:

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

2、iPhone 6 plus有兩種顯示模式,標準模式解析度為1242×2208,放大模式解析度為1125×2001(即iPhone 6的1.5倍)。可見官方系統裡iPhone 6和iPhone 6 plus解析度之間就存在1.5倍的倍率關係。很多情況下這兩種尺寸可以用1.5倍直接等比適配。

3、1242×2208這個奇葩的數值是蘋果官方都不願意公開宣傳的一個解析度,不便於記憶和計算柵格。640×1136雖然是廣泛應用的一個解析度,但是大屏時代依然以小尺寸為設計基準顯然不合時宜,設計師會停留在小屏的視角做設計。

所以,iPhone6的750×1334是最適合基準尺寸。

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

前文提到適配策略是先選擇iPhone 6作為基準設計尺寸,然後通過一套適配規則自動適配到另外兩種尺寸。這套適配規則總結起來就一句話:文字流式,控制元件彈性,圖片等比縮放。

03

控制元件彈性指的是,navigation、cell、bar等適配過程中垂直方向上高度不變;水平方向寬度變化時,通過調整元素間距或元素右對齊的方式實現自適應。這樣螢幕越大,在垂直方向上可以顯示更多內容,發揮大螢幕的優勢。

04

05

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

06

iPhone6-6Plus-033

  • 劉典,架構師 :使用 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 模擬器上的對比效果:向量圖支援的非常完美。

126851b10fb4edfadf5274e93955852c_b

  • 劉煒,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 的設計稿了。

07

如何支援多個尺寸螢幕,這個要分情況討論。

對於常規介面我們可以偷個懶,只做 iPhone 5 螢幕尺寸的設計稿,請開發在其它螢幕上自適應,最終檢查實機效果沒問題就行。

蘋果官網上螢幕對比頁面裡用到的都是常規介面:

09

對於一些定製的介面我們應該根據不同螢幕重新適配,比如下面是個簡單的 profile 頁面示例,自動適配到大螢幕的效果挺糟糕的。

10

此時設計師應該手動為大螢幕重新調整設計,像下圖一樣。

11

在上圖中可看出 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 的朋友不妨試用一下。

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