最新的 Photoshop 是有跟 Sketch 一樣的輸出切圖功能的(Generator)，用 2x 的 PSD 輸出 3x 的切圖也可以。而且 Photoshop 配合 Slicy 輸出切圖比 Sketch 3 快捷很多。

　　Sketch 相當(dāng)棒，但目前(v3.1)還是有不少小問(wèn)題，加上對(duì)中文支持不夠好，在界面設(shè)計(jì)中還不能完全取代 Photoshop。

　　關(guān)于題目的問(wèn)題，首先一份設(shè)計(jì)稿就不能適用于 iOS 各手機(jī)屏幕尺寸。以下是 Bjango 把目前各 iOS 手機(jī)屏幕還原為 1x 的對(duì)比圖，可見(jiàn)在設(shè)計(jì)稿中四種屏幕尺寸寬高都不一樣，不是簡(jiǎn)單地把 iPhone 5 界面縮放一下就變成 iPhone 6 的設(shè)計(jì)稿了。

　　如何支持多個(gè)尺寸屏幕，這個(gè)要分情況討論。

　　對(duì)于常規(guī)界面我們可以偷個(gè)懶，只做 iPhone 5 屏幕尺寸的設(shè)計(jì)稿，請(qǐng)開(kāi)發(fā)在其它屏幕上自適應(yīng)，最終檢查實(shí)機(jī)效果沒(méi)問(wèn)題就行。

　　蘋果官網(wǎng)上屏幕對(duì)比頁(yè)面里用到的都是常規(guī)界面：

　　對(duì)于一些定制的界面我們應(yīng)該根據(jù)不同屏幕重新適配，比如下面是個(gè)簡(jiǎn)單的 profile 頁(yè)面示例，自動(dòng)適配到大屏幕的效果挺糟糕的。

　　此時(shí)設(shè)計(jì)師應(yīng)該手動(dòng)為大屏幕重新調(diào)整設(shè)計(jì)，像下圖一樣。

　　在上圖中可看出 iPhone 6 Plus 界面中部分切圖尺寸比 3x 更大，要單獨(dú)切圖，所以不是說(shuō)簡(jiǎn)單地給 iPhone 6 Plus 統(tǒng)一切 3x 圖就 OK 的了。這時(shí)矢量切圖在開(kāi)發(fā)中優(yōu)勢(shì)很明顯，只要把大屏幕中切圖的尺寸告訴開(kāi)發(fā)即可，無(wú)需針對(duì)非 3x 元素額外輸出切圖。

　　* 手機(jī)屏幕畢竟還是像素位圖，像細(xì)線圖標(biāo)即使是矢量的在縮放后仍可能會(huì)出現(xiàn)虛化模糊的現(xiàn)象(類似 HTML 里的 icon font)，理論上并非所有情況都適合用矢量切圖。但是，iPhone 6 Plus 屏幕本身又是 downscale 的，導(dǎo)致原本 pixel perfect 的切圖也會(huì)在縮放后發(fā)虛，完全沒(méi)有 pixel perfect 而言，究竟是不是 iPhone 6 Plus 屏幕已經(jīng)優(yōu)化的看不出像素點(diǎn)了，要等看到實(shí)機(jī)才能確定。

　　切圖方面用 Sketch 的話可以盡量試試 PDF 矢量切圖(但要在實(shí)機(jī)上確認(rèn)效果)。Photoshop 就只能輸出位圖了，上面提到定制界面里的一些切圖得單獨(dú)輸出，其他常規(guī)的用 2x 的 PSD 輸出 1-3x 切圖即可。

　　另外，AI 不適合做界面設(shè)計(jì)。勇于嘗試 Sketch 是好的，但若 Sketch 各種毛病忍不了的話建議還是用 Photoshop 好些。

　　另外強(qiáng)烈推薦@Akane_Lee 老師一篇iPhone 6 及 Plus制圖建議的好文!

　　@Akane_Lee ：iPhone 6 和 Plus 新機(jī)一發(fā)表，群里就有人跑來(lái)哀嚎說(shuō)老板叫他準(zhǔn)備 iPhone6 的適配，可現(xiàn)在什么文檔都沒(méi)有完整啊!在很多細(xì)節(jié)不明的情況下，我只能建議這種最保險(xiǎn)安全的作法：做 @1x，放大給 @2x 和 @3x 用。以下情境預(yù)設(shè)為做一套 Mockup 要切出各種尺寸的圖。

　　做小放大

