編輯導(dǎo)語(yǔ)：設(shè)計(jì)規(guī)范對(duì)產(chǎn)品設(shè)計(jì)而言十分重要，合理有效的設(shè)計(jì)規(guī)范有助于團(tuán)隊(duì)進(jìn)行溝通，繼而共同推動(dòng)產(chǎn)品的設(shè)計(jì)落地。而往往第三方設(shè)計(jì)規(guī)范不能及時(shí)地解決業(yè)務(wù)上的所有問(wèn)題并覆蓋所有業(yè)務(wù)場(chǎng)景，因此，企業(yè)需要搭建自有的設(shè)計(jì)規(guī)范。本篇文章里，作者結(jié)合其經(jīng)驗(yàn)對(duì)企業(yè)級(jí)設(shè)計(jì)規(guī)范搭建做了總結(jié)，讓我們來(lái)看一下。

一、設(shè)計(jì)規(guī)范概述

作為指導(dǎo)企業(yè)級(jí)B端產(chǎn)品界面設(shè)計(jì)的企業(yè)級(jí)B端設(shè)計(jì)規(guī)范，近年來(lái)受到各大廠的熱捧，產(chǎn)出了諸如Salesforce，Antdesign、Element、ViewUI等設(shè)計(jì)規(guī)范。

設(shè)計(jì)規(guī)范是一套由設(shè)計(jì)價(jià)值觀作為底層邏輯支撐，以設(shè)計(jì)原則做指導(dǎo)，包括了全局樣式、基礎(chǔ)組件庫(kù)、業(yè)務(wù)組件庫(kù)、頁(yè)面模板等搭建界面要素的集合體。企業(yè)級(jí)設(shè)計(jì)規(guī)范不僅保障了產(chǎn)品間用戶(hù)體驗(yàn)的一致性，同時(shí)體現(xiàn)了企業(yè)對(duì)待產(chǎn)品的嚴(yán)謹(jǐn)性。

二、原子設(shè)計(jì)方法論

筆者負(fù)責(zé)的企業(yè)級(jí)B端設(shè)計(jì)規(guī)范采用業(yè)界通用的原子設(shè)計(jì)方法論來(lái)構(gòu)建。該方法在2013年由設(shè)計(jì)師Brad從化學(xué)中得到啟發(fā)，從而創(chuàng)建了原子設(shè)計(jì)理論。化學(xué)界，由原子構(gòu)成分子、分子構(gòu)成宇宙物體。因此對(duì)應(yīng)到產(chǎn)品界面，界面也是由顏色、文字、組件等基本元素構(gòu)成的。

1. 原子

原子是構(gòu)成界面的最小元素，例如顏色、文本、圖標(biāo)、容器。

2. 分子

分子是原子按照一定規(guī)律組合起來(lái)的元素，B端界面上即是組件，例如按鈕、選擇器、表格等。

3. 組織（區(qū)塊）

區(qū)塊可以認(rèn)為是組件的組合，例如表格上方的查詢(xún)區(qū)域，查詢(xún)區(qū)域是由表單組件與按鈕組成的。

4. 模板

模板是區(qū)塊+區(qū)塊，或區(qū)塊+組件組合成的頁(yè)面，稱(chēng)得上模板的頁(yè)面通常為典型頁(yè)面。

5. 頁(yè)面

頁(yè)面是指在典型頁(yè)面模板規(guī)范與業(yè)務(wù)目標(biāo)的基礎(chǔ)上所形成的的既符合規(guī)范又符合產(chǎn)品的實(shí)際頁(yè)面。

6. 范例

范例是頁(yè)面與頁(yè)面的組合，并且?guī)в薪换フf(shuō)明，范例表明了一個(gè)可被抽象化的業(yè)務(wù)流程是如何設(shè)計(jì)的。

三、規(guī)范搭建中需要注意的點(diǎn)

筆者從親自搭建企業(yè)級(jí)設(shè)計(jì)規(guī)范的角度，將一些搭建中需要注意的點(diǎn)做了梳理。期望大家在定制自有設(shè)計(jì)規(guī)范的時(shí)候，規(guī)避一些問(wèn)題，少走一些彎路。

1. 文字規(guī)范

文字在B端界面上大量出現(xiàn)，沒(méi)有文字，產(chǎn)品將不能為人所用。文字是人機(jī)交互的基礎(chǔ)，合理的文字設(shè)計(jì)規(guī)則，可以提升用戶(hù)體驗(yàn)，提升用戶(hù)操作效率。文字通常包括了字體、字號(hào)、字重、行高、色值這幾個(gè)屬性。筆者建議大家在定義B端界面文字時(shí)，做如下注意。

