上一篇文章我們聊了設(shè)計規(guī)范的前三個部分，包括設(shè)計規(guī)范的基礎(chǔ)概述，如何開始整理設(shè)計規(guī)范，大廠設(shè)計規(guī)范推薦，那么接下來，我們來聊聊第四章和第五章的B端的設(shè)計規(guī)范分解及組件庫。稍微有一點長，請耐心看完，會對剛接觸B端的新手們有一定的幫助，也能幫您提高工作效率，節(jié)約不少時間的。

一、設(shè)計規(guī)范分解

設(shè)計師在開始準(zhǔn)備設(shè)計規(guī)范時，首先需要確定設(shè)計風(fēng)格和設(shè)計尺寸，頁面布局是做居中固定式，還是全屏響應(yīng)式。如果是全屏響應(yīng)式的網(wǎng)頁設(shè)計，那要選擇怎么樣的屏幕來做效果？等等這些問題

接下來分別來展開說明。

1. 設(shè)計風(fēng)格

三種B端產(chǎn)品的設(shè)計風(fēng)格：

純白風(fēng)（網(wǎng)頁大背景是純白色；文字背景是線框，輕淡色（灰）；文字一般用深色）

輕淡風(fēng) (網(wǎng)頁大背景是淺灰色；文字背景是白色；文字一般用深色）；

深色風(fēng)（網(wǎng)頁大背景是深色；文字背景是帶有透明度的純色；文字一般用白色）

我們在開始設(shè)計之前，要確定好使用哪種風(fēng)格，一旦確定下來，后面的所有頁面和元件的設(shè)計，都得基于這個風(fēng)格來設(shè)計。

據(jù)數(shù)據(jù)顯示，目前市面上比較流行的是：輕淡色背景風(fēng)+全屏響應(yīng)式的設(shè)計風(fēng)格，也是相對比較保守安全的設(shè)計。

接下來需要考慮尺寸是做居中固定式，還是全屏響應(yīng)式。全屏響應(yīng)式的網(wǎng)頁設(shè)計，選擇怎么樣的屏幕來做效果。

2. 設(shè)計尺寸

設(shè)計規(guī)范中，分辨率尺寸的問題，一直以來是我們設(shè)計師討論最多的。

決定產(chǎn)品設(shè)計尺寸分辨率大小的因素大致包含以下兩點：

2.1 市場占有率（主流）

目前市面上主流的排在前3的屏幕分辨率為1920*1080，1440*900，1366*768。

2.2 兼容能力

做B端產(chǎn)品時，現(xiàn)在市場上的設(shè)計師一般都會采用的是1440*900。為什么不用市場占有率最高的1920*1080和1366*768呢？

1、由于B端產(chǎn)品的特殊性，它的尺寸分辨率大小，是取決于用戶使用的電腦設(shè)備條件。由于員工電腦顯示屏大部分都是統(tǒng)一采購的，尺寸也就大致統(tǒng)一，所以開發(fā)適配的分辨率可以按這個統(tǒng)一尺寸進(jìn)行設(shè)計。

2、因為它的兼容能力會比較強(qiáng)，向上適配或者向下適配誤差會比較小，不管是市場占比最高的主流1920*1080尺寸，還是一般般的1366*768尺寸，都完全可兼容。

注意：別忘了設(shè)計出極端情況（寬度為1280，以及寬度為1920）的效果圖，力求前端開發(fā)實現(xiàn)的效果和高保真設(shè)計圖誤差最小。

假如你產(chǎn)品的用戶用的設(shè)備主要是市面上占有率最高的24寸辦公室顯示器，也就是1920*1080分辨率的話，那毫無疑問，在選擇設(shè)計尺寸上，直接選擇1920*1080分辨率。

比如我現(xiàn)在做的產(chǎn)品，除了移動辦公，web基本都是固定辦公，管理人員使用的辦公設(shè)備（電腦）屏幕一般都是臺式電腦，那這個時候，我們在設(shè)計時就會同時考慮它的占有率和兼容能力。所以我們采用的是：1920*1080分辨率。

所以設(shè)計師們在選擇尺寸上，一定要靈活使用，不能一味的認(rèn)死理只選擇1920 或1440某一尺寸，而是要對您的產(chǎn)品用戶的具體情況做好分析，從而得出最適合你們產(chǎn)品的設(shè)計稿的尺寸。

注意點：

如果希望設(shè)計稿完全還原程度高的話，還特別要考慮瀏覽器的適配，比如說它的頂部固定區(qū)域（當(dāng)前網(wǎng)址，書簽欄等的高度）必須排除在外，剩余的部分才是我們設(shè)計稿的真實高度。

拿我們常用的谷歌瀏覽器舉例，如下面公式所示：設(shè)計實際高度=電腦分辨率 -（網(wǎng)址欄+書簽欄+頁簽高度)

