轉【iOS設計】一款APP從設計稿到切圖過程概述

標籤：

這篇文章站在GUI設計師的角度概述了APP從項目啟動到切片輸出的過程，相當於工作流程的介紹。這裡寫的不是一種規範，只是一種工作方法，加上技術的更新是非常快的，大家在具體工作中，一定要靈活運用。

這裡我們只說IOS系統下的設計，至於Android，因為尺寸太多，涉及的東西比較亂。1

Part 1 項目立項檔案結構

項目名稱v1.0 -> 01_源檔案psd 
02_jpg 
03_標註圖png 
04_標註源檔案 
05_切片資源png 
原型.rar

工具：

介面設計：PS, AI

標註：PxCook(Windows), Sketch(Mac)

切圖：Cutterman(PS外掛程式), Assistor PS(PS外掛程式)

Part 2 Photoshop設計尺寸

1. 640*960 4時代的尺寸

2. 640*1136 5/5S/5C

3. 750*1334 6 目前我做設計稿的設計尺寸，IPhone6的尺寸，向下可以適配4，5，向上可以適配6 plus。我記得IP6推出後，我問總監應該用什麼尺寸設計，他說用IP6的吧，好適配，切出來就是@2x了，改一改上下都能照顧到。 
    
   推薦做設計稿的時候使用IPhone6的尺寸進行設計。

輔助線

文檔建立之初就設定好輔助線是個很好的工作習慣。上下的輔助線很容易設定，因為是根據iPhone自身系統設定的，左右的輔助線我習慣設定為24px，也就是顯示內容距離邊框的距離。這不是絕對的，我和總監研究過，究竟是設定為左右30px還是24px比較好，通過對國內國外各種APP的對比，覺得24px更適合一些，不寬不窄，這個完全是設計師個人的設計習慣，所以不要當成什麼規範，確切的說，整個螢幕你都可以隨便做，但是我們這裡說的是正常頁面。

pt和px

公式一： 

1pt= (DPI / 72) px

當photoshop中建立畫布的解析度為72ppi( 即 72dpi時 )， 1pt=1px； 當建立畫布解析度為72*2=144ppi時，1pt=2px。

附與尺寸有關的定義：

px：pixel，像素，電子螢幕上組成一幅圖畫或照片的最基本單元

pt: point，點，印刷行業常用單位，等於1/72英寸

ppi: pixel per inch，每英吋像素數，該值越高，則螢幕越細膩

dpi: dot per inch，每英寸多少點，該值越高，則圖片越細膩

dp: dip，Density-independent pixel, 是安卓開發用的長度單位，1dp表示在螢幕像素點密度為160ppi時1px長度

sp: scale-independent pixel，安卓開發用的字型大小單位。2

Part 3 頁面標註標註顏色

顏色用16進位和RGB表示都可能用得到，建議標註顏色時，兩種色值表達都標上（16進位&RGB）。

標註內容

文字需要提供：字型大小（px），字型顏色；頂部標題列的背景色值，透明度；標題列下方以及Tab bar上方其實有一條分割線，需要提供色值；內容顯示地區的背景色；底部Tab bar的背景色值。

頁面需要標註的地方

所有元素統一距離螢幕最左24px。

1、標題列：背景色，標題列文字大小，文字顏色；

2、Banner：所有撐滿橫屏的大圖，不需要橫向尺寸，把高度標出了就可以了；

3、菜單表徵圖：

表徵圖的大小和表徵圖的可點擊地區不一定一致。

也就是說，表徵圖可以做的很小，但是為了保證點擊的準確性和流暢性，工程師可以把可點擊地區設定的很大，這樣標註和切圖的時候就要注意，標註的是可點擊地區的大小，切圖切的也是可點擊地區的大小，也就是用透明地區去補上，否則圖片會模糊。

4、模組間隔：這個位置其實不是太重要，我習慣標註上這裡，麻煩能少則少。

5、圖片+文字：這個應該比較常見，只標註一個單位（圖+文）就可以了。

圖片需要標註寬高。

圖片距離上下左右的距離，文字大小顏色，這裡的文字其實算兩個控制項，標題文字以及解說文字，需要單獨標出。

6、Tab Bar：這個位置其實比較特殊，你可以單獨標註表徵圖大小+文字大小；還可以表徵圖+文字算作一個控制項，整個切出來；我們工程師的習慣是用整個的，也就是表徵圖+文字算作一個ICON。

所有的頁面標註總結起來就是：標文字，標圖片，標間距，標地區；

切圖的時候記得輸出個偶數尺寸的切片。

Part 4 切片資源的輸出全域性的切圖常見問題① 你的所有設計尺寸，包括圖形效果，應該盡量使用偶數。

技術開發使用的尺寸是設計稿像素尺寸的一半，也就是說，如果你用24px的字型，技術那邊就是設定為12px。