1）字體

字體分為數(shù)字/英文和中文。

在B端產(chǎn)品中，字體使用建議優(yōu)先級(jí)排序?yàn)椋ɑ跀?shù)字/英文&mac系統(tǒng)優(yōu)先原則）：Helvetica Naue（英文/數(shù)字）、Helvetica(英文/數(shù)字)、Arial(英文/數(shù)字)、PingFang SC、Hiragino Sans GB、Microsoft YaHei UI、微軟雅黑、sans-serif。

2）字號(hào)

為了保證界面整潔，設(shè)計(jì)規(guī)范中約定字號(hào)不超過(guò)3種，同時(shí)基于電腦顯示器屏幕大小、行業(yè)用戶(hù)習(xí)慣、最佳閱讀距離等要素，設(shè)計(jì)規(guī)范需要對(duì)字號(hào)進(jìn)行了規(guī)定。

目前業(yè)界常用的字號(hào)標(biāo)準(zhǔn)有兩種：

1. 12px（正文）、14px（標(biāo)題）、16px（特殊情況，極少使用）；
2. 14px（正文）、14px（標(biāo)題）、16px（特殊情況，極少使用）。

3）字重

字重是指字體的粗細(xì)程度。一個(gè)字體的字重通常至少4-6個(gè)，其中Regular與Bold最常用。字重的選擇基于清晰區(qū)分的原則。

由于設(shè)計(jì)稿和開(kāi)發(fā)代碼的字重對(duì)應(yīng)沒(méi)有準(zhǔn)確的標(biāo)準(zhǔn)，因此我們測(cè)試了各種字號(hào)在mac和win上的顯示效果后，設(shè)計(jì)師使用了蘋(píng)方字體Regular （常規(guī)體）以及 Medium （中黑體）兩種字重來(lái)設(shè)計(jì)頁(yè)面，它們分別對(duì)應(yīng)代碼中的400和700。

筆者也給大家找了下其他網(wǎng)站上對(duì)字重的標(biāo)注，大家可以做參考。

4）行高

合理的文本行高可以讓界面信息展示更清晰，使用戶(hù)查找信息和閱讀信息的效率更高。

設(shè)計(jì)規(guī)范中，需要定義行高的設(shè)計(jì)標(biāo)準(zhǔn)，在參考了Antdeisgn對(duì)行高的定義后，我們認(rèn)為較為合適，因此行高規(guī)則也定為“字號(hào)大小+8”。例如，12px字體的行高為20px，14px字體的行高為22px。

當(dāng)然，業(yè)內(nèi)還有其他定義方法，例如字號(hào)的1.3倍或1.5倍等，這都沒(méi)關(guān)系，只要保證界面舒適性即可。

5）色值

在界面的字體顏色使用上，設(shè)計(jì)規(guī)范從兩個(gè)維度做了控制，分別是顏色的數(shù)量與顏色的質(zhì)量。

在數(shù)量上，占界面百分之九十五的字體顏色的數(shù)量控制在4種以?xún)?nèi)。在質(zhì)量上，我們遵循了無(wú)障礙設(shè)計(jì)原則，保證了文字的可讀性。

以下是W3C的無(wú)障礙設(shè)計(jì)原則：文本和背景的對(duì)比足夠，為視力障礙者提供足夠的對(duì)比度。

1. （3：1）在WCAG2.0 1.4.3（AA級(jí)）下，大型文本（18pt或14pt粗體或更大）的最小對(duì)比度。
2. （4.5：1）在WCAG2.0 1.4.3（AA級(jí)）下，常規(guī)尺寸文本的最小對(duì)比度。
3. （7：1）在WCAG2.0 1.4.6（AAA級(jí)）下，常規(guī)尺寸文本的增強(qiáng)對(duì)比度。

2. 間距規(guī)范

一個(gè)產(chǎn)品界面，想要看起來(lái)舒服，間距在其中起到的作用不容小噓。元素間合適的間距會(huì)讓用戶(hù)有繼續(xù)往下閱讀信息的沖動(dòng)，并且能夠讓用戶(hù)感受到產(chǎn)品的專(zhuān)業(yè)性。界面間距分為多種，規(guī)則也較為細(xì)致，下面筆者大致羅列下。

1）外邊距

