乾貨篇，最佳UI設計規範10例
不得不承認，整理設計規範是UI設計師設計能力的一種體現，尤其是便隨項目越來越多的情況下，對設計規範的把控力，成為了設計師職業素養的一種體現。
無論還是處於自己設計創作的階段，還是和程序員溝通推動產品開發的階段，設計規範完善與否，對產品的一致性和用戶體驗有著近乎於決定性的關鍵作用。在UI設計的過程中，設計規範是一個關鍵步驟。
整理設計規範很苦惱？優秀全面的設計規範是什麼樣的？如何通過設計規範提高品牌一致性和推動開發高度還原設計？我們不妨先來看看優秀的設計規範到底是什麼樣子。這裡有我整理的10個設計和質量俱佳的設計規範模板，它們給我帶來了很多啟發，也希望對你有所幫助。
設計規範的組成
制定良好設計規範的第一步就是合理歸類。你需要先明確你需要整理的內容有哪些，這些內容的分類又該怎樣呈現。一般來講，UI設計規範有一下幾大分類：Logo、標準色、字型大小、段落設置、圖標、圖片、間距、圓角值、大小、陰影、組件等。
設計規範10例 （大圖流量君謹慎，文末有打包資源，直接下載，我很勤快了）
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
製作設計規範
還在設計規範文檔？也是很多人還在做著這樣費力不討好的事。相信看了上面的10個案例，你會發現，咦？還像它們都不是手寫出來的呢？
的確，時代進步，高效的設計規範製作工具也頻頻出爐，比如，摩客設計系統。（本人親用，功能尚佳）
1，摹客系統提供設計規範分類大綱
你可以建立多個庫、分類和子分類來進行管理，每個庫里包含2大類資源分類，第一類是文件類資源，其包含Logo、圖片、圖標、組件、字體；第二類是編輯類資源，包括顏色、度量、標準字、陰影。基本滿足了設計師的多種設計類型需求。
設計規範整理和製作過程中，只需要在對應的分來下，自定義添加對應的內容就可以了。
2，對接設計工具Sketch和Mockplus
規範不等同於標註，卻也有一種「限制感」。在這種規範的「束縛」下，優秀的設計師總是可以最大限度的利用可擴展性，做出優秀的設計方案。
但規範還是用來使用的，是一種有效的方法來為你的設計服務。因此規範本身應該是和工具相對接的。做出來的規範如何投入使用，如何才能服務於設計，服務於產品，完成產品體驗的不斷優化，這才是關鍵點。
在摹客設計系統中，對接的設計工具是Mockplus和Sketch。Mockplus是更快更簡單的原型設計工具，而Sketch是一個高效的矢量圖工具。在摹客設計系統中，可以實現設計資源的應用、上傳和推送。也就是說，你可以在Mockplus和Sketch中製作和上傳設計資源，再讓整個團隊分享和利用這些通用資源進行快速設計。而應用決策也很簡潔，只需滑鼠拖拽或者點擊即可應用。這對於快速設計的需求，是極有利的。
3. 輸出和優化
一個規範可能不僅僅是用於設計師之間，還需要對接開發，交付給你的老闆以及第三方工作人員。因此規範的輸出也是至關重要的。在摹客設計系統中，針對團隊內成員，你可以一鍵分享設計規範，對於開發人員，你可以導出CSS、SCSS、LESS，應用到前端開發。當然，你還可以導出如上面分享的各類版式的設計規範圖（UI Style Guide），用於更多的交付對象。
更多呢，還需要你么自己去親自嘗試，時間出真知。希望今天分享的設計規範圖對大家有所啟發啦。
對啦，這裡可以下載更多的設計規範圖哦，我都打包好了。
下載摹客設計系統。
下載Sketch插件。
PS：據悉摹客設計系統上新正在活動進行中。有三大福利享不停！
1，免費贈送摹客（Mockplus+設計系統）專業版半個月！
2，免費幸運抽獎，Airpods、Wacom手繪板、小米手環等你拿！
3，參加設計大賽，曬設計規範，贏iPad Pro！
領取福利快速通道在這裡哦
推薦閱讀：
