常用的手機APP設計工具：

Sketch：常用來制作線框、界面，偶爾繪制圖形。MAC電腦專用移動APP設計軟件。也是一款快速設計APP界面的軟件。

Illustrator & Photoshop：用作圖標設計、圖形繪制、照片編輯等。

墨刀、axure & After Effect：用來制作交互復雜的產品原型。

?

?

?

?

?

常見的手機APP視覺設計流程：

第一階段：概念設計和原型設計

包括腦圖設計、線框圖的設計等等。

第二階段：視覺定義階段。

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

也屬于創意階段，這個是定義手機APP視覺規范的第一個步驟。或者說是雛形階段。

主要頁面的布局與視覺風格需要反復嘗試才能找出最適合目標用戶，并且能從競品中脫穎而出的一套。

第三階段：界面產出階段。

即產出數頁的高精度視覺APP設計稿，即大家熟知的首頁、設置、好友列表、個人資料、關注、啟動頁、引導頁等等。

?

?

一旦手機APP視覺語言確認，我們就可以據此制作一個單獨文檔來搞定APP視覺規范！

?

?

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

第二步，開始設定更精細的原子：標題、文本字體、按鈕和輸入框。

?

?

?

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

?

?

然后通過右鍵給它們賦予預設的樣式。

?

?

矩形會自動嵌套預設的風格樣式，正如你手動編輯過該標簽一樣。通過設置邊距，按鈕會根據標簽文本的長度自動適應，通過留白設置可以將故事板內部元素自動對齊。

我們還可以設置更復雜的組織（例如導航欄）來保持各處的一致性。

?

?

在此基礎上可以添加更多功能，使得通過設置每個元素來自動生成頁面、列表、卡片成為可能。改動設計設定會自動應用到所有元素上。這樣能夠很方便的測試不同的顏色、字體風格等等的效果。

制作界面模板套件將不費吹灰之力，通過預設原生組件就能實現。

下面就是詳細的手機APP定義視覺規范案例：

?

轉載于:https://www.cnblogs.com/qudaxueyuan/p/4808236.html

總結

以上是生活随笔為你收集整理的如何定义视觉设计规范？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。