正文

為什麼要做規範？

作為UI設計師，整理設計規範也是設計能力的一種體現。但很多小公司的設計師都覺得， 整個公司只有自己一個設計師， 所有的設計稿都是自己一個人做的， 風格肯定都是統一的， 所以沒必要花那麼長時間去做一個沒有用的東西。

但其實規範的本身並不是只給設計師用的， 他更大的作用是對於整個團隊， 比如方便和開發之間的溝通， 幫助他們製作統一的元件， 以後用到的時候直接呼叫。

而對於設計師來說， 也不用重複做圖、重複標註， 改動一個的時候就能同步所有， 大大提高了工作效率。所以，無論是自己設計創作的階段還是和程式設計師溝通推動產品開發階段，你的設計規範是否完善，對產品的質量起著決定性的關鍵作用。

在UI設計的過程中，設計規範是一個關鍵步驟。今天為大家整理了設計規範中的分類情況，UI設計規範有幾大分類組成，分別是：

尺寸、標準色、字號、段落設定、圖示、圖片、間距、圓角值、大小、陰影、元件等

。

1、尺寸

設計圖尺寸

雖說現在大多數人都是以750 （@2x） 為設計稿， 但是也還是有人720 （@2x） 的尺寸， 或是375 （@1x） 的尺寸， 比如我就是用的720，所以設計之初最先要定一個統一的設計尺寸， 特別是多個設計師合作的時候， 千萬不要想當然的以為別人都和你一樣。

間距大小

間距包括頁邊距、模組與模組之間的間距， 這種全域性的間距大小必須要一致， 頁邊距的大小很好定， 基本上20、24、32居多， 根據產品特性定一個統一的就好。

而模組與模組之間的間距就相對複雜一點， 在定之前需要先確定模組之間的分割方式， 是用線、還是面、還是留白， 然後再確定間距。

確定好模組與模組之間的分割方式後，還需要確定模組內部的，確定之後就要嚴格執行。

比如規範定的模組與模組之間用線，模組內部之間用留白，那後續所有頁面都需要按照這個規則來（特殊情況除外）。

2、標準色

顏色是設計最重要的部分，沒有之一。細節決定品質，所以對顏色的運用格外細緻，顏色的搭配直接決定產品的品質感。包括基礎標準色（主色）、基礎文字色， 還應該包括全域性標準色（背景色、分割線色值等）這些都需要標好色值以及使用的場景。

當顏色是漸變的時候， 也需要標清楚漸變的顏色。

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

在前端開發中，對顏色值進行編號，這樣對程式碼也有著極大的最佳化。定義一個設計規範的CSS樣式庫，開發過程中就不用重複修改CSS引數值，直接引用定義好的變數名就可以，這樣修改設計規範的成本大大降低。

3、字型

字型是設計中必不可少的考慮因素，不同的字型氣質不一樣，並且不同場景下帶給人的感受也不一樣。所以需要在設計的時候考慮到字型的設計效果，然後在設計規範中註明。

在定義字型名稱的同時也定義了字型的風格，並且添加了不同字型風格的預覽效果，常見的字型風格有：

Light、Regular、Italic、Semibold、Bold

。

還有一點也不能忘記，那就是行間距，不管是一行文字還是多行文字，我們都需要標註清楚行間距，也就是行高，如果是段落的話還需要標註段落間距。

所以為了避免團隊的其他成員忽略了文字的行間距，我們需要在做規範的時候標明，所有文字必須

註明行間距

。

4、段落設定

在實際的產品設計中，段落有很多種樣式，不同場景下的段落要求也不一樣。比如：閱讀內容的段落要求文字可閱讀性強，所以對字型、字號、顏色、行間距等要求簡單易讀。而帶有裝飾性的段落文字則不需要那麼嚴謹，裝飾性強就可以。

需要注意的是：在定義段落預設字型的時候還需要定義一個後備字型，即預設字型不能正常顯示情況下顯示的字型。設計的水平層次就在於對細節的打磨，這也就是段落規範在設計中存在的意義。

5、圖示

圖示具體分為以下三個作用：

圖示是與其它網站連結以及讓其它網站連結的標誌和門戶。

圖示是網站形象的重要體現。

圖示能使受眾便於選擇。根據圖示大小和使用用途進行分類整理設計規範，這樣才更清晰明瞭。

在我們的專案緊急而人員又不足的時候， 可能沒有那麼多時間，去把所有的圖示都畫的精細，那這個時候我們可以先定尺寸。

當然這裡說的定尺寸不是讓你把頁面內所有圖示的尺寸都定好，而是說優先定幾個大的模組，比如頂導航、底導航、個人中心的。。。

等後續空閒的時候我們再去細化這些圖示，開發也只需要換張圖， 不影響其他。

建議圖示尺寸儘量不要過多，比如32、36、40、48 都有， 這樣會顯得凌亂無序， 而且這些完全可以統一成兩個大小的， 比如32、48的。

因為圖示是可以有留白區域的， 也就說圖示本身大小可以是40， 但是切圖尺寸是48。

這樣做的好處就是圖示大小種類較少、方便記憶、也顯得專業， 畢竟誰也不希望最後整理出來的規範， 32的圖示2個、36的圖示2個、40的圖示2個， 這樣孤零零的多慘， 所以建議圖示尺寸不要太多。

6、圖片