3. 頁面布局

3.1 常見的頁面框架有以下三種：

第一種：上下布局

上下布局包括：”頂部菜單欄、主體內(nèi)容”兩大區(qū)域。其中頂部菜單欄是固定不變的，主體內(nèi)容根據(jù)不同分辨率進(jìn)行自適應(yīng)動態(tài)縮放。另外還需要把主體內(nèi)容左右兩邊空白區(qū)域最小值確定好；

優(yōu)勢：內(nèi)容區(qū)域可操作空間大。

劣勢：導(dǎo)航區(qū)域限制數(shù)量，如果導(dǎo)航選項內(nèi)容比較多，用頂部橫向?qū)Ш降脑?，就會顯得很擁擠。另外，橫向?qū)Ш揭话阌小罢归_”，“折疊”，和“收起”三種狀態(tài)，加上內(nèi)容很多的情況下，橫向?qū)Ш骄吞貏e難做到尺寸適配。

第二種：左右布局

左右布局包括：”左側(cè)菜單欄、頂部欄、主體內(nèi)容”三大區(qū)域。其中頂部菜單欄、左側(cè)菜單欄是固定不變的，右側(cè)主體內(nèi)容根據(jù)分辨率進(jìn)行自適應(yīng)動態(tài)縮放。

左右布局時，左側(cè)菜單是支持收縮或展開，收縮狀態(tài)下也需要有固定的寬度。

優(yōu)勢：導(dǎo)航部分可擴(kuò)展性強(qiáng)，適合導(dǎo)航選項內(nèi)容都是比較多的情況。且只有“展開“和”收起”兩種狀態(tài)，在不同屏幕情況下，寬度的自適應(yīng)也能更加得心應(yīng)手。

劣勢：相對內(nèi)容區(qū)域空間變少。

第三種：其他的布局

現(xiàn)在很多后臺管理系統(tǒng)采用，”頂部一級導(dǎo)航欄、左側(cè)二級菜單欄、主體內(nèi)容”三大區(qū)域。其中頂部菜單欄、左側(cè)菜單欄是固定不變的，右側(cè)主體內(nèi)容根據(jù)分辨率進(jìn)行自適應(yīng)動態(tài)縮放。

優(yōu)勢：結(jié)構(gòu)更清晰?？沙休d更多層級內(nèi)容。更適用于復(fù)雜且層級多的產(chǎn)品。

所以，可以得出結(jié)論：設(shè)計師在選頁面布局的時候，要全局考慮產(chǎn)品框架及內(nèi)容。

1、如果導(dǎo)航選項內(nèi)容比較多的話，或者不確定有多少內(nèi)容的情況，從美觀和操作難易程度、可用性來評估的話，選擇第二種左側(cè)導(dǎo)航是最適合B端產(chǎn)品使用的。

2、如果內(nèi)容選項確定很少，就沒那么多限制，“左側(cè)縱向””頂部橫向”都好使

特別要注意：

1、同一個產(chǎn)品需要考慮它的統(tǒng)一性，不能這里使用頂部橫向，那里用左側(cè)縱向。

