常用的手機(jī)APP設(shè)計(jì)工具：

Sketch：常用來(lái)制作線框、界面，偶爾繪制圖形。MAC電腦專用移動(dòng)APP設(shè)計(jì)軟件。也是一款快速設(shè)計(jì)APP界面的軟件。

Illustrator & Photoshop：用作圖標(biāo)設(shè)計(jì)、圖形繪制、照片編輯等。

墨刀、axure & After Effect：用來(lái)制作交互復(fù)雜的產(chǎn)品原型。

常見(jiàn)的手機(jī)APP視覺(jué)設(shè)計(jì)流程：

第一階段：概念設(shè)計(jì)和原型設(shè)計(jì)

包括腦圖設(shè)計(jì)、線框圖的設(shè)計(jì)等等。

第二階段：視覺(jué)定義階段。

確定了使用哪些字體、顏色、布局、形狀等元素。

也屬于創(chuàng)意階段，這個(gè)是定義手機(jī)APP視覺(jué)規(guī)范的第一個(gè)步驟?；蛘哒f(shuō)是雛形階段。

主要頁(yè)面的布局與視覺(jué)風(fēng)格需要反復(fù)嘗試才能找出最適合目標(biāo)用戶，并且能從競(jìng)品中脫穎而出的一套。

第三階段：界面產(chǎn)出階段。

即產(chǎn)出數(shù)頁(yè)的高精度視覺(jué)APP設(shè)計(jì)稿，即大家熟知的首頁(yè)、設(shè)置、好友列表、個(gè)人資料、關(guān)注、啟動(dòng)頁(yè)、引導(dǎo)頁(yè)等等。

一旦手機(jī)APP視覺(jué)語(yǔ)言確認(rèn)，我們就可以據(jù)此制作一個(gè)單獨(dú)文檔來(lái)搞定APP視覺(jué)規(guī)范！

第一步，設(shè)定顏色、主字體、圖形、邊距、留白。

第二步，開(kāi)始設(shè)定更精細(xì)的原子：標(biāo)題、文本字體、按鈕和輸入框。

最后，在故事板中制作基本的文本和圖層：

然后通過(guò)右鍵給它們賦予預(yù)設(shè)的樣式。

矩形會(huì)自動(dòng)嵌套預(yù)設(shè)的風(fēng)格樣式，正如你手動(dòng)編輯過(guò)該標(biāo)簽一樣。通過(guò)設(shè)置邊距，按鈕會(huì)根據(jù)標(biāo)簽文本的長(zhǎng)度自動(dòng)適應(yīng)，通過(guò)留白設(shè)置可以將故事板內(nèi)部元素自動(dòng)對(duì)齊。

我們還可以設(shè)置更復(fù)雜的組織（例如導(dǎo)航欄）來(lái)保持各處的一致性。

在此基礎(chǔ)上可以添加更多功能，使得通過(guò)設(shè)置每個(gè)元素來(lái)自動(dòng)生成頁(yè)面、列表、卡片成為可能。改動(dòng)設(shè)計(jì)設(shè)定會(huì)自動(dòng)應(yīng)用到所有元素上。這樣能夠很方便的測(cè)試不同的顏色、字體風(fēng)格等等的效果。

制作界面模板套件將不費(fèi)吹灰之力，通過(guò)預(yù)設(shè)原生組件就能實(shí)現(xiàn)。

下面就是詳細(xì)的手機(jī)APP定義視覺(jué)規(guī)范案例：

查看完整版的《京東APP設(shè)計(jì)視覺(jué)規(guī)范》

手機(jī)UI界面設(shè)計(jì)規(guī)范匯總，七例APP設(shè)計(jì)項(xiàng)目信息圖