俗話說萬事開頭難蹂安，最初在接觸APP設(shè)計的時候椭迎，我也曾經(jīng)為各種規(guī)范和屏幕分辨率糾結(jié)過，為追尋一種高效的工作流到處尋覓啡直，各種嘗試脱吱，走過一些彎路切油，梳理出來，以紀(jì)念那些糾結(jié)的日子简软。

用什么軟件？

最初我用的是Photoshop,使用PS play上屏述暂。畫布尺寸是5S（640px*1136px,72PPI).為什么呢痹升？為什么是5s呢，原因有二：1畦韭，我的測試機也就是我的手機是5s的疼蛾。2.當(dāng)時6和6P還沒出來。

具體方法：用PS建立640*1136的畫布艺配，通過PS play實際看手機上的效果察郁，當(dāng)時對蘋果對規(guī)范也不是很熟悉，基本都是通過眼看來把握转唉，當(dāng)時感覺還不錯皮钠。后來有段時間，規(guī)范了解多了酝掩，反而有點束手束腳了鳞芙。

就這樣，我摸索著期虾，做著原朝，我在不斷進步中也迎來了6和6P。問題就來了镶苞，我手工把PS做的5s放大至6和和6P,這個過程讓我很痛苦喳坠。因為PS的圖層樣式不會隨著一起縮放。所以第二個問題就來了茂蚓。

以什么為基準(zhǔn)壕鹉？

關(guān)于這個問題，有兩篇文章對我?guī)椭艽螅?br> iPhone 6 / 6 Plus 出現(xiàn)后聋涨，如何改進工作流以實現(xiàn)一份設(shè)計稿支持多個尺寸晾浴？

知乎手機淘寶流程.jpg

這是知乎上來自手機淘寶團隊的協(xié)作模式，結(jié)論是

只交付一套設(shè)計稿牍白，默認(rèn)用什么規(guī)則來適配脊凰？
前文提到適配策略是先選擇iPhone 6作為基準(zhǔn)設(shè)計尺寸，然后通過一套適配規(guī)則自動適配到另外兩種尺寸茂腥。這套適配規(guī)則總結(jié)起來就一句話：文字流式狸涌，控件彈性切省，圖片等比縮放。所以帕胆，iPhone6的750x1334是最適合基準(zhǔn)尺寸朝捆。

My app design workflow

workflow-ios-sizes-in-points.png

這是來自Bjango的Marc，他建議以1倍圖作為基準(zhǔn)開始做設(shè)計,如320*568pointes.(在Retina下懒豹，一個點等于2個像素芙盘。)如此可以避免2倍圖必須是偶數(shù)的計算問題，計算對于設(shè)計師來說歼捐，有點費腦子何陆。

I always start with a non-Retina, 1× document size.
For an iPad app, it’s 1024×768. For an Android app, it’s a common device size, in mdpi or dp (density-independent pixels). For a Mac app, it’s often 1280×768 (a frankenstein combination of the 13-inch MacBook Pro resolution horizontally, and the 11-inch MacBook Air resolution vertically, ensuring the app will fit on the smallest current Mac displays). For an iPhone app, it’s 320×568, or one of the sizes below.

這期間，我因為更換蘋果電腦豹储，開始使用Retina屏做設(shè)計贷盲，PPI和DPI曾經(jīng)一度讓我很糾結(jié)，同時也我開始嘗試使用sketch做APP設(shè)計剥扣。

關(guān)于PPI和DPI的糾結(jié)巩剖，同樣是Marc他的另一篇文章給了設(shè)計師一個很好的解釋：
Pixels per inch is just a tag

It is for these reasons I assign 72PPI to all my design documents, and I recommend you do the same. To change the pixel density of your Photoshop document without resizing the image data, open the Image Size dialogue, uncheck Resize Image and type in the desired pixel density.

他認(rèn)為用什么單位都一樣啦，設(shè)計師不用糾結(jié)钠怯。至于屏幕分辨率他依然建議使用72PPI.我實際上測試過佳魔，如果你按Retina來設(shè)立分辨率，會存在各種素材因為歷史原因都是72PPI晦炊，拖入你的工程時需要手工縮放鞠鲜，弊大于利，不可取断国。

所以贤姆，結(jié)論就是

最終你使用PS來做設(shè)計的話，可以使用6的一倍圖來建立畫布稳衬，即375*667Points,屏幕分辨率為72PPI.輸出2倍圖為6霞捡，3倍圖為6P，輸出1.7約等于5和5s.

這么做的好處有：
1.一倍圖方便輸出各種倍數(shù)薄疚。
2.一倍圖方便設(shè)計師跟開發(fā)人員溝通碧信，不需要進行單位換算。1px=1points
3.一倍圖可以減少設(shè)計軟件的運算量街夭，降低對硬件如內(nèi)存的要求砰碴。

當(dāng)然如果你使用sketch代替photoshop的話，一切就會更加容易板丽，因為sketch3已經(jīng)把模版統(tǒng)統(tǒng)更新為1倍圖衣式。

sketch.png

拖過來用就可以嘍.png

結(jié)論：我的工作流程就是使用sketch，選取iOS Devices/iPhone6檐什，輸出一倍矢量圖給開發(fā)取做適配就好嘍碴卧。注意這里說的是切圖。如果要看效果圖乃正，同時可輸出2倍圖和3倍圖住册，要啥都是分分鐘的事。

一鍵輸出.png