② 切圖尺寸應該提供幾套？

*.png IPhone2G，3G，3GS使用（好像沒人用這手機了吧）

*@2x.png IPhone4，5，6優先載入此尺寸圖片（不是必須使用這個尺寸，是優先載入調用這個尺寸）

*@3x.png IPhone6 plus使用的尺寸

可以簡單的理解為倍數關係（其實是為了滿足不同解析度，我覺得不用過於深究），如果你使用IPhone 6尺寸做設計稿，那麼切片輸出就是@2x，縮小2倍就是@1x，擴大1.5倍就是@3x了。

理論上，為了達到最好的視覺效果，你應該輸出三套尺寸，推薦輸出三種尺寸的切片資源。

另外現在幾乎看不到3GS了，所以需不需要提供一倍圖，還是要和工程師討論一下~

@1x @2x @3x是開發工具Xcode軟體需要的UI資源，命好名稱後，IOS裝置會自動的選取合適尺寸。

③共用資源的圖片，輸出一張就可以

類似重複的按鈕之類的，只要提供一張共用的資源就可以了；上面的文字是技術寫上去的。

理論上按照最佳視覺效果，你應該提供多尺寸的圖片；但通常我只提供最大尺寸的一張圖片即可，這一點要和你的搭檔溝通好，卻問他需要什麼方式。

④切片的輸出格式

位元影像格式：PNG 24，PNG 8，JPG

在JPG和PNG兩種格式圖片大小相差不是很大的情況下，推薦使用PNG；如果圖片大小相差很大，使用JPG。

歡迎頁面，ICON一定要使用PNG格式，在不影響視覺效果的前提下，可以考慮使用PNG 8；

向量圖格式：PDF，SVG

IOS原生支援的兩種向量圖片格式，但是支援的一般，並不能保證100%把所有圖片效果渲染出來；為了保險起見，我通常不使用這兩種格式，推薦還是使用位元影像，如果以後技術提升，100%支援SVG和PDF這種向量格式圖，那個時候也許不用提供這麼多套尺寸了~

⑤表徵圖的點擊地區

最小點擊地區問題：

IOS人機指導手冊裡推薦的最小可點擊元素的尺寸是44*44 point（點），在裝置上1 point等於1像素，所以轉換成像素就是44*44像素，換算成物理尺寸大概是7mm左右吧（人機工效學研究中得出的結論：用食指操作，觸擊範圍在7mm左右合適；用拇指操作，範圍在9mm左右合適）。

⑥圖片表徵圖的不同狀態

按鈕可能有正常（normal），按下（pressed），選中（selected），禁用（disabled）等多種狀態。

切片的命名規則

切片種類+功能+圖片描述（可有可無）+狀態.png

名稱應使用英文命名（中文不識別，推薦小寫字母），不要以數字或者符號當作開頭，使用底線進行串連。

舉個例子：一個首頁的處於正常狀態的確定按鈕

btn_sure_nor.png

[email protected]

切片種類是按鈕（btn）；功能是確定（sure）；狀態是normal（正常）

Tab bar（底部欄）

表徵圖+文字的模式，表徵圖最好單獨切，文字後面程式加上去。另外記住，同一模組的表徵圖切片大小保持一致。

Part 5 工作常用資料你需要使用的字型

如果是用Mac設計的小夥伴，直接就用蘋果黑體字就好了；不過用Windows的就沒那麼幸運了，PC上還沒和IPhone預設字型效果完全一樣的字型，通常都是拿其他字型代替。

蘋果麗黑 Hiragino Sans GB W3（普通）/W6（粗體） 比較接近IPhone字型的一款字型，這是我之前一直使用的設計字型。

黑體-簡 STHeitiSC-Light Mac裡面拷出來的蘋果黑體，比較貼近IPhone手機字型，目前在用。

關於字型大小的問題

頂部操作欄文字大小 34-38px

標題文字大小 28-34px

本文文字大小 26-30px

輔助性文字大小 20-24px

Tab bar文字大小 20px

文字大小隻是一個範圍，這要根據設計的視覺效果來決定，不要死記硬背，但是切記，字型大小要用偶數。

你需要知道的IPhone設計尺寸（這裡是一個整屏的尺寸包括了狀態列）

320*480 IPhone3GS （我沒見過3GS實體機，只在網上見過圖片，但你需要知道這個尺寸）

640*960 IPhone 4/4s （4時代的設計尺寸）

640*1136 IPhone 5/5s/5c （5時代的設計尺寸，雖然現在出來6/6 plus，但還有人再用這個尺寸設計）

750*1334 IPhone 6 （目前最新的設計尺寸，基本上現在做IOS的APP設計，用這個的應該最多）

