iPhone 6 / 6 Plus 出現(xiàn)后,如何改進(jìn)工作流以實現(xiàn)一份設(shè)計稿支持多個尺寸?

Photoshop 支持用矢量(而且應(yīng)該只用矢量)元素設(shè)計界面,只是無法輸出矢量資源(可以通過腳本用 AI 輸出 SVG,但相對不那么方便)。
最新的 Photoshop 是有跟 Sketch 一樣的輸出切圖功能的(Generator),用 2x 的 PSD 輸出 3x 的切圖也可以。而且 Photoshop 配合 Slicy 輸出切圖比 Sketch 3 快捷很多。
Sketch 相當(dāng)棒,但目前(v3.1)還是有不少小問題,加上對中文支持不夠好,在界面設(shè)計中還不能完全取代 Photoshop。
關(guān)于題目的問題,首先一份設(shè)計稿就不能適用于 iOS 各手機屏幕尺寸。以下是 Bjango 把目前各 iOS 手機屏幕還原為 1x 的對比圖,可見在設(shè)計稿中四種屏幕尺寸寬高都不一樣,不是簡單地把 iPhone 5 界面縮放一下就變成 iPhone 6 的設(shè)計稿了。
如何支持多個尺寸屏幕,這個要分情況討論。
對于常規(guī)界面我們可以偷個懶,只做 iPhone 5 屏幕尺寸的設(shè)計稿,請開發(fā)在其它屏幕上自適應(yīng),最終檢查實機效果沒問題就行。
蘋果官網(wǎng)上屏幕對比頁面里用到的都是常規(guī)界面:
對于一些定制的界面我們應(yīng)該根據(jù)不同屏幕重新適配,比如下面是個簡單的 profile 頁面示例,自動適配到大屏幕的效果挺糟糕的。
此時設(shè)計師應(yīng)該手動為大屏幕重新調(diào)整設(shè)計,像下圖一樣。
在上圖中可看出 iPhone 6 Plus 界面中部分切圖尺寸比 3x 更大,要單獨切圖,所以不是說簡單地給 iPhone 6 Plus 統(tǒng)一切 3x 圖就 OK 的了。這時矢量切圖在開發(fā)中優(yōu)勢很明顯,只要把大屏幕中切圖的尺寸告訴開發(fā)即可,無需針對非 3x 元素額外輸出切圖。
* 手機屏幕畢竟還是像素位圖,像細(xì)線圖標(biāo)即使是矢量的在縮放后仍可能會出現(xiàn)虛化模糊的現(xiàn)象(類似 HTML 里的 icon font),理論上并非所有情況都適合用矢量切圖。但是,iPhone 6 Plus 屏幕本身又是 downscale 的,導(dǎo)致原本 pixel perfect 的切圖也會在縮放后發(fā)虛,完全沒有 pixel perfect 而言,究竟是不是 iPhone 6 Plus 屏幕已經(jīng)優(yōu)化的看不出像素點了,要等看到實機才能確定。
切圖方面用 Sketch 的話可以盡量試試 PDF 矢量切圖(但要在實機上確認(rèn)效果)。Photoshop 就只能輸出位圖了,上面提到定制界面里的一些切圖得單獨輸出,其他常規(guī)的用 2x 的 PSD 輸出 1-3x 切圖即可。
另外,與 Photoshop 和 Sketch 相比,AI 不適合做界面設(shè)計。勇于嘗試 Sketch 是好的,但若 Sketch 各種毛病忍不了的話建議還是用 Photoshop 好些。
* 關(guān)于 AI 不適合做界面設(shè)計的看法,其實作為功能強大的矢量設(shè)計工具,AI 當(dāng)然可以用來設(shè)計界面,只是沒那么方便(我一位客戶給我的設(shè)計稿還是 InDesign 設(shè)計的)。Sketch 吸收了不少 AI 與 Fireworks 的優(yōu)點,比 AI 好很多,用慣 AI 的朋友不妨試用一下。
- 目前還沒評論,等你發(fā)揮!