2、如果是個更新迭代的版本，就還得考慮老用戶之前的使用習(xí)慣，避免引起不必要的麻煩。

在確定好導(dǎo)航的布局后，就基本上能確定整個產(chǎn)品的頁面布局了。

3.2 常見布局尺寸：

B端產(chǎn)品，一般會在整個頁面的左上角放企業(yè)的LOGO，頂部欄高度48+8n，側(cè)邊欄寬度200+8n。

我常用的是頂部欄高度：56px或80px，側(cè)邊欄寬度：200px，側(cè)邊欄收縮狀態(tài)寬度：56px或80px，右側(cè)的側(cè)浮窗寬度：400px。（具體高度寬度尺寸，設(shè)計師可根據(jù)具體情況來定，不需要按部就班這么死板）。

同時需要確定好主體內(nèi)容的上下左右邊距，以及主體內(nèi)容區(qū)域中各模塊的安全距離，內(nèi)容超出區(qū)域的，通過滾動查閱更多。

4. 文字

4.1 B端產(chǎn)品常用的字體

Windows系統(tǒng)：中文Microsoft YaHei(微軟雅黑），英文Arial；

Mac字體：中文PingFang SC（平方字體），英文 Helvetica；

4.2 常用的字體大小

常見的字體大小為：12px、14px、16px、18px、20px、24px、26px、28px、30px（一般都是采用偶數(shù)字號，文字大小12+4n）。

注意：

在設(shè)計過程中，設(shè)計師對字號應(yīng)該有一個全局觀，在同一個界面內(nèi)，盡量少用大小太接近的字號。比如一個頁面中，如果同時用了12px、13px、14px、15px、16px、18px排版，文字的層級對比會比較弱，沒有主次之分，用戶閱讀困難，視覺效果也顯得凌亂。

所以，剛接觸B端產(chǎn)品的小白設(shè)計師，如果不知道怎么運(yùn)用不同字號字體的情況下，可以直接以這組字號12px、14px、16px、20px、34px的字號為參考使用，這樣的分布會層次明晰，能夠有個比較不錯的布局結(jié)構(gòu)。

“行高”根據(jù)文字大小和使用場景來定，公式如下，

行高=文字大小+8px（或6px，視情況而定，我常用8）

例如：12號字體的行高=12+8=20px

同一個界面中，一定不要出現(xiàn)多個不同字體。盡量選擇用戶設(shè)備里自帶的字體來進(jìn)行設(shè)計，比如說WIN系統(tǒng)默認(rèn)用系統(tǒng)自帶的“微軟雅黑”，不能使用特殊字體。

如果必須要用特殊字體，建議用圖片替代。如果用戶的設(shè)備里沒有你使用的這些字體的話，會默認(rèn)顯示設(shè)備的系統(tǒng)自帶字體，最終效果就會和你的設(shè)計稿相差很多。

從視覺方面來講，為了讓整體界面更簡潔具有美感，體驗感更好，在使用字體方面，一般字體種類不超過2種，越少越好。因為頁面的層次感主要是靠字號大小及顏色拉開層次，如果字號在變，字體種類也各種變化，整體就會感覺很凌亂，沒有統(tǒng)一性。

5. 顏色

顏色規(guī)范包含“品牌色”、“輔助色”、“中性色、圖表色”四部分。

5.1 品牌色系

品牌色系：即產(chǎn)品主色調(diào)，主色調(diào)的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受，也是產(chǎn)品的對外的形象。品牌色是根據(jù)這個產(chǎn)品的特征和定位、用戶群，以及使用場景等綜合考慮最后確定的。

品牌色的一般用于LOGO 、操作狀態(tài)、按鈕顏色、其他一些可操作圖標(biāo)等。

1、品牌色一般建議選擇冷色系。這樣有效避免與“錯誤提醒”的紅色、黃色相沖突，讓人誤解。但要是被硬性要求必須選暖色系作為主色調(diào)，就得格外注意調(diào)節(jié)好主色調(diào)與錯誤提醒的區(qū)別了。

2、注意選的品牌色（主色調(diào)）不要太刺眼。要保證用戶長時間使用也不至于顏色太亮太刺眼，而產(chǎn)生的視覺疲勞。

5.2 輔助色系

輔助色系：輔助色一般用于“提示”。類似：成功、失敗、警告、無效等內(nèi)容等。

5.3 中性色系

中性色系：中性色涵蓋黑、白、灰三個不同層級，通常在文本、背景、邊框、分割線用到它們。同一色相，只要改變它的透明度就能表現(xiàn)出不同的層級。

B端產(chǎn)品的文字中，一般會有：一級標(biāo)題、二級標(biāo)題、一級正文、二級正文、提示文字、輔助文字、說明文字等。

為了區(qū)分層級，提升用戶的閱讀體驗感，通常會根據(jù)具體需求，把字體顏色的深淺，大致分成3到5個層級。常見的有#333333、#666666、#999999這個組合，這個組合的層級區(qū)分比較分明，適應(yīng)性比較廣，設(shè)計師在設(shè)計時可以直接作為參考。

5.4 圖表色系

圖表色：我們常見的后臺管理類產(chǎn)品， 像數(shù)據(jù)可視化、統(tǒng)計圖、多個標(biāo)簽的不同配色方案，所以一般還會設(shè)定圖表的顏色。

6. 按鈕

按鈕是任何用戶界面不可或缺的交互元素，B端產(chǎn)品中用到按鈕的場景特別多，類似：登錄注冊，保存，表單，彈窗，導(dǎo)航，提交，確認(rèn)等等。

6.1 按鈕的形式

常見的按鈕形式包含這六大類：圖標(biāo)文字組合的按鈕 ，主按鈕，次按鈕（線性按鈕），按鈕菜單，文字按鈕，圖標(biāo)按鈕。

6.2 按鈕的交互狀態(tài)

常見的按鈕交互狀態(tài)包含六種：

正常狀態(tài)、聚焦?fàn)顟B(tài)（使用Tab鍵或方向鍵來對網(wǎng)頁進(jìn)行訪問輸入的聚焦?fàn)顟B(tài)，在設(shè)計時很多設(shè)計師都會把這一狀態(tài)忘記，導(dǎo)致用戶無法用方向鍵控制光標(biāo)位置，會降低用戶的使用體驗感）

