如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

 

在多人團(tuán)隊(duì)里，通常不同的設(shè)計(jì)師負(fù)責(zé)不同的流程，如果沒(méi)有UI設(shè)計(jì)規(guī)范，不同的設(shè)計(jì)師就會(huì)對(duì)相同的組件做出不同的方案。產(chǎn)生大量重復(fù)工作，效率比較低。而制作設(shè)計(jì)規(guī)范和UI KIT之后，則可以直接利用KIT里的組件快速搭建好頁(yè)面，把設(shè)計(jì)師從基礎(chǔ)工作中釋放出來(lái)，大大提升設(shè)計(jì)效率。

目錄

一、為什么要建立規(guī)范

• 用戶體驗(yàn)一致
• 塑造品牌感
• 利于多人協(xié)作
• 方便維護(hù)和更新，減少冗余內(nèi)容

二、規(guī)范的適用范圍

• 適用于處于成長(zhǎng)期和成熟期的產(chǎn)品。
• 規(guī)范不是越全越好。適合就是最好。

三、如何建立規(guī)范 

• 整理產(chǎn)品的組件和復(fù)用的內(nèi)容
• 基礎(chǔ)規(guī)范（柵格 間距 基礎(chǔ)網(wǎng)格  顏色 字體 ）
• 組件規(guī)范（按鈕、導(dǎo)航、彈框、缺省圖、標(biāo)簽、列表、卡片等等）

一、為什么要建立設(shè)計(jì)規(guī)范？

1 利于多人協(xié)作，提率

2 增強(qiáng)一致性，塑造品牌感

制作和遵循設(shè)計(jì)規(guī)范，能夠保證整個(gè)產(chǎn)品的交互效果和視覺(jué)風(fēng)格、乃至文案的統(tǒng)一性，提升用戶的體驗(yàn)。

3 減少冗余內(nèi)容，方便維護(hù)和更新

同類內(nèi)容使用一樣的組件，能夠降低輸出的內(nèi)容量，減少冗余的控件和代碼。同時(shí)也便于維護(hù)，在迭代時(shí)進(jìn)行統(tǒng)一的更新和應(yīng)用。

4 利于工作交接 

方便設(shè)計(jì)團(tuán)隊(duì)和其他團(tuán)隊(duì)交接，如果團(tuán)隊(duì)有人員變動(dòng)，也方便后續(xù)入職的同事能夠通過(guò)規(guī)范迅速熟悉產(chǎn)品，快速上手。

二、規(guī)范的適用范圍

前面的文章我提到過(guò)，如果產(chǎn)品處于啟動(dòng)期的話，這個(gè)時(shí)候最重要的事情是圈到第一波用戶，讓自己活下去。在這個(gè)階段產(chǎn)品會(huì)頻繁的改版、驗(yàn)證，迭代非?？?，整個(gè)團(tuán)隊(duì)可能都處于拼命加班的狀態(tài)。在這種情況下做設(shè)計(jì)規(guī)范文檔顯然事倍功半，一個(gè)是浪費(fèi)人力資源，另外就算做了，在頻繁更新的背景下也很難去執(zhí)行。

因此設(shè)計(jì)規(guī)范文檔更適合于那些跨越0-1階段的產(chǎn)品，這個(gè)時(shí)候產(chǎn)品已經(jīng)用有了一定的用戶，團(tuán)隊(duì)也會(huì)擴(kuò)張。這個(gè)時(shí)候我們可以選擇制作基礎(chǔ)的設(shè)計(jì)規(guī)范，比如柵格、配色、字體、圖標(biāo)規(guī)范等等。對(duì)于成熟期的產(chǎn)品來(lái)說(shuō)，大版本更新的周期是非常長(zhǎng)的，這個(gè)階段通常會(huì)制作更為詳細(xì)的設(shè)計(jì)指南、設(shè)計(jì)原則、do & don’t、品牌書(shū)、圖標(biāo)手冊(cè)等等。

三、如何建立設(shè)計(jì)規(guī)范

