免費使用摹客設計系統(tǒng)作為UI設計師山卦，整理設計規(guī)范也是設計能力的一種體現。所以，無論是自己設計創(chuàng)作的階段還是和程序員溝通推動產品開發(fā)階段夺荒，你的設計規(guī)范是否完善，對產品的質量起著決定性的關鍵作用良蒸。
在UI設計的過程中技扼，設計規(guī)范是一個關鍵步驟。如何通過設計規(guī)范提高品牌一致性和推動開發(fā)高度還原設計嫩痰？
這里剿吻，為大家整理了20個設計精細并且優(yōu)質的設計規(guī)范模板，干貨多多串纺，有助于你整理設計規(guī)范的時候理清思路丽旅，完善細節(jié)。
Alt:設計規(guī)范模板展示
先為大家整理了設計規(guī)范中的分類情況纺棺，UI設計規(guī)范有幾大分類組成榄笙，分別是：Logo、標準色祷蝌、字號茅撞、段落設置、圖標巨朦、圖片米丘、間距、圓角值罪郊、大小蠕蚜、陰影、組件等悔橄。
1.Logo
品牌印象的直接感受靶累，根據頁面不同背景所使用的Logo圖也不同腺毫。將產品中所使用到的Logo統(tǒng)一分類，以下引用Moby's Petshop UI? Style?Guide的Logo資源例舉說明挣柬。Moby's Petshop UI 的Logo由圖形和文字組合而成潮酒，而品牌色為藍色，Logo的使用也需要考慮到Footer黑色背景下的Logo邪蛔。所以用Logo的橫豎向排版和單個Logo圖形來分類更好急黎。分類里面則展現品牌色的Logo、品牌色背景的Logo侧到、Footer黑色背景的Logo勃教。
Alt:Logo分類
2.標準色
顏色是設計最重要的部分，沒有之一匠抗。細節(jié)決定品質故源，所以對顏色的運用格外細致，顏色的搭配直接決定產品的品質感汞贸。顏色大致可分為品牌色绳军、文本顏色、背景色矢腻、線框色等门驾。給顏色添加關鍵詞，明確用于什么界面多柑。以下引用real-pixels UI Style? Guide的顏色規(guī)范奶是，可以借鑒的是每個顏色不僅標注了顏色值，而且右側給出了顏色使用的場景顷蟆，值得借鑒的是按鈕Normal狀態(tài)和Hover狀態(tài)的顏色值放在一起诫隅，這樣腐魂，對不同狀態(tài)顯示的顏色感受更直觀帐偎。
Alt:Colors設計規(guī)范
?對顏色值統(tǒng)一規(guī)范命名變量，提高開發(fā)效率的同時更好的維護設計規(guī)范蛔屹。
Alt:顏色名編號
在前端開發(fā)中削樊，對顏色值進行編號，這樣對代碼也有著極大的優(yōu)化兔毒。定義一個設計規(guī)范的CSS樣式庫漫贞，開發(fā)過程中就不用重復修改CSS參數值，直接引用定義好的變量名就可以育叁，這樣修改設計規(guī)范的成本大大降低迅脐。
3.字體
字體是設計中必不可少的考慮因素，不同的字體氣質不一樣豪嗽，并且不同場景下帶給人的感受也不一樣谴蔑。所以需要在設計的時候考慮到字體的設計效果豌骏，然后在設計規(guī)范中注明。以下引用的是Retail?Banking? Service? UI?Style? Guide中的字體規(guī)范隐锭。在定義字體名稱的同時也定義了字體的風格窃躲，并且添加了不同字體風格的預覽效果，常見的字體風格有：Light钦睡、Regular蒂窒、Italic、Semibold荞怒、Bold洒琢。
Alt:字體設計規(guī)范
4.段落設置
在實際的產品設計中，段落有很多種樣式褐桌，不同場景下的段落要求也不一樣纬凤。比如，閱讀內容的段落要求文本可閱讀性強撩嚼，所以對字體停士、字號、顏色完丽、行間距等要求簡單易讀恋技。而帶有裝飾性的段落文本則不需要那么嚴謹，裝飾性強就可以逻族。需要注意的是在定義段落默認字體的時候還需要定義一個后備字體蜻底，即默認字體不能正常顯示情況下顯示的字體。設計的水平層次就在于對細節(jié)的打磨聘鳞，這也就是段落規(guī)范在設計中存在的意義薄辅。
Alt:段落設計規(guī)范
5.圖標
圖標是重要的軟件標識，在設計資源中是最重要的模塊之一抠璃。在軟件產品中甚至可能每個頁面都存在圖標站楚，圖標除了美化的作用以外，還有著明確指代含義的計算機圖形搏嗡。具體分為以下三個作用：1. 圖標是與其它網站鏈接以及讓其它網站鏈接的標志和門戶窿春。2. 圖標是網站形象的重要體現。3. 圖標能使受眾便于選擇采盒。根據圖標大小和使用用途進行分類整理設計規(guī)范旧乞，這樣才更清晰明了。
Alt:圖標分類整理
Alt:圖標分類整理
6.圖片
圖片也是屬于設計規(guī)范最重要的部分之一磅氨，按照用途分類整理圖片資源尺栖，設計風格系統(tǒng)化。
Alt:圖片Banner
Alt:圖片分類
7.度量
在設計的過程中烦租，我們經常會使用一套規(guī)范的度量標準延赌，來保持產品的一致性货徙，分別為圓角值、間距皮胡、大小痴颊。
對度量解釋最好的是設計中經常使用到的柵格系統(tǒng)（Grid Systems），運用固定的格子設計版面布局屡贺，其風格工整簡潔蠢棱。
這就是我們在網頁和APP設計的過程中經常使用到柵格系統(tǒng)的原因。
Alt:手機網頁柵格系統(tǒng)
Alt:柵格系統(tǒng)大小和間距的定義
8.陰影
陰影風格及參數也是設計規(guī)范中的一部分甩栈。在整理設計規(guī)范的時候泻仙，需要注意的是陰影的參數值是網頁中控制陰影的參數值，而不是設計軟件中的參數值量没。舉個例子玉转，網頁中陰影對應的參數值為：box-shadow:?type:Outset?? offset X:0px?? offset Y:4px?? Blur:8px??Spread:0px??? color:#000000?? 不透明度：10%，這才是程序員需要的陰影參數值殴蹄，否則最終開發(fā)出來的陰影會出現不一致的情況究抓，無法達到規(guī)范的目的。
Alt:陰影參數
9.組件
常用的UI組件（Component）：
Button控件袭灯、下拉框刺下、選擇框（單選\復選框）、時間選擇器稽荧、輸入框橘茉、搜索框、進度條姨丈、分頁器畅卓、提示框、警告框蟋恬、表格翁潘、彈出面板、數字步進器筋现、選項卡等唐础。
Button控件
按鈕是最常見的組件之一，按鈕有5個狀態(tài)：1.Normal?2.Hover? 3.Active ??4.Disabled?5.Loading矾飞。需要在規(guī)范中分別羅列出這五個狀態(tài)，標注上對應的按鈕填充色呀邢、邊框色洒沦、圓角值、按鈕寬度和高度价淌，按鈕文本大小申眼、顏色值瞒津。如果是圖標按鈕的話，除了上述參數值以外還需要標注icon和按鈕文本之間的間距和icon圖標的大小括尸。
Alt:按鈕設計規(guī)范
下拉框
下拉框是為用戶提供多個選擇的單選組件巷蚪，優(yōu)點是用最簡單的界面布局方式收納了很多的選項，需要注意定義下拉選擇框彈出的時候濒翻，鼠標移動上去的Normal屁柏、Hover、Active狀態(tài)有送。
Alt:下拉框設計規(guī)范
選擇框（單選\復選框）
顧名思義淌喻，單選框是眾多選擇里面選一個，而復選框是眾多選擇里面可以無限制選擇雀摘。單選框和復選框都需要三個狀態(tài)裸删，即未選中狀態(tài)、選中狀態(tài)和不可點擊狀態(tài)阵赠。
Alt:單選框/復選框設計規(guī)范
時間選擇器
時間選擇器是選擇年月日的組件涯塔，分別對應年月日星期的信息，在設計的時候需要考慮到4個狀態(tài)清蚀，分別是Select伤塌、Not_Select、Hover和Disable轧铁，并且寫進設計規(guī)范每聪。
Alt:時間選擇器設計規(guī)范
輸入框
輸入文本框是我們軟件產品設計必不可少的組件，文本輸入框有4個狀態(tài)齿风，Normal药薯、Active、Disable和Error救斑。
Alt:輸入框設計規(guī)范
搜索框
和輸入框相同的地方是都需要聚焦然后輸入內容完成操作童本，應該有為Normal、Active脸候、搜索下拉狀態(tài)穷娱、Error狀態(tài)。
Alt:搜索框正常狀態(tài)和下拉選擇狀態(tài)
Alt:搜索框自動完成狀態(tài)
Alt:搜索欄多個選擇狀態(tài)
進度條
這個需要在規(guī)范中注明上傳進度條的整個交互操作流程运沦，對Normal狀態(tài)泵额、點擊上傳/拖拽上傳狀態(tài)、上傳中携添、上傳成功嫁盲、上傳失敗烈掠，整個流程狀態(tài)的整理缸托。在上傳過程中，任何用戶操作都應該有及時響應的動作俐镐，這樣用戶在使用的過程中才不會迷茫。
Alt:進度條的操作流程狀態(tài)
分頁器
分頁器是用于切換內容頁面的復合組件佩抹，常規(guī)的分頁器有上下頁操作按鈕呛凶、分頁頁碼按鈕剔交、輸入頁碼手動查找的搜索框或辖，以及分頁器的4個狀態(tài)：1.Normal?2.Hover? 3.Active ??4.Disabled 滑进。
Alt:分頁器設計規(guī)范
提示框
提示框是一個事件觸發(fā)彈出面板顯示的組件搬男。經常使用提示框的地方是经窖，刪除按鈕坡垫、疑難問題點、提示類彈出信息等画侣。這個風格設計就比較多了冰悠，設計風格各不相同。定義底板樣式配乱、文字樣式和陰影參數溉卓。
Alt:提示框設計規(guī)范
警告框
頁面報錯時的顯示樣式。常用的警告類信息是：1.操作成功2.提醒用戶注意3.警告用戶注意等搬泥。
Alt:警告框設計規(guī)范
表格
表格類信息居多桑寨，應重點整理表格樣式以及文本顏色大小。
Alt:表格設計規(guī)法
彈出面板
彈出面板主要由4個部分組成忿檩，分別是面板內的文本信息尉尾、按鈕、面板大小樣式燥透、蒙版顏色和透明度沙咏。
Alt:彈出面板設計規(guī)范
數字步進器
數字步進器屬于復合類型的組件，可以理解為按鈕和輸入框聯(lián)動的組件班套。所以輸入框和按鈕擁有的屬性狀態(tài)肢藐，步進器都有。
Alt:數字步進器設計規(guī)范
選項卡
切換選項卡即切換內容孽尽，和下拉選擇框不同的是窖壕，選項卡是將多個選項都排列出來的單選組件，需要考慮4個狀態(tài)：1.Normal?2.Hover? 3.Active ??4.Disabled 杉女。
Alt:選項卡設計規(guī)范
設計規(guī)范對整個項目的規(guī)范性推動很強大瞻讽，但是需要花時間和耐心細心打磨，所以需要花費很多時間和精力去整理資料熏挎，編輯素材速勇，分類整合，最后還要在設計軟件中將整個規(guī)范重新排列設計坎拐。傳統(tǒng)意義上的設計規(guī)范相當繁瑣烦磁，并且樣式參數值不可復用，和程序對接為0都伪，不能“承上啟下”积担，這也是很多設計師的痛點，所以急需一款走在前沿的設計規(guī)范神器先誉。而摹客設計系統(tǒng)就是為設計師而生的烁，國內獨家首發(fā)。
在云端高效管理你的設計資源铃芦〗罄祝可以直接在Mockplus和Sketch中，將設計元素上傳到設計系統(tǒng)形成規(guī)范注盈，也可將庫中的設計資源快速應用到Mockplus和Sketch的設計中叙赚，并自動同步更新。所以多人協(xié)作胧砰、可重復復用同一套標準尉间。還可使用精美模板導出PDF或者PNG等圖片模式的設計規(guī)范（UI Style Guide）。同時贪薪，摹客設計系統(tǒng)可以導出CSS眠副、SCSS、LESS應用到前端開發(fā)霍弹。
文末福利：
原型設計工具——摹客Mockplus；
摹客 --- 從設計到開發(fā)耍缴，只要一個文檔的協(xié)作工作平臺齐佳。
UI/UE/UX設計師：可將Sketch、PS本鸣、XD的設計原稿一鍵上傳荣德，標注切圖自動生成童芹；
產品經理：多種批注樣式，快速制作交互署咽；
前端開發(fā)：輕松查看智能標注生音、下載切圖，自動導出CSS代碼慕匠。
免費體驗地址：https://app.mockplus.cn/
