UI設計師與APP不得不說的那些事

今天給大家帶來一份“干貨”，作為一名UI設計師，我們來了解一下一款APP從項目啟動到切圖輸出的全過程，大家可以把這個相當于企業工作流程吧，但由于各公司之間存在一些差異，但終究還是有想相通之處，希望對大家能得到一些啟發。

另外想說的就是，這里講的是一種工作方法，并不是工作規范，因為技術的更新是非常快的，可能這里介紹的一些方法，跟你們的程序員搭檔并不完全一樣，所以大家在具體工作中還是需要融會貫通靈活運用的。

以IOS系統為例，我們從頭到尾來過一遍。

一、項目立項

首先公司會將跟此項目所以的相關人員召集起來，產品經理會把產品詳細地用原型展示出來，包括產品定位，市場需求，主打賣點，產品性質以及各模塊具體功能，邏輯跳轉演示一下；之后會評估項目用時，各部門協調，項目啟動。

對于作為設計這一塊的GUI設計師來說，接到原型后，我們就要根據里面的原型需求，進行視覺稿的設計輸出，最終，我們應該最少會輸出這么幾樣東西：

另外這里要提一點的就是，大家在做設計的時候一樣要養成良好習慣，比如要及時地對文件和文件夾進行歸類，不要說這個是處女座的情節，這個應該是所以設計師都應該具備的基本習慣，否則當頁面過多的時候，就算你自己能找到，當你給到其他搭檔時，那別人就要吐血了。

界面設計

至于做界面設計的軟件，目前行業里用的最多的就是PS和AI了（高版本優于低版本，低版本很多功能沒有的）。兩者切換使用，雙劍合壁，效果更加哈~

標注工具

做好設計圖后就需要給效果圖進行標注了，在這推薦一個比較好用的標注軟件：PxCook（像素大廚），由于Mac并沒得到普及，所以傳說中的Sketch到底有多神奇，也就只有用過的才知道了。PxCook在WIN上做標注還是非常順手的，由于它可以直接對PSD文件進行自動測量，在PS進行修改后也會同步。雖然它也帶有切圖功能，但感覺比較雞肋，有興趣的可以去試試，但并不推薦。

切圖工具

官網地址： http://www.cutterman.cn/

一款PS的插件，切圖非常方便，但不支持綠色免安裝版本PS，而且對PS版本要求比較高，針對CS 6的已經不維護更新了。推薦安裝官方完整版PS cc，然后自行破解。官網上有安裝使用教程，自己研究下吧。

二、設計尺寸

現在常用的幾種設計尺寸

1）640*960 iPhone 4時代的尺寸，剛接觸APP設計用的是這個尺寸，擬物盛行的時代（現在用的比較少）；

2）640*1136 iPhone 5/5S/5C，IPhone更新，咱們設計也得跟著與時俱進（應該還有人用），進入扁平的時代了；

3） 750*1334 iPhone 6 目前的主流設計尺寸，IPhone6的尺寸，向下可以適配4，5，向上可以適配6 plus，切出來就是@2x了，改一改上下都能照顧到。

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

IP 6的尺寸相比于IP 5來說，很多系統控件尺寸并未變化，只是高度也就是內容顯示區域發生了變化。下面是IPhone 6的空白文檔，建立了參考線。

文檔建立之初就設置好參考線是個很好的工作習慣，希望更多的設計師可以養成更好的工作習慣。

上下的參考線很容易設置，因為是根據IPhone自身系統設置的，左右的參考線，也就是顯示內容距離邊框的距離，這不是絕對的，通過對國內國外各種APP的對比，覺得24px更適合一些，不寬不窄，這個完全是設計師個人的設計習慣，所以不要當成什么規范，確切的說，整個屏幕你都可以隨便做，但是我們這里說的是正常頁面。

三、頁面標注

標注是重中之重，程序員能不能完整的還原設計稿，很大一部分取決于標注；如果不清楚你該怎么標，一定要和程序員溝通！每個程序員實現效果的方法不同，我在這里所說的，是我的標注習慣，但應該適用于大部分的設計師和程序員。

不需要每一張效果圖都進行標注，你標注的頁面能保證程序員開發每個頁面的時候都能順利進行即可。

這里的標注軟件使用的是PxCook，先標一個空白文檔，看看都需要什么吧

另外有一點，PxCook雖然可以自動讀取顏色，但是還不能識別透明度，所以如果用了透明色，就要用文字標注直接寫出來。

可以把PS和標注軟件同時打開，因為有時候標注軟件并不能完全的把PSD文件里的東西標注出來，所以標注也要靈活運用，如果無法標注，就到PS里查看一下，然后再使用文字標注說明一下。

標注顏色是使用16進制，還是RGB？

都用得到，要看實現什么東西，建議標注顏色時，兩種色值表達都標上（16進制amp;RGB）。

你需要標注的內容有：

文字需要提供：字體大小（px），字體顏色；

頂部標題欄的背景色值，透明度；

標題欄下方以及Tab bar上方其實有一條分割線，需要提供色值；

內容顯示區域的背景色（如果是全部頁面白色，那就和工程師說一句就行）；

底部Tab bar的背景色值。

一般頁面需要標注這些地方：

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

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

3、菜單圖標：圖標的大小和圖標的可點擊區域不一定一致（標注的是可點擊區域的大小）。

4、模塊間隔：這個位置其實不是太重要。

5、圖片 文字：只標注一個單位（圖 文）就可以了。

四、切圖輸出

切之前需要跟程序員溝通一下，該如何去切才能配合他的開發。

全局性的切圖常見問題

1、你的所有設計尺寸，包括圖形效果，應該盡量使用偶數。

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

所以標注的時候務必使用偶數，為了保證最佳的設計效果，避免出現0.5像素的虛邊。

2、切圖尺寸應該提供幾套？

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

[email protected] IPhone4，5，6優先加載此尺寸圖片（不是必須使用這個尺寸，是優先加載調用這個尺寸）

[email protected] IPhone6 plus使用的尺寸

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

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

3、相同資源的圖片，輸出一張

4、切圖輸出格式

PS里，Shift Ctrl Alt S，儲存為Web所用格式，推薦使用PNG格式，在不影響視覺效果的前提下，可以考慮使用PNG-8，確保顯示質量應該用PNG-24。

5、圖片圖標的不同狀態

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

命名規則

命名并不是統一的規范，不同的公司不同的程序員有著自己不同的命名規范和命名習慣，一般是：切片種類 功能 圖片描述（可有可無） 狀態.png

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

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

btn_sure_nor.png

[email protected]

以下是常用命名，這是我的命名習慣，并不是規范，所以要靈活，如果實在不知道英文，就用拼音代替也行。