電商類的產(chǎn)品對(duì)于大家來(lái)說(shuō)都是比較熟悉的，就算不從事這個(gè)方面，日常使用也會(huì)很頻繁，所以此次案例我們以下面這個(gè)電商APP作為示范。

做規(guī)范時(shí)通常會(huì)有這兩種情況：

1、不打算進(jìn)行大版本更新的產(chǎn)品

對(duì)于小版本迭代的產(chǎn)品來(lái)說(shuō)，建立規(guī)范只需要在sketch里把所有設(shè)計(jì)稿進(jìn)行歸攏和分類。直接根據(jù)現(xiàn)有的稿子梳理出規(guī)范，再對(duì)不符合規(guī)范的文件進(jìn)行調(diào)整即可。

2、新版本 新規(guī)范

而對(duì)于需要做新版本并且建立新版本規(guī)范的產(chǎn)品來(lái)說(shuō)，在做設(shè)計(jì)稿之前，我們就需要先統(tǒng)一一些基礎(chǔ)的內(nèi)容，比如顏色、字體、柵格等等，然后在設(shè)計(jì)過(guò)程中去制作KIT、對(duì)基礎(chǔ)的規(guī)范進(jìn)行補(bǔ)充。

四、基礎(chǔ)規(guī)范

1 制定統(tǒng)一的柵格系統(tǒng)

因?yàn)楝F(xiàn)在都是一稿適配多端，所以首先需要確定設(shè)計(jì)的基準(zhǔn)尺寸，是基于iphone8？還是iphone 8P？或者1080*1920等等……每個(gè)公司設(shè)計(jì)稿的基準(zhǔn)都不一樣，我們是以一倍圖為基準(zhǔn)進(jìn)行設(shè)計(jì)的，所以我這里的基準(zhǔn)尺寸就是375*667，單位為pt。

柵格一種情況是制定網(wǎng)格系統(tǒng)，網(wǎng)格系統(tǒng)的話首先要制定最小的設(shè)計(jì)單位，比如淘寶的最小單位是3，掌閱的最小單位是4，airbnb的最小單位是6……定好最小設(shè)計(jì)單位之后，界面中所有間距采用最小單位的倍數(shù)。

假定我們最小單位4的網(wǎng)格，排版時(shí)橫向和縱向的間距都是4的倍數(shù)，比如8、12、24。

第二種情況是可以直接建立橫向柵格系統(tǒng)，常用的是12柵格，12柵格比較好的地方是能夠同時(shí)被2、3、4整除，因此能夠根據(jù)具體需求靈活的設(shè)計(jì)各種模塊。當(dāng)然如果產(chǎn)品比較輕量化，是不需要這么復(fù)雜的柵格的，可以根據(jù)需求設(shè)置6、4甚至2柵格等等。

2 色彩規(guī)范

色彩規(guī)范主要表明色彩的色值和使用范圍，一般會(huì)從品牌色、輔助色、基礎(chǔ)色、狀態(tài)用色等等。如下圖所示。

如果產(chǎn)品常用到漸變的話，需要注明漸變的角度以及漸變色的色值。包括產(chǎn)品如果有夜間模式的話，要額外注明日間和夜間模式下各個(gè)顏色的對(duì)應(yīng)色值。當(dāng)然這里的夜間模式說(shuō)的是真·夜間，而不是微博那種直接加一個(gè)黑色透明度蒙層的偽·夜間。

額外提一句，重要內(nèi)容和正文內(nèi)容要保證文本的可識(shí)別度，WCAG指南中指出，文本和背景色的對(duì)比度需要達(dá)到3：1。大家可以通過(guò)

https://webaim.org/resources/contrastchecker/ 的顏色對(duì)比檢查器來(lái)核對(duì)顏色。我這里的品牌色和強(qiáng)調(diào)色對(duì)比度為3：1和6.3：1，而輔助顏色（比如標(biāo)簽）的對(duì)比度則在2-3之間。

3 字體

字體規(guī)范最需要注意的是提取出各個(gè)場(chǎng)景下需要用的字體和字號(hào)。

需要注意的是，要標(biāo)注上應(yīng)用場(chǎng)景方便其他人理解。不然其他成員也并不知道到底什么時(shí)候應(yīng)用一級(jí)標(biāo)題、什么時(shí)候用二級(jí)標(biāo)題。