1242*2208 IPhone6 plus （這是標準解析度，也就是設計需要的尺寸；另外還存在物理解析度是1080*1920，這並不需要深入理解。plus還涉及到橫屏，橫屏是是沒有狀態列的，設計橫屏時可以參考IPad的設計模式）

你需要提交的啟動頁面

依據開發工具Xcode提供的LaunchImage（啟動頁面）的各項尺寸:

320*480 IPhone3GS （我沒見過3GS實體機，只在網上見過圖片，但你需要知道這個尺寸）

640*960 IPhone 4/4s （4時代的設計尺寸）

640*1136 IPhone 5/5s/5c （5時代的設計尺寸，雖然現在出來6/6 plus，但還有人再用這個尺寸設計）

750*1334 IPhone 6 （目前最新的設計尺寸，基本上現在做IOS的APP設計，用這個的應該最多）

1242*2208 IPhone6 plus （這是標準解析度，也就是設計需要的尺寸；另外還存在物理解析度是1080*1920，這並不需要深入理解。plus還涉及到橫屏，橫屏是是沒有狀態列的，設計橫屏時可以參考IPad的設計模式）

完整列表如下：

iPhone尺寸規格

裝置iPhone	寬Width	高Height	對角線Diagonal	邏輯解析度(points)	Scale Factor	裝置解析度(pixel resolution)	PPI
1st gen(includs 1/1G/2G)	2.4 inches (61 mm)	4.5 inches (115 mm)	3.5-inch	320*480	@1x	320*480	163
3G(s)	2.44 inches (62.1 mm)	4.55 inches (115.5 mm)	3.5-inch	320*480	@1x	320*480	163
4(s)	2.31 inches (58.6 mm)	4.54 inches (115.2 mm)	3.5-inch	320x480	@2x	640x960	326
5c	2.33 inches (59.2 mm)	4.90 inches (124.4 mm)	4-inch	320x568	@2x	640x1136	326
5(s)	2.31 inches (58.6 mm)	4.87 inches (123.8 mm)	4-inch	320x568	@2x	640x1136	326
6(s)	2.64 inches (67.0 mm, 67.1 mm for 6s)	5.44 inches (138.1 mm, 138.3 mm for 6s)	4.7-inch	standard mode 375x667(zoomed mode 320x568)	@2x	standard mode 750x1334(zoomed mode 640x1136)	326
6(s) Plus	3.06 inches (77.8 mm), 3.07 inches (77.9 mm) for 6s plus	6.22 inches (158.1 mm), 6.23 inches (158.2 mm) for 6s plus	5.5-inch	standard mode 414x736(zoomed mode 375×667)	@3x	standard mode 1242x2208(zoomed mode 1125×2001) downsampled / 1.15(× 0.96) -> 1080x1920	401

iPad尺寸規格

裝置iPad	寬Width	高Height	對角線Diagonal	邏輯解析度(point)	Scale Factor	裝置解析度(pixel)	PPI
mini 1	5.3 inches (134.7 mm)	7.87 inches (200 mm)	7.9-inch	768*1024	@1x	768*1024	163
mini 2(3)	5.3 inches (134.7 mm)	7.87 inches (200 mm)	7.9-inch	768*1024	@2x	1536x2048	326
mini 4	5.3 inches (134.8 mm)	8 inches (203.2 mm)	7.9-inch	768*1024	@2x	1536x2048	264
Air(Air 2)	6.6 inches (169.5 mm)	9.4 inches (240 mm)	9.7-inch	768*1024	@2x	1536x2048	264
Pro	8.68 inches (220.6 mm)	12 inches (305.7 mm)	12.9-inch	1024x1366	@2x	2048x2732	264

注意，啟動頁面一定要是PNG格式的。

表徵圖的提交尺寸

IOS系統可以自動把圖片裁剪為圓角，所以提交表徵圖的時候，你只需要提交正方形的PNG圖片即可。

因為需要的表徵圖非常多，不可能全部加進去，只能選擇最好的尺寸，我們的工程師要求我提供以尺規寸：

1024*1024 Retina APP Icon for APP Store（高清屏的APP Store）

512*512 APP Icon for APP Store（普通螢幕的APP Store）

120*120 6的主畫面尺寸

114*114 5/4s/4的主畫面表徵圖尺寸

57*57 3GS的主畫面表徵圖尺寸

58*58 Retina Settings表徵圖尺寸

29*29 Settings表徵圖尺寸

提交的表徵圖尺寸不是固定的，所以，去找和你搭檔的工程師，讓他給你出一份需要提交的表徵圖尺寸文檔。

1. “純乾貨！一款APP從設計稿到切圖過程全方位揭秘” http://www.uisdc.com/from-design-to-slice ?
2. “扒一扒那些px、pt、ppi、dpi、dp、sp之間的關係” http://design.jobbole.com/92179/ ?

 

轉【iOS設計】一款APP從設計稿到切圖過程概述