產(chǎn)品發(fā)展日趨平穩(wěn)時，產(chǎn)品定位和品牌形象已進入穩(wěn)定狀態(tài)，參與設計的人越來越多，設計的統(tǒng)一性和效率的問題也漸漸顯現(xiàn)。因此，為了保證平臺設計統(tǒng)一性，提升團隊工作效率，打磨細節(jié)體驗，就需要我們定義和整理設計規(guī)范。

確定規(guī)范內(nèi)容

UI 設計中，設計規(guī)范是一個關鍵步驟。知名大廠基本上都有一套自己的完整規(guī)范體系，在整理設計規(guī)范時，以大平臺規(guī)范體系作為參考，針對產(chǎn)品自身情況增刪，整理出我們自己所需要的規(guī)范內(nèi)容，能有效地避免規(guī)范內(nèi)容遺漏缺失。

拓展鏈接：各大官網(wǎng)設計規(guī)范集合

色彩規(guī)范

顏色是設計中最重要的元素，顏色的運用與搭配決定設計的品質感。在 UI 設計中，顏色的使用規(guī)范主要在于：品牌主色、文本顏色、界面顏色（背景色、線框色）等。

 

字體規(guī)范

不同的字體氣質不一樣，并且不同場景下帶給人的感受也不一樣。所以需要在設計的時候考慮到字體的設計效果，然后在設計規(guī)范中注明。

 

圖標規(guī)范

在 UI 界面中，具有標識性質的圖形就是圖標。作為 UI 設計中重要的設計模塊，產(chǎn)品的每個頁面中都有可能存在圖標。設計規(guī)范中，圖標一般按照用途分為兩類：應用圖標、功能圖標。

應用圖標：各種應用程序的識別標志，在應用商店里下載的一些應用程序的標志。

 

功能圖標：規(guī)范中最好標明圖標格式與使用方式。比如 Web 設計，圖片可以使用 iconfont 管理，可生成代碼交付給前端開發(fā)；如果是原生 APP，那么需要標注圖標導出格式與尺寸。

 

圖片規(guī)范

圖片作為界面設計的重要組成部分，需要標明尺寸規(guī)范，分為不同用途的種類。

 

設計尺寸&柵格系統(tǒng)

設計尺寸，是指進行設計時，選擇的畫板尺寸。例如是 750*1334，還是 375*667，每個公司設計的基準都不一樣，所以設計尺寸并沒有規(guī)定只能用某一個尺寸，我們在設計時，使用的 1 倍圖為基準進行設計的，基準尺寸為 375*667。

柵格系統(tǒng)，是運用固定的格子設計版面布局，在 UI 設計和前端開發(fā)中被廣泛應用的一套體系。在設計尺寸中提到柵格系統(tǒng)，是因為現(xiàn)在的設計基本都是一稿適配多端，而柵格系統(tǒng)能很好的解決這個問題。

△ Christie Tang

柵格系統(tǒng)拓展鏈接：《看不懂不會用的柵格系統(tǒng)，這篇幫你徹底掌握它！》

界面布局

布局是頁面構成的前提，是后續(xù)展開交互和視覺設計的基礎。設計規(guī)范中可以提供常用的布局模板來保證同類產(chǎn)品間的一致性，設計者在選擇布局之前，需要注意以下幾點原則：

• 明確用戶在此場景中完成的主要任務和需獲取的決策信息。
• 明確決策信息和操作的優(yōu)先級及內(nèi)容特點，選擇合理布局。

 

△部分布局類型展示

控件規(guī)范

控件是指產(chǎn)品界面中可操作的部件，與組件是有一些區(qū)別的?？丶g為 Control，組件翻譯為 Component。

通俗的解釋說法就是組件為多個元素組合而成，控件為單一元素組合而成。

常用的 UI 控件（Control）：按鈕、輸入框、下拉列表、下拉菜單、單選框、復選框、選項卡、搜索框、分頁、切換按鈕、步進器、進度條、角標等。

以下列舉一些我們在 APP 設計規(guī)范中整理的內(nèi)容。

1. 按鈕

按鈕有 5 個狀態(tài)：正常、點擊、懸停、加載、禁用。需要在規(guī)范中分別羅列出這五個狀態(tài)，標注上對應的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文本大小、顏色值。如果是圖標按鈕的話，除了上述參數(shù)值以外，還需要標注 icon 和按鈕文本之間的間距，icon 圖標的大小。

 

2. 輸入框

用于單行信息錄入文字上下居中顯示，支持鍵盤錄入和剪切板輸入文本，對特定格式的文本進行處理：密碼隱藏顯示、身份證、卡號分段顯示，標注寬高。

 

3. 選擇

選擇可分為單選與多選，并且也有五種不同狀態(tài)：未選擇、已選中、未選懸停、已選失效、未選失效項。規(guī)范中需展示出所有效果狀態(tài)。

 

4. 選項卡

用于讓用戶在不同的視圖中進行切換。標簽數(shù)量，一般是 2-5 個；其中，標簽中的文案需要精簡，一般是 2-4 個字。每個標簽所占的寬度可適當調整。

 

5. 滑動開關

滑動開關有兩個互斥的選項（例如開/關、是/否、啟動/禁止），它是用來打開或者關閉選項的控件。選擇其中一個選項會立即執(zhí)行操作。

 

6. 進度條

用于向用戶展示步驟的步數(shù)以及當前所處的進程。

 

7. 角標

用于聚合型的消息提示，一般出現(xiàn)在通知圖標或頭像的右上角，通過醒目的視覺形式吸引用戶眼球。

 

組件規(guī)范

常用的 UI 組件（Component）：表格、對話框、提示條、氣泡提示、日期選擇器、多級選擇器、標簽輸入框、組合框、上傳等。△ Ant design 移動組件

在 skecth 中設計時，使用 Symbol 創(chuàng)建的組件，在后期整理時，可以節(jié)省許多的時間。

推薦閱讀：《Sketch 進階教程！利用Symbol 建立一套設計規(guī)范組件庫？》

當然，F(xiàn)igma 也同樣具備這樣的能力，你所創(chuàng)建的組件都存在于 Assets 中。

 

缺省頁面

• 空狀態(tài)頁面：顯示對應的頁面空狀態(tài)的圖標，增加相應的引導按鈕。
• 無網(wǎng)絡狀態(tài)：在沒有連接到網(wǎng)絡時的提示頁面。
• 404&505頁面：發(fā)生未知錯誤時的頁面。

 

規(guī)范優(yōu)先級

了解規(guī)范的內(nèi)容有哪些之后，我們需要確認的是規(guī)范優(yōu)先級，規(guī)范內(nèi)容龐大復雜，基礎的、必要的、高性價比的放在第一個版本中，復雜的往后放，隨著產(chǎn)品的迭代，規(guī)范才會越來越完整。

 

一個好的規(guī)范應該是的、簡單易懂的。具體執(zhí)行時，我們應該確保分類合理、規(guī)范本身保持一致、布局排版易讀，來提升設計師查閱的效率；確保定義清晰、描述準確、場景完備，來幫助設計師理解和使用。但值得注意的是，設計規(guī)范并不是「圣經(jīng)」，不要因為規(guī)范而限制了自己的思維，當發(fā)現(xiàn)規(guī)范有問題的時候，要及時去修正，而不是做了一次之后，一直沿用，永不修改。

以下是藍藍設計（北京蘭亭妙微）給中國移動研究院設計三套軟件，制作的部分UI規(guī)范。