4 圖標(biāo)

通常來(lái)說(shuō)圖標(biāo)分為兩種，功能性圖標(biāo)和展示性圖標(biāo)。

功能性圖標(biāo)是為了引導(dǎo)用戶理解和操作，需要表現(xiàn)和簡(jiǎn)介，方便用戶識(shí)別其含義。功能性圖標(biāo)常規(guī)狀態(tài)下為無(wú)彩色。

展示性圖標(biāo)通常為頁(yè)面入口，會(huì)有更多形狀、顏色、質(zhì)感的表達(dá)，吸引用戶的注意力和點(diǎn)擊欲望，強(qiáng)調(diào)差異性，比如各種品類區(qū)的圖標(biāo)、徽章、等級(jí)圖標(biāo)等等。

圖標(biāo)規(guī)范通常來(lái)說(shuō)會(huì)先定一些基礎(chǔ)尺寸，梳理好各個(gè)頁(yè)面的圖標(biāo)尺寸，進(jìn)行整合，最后確定好幾個(gè)基礎(chǔ)尺寸，比如我這里的基礎(chǔ)尺寸是4個(gè)。功能層級(jí)一致的圖標(biāo)尺寸要一致。

為了保證不同形狀的圖標(biāo)在視覺(jué)上保持大小一致，會(huì)制作一個(gè)圖標(biāo)的基礎(chǔ)制作說(shuō)明。制作說(shuō)明里會(huì)統(tǒng)一圖標(biāo)的圓角、描邊的粗細(xì)；如果是涉及到展示性圖標(biāo)的話，還會(huì)有圖標(biāo)的視角選擇、配色的選擇、以及如何表現(xiàn)質(zhì)感等等等等

5 默認(rèn)圖

電商APP的話有大量的產(chǎn)品圖片，所以我們也把默認(rèn)的占位圖樣式進(jìn)行了統(tǒng)一。因?yàn)槲覀冞@里樣式都是一致的，所以采用了統(tǒng)一的規(guī)范，如果有多種默認(rèn)樣式，或者有其他類型的占位圖，需要分別進(jìn)行說(shuō)明。

五、頁(yè)面組件

頁(yè)面組件通常包括導(dǎo)航欄、工具欄、彈框、列表、卡片、空狀態(tài)等等，按照原子設(shè)計(jì)理念來(lái)說(shuō)，還可以把組件拆分為原子、分子等更小的基礎(chǔ)設(shè)計(jì)組件，比如角標(biāo)、標(biāo)簽、按鈕、圖像、優(yōu)惠券、選擇器、進(jìn)度指示器等等

頁(yè)面組件除了梳理出規(guī)范之外，通常會(huì)整理成一整套UI KIT，保存為sketch文件日常拖拽使用，或者導(dǎo)入為L(zhǎng)ibraries直接調(diào)用。當(dāng)然，也可以直接在KIT上備注出規(guī)范和注意事項(xiàng)，具體輸出什么格式這個(gè)看團(tuán)隊(duì)的需求即可。

因?yàn)榻M件部分是一個(gè)比較龐大的內(nèi)容，需要根據(jù)具體產(chǎn)品

1按鈕

按鈕一般有懸浮按鈕、填充按鈕、線框按鈕和文本按鈕等類型。其中懸浮按鈕具有最高的優(yōu)先級(jí)，屬于強(qiáng)引導(dǎo)型按鈕。

按鈕通常會(huì)有三種狀態(tài)，常規(guī)狀態(tài)、點(diǎn)擊狀態(tài)和不可用狀態(tài)。因此在規(guī)范中需要標(biāo)明按鈕在這三種狀態(tài)下的樣式，比如顏色、投影、圓角、文字大小等等

除此以外，也可能會(huì)有加載狀態(tài)，也就是在點(diǎn)擊按鈕后，如果有1S以上的數(shù)據(jù)延遲，通常會(huì)考慮觸發(fā)按鈕的加載狀態(tài)。加載狀態(tài)的按鈕樣式為按鈕上顯示進(jìn)度指示器。