懸停狀態(tài)（鼠標(biāo)正在按鈕上，但不點擊，需要注意的是平板電腦和移動端設(shè)備上不會展示懸停狀態(tài)，因為手指跟光標(biāo)不一樣，無法在屏幕上進(jìn)行懸停 ）

• 激活狀態(tài)（點擊按下狀態(tài)）
• 加載狀態(tài)（等待期間不可操作，在B端產(chǎn)品中Loading狀態(tài)特別重要，能緩解用戶的焦慮情緒）
• 禁用狀態(tài)（不可操作狀態(tài)，置灰顯示和透明度（40%）代表不可操作狀態(tài)）

6.3 按鈕的圓角

按鈕圓角：在開始設(shè)計產(chǎn)品之前，設(shè)計師都需要對按鈕圓角有具體的規(guī)劃。按鈕四角都是直角會比較有距離感和強(qiáng)烈的引導(dǎo)性，容易分散用戶注意力，所以我們一般會采用視覺上給人比較柔和親近感覺的圓角按鈕。

但按鈕的圓角并不是越大越好，因為在相同尺寸下，按鈕圓角小的，操作熱區(qū)會更大，頁面的使用效率也會更高，更容易操作。同時還要特別考慮到下拉菜單的設(shè)計，所以圓角大小一般采用偶數(shù)：2px,4px,6px,8px,16px為宜，不宜過大（這里的圓角弧度的值有一定的倍數(shù)關(guān)系或基數(shù)關(guān)系，例如：4/8/16, 4/6/8，4/8/12，都是可行的）。