圖片包括 APP 內出現的所有圖， 一般情況下都是產品圖和頭像， 但是需要注意的是在制定規範之前， 要先把圖片比例定好， 常見的比例有 1：1、2：1、4：3、16：9 等等，也是屬於設計規範最重要的部分之一，按照用途分類整理圖片資源，設計風格系統化。

然後再把每個模組所用的圖片大小以及它的比例標清楚， 如果圖片有圓角度的話也需要註明。

頭像的尺寸可以定三個，大中小各一個，基本體量少的 APP 都夠用了。

建議 APP 內的圖片比例兩到三個就好， 因為這涉及到後臺上傳， 比例不一樣的話， 要不然就是開發需要對圖片進行裁剪、要不然就是需要留不同的介面， 後期分別上傳， 無論哪一種，都是需要額外的人力成本， 所以不要給自己挖坑哦。

7、柵格系統

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

對度量解釋最好的是設計中經常使用到的柵格系統（Grid Systems），運用固定的格子設計版面佈局，其風格工整簡潔。這就是我們在網頁和APP設計的過程中經常使用到柵格系統的原因。

8、陰影

陰影風格及引數也是設計規範中的一部分，在整理設計規範的時候，需要注意的是陰影的引數值是網頁中控制陰影的引數值，而不是設計軟體中的引數值。

舉個例子：網頁中陰影對應的引數值為：

box-shadow： type：Outset offset X：0px offset Y：4px Blur：8px Spread：0px color：#000000 ，不透明度：10%，這才是程式設計師需要的陰影引數值，否則最終開發出來的陰影會出現不一致的情況，無法達到規範的目的。

9、導航

頂導航

高度、字型大小、顏色、有沒有分割線， 有的話分割線色值 ； 帶不帶圖示、多個圖示之間的間距等等。

底導航

底部導航和前面一樣，要放他預設和點選效果圖示！

二級導航

主要是一些篩選類tab， 需要標明文字大小、色值、選中後的橫線的大小， 這裡橫線的樣式目前常見的有兩種， 一種是固定的短線， 不管上面文字多少， 都是顯示一樣的大小； 還有一種是和文字一樣長的， 無論哪一種， 事先都需要定義一下規則。

10、元件

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

Button控制元件

按鈕是最常見的元件之一，按鈕有5個狀態：Normal、Hover、Active、Disabled 、Loading。

需要在規範中分別羅列出這五個狀態，標註上對應的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文字大小、顏色值。如果是圖示按鈕的話，除了上述引數值以外還需要標註icon和按鈕文字之間的間距和icon圖示的大小。

下拉框

：

下拉框是為使用者提供多個選擇的單選元件，優點是用最簡單的介面佈局方式收納了很多的選項，需要注意定義下拉選擇框彈出的時候，滑鼠移動上去的Normal、Hover、Active狀態。

選擇框（單選\複選框）：

顧名思義，單選框是眾多選擇裡面選一個，而複選框是眾多選擇裡面可以無限制選擇。單選框和複選框都需要三個狀態，即未選中狀態、選中狀態和不可點選狀態。

時間選擇器：

時間選擇器是選擇年月日的元件，分別對應年月日星期的資訊，在設計的時候需要考慮到4個狀態，分別是：Select、Not_Select、Hover和Disable，並且寫進設計規範。

輸入框：

輸入文字框是我們軟體產品設計必不可少的元件，文字輸入框有4個狀態：Normal、Active、Disable和Error。

搜尋框：

和輸入框相同的地方是都需要聚焦然後輸入內容完成操作，應該有為Normal、Active、搜尋下拉狀態、Error狀態。

進度條：

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

分頁器：

分頁器是用於切換內容頁面的複合元件，常規的分頁器有上下頁操作按鈕、分頁頁碼按鈕、輸入頁碼手動查詢的搜尋框，以及分頁器的4個狀態：Normal、Hover 、Active、Disabled 。

提示框：

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

警告框：

頁面報錯時的顯示樣式，常用的警告類資訊是：操作成功、提醒使用者注意、警告使用者注意等。

表格：

表格類資訊居多，應重點整理表格樣式以及文字顏色大小。

彈出面板：

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

數字步進器：

數字步進器屬於複合型別的元件，可以理解為按鈕和輸入框聯動的元件，所以輸入框和按鈕擁有的屬性狀態，步進器都有。

選項卡：

切換選項卡即切換內容，和下拉選擇框不同的是，選項卡是將多個選項都排列出來的單選元件，需要考慮4個狀態：Normal 、Hover 、Active 、Disabled 。

設計規範對整個專案的規範性推動很強大，但是需要花時間和耐心細心打磨，所以需要花費很多時間和精力去整理資料、編輯素材、分類整合，最後還要在設計軟體中將整個規範重新排列設計。

最後

相關UI視覺規範參考

宣告：部分文字來源百科

相關文章

iOS設計尺寸規範

小程式設計規範

Web UI 網頁設計規範

平面設計基礎常識彙總

全鏈路UI設計師瞭解一下

令人驚歎的網頁設計長什麼樣？

超讚的27個高質量免費圖片網站

iPhone X 人機互動指南及其設計細節

一款APP從設計到切圖標註適配全記錄

2018年網頁設計的19個趨勢！

WUI | 極簡網頁介面設計

2018現役最全的14種平面設計風格

明明我比他厲害為什麼我收到offer比他少一半？

萬字乾貨！這可能是最全面的互動基礎知識總結

近兩萬字的乾貨！最全面的網頁設計基礎知識全攻略