當(dāng)內(nèi)容區(qū)域與頁(yè)面容器之間為0的距離時(shí)，會(huì)給人內(nèi)容要溢出屏幕的感覺(jué)。因此，合適的外邊距會(huì)讓界面的排版更加整齊和有呼吸感。在設(shè)計(jì)規(guī)范中，常用的外邊距有12px、16px、20px、24px……

2）行間距

行與行之間的間距通常涉及到信息的傳遞效果。太緊湊或太寬松的行間距都會(huì)增加用戶(hù)的閱讀負(fù)擔(dān)。

根據(jù)行高的計(jì)算方法，在常規(guī)使用中，主字號(hào)12px與14px的行間距均為8px，即12px字體的行高為20px，14px字體的行高為22px。

3）元素間距

元素間距是指文字與組件之間、組件內(nèi)部元素之間、組件與組件之間等的間距。為了達(dá)到界面整齊和舒適的效果，元素間的間距常用到的為4px、8px、12px……

具體從多小的間距取值，向上遞增，和界面的整體寬松度有密切關(guān)系。

4）模塊間距

模塊之間的間距也是一個(gè)值得考究的問(wèn)題。通常關(guān)聯(lián)度較高的模塊會(huì)靠的較近，關(guān)聯(lián)度低的模塊會(huì)較遠(yuǎn)。設(shè)計(jì)規(guī)范中，模塊間常用的間距為8px、12px、16px、20px……

這里，筆者給大家推薦一個(gè)計(jì)算頁(yè)面元素間距的計(jì)算公式：a+bn。a通常為柵格的gutter的值，b為一個(gè)可以幫助間距有規(guī)律遞增的值。例如：16+8n，n為自然數(shù)。間距規(guī)則如下：

3. 圖標(biāo)規(guī)范

圖標(biāo)對(duì)于B端產(chǎn)品界面來(lái)說(shuō)也非常重要，圖標(biāo)品質(zhì)的優(yōu)劣，直接影響到界面整體的美觀度和識(shí)別度。一套標(biāo)準(zhǔn)化且拓展性高的圖標(biāo)庫(kù)，不僅可以提升圖標(biāo)的設(shè)計(jì)質(zhì)量，還可提升產(chǎn)品的一致性。

筆者帶領(lǐng)團(tuán)隊(duì)完成設(shè)計(jì)規(guī)范圖標(biāo)庫(kù)時(shí)，分了四步走。

1）定義圖標(biāo)風(fēng)格。

設(shè)計(jì)規(guī)范的圖標(biāo)不是想怎么定義就怎么定義的，首先要明確圖標(biāo)的使用范疇，例如哪些產(chǎn)品用、哪些頁(yè)面哪些范圍會(huì)使用到圖標(biāo)、產(chǎn)品的目標(biāo)用戶(hù)是哪些人、圖標(biāo)的情緒版等。了解清楚這些后，才可著手確定設(shè)計(jì)風(fēng)格。

2）制定圖標(biāo)繪制規(guī)則

確定設(shè)計(jì)風(fēng)格后，就要制定圖標(biāo)設(shè)計(jì)規(guī)則，這樣子才能保證設(shè)計(jì)師協(xié)作中設(shè)計(jì)出來(lái)的圖標(biāo)是具有一致性的。

圖標(biāo)設(shè)計(jì)規(guī)則包括：畫(huà)板尺寸、出血位、內(nèi)容繪制區(qū)域、圖標(biāo)線條粗細(xì)、圖標(biāo)圓點(diǎn)大小、圖標(biāo)圓角、斜角度、基礎(chǔ)圖形參考區(qū)等（這部分內(nèi)容筆者會(huì)專(zhuān)門(mén)開(kāi)一篇文章來(lái)給大家細(xì)講）。

3）篩選通用性圖標(biāo)

對(duì)于企業(yè)級(jí)設(shè)計(jì)規(guī)范來(lái)說(shuō)，只需要將通用性圖標(biāo)梳理出來(lái)即可，保證產(chǎn)品大范疇上的一致性，無(wú)需面面俱到。這樣不僅做到了企業(yè)級(jí)設(shè)計(jì)規(guī)范的克制，又給了業(yè)務(wù)發(fā)揮的空間。

4）按照規(guī)則繪制通用性圖標(biāo)

選出通用性圖標(biāo)后，設(shè)計(jì)師按照?qǐng)D標(biāo)繪制規(guī)則繪制即可。