注意：圓角大小也會跟著按鈕尺寸的大小有相應(yīng)的變化。

6.4 按鈕的高度

在B端產(chǎn)品中，當(dāng)確定好網(wǎng)格基數(shù)時（通常網(wǎng)格設(shè)定為：4px。按鈕的高度會分兩種情況：

1、一種是寬度為高度的倍數(shù)關(guān)系。

2、第二種是如果寬度為高度的倍數(shù)關(guān)系，從視覺上看達(dá)不到想要的效果的話，設(shè)計師就可以靈活設(shè)置。

6.5 按鈕的大小

討論到按鈕的尺寸，我們需要大致知道如何設(shè)置網(wǎng)格基數(shù)。

在設(shè)計中，我們需要在常用的繪圖軟件（如：Ps、Sketch）里找到我們的網(wǎng)格功能，設(shè)定好一個數(shù)為基數(shù)，然后按照這個基數(shù)來進(jìn)行按鈕的繪制，按鈕就相對比較規(guī)范了。

那如何用繪圖工具設(shè)置網(wǎng)格基數(shù)呢？方法如下：在Sketch繪圖工具中找到：【視圖】-【畫布】-【網(wǎng)格設(shè)置】- 彈出網(wǎng)格設(shè)置對話框進(jìn)行設(shè)置就好了。

把網(wǎng)格基數(shù)設(shè)置為【4】的原因：它是谷歌Material Design繪制小組件的規(guī)范，模塊之間定義的基數(shù)就是【8】。

假設(shè)我們定這個基數(shù)為4，那采用的尺寸數(shù)值就需要是基數(shù)4的倍數(shù)。比如B端產(chǎn)品中，常用的按鈕高度尺寸有：24px、32px、36px 、40px、48px，這些都是可以整除基數(shù)4的值。例如：32/4=8，40/4=10，這里的4為基數(shù)。

按鈕的寬度尺寸，一般是確定好文字到邊框左右兩邊的距離（例如如圖Padding值為12px)后，開發(fā)會根據(jù)文字內(nèi)容的多少自適應(yīng)的。

按鈕間距，按鈕之間的間距也遵循基數(shù)為4的倍數(shù)，比如：16，24，32，40，48等。這里的基數(shù)定為偶數(shù)（一般為4或8）

7. 表單

從廣義的定義來講，表單是指用于數(shù)據(jù)錄入的一切形式。從狹義上來講，表單在大家更廣泛的認(rèn)知印象中，表單則是一類包含輸入框、下拉選擇框等常見控件的組合形式的頁面才屬于表單。表單的本質(zhì)核心是提交數(shù)據(jù)，所以凡是具備采集數(shù)據(jù)并完成采集后提交數(shù)據(jù)的交互形式均可稱之為表單。

表單在設(shè)計上的結(jié)構(gòu)有：1、標(biāo)題；2、表單標(biāo)簽；3、占位符；4、表單域；5、提示信息；6、操作按鈕；

7.1 表單設(shè)計目標(biāo)

表單的設(shè)計必須優(yōu)先考慮為用戶減負(fù)，提高效率并簡化填寫流程。另外表單中組件的選擇需要依據(jù)具體的數(shù)據(jù)類型和具體的業(yè)務(wù)場景進(jìn)行合理正確的選用，為用戶提供高效的數(shù)據(jù)錄入表單，降低用戶操作成本、認(rèn)知負(fù)擔(dān)，并提高數(shù)據(jù)采集效率才是表單設(shè)計的根本目的。

7.2 表單的輸入域

可交互輸入域，是構(gòu)成表單的核心內(nèi)容，是表單用來采集數(shù)據(jù)的入口。輸入?yún)^(qū)是用戶交互最多也是最能影響使用體驗的區(qū)域，不同類型數(shù)據(jù)選擇與之相應(yīng)的錄入方式，對提高表單操作效率和用戶體驗大有裨益。

