知道這三件事，UI設計新手就能掌握設計規範

提起」設計規範「這個詞語，許多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設計新手，如何才能掌握設計規範？你必須瞭解什麼是設計規範，明白設計規範的重要性以及如何構建它。掌握了這三件事，你就掌握了設計規範！