提起”設計規範“這個詞語，許多UI設計師都一臉懵逼，更不用說那些UI設計新手了。而這個在國人眼中看似“陌生”的詞彙，卻已在國外盛行已久。到底什麼是設計規範呢？為什麼要做設計規範？如何構建一套設計規範呢？本文將為UI設計新手一一解惑。
1.什麼是設計規範？
為了確定國內設計師是否真的瞭解“設計規範”，小編特地在各大UI設計群中甩出了一個問題：“什麼是設計規範？” 這些平日裡活躍異常的群，竟陷入了一片沉寂。只有幾個混跡江湖的老UI悠悠地給出回應，至於具體釋義嘛，最後也沒人說出個所以然來。
所以，到底什麼是設計規範？
“設計系統提供了由個人，團隊或企業編寫和釋出的視覺樣式，元件和其他資源庫。它為開發和設計之間建立了溝通的橋樑，以便在設計產品時更高效和更具凝聚力。” - Nathan Curtis
簡而言之，設計系統就是對一定數量的可複用設計資源進行規範，在多設計師協作的設計專案進行量化和約束。從視覺的角度來說就是一個素材庫，產品有什麼樣的視覺呈現和元素定義，都有可遵循的標準。
2.為什麼要構建設計規範？
既然已經瞭解了“設計規範”的含義，那麼我們為什麼要構建設計規範呢？僅僅是為了建立企業品牌形象？當然不是！對於不同的團隊或企業來說，構建設計規範的原因各有不同。小編整理後歸納為以下這些方面：
減少設計錯誤 - 建立通用的設計細節標準，可以減少新手設計師出錯的次數
減少辯論 - 無需浪費時間重新訪問同一元件的設計決策
快速複用- 幫助組內設計師快速複用基礎元件
方便協作 - 改善遠端和在異地辦公合作設計的窘境，實現快速協作
減少溝通成本 - 降低產品與開發的溝通成本
統一產品 - 幫助統一產品的UI風格及使用者體驗
專注於使用者體驗 - 使用統一的設計規範讓設計師和產品經理有更多的精力專注於使用者體驗設計
有助產品優化 - 設計規範在沉澱優秀設計的同時，可以推進產品的持續優化
3. 如何構建一套設計規範？
設計規範對於團隊和企業的重要性想必大家也有了一定的瞭解。那麼作為一名UI設計新手，如何才能掌握構建設計規範的技巧？小編以摹客設計系統的使用為例，為各位設計新手作簡單介紹。
（PS：小編用的這款是最近剛上線的摹客設計系統，個人感覺比較簡單易操作，適合UI設計新手及設計師使用。）
構建思路：
a. 熟悉所設計的產品，確立設計規範方向
b. 在主要介面和柵格定稿後，梳理出主要模組
c. 建立基礎控制元件的規範，並定義使用場景和樣式
d. 規範字號、色值、圖示尺寸等基礎尺寸、間距、位置等資訊
e. 建立設計 – 研發對照表
f. 建立設計資源輸出規範
構建步驟：
Step 1： 建立設計資源庫
開啟設計系統平臺，點選新建資源庫，這裡有自定義資源庫和示例庫可供選擇。選擇完畢後，設定資源庫名稱，點選建立。
Step 2 : 確定資源庫的主要模組
進入資源庫以後，根據自己的產品主要介面設計確定資源庫的主要板塊。常見的顏色，字型，Logo,元件和度量都可以進行新增規範，除此之外，這個平臺還提供了圖片，陰影等共9種設計資源。
Step 3：建立基礎的資源規範
通過設計平臺中的“+”按鈕，可根據提示進行資源的新增。對於習慣使用Sketch的設計師來說，可以先在Sketch中對資源進行編輯，然後在開啟Mockplus X 外掛點選新增資源，即可與Mockplus設計平臺的資源庫實時同步。其他的資源建立方式相同，就不再一一贅述了。
（PS：有使用Mockplus這款原型工具的朋友,也可以在Mockplus中上傳和應用設計資源。）
Step 4： 共享設計資源庫
在完成設計資源庫後，可以開啟分享功能與小夥伴共享成果；或者分享給有經驗的設計師聽取一些意見。點選設計平臺右上角的分享按鈕，設定分享密碼後，勾選“啟用此分享”；然後複製分享連結傳送給你的小夥伴，輸入檢視密碼即可觀看你的設計規範了。
Step 5 ： 匯出樣式程式碼（讓開發更懂你的設計）
點選設計平臺的右上角箭頭按鈕，即可匯出樣式程式碼，目前該平臺支援CSS, SCSS及LESS三種程式碼樣式的匯出。
Step 6: 匯出PDF/圖片
在完成上述操作及設計資源的上傳後，是時候展示你的成果了。點選“匯出圖片”或“PDF”，就可以隨時隨地共享你的設計規範了。
總結
隨著設計行業的不斷髮展，設計規範扮演著越來越重要的角色，甚至成為UI設計師必須掌握的技能之一。作為一名UI設計新手，如何才能掌握設計規範？你必須瞭解什麼是設計規範，明白設計規範的重要性以及如何構建它。掌握了這三件事，你就掌握了設計規範！