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