2019-3-8 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
在多人團(tuán)隊(duì)里，通常不同的設(shè)計(jì)師負(fù)責(zé)不同的流程，如果沒有UI設(shè)計(jì)規(guī)范，不同的設(shè)計(jì)師就會(huì)對相同的組件做出不同的方案。產(chǎn)生大量重復(fù)工作，效率比較低。而制作設(shè)計(jì)規(guī)范和UI KIT之后，則可以直接利用KIT里的組件快速搭建好頁面，把設(shè)計(jì)師從基礎(chǔ)工作中釋放出來，大大提升設(shè)計(jì)效率。
目錄
一、為什么要建立規(guī)范
二、規(guī)范的適用范圍
三、如何建立規(guī)范
1 利于多人協(xié)作，提率
2 增強(qiáng)一致性，塑造品牌感
制作和遵循設(shè)計(jì)規(guī)范，能夠保證整個(gè)產(chǎn)品的交互效果和視覺風(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ī)范迅速熟悉產(chǎn)品，快速上手。
前面的文章我提到過，如果產(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ī)范等等。對于成熟期的產(chǎn)品來說，大版本更新的周期是非常長的，這個(gè)階段通常會(huì)制作更為詳細(xì)的設(shè)計(jì)指南、設(shè)計(jì)原則、do & don’t、品牌書、圖標(biāo)手冊等等。
電商類的產(chǎn)品對于大家來說都是比較熟悉的，就算不從事這個(gè)方面，日常使用也會(huì)很頻繁，所以此次案例我們以下面這個(gè)電商APP作為示范。
做規(guī)范時(shí)通常會(huì)有這兩種情況：
1、不打算進(jìn)行大版本更新的產(chǎn)品
對于小版本迭代的產(chǎn)品來說，建立規(guī)范只需要在sketch里把所有設(shè)計(jì)稿進(jìn)行歸攏和分類。直接根據(jù)現(xiàn)有的稿子梳理出規(guī)范，再對不符合規(guī)范的文件進(jìn)行調(diào)整即可。
2、新版本 新規(guī)范
而對于需要做新版本并且建立新版本規(guī)范的產(chǎn)品來說，在做設(shè)計(jì)稿之前，我們就需要先統(tǒng)一一些基礎(chǔ)的內(nèi)容，比如顏色、字體、柵格等等，然后在設(shè)計(jì)過程中去制作KIT、對基礎(chǔ)的規(guī)范進(jìn)行補(bǔ)充。
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è)顏色的對應(yīng)色值。當(dāng)然這里的夜間模式說的是真·夜間，而不是微博那種直接加一個(gè)黑色透明度蒙層的偽·夜間。
額外提一句，重要內(nèi)容和正文內(nèi)容要保證文本的可識(shí)別度，WCAG指南中指出，文本和背景色的對比度需要達(dá)到3：1。大家可以通過
https://webaim.org/resources/contrastchecker/ 的顏色對比檢查器來核對顏色。我這里的品牌色和強(qiáng)調(diào)色對比度為3：1和6.3：1，而輔助顏色（比如標(biāo)簽）的對比度則在2-3之間。
3 字體
字體規(guī)范最需要注意的是提取出各個(gè)場景下需要用的字體和字號。
需要注意的是，要標(biāo)注上應(yīng)用場景方便其他人理解。不然其他成員也并不知道到底什么時(shí)候應(yīng)用一級標(biāo)題、什么時(shí)候用二級標(biāo)題。
4 圖標(biāo)
通常來說圖標(biāo)分為兩種，功能性圖標(biāo)和展示性圖標(biāo)。
功能性圖標(biāo)是為了引導(dǎo)用戶理解和操作，需要表現(xiàn)和簡介，方便用戶識(shí)別其含義。功能性圖標(biāo)常規(guī)狀態(tài)下為無彩色。
展示性圖標(biāo)通常為頁面入口，會(huì)有更多形狀、顏色、質(zhì)感的表達(dá)，吸引用戶的注意力和點(diǎn)擊欲望，強(qiáng)調(diào)差異性，比如各種品類區(qū)的圖標(biāo)、徽章、等級圖標(biāo)等等。
圖標(biāo)規(guī)范通常來說會(huì)先定一些基礎(chǔ)尺寸，梳理好各個(gè)頁面的圖標(biāo)尺寸，進(jìn)行整合，最后確定好幾個(gè)基礎(chǔ)尺寸，比如我這里的基礎(chǔ)尺寸是4個(gè)。功能層級一致的圖標(biāo)尺寸要一致。
為了保證不同形狀的圖標(biāo)在視覺上保持大小一致，會(huì)制作一個(gè)圖標(biāo)的基礎(chǔ)制作說明。制作說明里會(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)行說明。
頁面組件通常包括導(dǎo)航欄、工具欄、彈框、列表、卡片、空狀態(tài)等等，按照原子設(shè)計(jì)理念來說，還可以把組件拆分為原子、分子等更小的基礎(chǔ)設(shè)計(jì)組件，比如角標(biāo)、標(biāo)簽、按鈕、圖像、優(yōu)惠券、選擇器、進(jìn)度指示器等等
頁面組件除了梳理出規(guī)范之外，通常會(huì)整理成一整套UI KIT，保存為sketch文件日常拖拽使用，或者導(dǎo)入為Libraries直接調(diào)用。當(dāng)然，也可以直接在KIT上備注出規(guī)范和注意事項(xiàng)，具體輸出什么格式這個(gè)看團(tuán)隊(duì)的需求即可。
因?yàn)榻M件部分是一個(gè)比較龐大的內(nèi)容，需要根據(jù)具體產(chǎn)品
1按鈕
按鈕一般有懸浮按鈕、填充按鈕、線框按鈕和文本按鈕等類型。其中懸浮按鈕具有最高的優(yōu)先級，屬于強(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)航
對現(xiàn)有頁面的導(dǎo)航進(jìn)行收攏和分類，比如我這里分類為常規(guī)標(biāo)題樣式、標(biāo)簽樣式、搜索框樣式、無標(biāo)題樣式、字母導(dǎo)航……
標(biāo)題需要注意文字的極限值，ICON尺寸和位置的話要考慮最小可點(diǎn)擊區(qū)域，我這里icon的尺寸設(shè)置為24pt，但是熱區(qū)是44pt，所以要注意間距的設(shè)置，熱區(qū)不能重疊。
3 標(biāo)簽
標(biāo)簽通常有多個(gè)使用場景，我們可以對標(biāo)簽進(jìn)行分組，比如運(yùn)營類標(biāo)簽、內(nèi)容屬性標(biāo)簽、篩選標(biāo)簽等等
然后對每類的標(biāo)簽統(tǒng)一樣式、文字內(nèi)邊距以及說明適用場景。
4 彈窗
彈窗是為了提示和通知用戶而位于頁面內(nèi)容之上的一種控件。它是引導(dǎo)用戶專注于某一項(xiàng)任務(wù)，用戶可以通過操作來關(guān)閉彈框。彈框包含模態(tài)（對話框、操作菜單）和非模態(tài)（toast、 snake bar等）兩種形式。
模態(tài)彈窗需要定義蒙層的樣式（顏色、透明度），以及彈框內(nèi)的文字說明和按鈕。
我這里拿一個(gè)對話框的規(guī)范進(jìn)行舉例，這是一個(gè)無ICON的雙按鈕對話框，因此在這里我們需要說明標(biāo)題、正文文本、按鈕以及背景遮罩的信息，還有字號、行距、文字極限值、文字色、按鈕的狀態(tài)等等……
除此之外，組件類的規(guī)范可以配上常用案例、don’t&do，會(huì)更方便團(tuán)隊(duì)人員理解，防止錯(cuò)誤狀況。
5 列表
列表是由多個(gè)等寬的行組成的、按照一定規(guī)律排列的連續(xù)條目。列表在一些資訊類產(chǎn)品里會(huì)有更多的組合形式。我這款產(chǎn)品里用到的列表主要是單行和雙行列表，那么我們就整理出對應(yīng)的列表類型和需要說明的事項(xiàng)。
寫這篇文的初衷，是因?yàn)閺娜ツ甑孜医⒐娞?，并且在站酷發(fā)表了一些文章，得到了很多人的認(rèn)可。很多粉絲私信我各種問題，陸續(xù)有人問我設(shè)計(jì)規(guī)范怎么做、交互規(guī)范什么樣之類的問題。但是公司內(nèi)部的文件確實(shí)沒有辦法公開分享，所以我就想說，那不如專門寫一篇文章詳細(xì)教大家制作移動(dòng)UI設(shè)計(jì)規(guī)范吧。
這篇的基礎(chǔ)部分我做的比較詳細(xì)，組件部分寫的有些概括，主要是因?yàn)榻M件部分不是通用的，要根據(jù)自己的稿子進(jìn)行整理和歸納，歸納好之后做好標(biāo)注和規(guī)范說明即可，這部分是一個(gè)羅列的內(nèi)容，所以就不必展開了……
當(dāng)然還有很多內(nèi)容沒有展開說，比如在Sketch里把KIT制作成Libraries統(tǒng)一使用，但是我想作為一篇設(shè)計(jì)規(guī)范入門教程目前應(yīng)該足夠了，更多的內(nèi)容我在后續(xù)開新文去補(bǔ)充吧。
藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.cqzjtgb.com