表單并不是把一些不同類型的輸入框排排版、標(biāo)清楚必填非必填、哪些表單比較復(fù)雜適當(dāng)?shù)募觽€說明就完了

其實，表單設(shè)計遠(yuǎn)遠(yuǎn)不止這些，表單本身也是一個小產(chǎn)品，它也需要有需求的支撐、也需要嵌套使用情境、也需要考慮用戶的心理模型；從表單的產(chǎn)生到表單在頁面上如何呈現(xiàn)，再到使用表單時與表單之間的交互，每一步都需要投入大量的思考來做好表單。

后面我會專門有一篇16000+的文章聊聊這個B端產(chǎn)品中比較核心的表單，有興趣的朋友可以關(guān)注一下，大概五月份就會發(fā)。

8. 表格

表格在整個B端產(chǎn)品比較常見的，它的地位也是相當(dāng)重要的，我們在設(shè)計表格時需要注意一下幾點：

8.1.表格內(nèi)的文字內(nèi)容：

一般以左對齊為準(zhǔn)。與左邊表格邊距盡量保持在10px以上的間距。（特別注意：金額和操作的標(biāo)題和內(nèi)容需要右對齊）

8.2 表格的列數(shù)：

默認(rèn)展示的列數(shù)為3-8列，如果需要展示更多列數(shù)，則需要優(yōu)先固定展示重要列，其余的列的內(nèi)容會以滾動條滑動而展展示出來。

8.3 表格列表的寬度：

寬度的尺寸大小自適應(yīng)，但需要根據(jù)文字的重要性顯示，重要文字內(nèi)容優(yōu)先完整顯示。

8.4 表頭每列標(biāo)題文字字?jǐn)?shù)：

字符不要多，最多可輸入8個。如果文字太多，就需要做文字信息精簡化。

8.5 滾動條使用場景：

表格內(nèi)容超過一屏，就需要顯示豎向滾動條，注意：表頭需要固定，但表格內(nèi)容可滾動展示。

8.6 表格無內(nèi)容：

表格的某些單元格無數(shù)據(jù)內(nèi)容時，需要用“—”表示，需要區(qū)別于“0”。

8.7 表格標(biāo)題欄和內(nèi)容欄高度尺寸：

標(biāo)題欄高度（標(biāo)準(zhǔn)高度為56px）；內(nèi)容欄（標(biāo)準(zhǔn)高度為56px，偏大的標(biāo)題欄高度為80px），內(nèi)容區(qū)和標(biāo)題欄水平居中對齊。

8.8 表格內(nèi)容對齊方式：

列的對齊方式（垂直方向）除了需要始終保持“右對齊”的：金額，最右側(cè)操作列內(nèi)容外，其他的內(nèi)容可自行左對齊或右對齊。行的對齊方式（水平方向）

當(dāng)表格欄的高度尺寸小于80px 時，一般只有一排內(nèi)容，內(nèi)容水平需要居中對齊。當(dāng)表格欄的高度尺寸大于80px時，如果是有兩排內(nèi)容，所有的內(nèi)容需要頂對齊；但是如果既有一排內(nèi)容 又有多拍內(nèi)容的話 ，內(nèi)容水平則需要居中對齊。

8.9 自適應(yīng)規(guī)則：

表格中的內(nèi)容，會根據(jù)字段的長短定義所占的百分比，完成表格占比，從而達(dá)到希望實現(xiàn)的最佳效果。

8.10 滾動條：

滾動條分為橫豎兩種，當(dāng)表格內(nèi)容超過一屏?xí)r，就需要顯示滾動條。豎向滾動條時， 需要固定表頭標(biāo)題欄和頁碼。只需滾動表格內(nèi)容部分即可。橫向滾動條時， 需要固定第一列 和 正在操作的項列。只滾動表格內(nèi)容部分即可。

9. 反饋

9.1 弱反饋

僅提示用戶相關(guān)內(nèi)容，不需要用戶做任何交互動作。類似：toast弱提示通知提示等彈窗（（一般3-5秒會自動消失：包含普通信息，成功信息，失敗信息，警告信息）。