2 導(dǎo)航

對(duì)現(xiàn)有頁(yè)面的導(dǎo)航進(jìn)行收攏和分類，比如我這里分類為常規(guī)標(biāo)題樣式、標(biāo)簽樣式、搜索框樣式、無(wú)標(biāo)題樣式、字母導(dǎo)航……

標(biāo)題需要注意文字的極限值，ICON尺寸和位置的話要考慮最小可點(diǎn)擊區(qū)域，我這里icon的尺寸設(shè)置為24pt，但是熱區(qū)是44pt，所以要注意間距的設(shè)置，熱區(qū)不能重疊。

3 標(biāo)簽

標(biāo)簽通常有多個(gè)使用場(chǎng)景，我們可以對(duì)標(biāo)簽進(jìn)行分組，比如運(yùn)營(yíng)類標(biāo)簽、內(nèi)容屬性標(biāo)簽、篩選標(biāo)簽等等

然后對(duì)每類的標(biāo)簽統(tǒng)一樣式、文字內(nèi)邊距以及說(shuō)明適用場(chǎng)景。

4 彈窗

彈窗是為了提示和通知用戶而位于頁(yè)面內(nèi)容之上的一種控件。它是引導(dǎo)用戶專注于某一項(xiàng)任務(wù)，用戶可以通過(guò)操作來(lái)關(guān)閉彈框。彈框包含模態(tài)（對(duì)話框、操作菜單）和非模態(tài)（toast、 snake bar等）兩種形式。

模態(tài)彈窗需要定義蒙層的樣式（顏色、透明度），以及彈框內(nèi)的文字說(shuō)明和按鈕。

我這里拿一個(gè)對(duì)話框的規(guī)范進(jìn)行舉例，這是一個(gè)無(wú)ICON的雙按鈕對(duì)話框，因此在這里我們需要說(shuō)明標(biāo)題、正文文本、按鈕以及背景遮罩的信息，還有字號(hào)、行距、文字極限值、文字色、按鈕的狀態(tài)等等……

除此之外，組件類的規(guī)范可以配上常用案例、don’t&do，會(huì)更方便團(tuán)隊(duì)人員理解，防止錯(cuò)誤狀況。

5 列表

列表是由多個(gè)等寬的行組成的、按照一定規(guī)律排列的連續(xù)條目。列表在一些資訊類產(chǎn)品里會(huì)有更多的組合形式。我這款產(chǎn)品里用到的列表主要是單行和雙行列表，那么我們就整理出對(duì)應(yīng)的列表類型和需要說(shuō)明的事項(xiàng)。

六、結(jié)語(yǔ)

寫(xiě)這篇文的初衷，是因?yàn)閺娜ツ甑孜医⒐娞?hào)，并且在站酷發(fā)表了一些文章，得到了很多人的認(rèn)可。很多粉絲私信我各種問(wèn)題，陸續(xù)有人問(wèn)我設(shè)計(jì)規(guī)范怎么做、交互規(guī)范什么樣之類的問(wèn)題。但是公司內(nèi)部的文件確實(shí)沒(méi)有辦法公開(kāi)分享，所以我就想說(shuō)，那不如專門寫(xiě)一篇文章詳細(xì)教大家制作移動(dòng)UI設(shè)計(jì)規(guī)范吧。

這篇的基礎(chǔ)部分我做的比較詳細(xì)，組件部分寫(xiě)的有些概括，主要是因?yàn)榻M件部分不是通用的，要根據(jù)自己的稿子進(jìn)行整理和歸納，歸納好之后做好標(biāo)注和規(guī)范說(shuō)明即可，這部分是一個(gè)羅列的內(nèi)容，所以就不必展開(kāi)了……

當(dāng)然還有很多內(nèi)容沒(méi)有展開(kāi)說(shuō)，比如在Sketch里把KIT制作成Libraries統(tǒng)一使用，但是我想作為一篇設(shè)計(jì)規(guī)范入門教程目前應(yīng)該足夠了，更多的內(nèi)容我在后續(xù)開(kāi)新文去補(bǔ)充吧。

藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)