產(chǎn)品發(fā)展日趨平穩(wěn)時，產(chǎn)品定位和品牌形象已進入穩(wěn)定狀態(tài)，參與設(shè)計的人越來越多，設(shè)計的統(tǒng)一性和效率的問題也漸漸顯現(xiàn)。因此，為了保證平臺設(shè)計統(tǒng)一性，提升團隊工作效率，打磨細節(jié)體驗，就需要我們定義和整理設(shè)計規(guī)范。
UI 設(shè)計中，設(shè)計規(guī)范是一個關(guān)鍵步驟。知名大廠基本上都有一套自己的完整規(guī)范體系，在整理設(shè)計規(guī)范時，以大平臺規(guī)范體系作為參考，針對產(chǎn)品自身情況增刪，整理出我們自己所需要的規(guī)范內(nèi)容，能有效地避免規(guī)范內(nèi)容遺漏缺失。
拓展鏈接：各大官網(wǎng)設(shè)計規(guī)范集合
顏色是設(shè)計中最重要的元素，顏色的運用與搭配決定設(shè)計的品質(zhì)感。在 UI 設(shè)計中，顏色的使用規(guī)范主要在于：品牌主色、文本顏色、界面顏色（背景色、線框色）等。
不同的字體氣質(zhì)不一樣，并且不同場景下帶給人的感受也不一樣。所以需要在設(shè)計的時候考慮到字體的設(shè)計效果，然后在設(shè)計規(guī)范中注明。
在 UI 界面中，具有標識性質(zhì)的圖形就是圖標。作為 UI 設(shè)計中重要的設(shè)計模塊，產(chǎn)品的每個頁面中都有可能存在圖標。設(shè)計規(guī)范中，圖標一般按照用途分為兩類：應(yīng)用圖標、功能圖標。
應(yīng)用圖標：各種應(yīng)用程序的識別標志，在應(yīng)用商店里下載的一些應(yīng)用程序的標志。
功能圖標：規(guī)范中最好標明圖標格式與使用方式。比如 Web 設(shè)計，圖片可以使用 iconfont 管理，可生成代碼交付給前端開發(fā)；如果是原生 APP，那么需要標注圖標導出格式與尺寸。
圖片作為界面設(shè)計的重要組成部分，需要標明尺寸規(guī)范，分為不同用途的種類。
設(shè)計尺寸，是指進行設(shè)計時，選擇的畫板尺寸。例如是 750*1334，還是 375*667，每個公司設(shè)計的基準都不一樣，所以設(shè)計尺寸并沒有規(guī)定只能用某一個尺寸，我們在設(shè)計時，使用的 1 倍圖為基準進行設(shè)計的，基準尺寸為 375*667。
柵格系統(tǒng)，是運用固定的格子設(shè)計版面布局，在 UI 設(shè)計和前端開發(fā)中被廣泛應(yīng)用的一套體系。在設(shè)計尺寸中提到柵格系統(tǒng)，是因為現(xiàn)在的設(shè)計基本都是一稿適配多端，而柵格系統(tǒng)能很好的解決這個問題。
△ Christie Tang
柵格系統(tǒng)拓展鏈接：《看不懂不會用的柵格系統(tǒng)，這篇幫你徹底掌握它！》
布局是頁面構(gòu)成的前提，是后續(xù)展開交互和視覺設(shè)計的基礎(chǔ)。設(shè)計規(guī)范中可以提供常用的布局模板來保證同類產(chǎn)品間的一致性，設(shè)計者在選擇布局之前，需要注意以下幾點原則：
- 明確用戶在此場景中完成的主要任務(wù)和需獲取的決策信息。
- 明確決策信息和操作的優(yōu)先級及內(nèi)容特點，選擇合理布局。
△部分布局類型展示
控件是指產(chǎn)品界面中可操作的部件，與組件是有一些區(qū)別的。控件翻譯為 Control，組件翻譯為 Component。
通俗的解釋說法就是組件為多個元素組合而成，控件為單一元素組合而成。
常用的 UI 控件（Control）：按鈕、輸入框、下拉列表、下拉菜單、單選框、復選框、選項卡、搜索框、分頁、切換按鈕、步進器、進度條、角標等。
以下列舉一些我們在 APP 設(shè)計規(guī)范中整理的內(nèi)容。
1. 按鈕
按鈕有 5 個狀態(tài)：正常、點擊、懸停、加載、禁用。需要在規(guī)范中分別羅列出這五個狀態(tài)，標注上對應(yīng)的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文本大小、顏色值。如果是圖標按鈕的話，除了上述參數(shù)值以外，還需要標注 icon 和按鈕文本之間的間距，icon 圖標的大小。
2. 輸入框
用于單行信息錄入文字上下居中顯示，支持鍵盤錄入和剪切板輸入文本，對特定格式的文本進行處理：密碼隱藏顯示、身份證、卡號分段顯示，標注寬高。
3. 選擇
選擇可分為單選與多選，并且也有五種不同狀態(tài)：未選擇、已選中、未選懸停、已選失效、未選失效項。規(guī)范中需展示出所有效果狀態(tài)。
4. 選項卡
用于讓用戶在不同的視圖中進行切換。標簽數(shù)量，一般是 2-5 個；其中，標簽中的文案需要精簡，一般是 2-4 個字。每個標簽所占的寬度可適當調(diào)整。
5. 滑動開關(guān)
滑動開關(guān)有兩個互斥的選項（例如開/關(guān)、是/否、啟動/禁止），它是用來打開或者關(guān)閉選項的控件。選擇其中一個選項會立即執(zhí)行操作。
6. 進度條
用于向用戶展示步驟的步數(shù)以及當前所處的進程。
7. 角標
用于聚合型的消息提示，一般出現(xiàn)在通知圖標或頭像的右上角，通過醒目的視覺形式吸引用戶眼球。
常用的 UI 組件（Component）：表格、對話框、提示條、氣泡提示、日期選擇器、多級選擇器、標簽輸入框、組合框、上傳等。△ Ant design 移動組件
在 skecth 中設(shè)計時，使用 Symbol 創(chuàng)建的組件，在后期整理時，可以節(jié)省許多的時間。
推薦閱讀：《Sketch 進階教程！利用Symbol 建立一套設(shè)計規(guī)范組件庫？》
當然，F(xiàn)igma 也同樣具備這樣的能力，你所創(chuàng)建的組件都存在于 Assets 中。
- 空狀態(tài)頁面：顯示對應(yīng)的頁面空狀態(tài)的圖標，增加相應(yīng)的引導按鈕。
- 無網(wǎng)絡(luò)狀態(tài)：在沒有連接到網(wǎng)絡(luò)時的提示頁面。
- 404&505頁面：發(fā)生未知錯誤時的頁面。
了解規(guī)范的內(nèi)容有哪些之后，我們需要確認的是規(guī)范優(yōu)先級，規(guī)范內(nèi)容龐大復雜，基礎(chǔ)的、必要的、高性價比的放在第一個版本中，復雜的往后放，隨著產(chǎn)品的迭代，規(guī)范才會越來越完整。
一個好的規(guī)范應(yīng)該是的、簡單易懂的。具體執(zhí)行時，我們應(yīng)該確保分類合理、規(guī)范本身保持一致、布局排版易讀，來提升設(shè)計師查閱的效率；確保定義清晰、描述準確、場景完備，來幫助設(shè)計師理解和使用。但值得注意的是，設(shè)計規(guī)范并不是「圣經(jīng)」，不要因為規(guī)范而限制了自己的思維，當發(fā)現(xiàn)規(guī)范有問題的時候，要及時去修正，而不是做了一次之后，一直沿用，永不修改。
以下是藍藍設(shè)計（北京蘭亭妙微）給中國移動研究院設(shè)計三套軟件，制作的部分UI規(guī)范。 
藍藍設(shè)計(tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司、銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)