超全面的 UI 工作流程指南（三）：設計規範

產品發展日趨平穩時，產品定位和品牌形象已進入穩定狀態，參與設計的人越來越多，設計的統一性和效率的問題也漸漸顯現。因此，為了保證平臺設計統一性，提升團隊工作效率，打磨細節體驗，就需要我們定義和整理設計規範。

確定規範內容

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

色彩規範

顏色是設計中最重要的元素，顏色的運用與搭配決定設計的品質感。在 UI 設計中，顏色的使用規範主要在於：品牌主色、文字顏色、介面顏色（背景色、線框色）等。

字型規範

不同的字型氣質不一樣，並且不同場景下帶給人的感受也不一樣。所以需要在設計的時候考慮到字型的設計效果，然後在設計規範中註明。

圖示規範

在 UI 介面中，具有標識性質的圖形就是圖示。作為 UI 設計中重要的設計模組，產品的每個頁面中都有可能存在圖示。設計規範中，圖示一般按照用途分為兩類：應用圖示、功能圖示。

應用圖示：各種應用程式的識別標誌，在應用商店裡下載的一些應用程式的標誌。

功能圖示：規範中最好標明圖示格式與使用方式。比如 Web 設計，圖片可以使用 iconfont 管理，可生成程式碼交付給前端開發；如果是原生 APP，那麼需要標註圖示匯出格式與尺寸。

圖片規範

圖片作為介面設計的重要組成部分，需要標明尺寸規範，分為不同用途的種類。

設計尺寸&柵格系統

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

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

介面佈局

佈局是頁面構成的前提，是後續展開互動和視覺設計的基礎。設計規範中可以提供常用的佈局模板來保證同類產品間的一致性，設計者在選擇佈局之前，需要注意以下幾點原則：

明確使用者在此場景中完成的主要任務和需獲取的決策資訊。

明確決策資訊和操作的優先順序及內容特點，選擇合理佈局。

控制元件規範

控制元件是指產品介面中可操作的部件，與元件是有一些區別的。控制元件翻譯為 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 建立的元件，在後期整理時，可以節省許多的時間。

當然，Figma 也同樣具備這樣的能力，你所建立的元件都存在於 Assets 中。

預設頁面

空狀態頁面：顯示對應的頁面空狀態的圖示，增加相應的引導按鈕。

無網路狀態：在沒有連線到網路時的提示頁面。

404&505頁面：發生未知錯誤時的頁面。

規範優先順序

瞭解規範的內容有哪些之後，我們需要確認的是規範優先順序，規範內容龐大複雜，基礎的、必要的、高性價比的放在第一個版本中，複雜的往後放，隨著產品的迭代，規範才會越來越完整。

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

這裡推薦一個國內的設計規範：摹客設計系統

地址：https：//www。mockplus。cn/download/ds-sketch