但規(guī)則不是死的，當(dāng)基礎(chǔ)型無(wú)法滿(mǎn)足需要的時(shí)候，以它們?yōu)闇?zhǔn)向外散發(fā)，在遵循設(shè)計(jì)規(guī)范的基礎(chǔ)上，做視覺(jué)上的平衡和微調(diào)。并且所有圖標(biāo)最后都要合并路徑，保證圖形規(guī)整和干凈，便于正確輸出和使用。

4. 文案規(guī)范

文案是用戶(hù)與界面交互的重要渠道，通過(guò)文案的表達(dá)，用戶(hù)可以感受產(chǎn)品的調(diào)性。對(duì)于企業(yè)級(jí)設(shè)計(jì)規(guī)范來(lái)說(shuō)，我們可以去定義一些較為原則性的文案表達(dá)方式，規(guī)避因個(gè)體因素帶來(lái)的文案質(zhì)量差異問(wèn)題。

1）簡(jiǎn)潔清晰

文案并不是越長(zhǎng)越好，而是簡(jiǎn)潔且闡明要義，可通暢地指導(dǎo)用戶(hù)操作即可，省略不需要的詞匯。

2）準(zhǔn)確有效

文案做到簡(jiǎn)潔清晰后，還需要關(guān)注文案表達(dá)是否準(zhǔn)確有效，也就是文字表達(dá)要精準(zhǔn)，不能因?yàn)楹?jiǎn)潔而丟失了關(guān)鍵信息。

3）重點(diǎn)前置

根據(jù)F型閱讀順序，重要的信息需要前置，盡量放在頁(yè)面左上角，讓用戶(hù)一眼就可以看到重要信息。

4）用戶(hù)視角

B端產(chǎn)品經(jīng)常會(huì)拋出一堆錯(cuò)誤代碼給用戶(hù)，而用戶(hù)根本看不懂。因此，文案描述需要站在用戶(hù)視角去撰寫(xiě)，詞匯要易于理解。

5）表述統(tǒng)一

將相似場(chǎng)景的文案進(jìn)行統(tǒng)一化處理，降低用戶(hù)理解頁(yè)面的成本。

5. 顏色規(guī)范

色彩可以影響我們對(duì)物體的感受，可以幫助物體傳達(dá)更為形象的含義。

在B端產(chǎn)品界面中，色彩的使用可以讓界面更生動(dòng)，同時(shí)可以輔助界面相關(guān)要素的含義傳達(dá)，相比用戶(hù)通過(guò)閱讀文字來(lái)理解界面信息，色彩可以幫助用戶(hù)更快速地理解信息。通常企業(yè)級(jí)設(shè)計(jì)規(guī)范色彩體系分為主色、功能色、中性色和其他色。

1）主色

主色可以傳播產(chǎn)品的特性，及確定產(chǎn)品的主基調(diào)。

主色的應(yīng)用場(chǎng)景包括主要按鈕、重要信息提示、操作狀態(tài)等。主色在設(shè)計(jì)上要注意符合產(chǎn)品調(diào)性，常見(jiàn)的主色有藍(lán)色（大部分系統(tǒng)）、綠色（數(shù)據(jù)分析類(lèi)系統(tǒng)）、橙色（云計(jì)算類(lèi)、食品管理類(lèi)系統(tǒng)）和紅色（金融類(lèi)）。

2）功能色

功能色通常使用在產(chǎn)品內(nèi)的信息狀態(tài)中，例如成功、失敗、警告、提示等。我們?cè)诠δ苌倪x取上遵循用戶(hù)對(duì)色彩的基本認(rèn)知。建議在同一個(gè)產(chǎn)品中，保持一致的功能色。

3）中性色

中性色被大量使用在產(chǎn)品界面的文字、邊框、分割線等場(chǎng)景中。中性色可以保持產(chǎn)品界面整體的穩(wěn)定和專(zhuān)業(yè)。通常來(lái)說(shuō)，標(biāo)題、正文、邊框的色值會(huì)深一點(diǎn)，分割線、背景、禁用色、斑馬紋的色值會(huì)淺一點(diǎn)。

4）其他色

除了主色、功能色、中性色，在產(chǎn)品界面上還會(huì)需要使用到其他顏色來(lái)支持產(chǎn)品界面的設(shè)計(jì)。例如必填項(xiàng)的顏色。

設(shè)計(jì)規(guī)范中的色值，建議讓開(kāi)發(fā)放到代碼樣式庫(kù)中，這樣子便于做到全局換膚。同時(shí)UI設(shè)計(jì)師在拓展設(shè)計(jì)規(guī)范的時(shí)候，也要嚴(yán)格從色彩庫(kù)里面取出來(lái)，不可隨意增加外部顏色來(lái)設(shè)計(jì)界面。

