今天給大家?guī)硪环荨案韶洝?，作為一?span>UI設(shè)計(jì)師，我們來了解一下一款APP從項(xiàng)目啟動(dòng)到切圖輸出的全過程，大家可以把這個(gè)相當(dāng)于企業(yè)工作流程吧，但由于各公司之間存在一些差異，但終究還是有想相通之處，希望對(duì)大家能得到一些啟發(fā)。

另外想說的就是，這里講的是一種工作方法，并不是工作規(guī)范，因?yàn)榧夹g(shù)的更新是非常快的，可能這里介紹的一些方法，跟你們的程序員搭檔并不完全一樣，所以大家在具體工作中還是需要融會(huì)貫通靈活運(yùn)用的。

以IOS系統(tǒng)為例，我們從頭到尾來過一遍。

一、項(xiàng)目立項(xiàng)

首先公司會(huì)將跟此項(xiàng)目所以的相關(guān)人員召集起來，產(chǎn)品經(jīng)理會(huì)把產(chǎn)品詳細(xì)地用原型展示出來，包括產(chǎn)品定位，市場需求，主打賣點(diǎn)，產(chǎn)品性質(zhì)以及各模塊具體功能，邏輯跳轉(zhuǎn)演示一下；之后會(huì)評(píng)估項(xiàng)目用時(shí)，各部門協(xié)調(diào)，項(xiàng)目啟動(dòng)。

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

界面設(shè)計(jì)

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

標(biāo)注工具

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

切圖工具

官網(wǎng)地址： http://www./

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

二、設(shè)計(jì)尺寸

現(xiàn)在常用的幾種設(shè)計(jì)尺寸

1）640*960 iPhone 4時(shí)代的尺寸，剛接觸APP設(shè)計(jì)用的是這個(gè)尺寸，擬物盛行的時(shí)代（現(xiàn)在用的比較少）；

2）640*1136 iPhone 5/5S/5C，IPhone更新，咱們?cè)O(shè)計(jì)也得跟著與時(shí)俱進(jìn)（應(yīng)該還有人用），進(jìn)入扁平的時(shí)代了；

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

推薦做設(shè)計(jì)稿的時(shí)候使用IPhone6的尺寸進(jìn)行設(shè)計(jì)。

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

文檔建立之初就設(shè)置好參考線是個(gè)很好的工作習(xí)慣，希望更多的設(shè)計(jì)師可以養(yǎng)成更好的工作習(xí)慣。

上下的參考線很容易設(shè)置，因?yàn)槭歉鶕?jù)IPhone自身系統(tǒng)設(shè)置的，左右的參考線，也就是顯示內(nèi)容距離邊框的距離，這不是絕對(duì)的，通過對(duì)國內(nèi)國外各種APP的對(duì)比，覺得24px更適合一些，不寬不窄，這個(gè)完全是設(shè)計(jì)師個(gè)人的設(shè)計(jì)習(xí)慣，所以不要當(dāng)成什么規(guī)范，確切的說，整個(gè)屏幕你都可以隨便做，但是我們這里說的是正常頁面。

三、頁面標(biāo)注

標(biāo)注是重中之重，程序員能不能完整的還原設(shè)計(jì)稿，很大一部分取決于標(biāo)注；如果不清楚你該怎么標(biāo)，一定要和程序員溝通！每個(gè)程序員實(shí)現(xiàn)效果的方法不同，我在這里所說的，是我的標(biāo)注習(xí)慣，但應(yīng)該適用于大部分的設(shè)計(jì)師和程序員。

不需要每一張效果圖都進(jìn)行標(biāo)注，你標(biāo)注的頁面能保證程序員開發(fā)每個(gè)頁面的時(shí)候都能順利進(jìn)行即可。

這里的標(biāo)注軟件使用的是PxCook，先標(biāo)一個(gè)空白文檔，看看都需要什么吧

另外有一點(diǎn)，PxCook雖然可以自動(dòng)讀取顏色，但是還不能識(shí)別透明度，所以如果用了透明色，就要用文字標(biāo)注直接寫出來。

可以把PS和標(biāo)注軟件同時(shí)打開，因?yàn)橛袝r(shí)候標(biāo)注軟件并不能完全的把PSD文件里的東西標(biāo)注出來，所以標(biāo)注也要靈活運(yùn)用，如果無法標(biāo)注，就到PS里查看一下，然后再使用文字標(biāo)注說明一下。

標(biāo)注顏色是使用16進(jìn)制，還是RGB？

都用得到，要看實(shí)現(xiàn)什么東西，建議標(biāo)注顏色時(shí)，兩種色值表達(dá)都標(biāo)上（16進(jìn)制&RGB）。

你需要標(biāo)注的內(nèi)容有：

文字需要提供：字體大?。╬x），字體顏色；

頂部標(biāo)題欄的背景色值，透明度；

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

底部Tab bar的背景色值。

一般頁面需要標(biāo)注這些地方：

1、標(biāo)題欄：背景色，標(biāo)題欄文字大小，文字顏色；

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

3、菜單圖標(biāo)：圖標(biāo)的大小和圖標(biāo)的可點(diǎn)擊區(qū)域不一定一致（標(biāo)注的是可點(diǎn)擊區(qū)域的大?。?。

4、模塊間隔：這個(gè)位置其實(shí)不是太重要。

5、圖片 文字：只標(biāo)注一個(gè)單位（圖 文）就可以了。

四、切圖輸出

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

全局性的切圖常見問題

1、你的所有設(shè)計(jì)尺寸，包括圖形效果，應(yīng)該盡量使用偶數(shù)。

技術(shù)開發(fā)使用的尺寸是設(shè)計(jì)稿像素尺寸的一半，也就是說，如果你用24px的字體，技術(shù)那邊就是設(shè)置為12px；

所以標(biāo)注的時(shí)候務(wù)必使用偶數(shù)，為了保證最佳的設(shè)計(jì)效果，避免出現(xiàn)0.5像素的虛邊。

2、切圖尺寸應(yīng)該提供幾套？

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

ico_car@2x.png IPhone4，5，6優(yōu)先加載此尺寸圖片（不是必須使用這個(gè)尺寸，是優(yōu)先加載調(diào)用這個(gè)尺寸）

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

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

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

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

4、切圖輸出格式

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

5、圖片圖標(biāo)的不同狀態(tài)

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

命名規(guī)則

命名并不是統(tǒng)一的規(guī)范，不同的公司不同的程序員有著自己不同的命名規(guī)范和命名習(xí)慣，一般是：切片種類 功能 圖片描述（可有可無） 狀態(tài).png

名稱應(yīng)使用英文命名（中文不識(shí)別，推薦小寫字母），不要以數(shù)字或者符號(hào)當(dāng)作開頭，使用下劃線進(jìn)行連接。

舉個(gè)例子：一個(gè)首頁的處于正常狀態(tài)的確定按鈕

btn_sure_nor.png

btn_sure_nor@2x.png

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