最佳設計規範20例

無償使用摹客設計系統做爲UI設計師，整理設計規範也是設計能力的一種體現。因此，不管是本身設計創做的階段仍是和程序員溝通推進產品開發階段，你的設計規範是否完善，對產品的質量起着決定性的關鍵做用。

在UI設計的過程當中，設計規範是一個關鍵步驟。如何經過設計規範提升品牌一致性和推進開發高度還原設計？

這裏，爲你們整理了20個設計精細而且優質的設計規範模板，乾貨多多，有助於你整理設計規範的時候理清思路，完善細節。

Alt:設計規範模板展現

先爲你們整理了設計規範中的分類狀況，UI設計規範有幾大分類組成，分別是：Logo、標準色、字號、段落設置、圖標、圖片、間距、圓角值、大小、陰影、組件等。

1.Logo

品牌印象的直接感覺，根據頁面不一樣背景所使用的Logo圖也不一樣。將產品中所使用到的Logo統一分類，如下引用Moby's Petshop UI Style Guide的Logo資源例舉說明。Moby's Petshop UI 的Logo由圖形和文字組合而成，而品牌色爲藍色，Logo的使用也須要考慮到Footer黑色背景下的Logo。因此用Logo的橫豎向排版和單個Logo圖形來分類更好。分類裏面則展示品牌色的Logo、品牌色背景的Logo、Footer黑色背景的Logo。

Alt:Logo分類

2.標準色

顏色是設計最重要的部分，沒有之一。細節決定品質，因此對顏色的運用格外細緻，顏色的搭配直接決定產品的品質感。顏色大體可分爲品牌色、文本顏色、背景色、線框色等。給顏色添加關鍵詞，明確用於什麼界面。如下引用real-pixels UI Style Guide的顏色規範，能夠借鑑的是每一個顏色不只標註了顏色值，並且右側給出了顏色使用的場景，值得借鑑的是按鈕Normal狀態和Hover狀態的顏色值放在一塊兒，這樣，對不一樣狀態顯示的顏色感覺更直觀。

Alt:Colors設計規範

對顏色值統一規範命名變量，提升開發效率的同時更好的維護設計規範。

Alt:顏色名編號

在前端開發中，對顏色值進行編號，這樣對代碼也有着極大的優化。定義一個設計規範的CSS樣式庫，開發過程當中就不用重複修改CSS參數值，直接引用定義好的變量名就能夠，這樣修改設計規範的成本大大下降。

3.字體

字體是設計中必不可少的考慮因素，不一樣的字體氣質不同，而且不一樣場景下帶給人的感覺也不同。因此須要在設計的時候考慮到字體的設計效果，而後在設計規範中註明。如下引用的是Retail Banking Service UI Style Guide中的字體規範。在定義字體名稱的同時也定義了字體的風格，而且添加了不一樣字體風格的預覽效果，常見的字體風格有：Light、Regular、Italic、Semibold、Bold。

Alt:字體設計規範

4.段落設置

在實際的產品設計中，段落有不少種樣式，不一樣場景下的段落要求也不同。好比，閱讀內容的段落要求文本可閱讀性強，因此對字體、字號、顏色、行間距等要求簡單易讀。而帶有裝飾性的段落文本則不須要那麼嚴謹，裝飾性強就能夠。須要注意的是在定義段落默認字體的時候還須要定義一個後備字體，即默認字體不能正常顯示狀況下顯示的字體。設計的水平層次就在於對細節的打磨，這也就是段落規範在設計中存在的意義。

Alt:段落設計規範

5.圖標

圖標是重要的軟件標識，在設計資源中是最重要的模塊之一。在軟件產品中甚至可能每一個頁面都存在圖標，圖標除了美化的做用之外，還有着明確指代含義的計算機圖形。具體分爲如下三個做用：1. 圖標是與其它網站連接以及讓其它網站連接的標誌和門戶。2. 圖標是網站形象的重要體現。3. 圖標能使受衆便於選擇。根據圖標大小和使用用途進行分類整理設計規範，這樣才更清晰明瞭。

Alt:圖標分類整理

Alt:圖標分類整理

6.圖片

圖片也是屬於設計規範最重要的部分之一，按照用途分類整理圖片資源，設計風格系統化。

Alt:圖片Banner

Alt:圖片分類

7.度量

在設計的過程當中，咱們常常會使用一套規範的度量標準，來保持產品的一致性，分別爲圓角值、間距、大小。

對度量解釋最好的是設計中常用到的柵格系統（Grid Systems），運用固定的格子設計版面佈局，其風格工整簡潔。

這就是咱們在網頁和APP設計的過程當中常用到柵格系統的緣由。

Alt:手機網頁柵格系統

Alt:柵格系統大小和間距的定義

8.陰影

陰影風格及參數也是設計規範中的一部分。在整理設計規範的時候，須要注意的是陰影的參數值是網頁中控制陰影的參數值，而不是設計軟件中的參數值。舉個例子，網頁中陰影對應的參數值爲：box-shadow: type:Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:#000000 不透明度：10%，這纔是程序員須要的陰影參數值，不然最終開發出來的陰影會出現不一致的狀況，沒法達到規範的目的。