6. 陰影規(guī)范

在產(chǎn)品界面中，有些特殊的元素會(huì)使用到陰影，從陰影中我們可以看出物體距離平面的高度，距離平面越高的物體陰影越大。

不同的規(guī)范對(duì)陰影的定義不同，筆者定義設(shè)計(jì)規(guī)范的陰影時(shí)，將界面元素分為了無(wú)、低、中、高四個(gè)層級(jí)，不同的層級(jí)，其陰影效果和屬性也不同。

1）無(wú)

在0這一層級(jí)中，元素直接放置于界面上，與界面完全重疊，因此元素?zé)o陰影。例如輸入框、表格。

2）低

在1這一層級(jí)中，元素與基準(zhǔn)面的關(guān)系是展開(kāi)并跟隨，該層中的元素主要是下拉面板。

3）中

在2這一層級(jí)中，被操作元素為存在于界面上的常態(tài)懸浮元素，例如目錄組件。

4）高

在3這一層級(jí)中，元素的運(yùn)動(dòng)與其他層級(jí)沒(méi)有關(guān)聯(lián)，例如彈框。

7. 圓角規(guī)范

不同的圖形，給人不同的視覺(jué)和心理感受。三角形給人穩(wěn)定、平衡、尖銳的感受；圓形給人完整、統(tǒng)一、圓潤(rùn)的感受；正方形給人可靠、嚴(yán)肅和權(quán)威的感覺(jué)。假如改變了一個(gè)圖形的邊框圓角，將會(huì)給用戶(hù)帶去不一樣的感受。

1）0px邊框圓角

給人冷冰冰、硬朗的感覺(jué)，假如產(chǎn)品界面上都是0px邊框圓角的容器，會(huì)讓用戶(hù)感覺(jué)產(chǎn)品很生硬。

2）2px邊框圓角

容器加入2px邊框圓角后，可以發(fā)現(xiàn)圖形頓時(shí)變得柔和了，而這種柔和又不失立挺，傳達(dá)出了產(chǎn)品專(zhuān)業(yè)的感覺(jué)。

3）4px邊框圓角

4px邊框圓角比2px邊框圓角稍微圓潤(rùn)點(diǎn)，和2px邊框圓角一樣，是B端界面常用的邊框圓角數(shù)值。

4）8px邊框圓角

8px邊框圓角比2px邊框圓角顯得更加圓潤(rùn)，使用8px邊框圓角的界面，會(huì)給人柔和的感覺(jué)。

5）圓角

容器直接使用圓角也是有的，但不多。圓角容器更適合在母嬰類(lèi)、女性類(lèi)等產(chǎn)品中使用，給用戶(hù)親切之感。在給產(chǎn)品選擇容器的邊框圓角時(shí)，建議從產(chǎn)品的特性出發(fā)去考慮。任何一種邊框圓角都可以在產(chǎn)品界面中出現(xiàn)，但選擇合適的邊框圓角可以為產(chǎn)品添加視覺(jué)美感和專(zhuān)業(yè)性。

8. 盒子模型規(guī)范

所有HTML元素可以看作盒子，前端開(kāi)發(fā)在搭建界面的時(shí)候，是通過(guò)一個(gè)個(gè)盒子搭建起來(lái)的，盒子包括：外邊距（Margin）、邊框（Border）、內(nèi)邊距（Padding）和實(shí)際內(nèi)容（Content）。

設(shè)計(jì)規(guī)范在搭建過(guò)程中，盡量遵守盒子模型，可以減少設(shè)計(jì)與前端開(kāi)發(fā)的溝通成本。

9. 柵格規(guī)范

為了提升界面布局的統(tǒng)一性，以及提高界面在不同屏幕分辨率下的高自適應(yīng)性，設(shè)計(jì)規(guī)范需要引入柵格系統(tǒng)來(lái)輔助界面設(shè)計(jì)。柵格系統(tǒng)包括頁(yè)面內(nèi)容區(qū)、頁(yè)邊距、列、槽，如下圖所示。

目前B端界面常用的柵格體系是24柵格體系，也就是對(duì)內(nèi)容區(qū)域進(jìn)行 24 柵格的劃分設(shè)置。同時(shí)，槽值為定值，即瀏覽器在放大縮小時(shí)，槽值固定不變。

10. 組件庫(kù)規(guī)范

