以下內容由摹客團隊翻譯整理，僅供學習交流。摹客Mockplus是快速的原型設計工具。摹客iDoc是高效的在線協作設計平臺。
現如今，企業產品部門劃分越來越多，分工越來越細，想要打造美觀一致的產品和界面設計，就需要各個部門共同遵守統一的設計規範。
但是，究竟如何才能從零開始快速搭建統一的設計規範系統呢？不用擔心。本文將爲大家詳細介紹UI設計系統搭建的6個主要步驟， 供設計師們參考和借鑑：
首先，什麼是UI設計系統？
UI設計系統是一整套軟件設計和開發的標準，用以定義和統一界面上各個組件的樣式和規範，引導產品團隊快速構建應用程序， 聚合並使用各類設計資源。所以，UI設計系統，既是設計團隊完成UI設計的說明書，也是開發團隊編碼和實現設計的重要資源庫。
UI設計系統爲什麼如此重要？
衆所周知，公司內部各個產品以及界面要保持風格樣式一致，其實是非常困難的。但保持設計統一卻又非常關鍵，它不單單帶來整齊和諧的視覺感受，還能幫助用戶形成一定使用習慣，無形中熟記專屬於該公司產品的設計語言，從而輕鬆提高其品牌辨識度。
如何從頭快速搭建UI設計系統？
從零開始搭建UI設計系統，最簡單的方法就是快速創建一個包含所有設計素材的資源庫， 例如一個包含配色、文本樣式、切圖以及頁面模式等資源的庫。而且，這個資源庫還需要清晰定義和呈現設計（例如網頁或App設計）中所有的組件。
總之，從這個角度來講，在沒有使用任何工具幫助的情況下，設計系統構建是一條漫長的路。需要各個部門和成員通力合作，共同完成。決不能輕易放棄。
下面我們就一起來看看，如何一步步快速搭建設計系統吧：
第一步，創建情緒板（Moodboard）和配色
爲快速統一產品界面主體風格，定義各個產品外觀，我們可以首先嚐試構建相關情緒板和配色。例如，將日常設計中遇到的各類優質UI、創意滿滿的產品設計以及圖片等拼貼到情緒板。如此，需要時，就可直接從情緒板中挑選合適的配色或尋求設計靈感。
此外，情緒板搭建過程中，也需詳細列出各類顏色的原色、間色以及複色。報錯和成功提示的配色、 色調明暗和灰階等，也需囊括在內。而且，UI設計過程中，大都需要包含以下幾種灰階：
- 非常淺的灰色，常見於界面背景設計
- 稍暗的灰色，常用於邊框、線條、筆畫以及分隔器設計
- 中灰色，常見於副標題和次級文本設計
- 深灰色，多用於界面主標題、正文和背景設計
總之，我們需要爲每種顏色添加不同色調、明暗和灰階，設計過程中，才能根據需要隨時取用，豐富界面設計。
第二步，規範邊框圓角和陰影
設置好配色之後，我們需要規範UI中邊框的圓角和陰影。通常，圓角與界面卡片和圖表之類組件設計密切相關，影響着界面的整體外觀和用戶的視覺體驗。然而，邊框圓角的弧度究竟該設爲多大才合適呢？
一般而言，這取決於我們想要帶給用戶怎樣的情感體驗。圓角弧度越大，邊框就會越圓，看起來就會更加可愛、友好。相反，弧度越小，邊框就會越方正，看起來就會更加嚴肅、正式。 所以，邊框的圓角設計的建議是：請儘量將其弧度設置在2到8個像素之間。
陰影，主要用於展現設計中組件的厚度和透視效果。最近， 也時常用於區分界面的多個組件元素。 而設計系統搭建過程中，我們嘗試從下面四個類別定義UI中的所有陰影設計：
- 淺色陰影，用以突出交互組件，並提供一定視覺暗示，引導用戶點擊交互
- 稍微明顯的陰影，用以設計交互懸停特效
- 一目瞭然的陰影，爲下拉菜單、彈出窗口以及其它類似組件打造透視效果。
- 深色陰影，輕鬆打造界面佈局類組件，呈現界面整體結構佈局。
第三步，定義文本字體尺寸
擁有優質用戶體驗的UI設計，大都具有清晰的層級結構，尤其是界面層級分明的標題結構。而想要打造統一的設計系統，字體大小和標題層級也需要進行統一規範。
通常，我們需要定義以下級別的字體尺寸：
- 默認字體尺寸（例如CSS中默認的字體尺寸：1 em）, 常作爲營銷類網頁和界面的通用字體尺寸。而16 px則是各大瀏覽器默認的字體尺寸。設計規範搭建過程中，可直接添加到規範庫中。
- 稍大的字體尺寸，用以定義界面博客文字內容。
- 再大一些的字體尺寸，用以定義界面標題和附標題。
- 較大的字體尺寸，用以定義區域模塊的標題。
- 超大的字體尺寸， 例如用以定義定價頁面上價格的文本字體尺寸。
- 最後，還需添加更小的字體尺寸，用以定義界面次級內容、輸入提示以及其它次要信息。
第四步，統一界面圖標
設計規範系統，也需要統一圖標，確保界面所有圖標都具有相似或相同的風格樣式。而對於設計初學者而言，他們可以嘗試使用免費的圖標素材包。如此，既能省掉製作設計圖標的時間，又能輕鬆確保各個界面的統一性。
第五步，規範界面按鈕、滑塊和進度條
按鈕是UI設計中最重要的組件之一。用戶點擊即可實現購買和閱讀詳情等操作。爲提升用戶點擊率，按鈕需要根據實際功能進行設計，易於用戶查找和識別，並能夠清楚指明點擊後可實現的操作。
而且，UI設計過程中，包含很多種按鈕。按鈕的各種狀態設計也不可或缺。
而以下是UI設計中比較常見的按鈕種類：
- 命令按鈕
- 單選按鈕
- 複選框
- 導航按鈕
設計系統中的滑塊和加載進度相關規範的添加，能夠輕鬆定義UI設計中滑動條和進度條之類組件的樣式，讓產品設計更加美觀統一。
第六步，定義下拉菜單、標籤和彈窗（以及其他複雜組件）
到目前爲止，我們已經設置好了一套最基本的設計規範系統。利用此規範系統，我們還能夠定義其它更加複雜的組件，例如菜單、標籤和彈窗等。而且，設計規範標準不同，所能打造的此類組件也會不同。
以上就是設計系統搭建的的基本步驟，希望能夠對大家有所幫助。當然， 實際設計案例中，根據不同設計需求，設計團隊也可添加更多類別的設計規範，打造其專屬的設計系統。總之，設計系統搭建，請儘量保證其結構清晰且簡潔易懂，以方便各個部門隨時取用。
優質高效的設計系統構建和管理工具
如上所述，在沒有任何工具的協作下，即使是公司所有設計團隊都參與進來，整個設計系統搭建過程也並不簡單。究竟，如何才能快速、優質且高效的構建並管理設計系統呢？這裏爲大家推薦一款非常實用的工具——Mockplus DS設計系統。
Mockplus DS設計系統是一款在線的設計規範定製和管理工具，允許公司各個設計部門在線實時協作構建、分享、使用和管理統一的UI設計規範。支持8種設計資源上傳和管理，例如圖片、Logo、字體、顏色、陰影、圖標、組件等。支持多種方式導出和應用。團隊各成員可輕鬆在線編輯，一鍵分享同步。團隊共建，實時共享設計資源。
結語
統一的設計規範系統是企業打造專屬產品設計語言， 加快產品設計、測試以及開發流程，提高產品知名度和辨識度的重要手段。無論是手動搭建，還是利用工具在線搭建，都需要各部門和成員通力合作，各司其職，堅持不懈。
作者：Rahul Goradia
原文鏈接: https://medium.muz.li/creating-a-ui-component-design-system-step-by-step-guide-5c18b5a2f529