Alt:陰影參數

9.組件

經常使用的UI組件（Component）：

Button控件、下拉框、選擇框（單選\複選框）、時間選擇器、輸入框、搜索框、進度條、分頁器、提示框、警告框、表格、彈出面板、數字步進器、選項卡等。

Button控件

按鈕是最多見的組件之一，按鈕有5個狀態：1.Normal 2.Hover 3.Active 4.Disabled 5.Loading。須要在規範中分別羅列出這五個狀態，標註上對應的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文本大小、顏色值。若是是圖標按鈕的話，除了上述參數值之外還須要標註icon和按鈕文本之間的間距和icon圖標的大小。

Alt:按鈕設計規範

下拉框

下拉框是爲用戶提供多個選擇的單選組件，優勢是用最簡單的界面佈局方式收納了不少的選項，須要注意定義下拉選擇框彈出的時候，鼠標移動上去的Normal、Hover、Active狀態。

Alt:下拉框設計規範

選擇框（單選\複選框）

顧名思義，單選框是衆多選擇裏面選一個，而複選框是衆多選擇裏面能夠無限制選擇。單選框和複選框都須要三個狀態，即未選中狀態、選中狀態和不可點擊狀態。

Alt:單選框/複選框設計規範

時間選擇器

時間選擇器是選擇年月日的組件，分別對應年月日星期的信息，在設計的時候須要考慮到4個狀態，分別是Select、Not_Select、Hover和Disable，而且寫進設計規範。

Alt:時間選擇器設計規範

輸入框

輸入文本框是咱們軟件產品設計必不可少的組件，文本輸入框有4個狀態，Normal、Active、Disable和Error。

Alt:輸入框設計規範

搜索框

和輸入框相同的地方是都須要聚焦而後輸入內容完成操做，應該有爲Normal、Active、搜索下拉狀態、Error狀態。

Alt:搜索框正常狀態和下拉選擇狀態

Alt:搜索框自動完成狀態

Alt:搜索欄多個選擇狀態

進度條

這個須要在規範中註明上傳進度條的整個交互操做流程，對Normal狀態、點擊上傳/拖拽上傳狀態、上傳中、上傳成功、上傳失敗，整個流程狀態的整理。在上傳過程當中，任何用戶操做都應該有及時響應的動做，這樣用戶在使用的過程當中纔不會迷茫。

Alt:進度條的操做流程狀態

分頁器

分頁器是用於切換內容頁面的複合組件，常規的分頁器有上下頁操做按鈕、分頁頁碼按鈕、輸入頁碼手動查找的搜索框，以及分頁器的4個狀態：1.Normal 2.Hover 3.Active 4.Disabled 。

Alt:分頁器設計規範

提示框

提示框是一個事件觸發彈出面板顯示的組件。常用提示框的地方是，刪除按鈕、疑難問題點、提示類彈出信息等。這個風格設計就比較多了，設計風格各不相同。定義底板樣式、文字樣式和陰影參數。

Alt:提示框設計規範

警告框

頁面報錯時的顯示樣式。經常使用的警告類信息是：1.操做成功2.提醒用戶注意3.警告用戶注意等。

Alt:警告框設計規範

表格

表格類信息居多，應重點整理表格樣式以及文本顏色大小。

Alt:表格設計規法

彈出面板

彈出面板主要由4個部分組成，分別是面板內的文本信息、按鈕、面板大小樣式、蒙版顏色和透明度。

Alt:彈出面板設計規範

數字步進器

數字步進器屬於複合類型的組件，能夠理解爲按鈕和輸入框聯動的組件。因此輸入框和按鈕擁有的屬性狀態，步進器都有。

Alt:數字步進器設計規範

選項卡

切換選項卡即切換內容，和下拉選擇框不一樣的是，選項卡是將多個選項都排列出來的單選組件，須要考慮4個狀態：1.Normal 2.Hover 3.Active 4.Disabled 。

Alt:選項卡設計規範

設計規範對整個項目的規範性推進很強大，可是須要花時間和耐心細心打磨，因此須要花費不少時間和精力去整理資料，編輯素材，分類整合，最後還要在設計軟件中將整個規範從新排列設計。傳統意義上的設計規範至關繁瑣，而且樣式參數值不可複用，和程序對接爲0，不能「承上啓下」，這也是不少設計師的痛點，因此急需一款走在前沿的設計規範神器。而摹客設計系統就是爲設計師而生，國內獨家首發。

在雲端高效管理你的設計資源。能夠直接在Mockplus和Sketch中，將設計元素上傳到設計系統造成規範，也可將庫中的設計資源快速應用到Mockplus和Sketch的設計中，並自動同步更新。因此多人協做、可重複複用同一套標準。還可以使用精美模板導出PDF或者PNG等圖片模式的設計規範（UI Style Guide）。同時，摹客設計系統能夠導出CSS、SCSS、LESS應用到前端開發。

無償使用摹客設計系統

點擊這裏下載20套國際精美的設計規範模板！