組件是組成界面的基本單位，在色彩規(guī)范、間距規(guī)范、文字規(guī)范等原子級(jí)規(guī)范的基礎(chǔ)上，加上組件本身需要注意的規(guī)范要素，組件被搭建出來(lái)了。筆者以“輸入框”組件為例，為大家介紹下組件的設(shè)計(jì)過(guò)程。

1）組件形態(tài)

對(duì)于一個(gè)組件來(lái)說(shuō)，由于使用的場(chǎng)景不同，組件之下還需細(xì)分組件形態(tài)，從而達(dá)到提供業(yè)務(wù)開(kāi)箱即用的目的。

“輸入框”可以分為基礎(chǔ)輸入框、復(fù)合輸入框、本文框、文本域等。篩選出來(lái)這些形態(tài)后，需要根據(jù)之前定義的原子級(jí)規(guī)范設(shè)計(jì)組件。例如輸入框的邊框色、文本與邊框的間距、圖標(biāo)的大小，如下圖。

2）組件狀態(tài)

組件狀態(tài)通常分為可輸入、可修改、hover、激活、禁用與只讀，這些都需要設(shè)計(jì)出來(lái)，如下圖。

3）組件交互

作為設(shè)計(jì)師，主要完成的還是界面交互工作，很少去細(xì)究組件的交互。但組件的交互是否合理，是決定用戶(hù)能否快速、順利完成頁(yè)面任務(wù)的關(guān)鍵。因此企業(yè)級(jí)設(shè)計(jì)規(guī)范就需要承擔(dān)這部分職責(zé)，完成組件的體驗(yàn)交互工作，組件的體驗(yàn)交互分為了鼠標(biāo)交互和鍵盤(pán)交互。

11. 頁(yè)面模板規(guī)范

有了組件設(shè)計(jì)規(guī)范，基本上UI設(shè)計(jì)師已經(jīng)可以搭建頁(yè)面了，但是想要保證產(chǎn)品高度的一致性，頁(yè)面模板就非常必要。基于大量業(yè)務(wù)場(chǎng)景，設(shè)計(jì)規(guī)范抽出一部分高共性頁(yè)面，搭建產(chǎn)品常用的典型頁(yè)面模板。在頁(yè)面模板中，筆者認(rèn)為可以注意如下幾點(diǎn)。

1）強(qiáng)共性

強(qiáng)共性是指頁(yè)面模板要有參考價(jià)值，這些頁(yè)面是幾乎每個(gè)產(chǎn)品普遍都會(huì)用到的高頻頁(yè)面，如此的頁(yè)面模板才具有納入設(shè)計(jì)規(guī)范的價(jià)值。

2）規(guī)則清晰

頁(yè)面模板的定位是給UI設(shè)計(jì)師直接使用，或在此基礎(chǔ)上拓展的，那么規(guī)則必須簡(jiǎn)單和清晰，這樣才方便設(shè)計(jì)師舉一反三。

3）可拓展

設(shè)計(jì)規(guī)范不可能涵蓋所有的產(chǎn)品界面，因此要給出拓展規(guī)則，方便設(shè)計(jì)者拓展業(yè)務(wù)性頁(yè)面的同時(shí)也能保持和規(guī)范的一致性。在一致性中探索設(shè)計(jì)更多的可能性，也是B端設(shè)計(jì)師一直在追求的。

四、設(shè)計(jì)規(guī)范的設(shè)計(jì)原則

在帶領(lǐng)團(tuán)隊(duì)定制企業(yè)級(jí)B端設(shè)計(jì)規(guī)范的這些時(shí)日，筆者根據(jù)自己遇到的問(wèn)題，梳理了一些在定制設(shè)計(jì)規(guī)范中可以參考的設(shè)計(jì)原則。

1. 明確目標(biāo)

在著手制定設(shè)計(jì)規(guī)范前，需要明確設(shè)計(jì)規(guī)范要達(dá)到的目標(biāo)是什么，有了目標(biāo)，才能制定詳細(xì)的方案與執(zhí)行計(jì)劃。如果盲目的開(kāi)始著手設(shè)計(jì)，基本上會(huì)推翻從來(lái)。

2. 劃定范圍

設(shè)計(jì)規(guī)范的范圍小到組件庫(kù)，大到設(shè)計(jì)價(jià)值觀、設(shè)計(jì)原則、頁(yè)面模板等，到底要做多全，那是和目標(biāo)息息相關(guān)的。因此設(shè)計(jì)規(guī)范的范圍要定下來(lái)，并且哪些規(guī)范要嚴(yán)控，哪些可以放寬，都需要前期有范圍與規(guī)劃。

