iOS設計 - 一款APP從設計稿到切圖過程概述

時間 2019-12-02

標籤 ios 設計一款 app 過程概述欄目 iOS 简体版

原文原文鏈接

這篇文章站在GUI設計師的角度概述了APP從項目啓動到切片輸出的過程，至關於工做流程的介紹。這裏寫的不是一種規範，只是一種工做方法，加上技術的更新是很是快的，你們在具體工做中，必定要靈活運用。android

這裏咱們只說iOS系統下的設計，至於Android，由於尺寸太多，涉及的東西比較亂。1ios

Part 1 項目立項

文件結構

項目名稱v1.0 -> 01_源文件psd
02_效果圖jpg
03_標註圖png
04_標註源文件
05_切片資源png
原型.rar設計模式

工具：markdown

界面設計：PS, AIiphone

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

切圖：Cutterman(PS插件), Assistor PS(PS插件)開發工具

Part 2 Photoshop

設計尺寸

640*960 4時代的尺寸字體
640*1136 5/5S/5Cui
750*1334 6 目前我作設計稿的設計尺寸，IPhone6的尺寸，向下能夠適配4，5，向上能夠適配6 plus。我記得IP6推出後，我問總監應該用什麼尺寸設計，他說用IP6的吧，好適配，切出來就是@2x了，改一改上下都能照顧到。

推薦作設計稿的時候使用IPhone6的尺寸進行設計。.net

參考線

文檔創建之初就設置好參考線是個很好的工做習慣。上下的參考線很容易設置，由於是根據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。

一、標題欄：背景色，標題欄文字大小，文字顏色；

二、Banner：全部撐滿橫屏的大圖，不須要橫向尺寸，把高度標出了就能夠了；

三、菜單圖標：

圖標的大小和圖標的可點擊區域不必定一致。

也就是說，圖標能夠作的很小，可是爲了保證點擊的準確性和流暢性，工程師能夠把可點擊區域設置的很大，這樣標註和切圖的時候就要注意，標註的是可點擊區域的大小，切圖切的也是可點擊區域的大小，也就是用透明區域去補上，不然圖片會模糊。

四、模塊間隔：這個位置其實不是過重要，我習慣標註上這裏，麻煩能少則少。

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

圖片須要標註寬高。

圖片距離上下左右的距離，文字大小顏色，這裏的文字其實算兩個控件，標題文字以及說明文字，須要單獨標出。

六、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

btn_sure_nor@2x.png

切片種類是按鈕（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設計，用這個的應該最多）

完整列表以下：

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