如何建立一份移動(dòng)UI設(shè)計(jì)規(guī)范?

2019-3-8    用心設(shè)計(jì)

如果您想訂閱本博客內(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ī)范

制定統(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ō),那不如專門(mén)寫(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ī)范入門(mén)教程目前應(yīng)該足夠了,更多的內(nèi)容我在后續(xù)開(kāi)新文去補(bǔ)充吧。

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

日歷

鏈接

個(gè)人資料

存檔