3. 有序執(zhí)行

怎么做，是執(zhí)行階段的事情。包括色彩定幾種、文字大小怎么定、換膚方案怎么設(shè)計(jì)等，都需要考慮全了再去做，而不是打開(kāi)sketch就開(kāi)始畫(huà)。需要全盤(pán)考慮清楚，各個(gè)部分拆解清楚，相關(guān)聯(lián)部分建立聯(lián)系，有條不紊去設(shè)計(jì)。

4. 可用性測(cè)試

當(dāng)設(shè)計(jì)規(guī)范完成一部分后，可以發(fā)放到產(chǎn)品部進(jìn)行可用性測(cè)試，看看他們對(duì)規(guī)范是否可接受，可接受就繼續(xù)往下走，如果有異議，需要停下來(lái)，先進(jìn)行完善，再繼續(xù)往下做。

5. 規(guī)則清晰

既然是企業(yè)級(jí)設(shè)計(jì)規(guī)范，規(guī)則就不宜定得過(guò)于復(fù)雜，一旦復(fù)雜，設(shè)計(jì)者就不好拓展，不但不容易吸收和使用規(guī)則，而且會(huì)把規(guī)則錯(cuò)用。因此，筆者建議規(guī)則要清晰、克制和收斂。

6.?合理迭代

設(shè)計(jì)規(guī)范是具有生命力的，會(huì)不斷將合理的需求納入規(guī)范，因此制定合理的迭代計(jì)劃很重要。建議組織可以專(zhuān)門(mén)成立一個(gè)負(fù)責(zé)設(shè)計(jì)規(guī)范的小組，定期將業(yè)務(wù)需求收錄進(jìn)來(lái)后，展開(kāi)討論會(huì)，把共性需求納入到規(guī)范中。

五、設(shè)計(jì)規(guī)范的優(yōu)勢(shì)

企業(yè)級(jí)設(shè)計(jì)規(guī)范，對(duì)于不同的角色來(lái)說(shuō)，看待其的意義不同。但設(shè)計(jì)規(guī)范確實(shí)有其自身的優(yōu)勢(shì)，這是不容質(zhì)疑的。

1. 設(shè)計(jì)側(cè)

針對(duì)相似的模塊，設(shè)計(jì)規(guī)范可以保證不同設(shè)計(jì)師在設(shè)計(jì)同一產(chǎn)品時(shí)，降低溝通成本，提高設(shè)計(jì)效率，解決用戶(hù)體驗(yàn)一致性的問(wèn)題。如此一來(lái)，設(shè)計(jì)師可以更深度地思考業(yè)務(wù)、產(chǎn)品目標(biāo)、用戶(hù)體驗(yàn)等更有價(jià)值的東西。

2. 開(kāi)發(fā)側(cè)

設(shè)計(jì)規(guī)范不能只存在于紙面上，需要同步形成開(kāi)發(fā)資產(chǎn)，這樣可以提升研發(fā)效率，降低維護(hù)成本。開(kāi)發(fā)工程師無(wú)需再重復(fù)開(kāi)發(fā)同一個(gè)組件，只需要去組件庫(kù)里調(diào)用即可，配合業(yè)務(wù)邏輯，高效完成界面開(kāi)發(fā)。

Antdesign、Element的設(shè)計(jì)組件庫(kù)，皆有對(duì)應(yīng)的開(kāi)發(fā)組件庫(kù)，真正做到開(kāi)箱即用。

3. 測(cè)試側(cè)

標(biāo)準(zhǔn)化的設(shè)計(jì)規(guī)范，是測(cè)試人員最喜歡看到的。1是1、2是2的設(shè)計(jì)準(zhǔn)則，穩(wěn)定了測(cè)試用例，提升了測(cè)試效率。

例如，設(shè)計(jì)規(guī)范規(guī)定彈窗footer區(qū)按鈕組居中，那么測(cè)試人員只要測(cè)到不居中，就可以給產(chǎn)品提優(yōu)化建議了。

4. 產(chǎn)品間

企業(yè)級(jí)設(shè)計(jì)規(guī)范的最大優(yōu)勢(shì)是可以保證不同產(chǎn)品間的互融互通，保證體驗(yàn)的一致性?，F(xiàn)在在很多企業(yè)中，同一個(gè)產(chǎn)品的不同模塊會(huì)有多個(gè)團(tuán)隊(duì)完成，這時(shí)候，企業(yè)級(jí)設(shè)計(jì)規(guī)范起到了非常重要的作用，它保證了產(chǎn)品團(tuán)隊(duì)使用同一份設(shè)計(jì)規(guī)范來(lái)完成產(chǎn)品設(shè)計(jì)。