　　之前做 @2x 的時(shí)候很多設(shè)計(jì)師在爭(zhēng)執(zhí)做大縮小、還是做小放大的問(wèn)題。原本在 @2x 的情況下只要保持?jǐn)?shù)值都是雙數(shù)就可以了，但現(xiàn)在 @3x 出現(xiàn)，要保持所有的數(shù)值都要能是 3 的倍數(shù)…乖乖地做小放大最安全。當(dāng)然也可以大縮小，但幾乎每一個(gè)組件都有4個(gè)數(shù)值：X、Y、Width、Height，還有字級(jí)。要保證這些數(shù)值都是3的倍數(shù)，我真的覺(jué)得做 @1x 比較快。

　　做小放大好處多喔!

　　不用擔(dān)心小圖放大細(xì)節(jié)會(huì)糊掉。

　　圖文件尺寸小，效能吃得少，計(jì)算機(jī)跑得順。

　　標(biāo)示尺寸 1:1 ，方便快速。

　　完全不用煩惱數(shù)學(xué)問(wèn)題除不盡算錯(cuò)怎么辦。

　　參考數(shù)據(jù)：iPhone 6 Screens Demystified

　　翻譯版見(jiàn)微博：http://weibo.com

　　標(biāo)示尺寸

　　你知道 RD 刻界面都是用 @1x 的數(shù)值嗎?即使設(shè)計(jì)師給的標(biāo)示尺寸是 @2x ，RD 還是得除以 2 才能動(dòng)工?，F(xiàn)在有 @3x 的尺寸。設(shè)計(jì)師普遍數(shù)學(xué)不好，你確定自己做大縮小設(shè)計(jì)出來(lái)所有的切圖和標(biāo)示尺寸都能被 3 整除嗎?萬(wàn)一算錯(cuò)被 RD 退件來(lái)回修改的時(shí)間是誰(shuí)要吞下去?

　　明知自己算數(shù)學(xué)有危險(xiǎn)就不要拿自己弱項(xiàng)硬上了吧…

　　補(bǔ)充：真的、數(shù)學(xué)不好不要硬上…(遮臉)

　　向量

　　向量的好處就是不管怎么放大縮小都能保持圖檔銳利，真需要像素圖也有智能型對(duì)象這樣的功能，做小放大絕對(duì)能保持頁(yè)面銳利。除非你做圖習(xí)慣不好到必需用更破爛的數(shù)學(xué)去補(bǔ)救，不然做小放大會(huì)遇到的意外遠(yuǎn)遠(yuǎn)少于做大縮小。

　　先求能做到正確無(wú)誤，再來(lái)考慮創(chuàng)意美觀。

　　就像寫考卷一樣，字再怎么漂亮答案填錯(cuò)還不是 0 分?團(tuán)隊(duì)合作不是寫考卷，自己出包耍笨就算了，設(shè)計(jì)師背后還有 RD 要接手啊…

　　兵來(lái)將擋

　　某：「中午 RD 過(guò)來(lái)：iPhone 6 的適配你怎么看?」

　　我：「沒(méi)問(wèn)題，大家把官方出的 HIG 研讀下，我們來(lái)好好討論?！?/p>

　　(關(guān)掉還沒(méi)放出完整文件的官網(wǎng)網(wǎng)頁(yè)，結(jié)束這個(gè)回合。)

　　某：「他剛剛又跑來(lái)跟我說(shuō)審核要兼容 6 的尺寸?！?/p>

　　我：「說(shuō)自己對(duì) iOS 8 非常不熟，請(qǐng)他們提供完整 Guideline 避免再被退。然后 每4小時(shí)就去戳他一次 請(qǐng)問(wèn)有Guideline了嗎?我在等著改版耶!」

　　(官方文件還在 Updated：2014-09-08 ，發(fā)表會(huì)前的事。)

　　某：「策劃又過(guò)來(lái)問(wèn)了，天真的想用 pad 的尺寸來(lái)壓縮直接用到手機(jī)…」

　　我：「跟他說(shuō)，如果規(guī)范出來(lái)不能這樣搞，時(shí)程和人力成本的浪費(fèi)是你自己要吞下去喔～～～」

　　某：「早上老板念叨了一句，6 的適配要考慮說(shuō)了…」

　　某：「老大，你樣機(jī)什么時(shí)候給我我什么時(shí)候弄?！?/p>

　　(GOOD JOB!)

　　以上是群里對(duì)話…愿賈伯斯在天之靈能保佑所有 UI 設(shè)計(jì)師(還有我的數(shù)學(xué))。

　　Photoshop 支持用矢量(而且應(yīng)該只用矢量)元素設(shè)計(jì)界面，只是無(wú)法輸出矢量資源(可以通過(guò)腳本用 AI 輸出 SVG，但相對(duì)不那么方便)。

　　iPhone 6 剛出，就有精彩好文呦!