另外還有，鼠標(biāo)經(jīng)過的時候即可出現(xiàn)而不用點擊的彈窗（這個彈窗通常會設(shè)計一個浮動帶有陰影效果的框，不需要遮罩）。比如提示說明，顯示更多信息，鼠標(biāo)移過后立即消失，它不會影響下一層（當(dāng)前頁面內(nèi)容）頁面的視覺效果和操作。弱彈窗尺寸一般根據(jù)文字多少自行適配。

9.2 強(qiáng)反饋

第二種是強(qiáng)彈窗。它是一個需要用戶必須對這個對話框進(jìn)行操作后才可以離開。

例如彈出的列表，詳情，表單等的確認(rèn)信息彈窗、錯誤提示彈窗。這些強(qiáng)彈窗一般會對下面一層的頁面做一些遮罩處理，例如添加上一層有透明度（例如30%，50%都可以）的黑色/白色，給下一層頁面的內(nèi)容做模糊濾鏡等等；

在寫彈框規(guī)范時，應(yīng)了解各自項目中需使用彈框的有哪些內(nèi)容，給出相關(guān)大小彈框的比例，哪些為固定尺寸，哪些為適配比例。以及對于通知提示給出停留多少時間后自動消失，彈窗彈出狀態(tài)等等相關(guān)的交互規(guī)范。

10. 其他

缺省頁是互聯(lián)網(wǎng)中常見的場景，當(dāng)遇到網(wǎng)絡(luò)不好、頁面中沒有內(nèi)容數(shù)據(jù)、暫無資料等等情況，所導(dǎo)致的空白頁面。

大致分可為：系統(tǒng)類缺省頁，信息類缺省頁，空白類缺省頁。

遇到這些情況時，設(shè)計師一般采用一些插畫&文字的組合放置本來空白的頁面中提示或引導(dǎo)用戶進(jìn)行下一步操作，以緩解用戶的焦慮情緒。（也就是我們常說的情感化設(shè)計的一種方式）

二、組件庫

設(shè)計規(guī)范很大一部分是組件庫，所以就把組件庫單獨拎出來聊聊。

1. 組件庫是什么？

做一個比喻，組件庫相當(dāng)于積木玩具的一個個積木，每個組件就是一塊積木，通過組件的拼搭可以迅速搭建出一個頁面，而設(shè)計規(guī)范就相當(dāng)于搭建的“說明書”。

通常我們將組件庫分為基礎(chǔ)組件和業(yè)務(wù)組件兩大類，前者是系統(tǒng)通用組件（圖標(biāo)/按鈕/輸入框等），后者是由業(yè)務(wù)決定的相對更復(fù)雜的組件模塊。

而對于B端產(chǎn)品和C端產(chǎn)品，二者的組件庫又有些許差異。C端的組件庫更追求極致的交互和視覺體驗，因此需要考慮視覺、性能、實現(xiàn)、兼容性，另一方面，C端會根據(jù)活動、節(jié)日切換不同的主題，也要考慮組件視覺上的個性化擴(kuò)展。對于B端而言，組件庫更看重可復(fù)用性和穩(wěn)定性，保證可以支持業(yè)務(wù)快速迭代。另外B端會涉及到各種各樣的數(shù)據(jù)錄入與展示，因此相對更高的要求是大而全，覆蓋面廣。

2. 組件庫的原子理論

2.1 原子設(shè)計/拆分

在業(yè)務(wù)已經(jīng)發(fā)展到一定體量情況下，需要將項目中具備復(fù)用性及拓展性的模塊進(jìn)行拆解，對于B端產(chǎn)品來說篩選的時候會依據(jù)之前迭代的版本內(nèi)容，把頁面一一羅列出來，將可替換與相似的模塊提取，并利用思維導(dǎo)圖的方式統(tǒng)一歸納，并做成可以被替換的組件。組件的替換建議合成一個大的排期進(jìn)行替換，避免了線上組件不一致導(dǎo)致體驗問題。