六、對(duì)設(shè)計(jì)規(guī)范的思考

自從接手負(fù)責(zé)企業(yè)級(jí)設(shè)計(jì)規(guī)范，筆者在制定和推進(jìn)的過(guò)程中，也是遇到了非常多的阻礙。俗話說(shuō)得好，條條道路通羅馬。因此，筆者經(jīng)常思考和總結(jié)，唯一的目標(biāo)，是用心將這件事情做好，真正賦能業(yè)務(wù)價(jià)值。

1. 為什么要做企業(yè)自己的設(shè)計(jì)規(guī)范

筆者在搭建企業(yè)級(jí)設(shè)計(jì)規(guī)范的時(shí)候，經(jīng)常被問(wèn)，現(xiàn)在市面上有那么多第三方設(shè)計(jì)規(guī)范，為什么還需要搭建自己的設(shè)計(jì)規(guī)范？像Antdesign，已經(jīng)做得這么成熟了，直接拿來(lái)用不就好啦？

剛開(kāi)始的時(shí)候，筆者時(shí)常會(huì)不知道該如何回答。但現(xiàn)在，我想說(shuō)，搭建自有設(shè)計(jì)規(guī)范是非常必要的。原因在于：

1. B端產(chǎn)品的業(yè)務(wù)特性決定了沒(méi)有一款設(shè)計(jì)規(guī)范可以覆蓋所有的場(chǎng)景。
2. 如果使用第三方設(shè)計(jì)規(guī)范，在遇到相關(guān)規(guī)范上的問(wèn)題的時(shí)候，將不能及時(shí)有效地解決問(wèn)題。
3. 第三方設(shè)計(jì)規(guī)范是沒(méi)有生命力的，這種生命力在于不適應(yīng)企業(yè)業(yè)務(wù)本身，而非規(guī)范自身的問(wèn)題。而自有設(shè)計(jì)規(guī)范可以在業(yè)務(wù)的磨礪中，逐漸穩(wěn)定下來(lái)，同時(shí)持續(xù)拓展生命力。

2. 設(shè)計(jì)規(guī)范如何落地

設(shè)計(jì)規(guī)范不能只在sketch里面存在，在sketch里面存在的設(shè)計(jì)規(guī)范不能緊靠審美設(shè)計(jì)出來(lái)。這里的設(shè)計(jì)規(guī)范落地分為兩點(diǎn)。

1. 設(shè)計(jì)規(guī)范等否得到業(yè)務(wù)的認(rèn)可，不適應(yīng)業(yè)務(wù)需要的設(shè)計(jì)規(guī)范是沒(méi)有任何價(jià)值的。
2. 設(shè)計(jì)規(guī)范能否從設(shè)計(jì)稿轉(zhuǎn)到代碼側(cè)，成為開(kāi)箱即用的設(shè)計(jì)規(guī)范，才是業(yè)務(wù)實(shí)實(shí)在在需要的。

以上兩點(diǎn)，筆者深有體會(huì)。在筆者搭建企業(yè)級(jí)設(shè)計(jì)規(guī)范的過(guò)程中，多次評(píng)審修正，且投入業(yè)務(wù)使用與收集反饋，不斷完善設(shè)計(jì)規(guī)范。同時(shí)推動(dòng)開(kāi)發(fā)落地與設(shè)計(jì)走查，保證設(shè)計(jì)規(guī)范在開(kāi)箱即用的過(guò)程中，真正能做到提升用戶(hù)體驗(yàn)。

七、總結(jié)

一旦開(kāi)始了企業(yè)級(jí)B端設(shè)計(jì)規(guī)范之路，圍繞設(shè)計(jì)規(guī)范展開(kāi)的事情就會(huì)接踵而來(lái)。包括規(guī)則不適用了怎么辦、規(guī)則有歧義怎么辦、怎么檢測(cè)規(guī)則被執(zhí)行到位，等等。這些筆者遇到的問(wèn)題，都會(huì)陸陸續(xù)續(xù)整理成文章，分享給大家。

往后還有很長(zhǎng)的路要走，但是，筆者相信這條路是必須要去走，而且非常有價(jià)值要走。筆者正在構(gòu)建這塊的生態(tài)，歡迎有想法的小伙伴一起探討，可以給我留言。

作者：知果；公眾號(hào)：知果日記

本文由 @知果 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。