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

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

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

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

色彩規(guī)范

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

 

字體規(guī)范

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

 

圖標(biāo)規(guī)范

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

應(yīng)用圖標(biāo)：各種應(yīng)用程序的識別標(biāo)志，在應(yīng)用商店里下載的一些應(yīng)用程序的標(biāo)志。

 

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

 

圖片規(guī)范

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

 

設(shè)計(jì)尺寸&柵格系統(tǒng)

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

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

△ Christie Tang

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

界面布局

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

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

 

△部分布局類型展示

控件規(guī)范

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

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

常用的 UI 控件（Control）：按鈕、輸入框、下拉列表、下拉菜單、單選框、復(fù)選框、選項(xiàng)卡、搜索框、分頁、切換按鈕、步進(jìn)器、進(jìn)度條、角標(biāo)等。

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

1. 按鈕

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

 

2. 輸入框

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

 

3. 選擇

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

 

4. 選項(xiàng)卡

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

 

5. 滑動開關(guān)

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

 

6. 進(jìn)度條

用于向用戶展示步驟的步數(shù)以及當(dāng)前所處的進(jìn)程。

 

7. 角標(biāo)

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

 

組件規(guī)范

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

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

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

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

 

缺省頁面

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

 

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

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

 

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

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