以我們現(xiàn)在的產(chǎn)品為例：依據(jù)產(chǎn)品類型將組件拆分為：基礎(chǔ)組件 、業(yè)務(wù)組件、數(shù)據(jù)可視化組件、常用模塊。

原子設(shè)計：

將產(chǎn)品拆分后，此時得到很多可復(fù)用組件。我們再依據(jù)原子設(shè)計理論針對性進(jìn)行拆解直至拆分出5個層面：

從原子開始重新依據(jù)定好的視覺規(guī)范進(jìn)行更改，再由原子組成新的分子。

3. 盒子理論

在與開發(fā)溝通設(shè)計規(guī)范制定的過程中，常提到他們寫CSS樣式的時候是采用盒子（box）去寫的。通過一個個盒子填充來將我們的組件元素放入其中，最終形成前端展示的頁面。

走查時使用瀏覽器我們也可以看到開發(fā)寫的盒子，了解盒子也可以方便我們走查時知道問題在哪。

4. 如何搭建組件庫

搭建組件庫的步驟：

4.1 確定組件庫內(nèi)容

對于新產(chǎn)品來說，業(yè)務(wù)體量較小，較難抽取共性，組件也不全面，因此較好的方式是參考大廠的組件庫確定要做哪些組件，它們的相對成熟，參考價值較高。

對于已經(jīng)成熟的產(chǎn)品來說，我們可以直接全面體驗查看頁面，找出所有用到的組件，除基礎(chǔ)組件外，提煉出復(fù)用率高的業(yè)務(wù)組件進(jìn)行結(jié)構(gòu)化和組件制定。

4.2 搭建每一個組件庫

以提示彈窗為例，演示單個組件的建立方法。

1. 定義組件：根據(jù)業(yè)務(wù)定義提示彈窗使用場景，用于重要信息的提醒，且需要用戶自己關(guān)閉操作。

2. 拆分組件：這一步是將組件拆分為元件。對提示組件進(jìn)行拆分后得到如下：

3. 重組輸出根據(jù)業(yè)務(wù)場景，我們把各個元件重組為組件，建成組件集，并定義各種組件的使用規(guī)則。

4.3 輸出文檔并替換到產(chǎn)品中

在組件庫建立完成后，只有在日常設(shè)計中真正使用組件庫，提高組件庫在設(shè)計稿中的覆蓋率，才能真正達(dá)到組件庫的效果。這就要求我們要輸出一份完整的組件庫描述文檔，在團(tuán)隊中進(jìn)行推廣，加強(qiáng)設(shè)計團(tuán)隊的公用意識。設(shè)計團(tuán)隊內(nèi)部可以直接維護(hù)一套組件庫，設(shè)計師設(shè)計時直接調(diào)用公共組件庫組件使用。

另外，我們還要與開發(fā)工程師配合逐步完成現(xiàn)有頁面的組件替換。

4.4 定期維護(hù)組件庫

組件庫的內(nèi)容并非一成不變，而是在不斷地更新，以保證所包含的組件都是最新和有用的。與其他數(shù)據(jù)一樣，組件也會有增刪改。我們需要定期對組件庫進(jìn)行維護(hù)。

增加：當(dāng)有新的組件產(chǎn)生時，我們需要通過判斷它的拓展性和復(fù)用率，以確定是否將它入庫。

刪除：隨著產(chǎn)品的不斷升級迭代，如果某個組件已經(jīng)不用或復(fù)用率很低時，我們可以考慮是否要將它刪除。

改：不可避免的，組件會隨著業(yè)務(wù)而進(jìn)行升級，我們可以通過數(shù)據(jù)埋點和A/B test的方式來確定某個組件是否要進(jìn)行改動。

由于篇幅過長，我將文章分成三個部分，有興趣的朋友可以關(guān)注我們，期待剩下的兩期吧！

感謝你的閱讀支持 · 歡迎留言互動！