@BAT_LCK ：我自己是一名GUI設計師，因此我只站在GUI設計師的角度去把APP從項目啓動到切片輸出的過程寫一寫，至關於工做流程的介紹吧。公司不一樣，流程不盡相同，可是終究仍是能有些幫助。html
依舊聲明：這裏寫的不是一種規範，只是一種工做方法，你們在具體工做中，必定要靈活運用。另外，技術的更新是很是快的，我寫的這些可能某些東西已經和大家的工程師搭檔所用的方法不同了，因此，仍是要靈活運用~設計模式
這裏咱們只說IOS系統下的設計，至於Android，由於尺寸太多，涉及的東西比較亂，我整理好之後再說吧。工具
頁面篇幅比較長，不推薦一次性看完，那樣你潛意識裏就會對它厭煩了，因此能夠有時間讀一讀，看一看。post
Part 1 項目立項
完善的公司會把項目相關人員彙集起來，產品經理會把產品詳細的用原型展現出來，包括產品定位，市場需求，主打賣點，產品性質以及各模塊具體功能，邏輯跳轉演示一下；以後會評估項目用時，各部門協調，項目啓動。開發工具
話很少說，接到原型，那咱們應該作什麼準備工做呢？測試
在項目設計之初，就該進行項目歸檔整理，個人習慣是「項目名稱+版本序列」；字體
沒有最正確的工做方法，只有最適合本身的工做習慣。ui
我我的習慣把不一樣類型的文件劃分到不一樣類型的文件夾裏，有的設計師習慣全都放在一個文件夾裏，若是文件少還說的過去，若是頁面過多，就知道這樣的利弊了。spa
工欲善其事必先利其器，基本上我作界面設計用的最多的就是PS和AI了，版本無所謂，用着舒服就行，推薦版本高一點的，低版本好多方便功能都沒有。插件
標註工具：
PxCook，目前我還沒用上Mac，因此也不知道傳說中的Sketch到底多神奇。PxCook在Windows上標註還比較順手，雖然它還附帶切圖功能，可是比較雞肋，不推薦用它切圖。
切圖工具：
Cutterman
官網地址： http://www.cutterman.cn/
一款PS的插件，切圖很是方便，但不支持綠色免安裝版本PS，並且對PS版本要求比較高，針對CS 6的已經不維護更新了。推薦安裝官方完整版PS cc，而後自行破解。官網上有安裝使用教程，本身研究下吧，由於我也是最近纔開始接觸這款插件。
Assistor PS
也是一款PS的切圖標註插件，也被譽爲神器；我使用了下，感受至關不錯，就是標註還沒太適應，推薦一下這個。
具體介紹看：
Part 2 Photoshop
如今經常使用的幾種設計尺寸
1. 640*960 4時代的尺寸，剛接觸APP設計用的是這個尺寸，擬物盛行的時代（如今用這個尺寸設計的應該比較少了吧）；
2. 640*1136 5/5S/5C，IPhone更新，我們設計也得跟着與時俱進（應該還有人用這個設計尺寸），進入扁平的時代了；
3. 750*1334 6 目前我作設計稿的設計尺寸，IPhone6的尺寸，向下能夠適配4，5，向上能夠適配6 plus；我記得IP6推出後，我問總監應該用什麼尺寸設計，他說用IP6的吧，好適配，切出來就是@2x了，改一改上下都能照顧到。
推薦作設計稿的時候使用IPhone6的尺寸進行設計。
IP 6的尺寸相比於IP 5來講，不少系統控件尺寸並未變化，只是高度也就是內容顯示區域發生了變化。下面是IPhone 6的空白文檔，我創建了參考線。
文檔創建之初就設置好參考線是個很好的工做習慣，我但願更多的設計師能夠養成更好的工做習慣。
上下的參考線很容易設置，由於是根據IPhone自身系統設置的，左右的參考線我習慣設置爲24px，也就是顯示內容距離邊框的距離。這不是絕對的，我和總監研究過，到底是設置爲左右30px仍是24px比較好，經過對國內國外各類APP的對比，以爲24px更適合一些，不寬不窄，這個徹底是設計師我的的設計習慣，因此不要當成什麼規範，確切的說，整個屏幕你均可以隨便作，可是咱們這裏說的是正常頁面。
Part 3 頁面標註
標註是重中之重，工程師能不能完整的還原設計稿，很大一部分取決於標註；若是不清楚你該怎麼標，必定要和工程師溝通！
每一個工程師實現效果的方法不一樣，我在這裏所說的，是個人標註習慣，但應該適用於大部分的設計師和工程師。
不須要每一張效果圖都進行標註，你標註的頁面能保證工程師開發每一個頁面的時候都能順利進行便可；
這裏的標註軟件使用的是PxCook，先標一個空白文檔，看看都須要什麼吧
這裏要說一句，PxCook雖然能夠自動讀取顏色，可是還不能對PSD文檔裏設置的透明度讀取，因此若是你用了透明色，推薦你用文字標註直接寫出來原色值以及透明度。
基本上我並不使用PXCook裏面的顏色標註工具，而是使用文字標註工具，由於要標識兩種色值，PxCook只能顯示一種色值（RGB 和 十六進制轉換碼）。
通常個人習慣是PS和標註軟件同時打開，由於有時候標註軟件並不能徹底的把PSD文件裏的東西標註出來，因此標註也要靈活運用，若是沒法標註，就到PS裏查看一下，而後再使用文字標註說明一下。
標註顏色是使用16進制，仍是RGB：
都用獲得，要看實現什麼東西，建議標註顏色時，兩種色值表達都標上（16進制&RGB）。
你須要標註的內容有：
- 文字須要提供：字體大小（px），字體顏色；
- 頂部標題欄的背景色值，透明度；
- 標題欄下方以及Tab bar上方其實有一條分割線，須要提供色值；
- 內容顯示區域的背景色（若是是所有頁面白色，那就和工程師說一句就行）；
- 底部Tab bar的背景色值。
由於頁面的種類成千上萬，我想每種頁面都講一下，可是不現實，但願能夠觸類旁通。
下面的是一個比較普通的首頁頁面，可是基本上一款APP中應該標的元素都有了~
通常頁面你須要標註這些地方：
全部元素統一距離屏幕最左24px（全局性的數據能夠直接和工程師溝通，也能夠標註，推薦標註出來）
一、標題欄：背景色，標題欄文字大小，文字顏色（再也不贅述）；
二、Banner：全部撐滿橫屏的大圖，不須要橫向尺寸，把高度標出了就能夠了；
三、菜單圖標：
圖標的大小和圖標的可點擊區域不必定一致
也就是說，圖標能夠作的很小，可是爲了保證點擊的準確性和流暢性，工程師能夠把可點擊區域設置的很大，這樣標註和切圖的時候就要注意，標註的是可點擊區域的大小，切圖切的也是可點擊區域的大小，也就是用透明區域去補上，不然圖片會模糊。
在設計的時候就要考慮可點擊區域的範圍，好比X寶購物車頁面左側的小圈，可點擊區域要比實際小圈尺寸大不少。
這種類型的圖標須要標註圖標點擊區域大小，圖標距離屏幕最左最右以及上下的距離。至於圖標的間距，由於有些時候可能 設計師不能徹底作到1px不差，因此我基本不標，交給工程師讓他們去處理，其實等距排列的圖標不須要標間距，由於工程師還要動態適應不一樣的屏幕，標了間距也是白標（仍是要和你的搭檔溝通怎麼去標註）；
四、模塊間隔：這個位置其實不是過重要，我習慣標註上這裏，麻煩能少則少。
五、圖片+文字：這個應該比較常見，只標註一個單位（圖+文）就能夠了。
圖片須要標註寬高，由於工程師要設置圖片區域，從後臺調取，能夠這麼說，軟件裏除了橫屏撐滿的圖，基本上全部的圖片都要標註寬高。
圖片距離上下左右的距離，文字大小顏色，這裏的文字其實算兩個控件，標題文字以及說明文字，須要單獨標出。
Tab Bar：
這個位置其實比較特殊，你能夠單獨標註圖標大小+文字大小；還能夠圖標文字算做一個控件，整個切出來；
咱們工程師的習慣是用整個的，也就是圖標+文字算做一個ICON，因此我基本不怎麼標註單獨的圖標（這裏能夠和你的搭檔去溝通一下，看他是什麼開發習慣）。
關於列表頁類型的標註問題
普通的列表有兩種方法（去問你的搭檔，他喜歡用什麼方法）：
- 標出行高，行內元素居中；
- 標出行內元素，元素上下間距，肯定行高；
每種元素的位置如何肯定：
一般標註的都是元素距離屏幕最左側的距離，好比上圖的圖標元素距離左側24px，文字元素距離左側100px。
標註這個東西沒有固定的方法，工程師的開發習慣不一樣，標註方法也不一樣。
該怎麼標註雖然能夠在網上找到方法，但那不必定適合你，必定和本身的搭檔勤溝通，方法是死的，人是活的……
全部的頁面標註總結起來就是：標文字，標圖片，標間距，標區域；
（上述圖標出現了45px的單數，由於軟件自動吸附上去了顯示了圖標自己的尺寸，切圖的時候記得輸出個偶數尺寸的切片）
Part 4 切片資源的輸出
切以前務必要和你的工程師搭檔溝通一下，該如何去切才能配合他的開發。
全局性的切圖常見問題
① 你的全部設計尺寸，包括圖形效果，應該儘可能使用偶數。
技術開發使用的尺寸是設計稿像素尺寸的一半，也就是說，若是你用24px的字體，技術那邊就是設置爲12px；
因此標註的時候務必使用偶數，爲了保證最佳的設計效果，避免出現0.5像素的虛邊。
② 切圖尺寸應該提供幾套？
ico_car.png IPhone2G，3G，3GS使用（好像沒人用這手機了吧）
ico_car@2x.png IPhone4，5，6優先加載此尺寸圖片（不是必須使用這個尺寸，是優先加載調用這個尺寸）
ico_car@3x.png IPhone6 plus使用的尺寸
能夠簡單的理解爲倍數關係（實際上是爲了知足不一樣分辨率，我以爲不用過於深究），若是你使用IPhone 6尺寸作設計稿，那麼切片輸出就是@2x，縮小2倍就是@1x，擴大1.5倍就是@3x了。
理論上，爲了達到最好的視覺效果，你應該輸出三套尺寸，推薦輸出三種尺寸的切片資源。
個人工程師搭檔要求我給兩套尺寸就能夠，也就是@1x @2x的兩種尺寸，由於咱們沒有6 plus的測試機，因此看不到效果，據他說應該不會太失真，可是爲了保證效果，我仍是給三套尺寸。
另外如今幾乎看不到3GS了，因此需不須要提供一倍圖，仍是要和工程師討論一下~
@1x @2x @3x是開發工具Xcode軟件須要的UI資源，命好名稱後，IOS設備會自動的選取合適尺寸。
③共用資源的圖片，輸出一張就能夠
相似這種重複的按鈕之類的，只要提供一張共用的資源就能夠了；上面的文字是技術寫上去的。
理論上按照最佳視覺效果，你應該提供多尺寸的圖片；但一般我只提供最大尺寸的一張圖片便可，這一點要和你的搭檔溝通好，問他須要什麼方式。
④切片的輸出格式
文件→存儲爲Web所用格式
位圖格式：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左右合適）。聽說這個尺寸下，不容易出現誤操做，誤點擊；小於這個尺寸，點擊就會變的有些不太準確，一貫注重用戶體驗的蘋果公司定義這個最小點擊尺寸也不是沒根據的……
因此如今作設計，爲了圖標精緻，你能夠把圖標作的小一些，可是切圖輸出的時候，要考慮用戶點擊難易度的問題，因此，切圖的時候，涉及到須要點擊的小圖標的時候，普通屏幕仍是切44px大小，高清屏就須要切88px，不夠的地方用透明區域補全，不然用戶點擊的時候會比較困難，會很不靈敏。
⑥圖片圖標的不一樣狀態
每種圖標或者圖片若是有不一樣狀態，每一種不一樣的狀態都須要進行切片輸出。
好比按鈕有正常（normal），按下（pressed），選中（selected），禁用（disabled）等多種狀態，
最常出現的就是normal→pressed→normal；某些特定按鈕控件會出現選中狀態，具體狀況具體分析吧。這裏顯示的是你要知道按鈕可能有幾種狀態……
切片的命名規則
命名並非統一的規範，不一樣的公司不一樣的工程師有着本身不一樣的命名規範和命名習慣，可是大體仍是有跡可循的，通常是：
切片種類+功能+圖片描述（無關緊要）+狀態.png
名稱應使用英文命名（中文不識別，推薦小寫字母），不要以數字或者符號看成開頭，使用下劃線進行鏈接。
舉個例子：一個首頁的處於正常狀態的肯定按鈕
btn_sure_nor.png
btn_sure_nor@2x.png
切片種類是按鈕（btn）；功能是肯定（sure）；狀態是normal（正常）
我一般是以這種命名方式進行命名，若是你的公司有設計文檔，去看看以前留下的命名規範，若是沒有，那就去問工程師吧。
Tab bar（底部欄）
說說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（啓動頁面）的各項尺寸，不過好像如今已經改了，這仍是工程師好久以前給個人，咋一看是否是嚇一跳？工程師是按照IOS的系統版原本設置的，但你是設計師，你是按照IPhone的版原本做圖的，因此其實沒有那麼多，真實狀況下，咱們的工程師要求提供如下幾個尺寸：
640*960 （4/4s）
640*1136 （5/5s/5c）
750*1334 （6）
1242*2208 （6 plus）
2208*1242 （6 plus的橫屏尺寸，若是大家的軟件支持橫屏模式，你就須要作一張橫屏的啓動頁面）
注意，啓動頁面必定要是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圖標尺寸
提交的圖標尺寸不是固定的，因此，去找和你搭檔的工程師，讓他給你出一份須要提交的圖標尺寸文檔。
差很少用的到的就這些，有時間能夠去查看一下蘋果的IOS人機指導手冊或者開發文檔，上面有更加詳細的數聽說明。
但實際工做中須要的並不像手冊上提供的尺寸那麼多，因此工做之中，和你的工程師搭檔去溝通，你要知道的是大家公司開發所用的數據，而不是蘋果提供給你的數據。
【幾款強大無比的素材管理神器】
新生代素材管理神器！
《有圖的都交給我！新生代圖片素材管理神器INBOARD》圖標素材管理工具ICONJAR！
《術業專攻！超方便的圖標素材管理工具ICONJAR》字體管理神器！
《設計師們！超好用的字體管理工具RIGHTFONT》