文章來源：白鷺漫談? ? ?作者：白鷺
目錄
一倍宾、為什么要建立規(guī)范
用戶體驗(yàn)一致
塑造品牌感
利于多人協(xié)作
方便維護(hù)和更新，減少冗余內(nèi)容
二醇坝、規(guī)范的適用范圍
適用于處于成長期和成熟期的產(chǎn)品邑跪。
規(guī)范不是越全越好。適合就是最好。
三画畅、如何建立規(guī)范?
·整理產(chǎn)品的組件和復(fù)用的內(nèi)容
1基礎(chǔ)規(guī)范（柵格 間距 基礎(chǔ)網(wǎng)格? 顏色 字體 ）
2?組件規(guī)范（按鈕贸毕、導(dǎo)航、彈框夜赵、缺省圖、標(biāo)簽乡革、列表寇僧、卡片等等）
1
為什么要建立設(shè)計(jì)規(guī)范视粮？
1利于多人協(xié)作钓觉，提高效率
在多人團(tuán)隊(duì)里批幌，通常不同的設(shè)計(jì)師負(fù)責(zé)不同的流程，如果沒有設(shè)計(jì)規(guī)范桐愉，不同的設(shè)計(jì)師就會(huì)對(duì)相同的組件做出不同的方案。產(chǎn)生大量重復(fù)工作定页，效率比較低羡铲。而制作設(shè)計(jì)規(guī)范和UI KIT之后腰湾，則可以直接利用KIT里的組件快速搭建好頁面雷恃，把設(shè)計(jì)師從基礎(chǔ)工作中釋放出來，大大提升設(shè)計(jì)效率费坊。
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)品，快速上手浸间。
2
規(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)品來說引谜，大版本更新的周期是非常長的，這個(gè)階段通常會(huì)制作更為詳細(xì)的設(shè)計(jì)指南擎浴、設(shè)計(jì)原則员咽、do & don’t、品牌書贮预、圖標(biāo)手冊(cè)等等贝室。
3
如何建立設(shè)計(jì)規(guī)范?
電商類的產(chǎn)品對(duì)于大家來說都是比較熟悉的，就算不從事這個(gè)方面仿吞，日常使用也會(huì)很頻繁滑频，所以此次案例我們以下面這個(gè)電商APP作為示范。
做規(guī)范時(shí)通常會(huì)有這兩種情況：
1不打算進(jìn)行大版本更新的產(chǎn)品
對(duì)于小版本迭代的產(chǎn)品來說唤冈，建立規(guī)范只需要在sketch里把所有設(shè)計(jì)稿進(jìn)行歸攏和分類峡迷。直接根據(jù)現(xiàn)有的稿子梳理出規(guī)范，再對(duì)不符合規(guī)范的文件進(jìn)行調(diào)整即可你虹。
2新版本 新規(guī)范
而對(duì)于需要做新版本并且建立新版本規(guī)范的產(chǎn)品來說绘搞，在做設(shè)計(jì)稿之前，我們就需要先統(tǒng)一一些基礎(chǔ)的內(nèi)容傅物，比如顏色夯辖、字體、柵格等等董饰，然后在設(shè)計(jì)過程中去制作KIT楼雹、對(duì)基礎(chǔ)的規(guī)范進(jìn)行補(bǔ)充模孩。
4
基礎(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)然這里的夜間模式說的是真·夜間墅垮，而不是微博那種直接加一個(gè)黑色透明度蒙層的偽·夜間。
額外提一句耕漱，重要內(nèi)容和正文內(nèi)容要保證文本的可識(shí)別度算色，WCAG指南中指出，文本和背景色的對(duì)比度需要達(dá)到3：1螟够。大家可以通過
https://webaim.org/resources/contrastchecker/??的顏色對(duì)比檢查器來核對(duì)顏色灾梦。我這里的品牌色和強(qiáng)調(diào)色對(duì)比度為3：1和6.3：1，而輔助顏色（比如標(biāo)簽）的對(duì)比度則在2-3之間妓笙。
3字體
字體規(guī)范最需要注意的是提取出各個(gè)場景下需要用的字體和字號(hào)若河。
需要注意的是，要標(biāo)注上應(yīng)用場景方便其他人理解寞宫。不然其他成員也并不知道到底什么時(shí)候應(yīng)用一級(jí)標(biāo)題萧福、什么時(shí)候用二級(jí)標(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)永品、徽章、等級(jí)圖標(biāo)等等击纬。
圖標(biāo)規(guī)范通常來說會(huì)先定一些基礎(chǔ)尺寸鼎姐，梳理好各個(gè)頁面的圖標(biāo)尺寸，進(jìn)行整合更振，最后確定好幾個(gè)基礎(chǔ)尺寸炕桨，比如我這里的基礎(chǔ)尺寸是4個(gè)。功能層級(jí)一致的圖標(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)行說明彤叉。
5
頁面組件
頁面組件通常包括導(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)先級(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)有頁面的導(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è)使用場景，我們可以對(duì)標(biāo)簽進(jìn)行分組档叔，比如運(yùn)營類標(biāo)簽桌粉、內(nèi)容屬性標(biāo)簽蒸绩、篩選標(biāo)簽等等
然后對(duì)每類的標(biāo)簽統(tǒng)一樣式衙四、文字內(nèi)邊距以及說明適用場景。?
4彈窗
彈窗是為了提示和通知用戶而位于頁面內(nèi)容之上的一種控件患亿。它是引導(dǎo)用戶專注于某一項(xiàng)任務(wù)传蹈，用戶可以通過操作來關(guān)閉彈框。彈框包含模態(tài)（對(duì)話框步藕、操作菜單）和非模態(tài)（toast惦界、?snake bar等）兩種形式。
模態(tài)彈窗需要定義蒙層的樣式（顏色咙冗、透明度）沾歪，以及彈框內(nèi)的文字說明和按鈕。
我這里拿一個(gè)對(duì)話框的規(guī)范進(jìn)行舉例雾消，這是一個(gè)無ICON的雙按鈕對(duì)話框灾搏，因此在這里我們需要說明標(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)的列表類型和需要說明的事項(xiàng)。
6
結(jié)語
寫這篇文的初衷煤率，是因?yàn)閺娜ツ甑孜医⒐娞?hào)仰冠，并且在站酷發(fā)表了一些文章，得到了很多人的認(rèn)可蝶糯。很多粉絲私信我各種問題洋只，陸續(xù)有人問我設(shè)計(jì)規(guī)范怎么做、交互規(guī)范什么樣之類的問題昼捍。但是公司內(nèi)部的文件確實(shí)沒有辦法公開分享识虚，所以我就想說，那不如專門寫一篇文章詳細(xì)教大家制作規(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ǔ)充吧
如果你覺得這篇文章有所幫助
一定記得分享給身邊的朋友哈~
哦浩考，對(duì)了
別忘了把「不錯(cuò)研究室」公眾號(hào)設(shè)為星標(biāo)哦
每一篇夹孔，都不錯(cuò)。
經(jīng)驗(yàn) | 面試了50多位UI設(shè)計(jì)師，我總結(jié)了這些求職技巧
關(guān)于不錯(cuò)研究室
一個(gè)能看?直播搭伤，能看?干貨的組織害捕。一個(gè)定期推薦不錯(cuò)的全球設(shè)計(jì)師?行業(yè)大咖進(jìn)行直播分享的圈子。一個(gè)每天分享設(shè)計(jì)干貨的自媒體闷畸。每一篇都很不錯(cuò)尝盼。
