萬(wàn)字長(zhǎng)文 詳解企業(yè)級(jí)B端設(shè)計(jì)規(guī)范搭建思路（實(shí)戰(zhàn)篇）

萬(wàn)字長(zhǎng)文|詳解企業(yè)級(jí)B端設(shè)計(jì)規(guī)范搭建思路（實(shí)戰(zhàn)篇）一、設(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ì)理論?；瘜W(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)先原則）：HelveticaNaue（英文/數(shù)字）、Helvetica(英文/數(shù)字)、Arial(英文/數(shù)字)、PingFangSC、HiraginoSansGB、MicrosoftYaHeiUI、微軟雅黑、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)有兩種：12px（正文）、14px（標(biāo)題）、16px（特殊情況，極少使用）；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ì)比度。（3：1）在WCAG2.01.4.3（AA級(jí)）下，大型文本（18pt或14pt粗體或更大）的最小對(duì)比度。（4.5：1）在WCAG2.01.4.3（AA級(jí)）下，常規(guī)尺寸文本的最小對(duì)比度。（7：1）在WCAG2.01.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)箱即用的目的?！拜斎肟颉笨梢苑譃榛A(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è)面模板就非常必要?；诖罅繕I(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ò)程中，也是遇到了非常多的阻礙。俗