上一篇文章我們聊了設計規范的前三個(gè)部分，包括設計規范的基礎概述，如何開(kāi)始整理設計規范，大廠(chǎng)設計規范推薦，那么接下來(lái)，我們來(lái)聊聊第四章和第五章的B端的設計規范分解及組件庫。稍微有一點(diǎn)長(cháng)，請耐心看完，會(huì )對剛接觸B端的新手們有一定的幫助，也能幫您提高工作效率，節約不少時(shí)間的。
一、設計規范分解
設計師在開(kāi)始準備設計規范時(shí)，首先需要確定設計風(fēng)格和設計尺寸，頁(yè)面布局是做居中固定式，還是全屏響應式。如果是全屏響應式的網(wǎng)頁(yè)設計，那要選擇怎么樣的屏幕來(lái)做效果？等等這些問(wèn)題
接下來(lái)分別來(lái)展開(kāi)說(shuō)明。
1. 設計風(fēng)格
三種B端產(chǎn)品的設計風(fēng)格：
純白風(fēng)（網(wǎng)頁(yè)大背景是純白色；文字背景是線(xiàn)框，輕淡色（灰）；文字一般用深色）
輕淡風(fēng) (網(wǎng)頁(yè)大背景是淺灰色；文字背景是白色；文字一般用深色）；
深色風(fēng)（網(wǎng)頁(yè)大背景是深色；文字背景是帶有透明度的純色；文字一般用白色）
我們在開(kāi)始設計之前，要確定好使用哪種風(fēng)格，一旦確定下來(lái)，后面的所有頁(yè)面和元件的設計，都得基于這個(gè)風(fēng)格來(lái)設計。
據數據顯示，目前市面上比較流行的是：輕淡色背景風(fēng)+全屏響應式的設計風(fēng)格，也是相對比較保守安全的設計。
接下來(lái)需要考慮尺寸是做居中固定式，還是全屏響應式。全屏響應式的網(wǎng)頁(yè)設計，選擇怎么樣的屏幕來(lái)做效果。
2. 設計尺寸
設計規范中，分辨率尺寸的問(wèn)題，一直以來(lái)是我們設計師討論最多的。
決定產(chǎn)品設計尺寸分辨率大小的因素大致包含以下兩點(diǎn)：
2.1 市場(chǎng)占有率（主流）
目前市面上主流的排在前3的屏幕分辨率為1920*1080，1440*900，1366*768。
2.2 兼容能力
做B端產(chǎn)品時(shí)，現在市場(chǎng)上的設計師一般都會(huì )采用的是1440*900。為什么不用市場(chǎng)占有率最高的1920*1080和1366*768呢？
1、由于B端產(chǎn)品的特殊性，它的尺寸分辨率大小，是取決于用戶(hù)使用的電腦設備條件。由于員工電腦顯示屏大部分都是統一采購的，尺寸也就大致統一，所以開(kāi)發(fā)適配的分辨率可以按這個(gè)統一尺寸進(jìn)行設計。
2、因為它的兼容能力會(huì )比較強，向上適配或者向下適配誤差會(huì )比較小，不管是市場(chǎng)占比最高的主流1920*1080尺寸，還是一般般的1366*768尺寸，都完全可兼容。
注意：別忘了設計出極端情況（寬度為1280，以及寬度為1920）的效果圖，力求前端開(kāi)發(fā)實(shí)現的效果和高保真設計圖誤差最小。
假如你產(chǎn)品的用戶(hù)用的設備主要是市面上占有率最高的24寸辦公室顯示器，也就是1920*1080分辨率的話(huà)，那毫無(wú)疑問(wèn)，在選擇設計尺寸上，直接選擇1920*1080分辨率。
比如我現在做的產(chǎn)品，除了移動(dòng)辦公，web基本都是固定辦公，管理人員使用的辦公設備（電腦）屏幕一般都是臺式電腦，那這個(gè)時(shí)候，我們在設計時(shí)就會(huì )同時(shí)考慮它的占有率和兼容能力。所以我們采用的是：1920*1080分辨率。
所以設計師們在選擇尺寸上，一定要靈活使用，不能一味的認死理只選擇1920 或1440某一尺寸，而是要對您的產(chǎn)品用戶(hù)的具體情況做好分析，從而得出最適合你們產(chǎn)品的設計稿的尺寸。
注意點(diǎn)：
如果希望設計稿完全還原程度高的話(huà)，還特別要考慮瀏覽器的適配，比如說(shuō)它的頂部固定區域（當前網(wǎng)址，書(shū)簽欄等的高度）必須排除在外，剩余的部分才是我們設計稿的真實(shí)高度。
拿我們常用的谷歌瀏覽器舉例，如下面公式所示：設計實(shí)際高度=電腦分辨率 -（網(wǎng)址欄+書(shū)簽欄+頁(yè)簽高度)
3. 頁(yè)面布局
3.1 常見(jiàn)的頁(yè)面框架有以下三種：
第一種：上下布局
上下布局包括：”頂部菜單欄、主體內容”兩大區域。其中頂部菜單欄是固定不變的，主體內容根據不同分辨率進(jìn)行自適應動(dòng)態(tài)縮放。另外還需要把主體內容左右兩邊空白區域最小值確定好；
優(yōu)勢：內容區域可操作空間大。
劣勢：導航區域限制數量，如果導航選項內容比較多，用頂部橫向導航的話(huà)，就會(huì )顯得很擁擠。另外，橫向導航一般有“展開(kāi)”，“折疊”，和“收起”三種狀態(tài)，加上內容很多的情況下，橫向導航就特別難做到尺寸適配。
第二種：左右布局
左右布局包括：”左側菜單欄、頂部欄、主體內容”三大區域。其中頂部菜單欄、左側菜單欄是固定不變的，右側主體內容根據分辨率進(jìn)行自適應動(dòng)態(tài)縮放。
左右布局時(shí)，左側菜單是支持收縮或展開(kāi)，收縮狀態(tài)下也需要有固定的寬度。
優(yōu)勢：導航部分可擴展性強，適合導航選項內容都是比較多的情況。且只有“展開(kāi)“和”收起”兩種狀態(tài)，在不同屏幕情況下，寬度的自適應也能更加得心應手。
劣勢：相對內容區域空間變少。
第三種：其他的布局
現在很多后臺管理系統采用，”頂部一級導航欄、左側二級菜單欄、主體內容”三大區域。其中頂部菜單欄、左側菜單欄是固定不變的，右側主體內容根據分辨率進(jìn)行自適應動(dòng)態(tài)縮放。
優(yōu)勢：結構更清晰?？沙休d更多層級內容。更適用于復雜且層級多的產(chǎn)品。
所以，可以得出結論：設計師在選頁(yè)面布局的時(shí)候，要全局考慮產(chǎn)品框架及內容。
1、如果導航選項內容比較多的話(huà)，或者不確定有多少內容的情況，從美觀(guān)和操作難易程度、可用性來(lái)評估的話(huà)，選擇第二種左側導航是最適合B端產(chǎn)品使用的。
2、如果內容選項確定很少，就沒(méi)那么多限制，“左側縱向””頂部橫向”都好使
特別要注意：
1、同一個(gè)產(chǎn)品需要考慮它的統一性，不能這里使用頂部橫向，那里用左側縱向。
2、如果是個(gè)更新迭代的版本，就還得考慮老用戶(hù)之前的使用習慣，避免引起不必要的麻煩。
在確定好導航的布局后，就基本上能確定整個(gè)產(chǎn)品的頁(yè)面布局了。
3.2 常見(jiàn)布局尺寸：
B端產(chǎn)品，一般會(huì )在整個(gè)頁(yè)面的左上角放企業(yè)的LOGO，頂部欄高度48+8n，側邊欄寬度200+8n。
我常用的是頂部欄高度：56px或80px，側邊欄寬度：200px，側邊欄收縮狀態(tài)寬度：56px或80px，右側的側浮窗寬度：400px。（具體高度寬度尺寸，設計師可根據具體情況來(lái)定，不需要按部就班這么死板）。
同時(shí)需要確定好主體內容的上下左右邊距，以及主體內容區域中各模塊的安全距離，內容超出區域的，通過(guò)滾動(dòng)查閱更多。
4. 文字
4.1 B端產(chǎn)品常用的字體
Windows系統：中文Microsoft YaHei(微軟雅黑），英文Arial；
Mac字體：中文PingFang SC（平方字體），英文 Helvetica；
4.2 常用的字體大小
常見(jiàn)的字體大小為：12px、14px、16px、18px、20px、24px、26px、28px、30px（一般都是采用偶數字號，文字大小12+4n）。
注意：
在設計過(guò)程中，設計師對字號應該有一個(gè)全局觀(guān)，在同一個(gè)界面內，盡量少用大小太接近的字號。比如一個(gè)頁(yè)面中，如果同時(shí)用了12px、13px、14px、15px、16px、18px排版，文字的層級對比會(huì )比較弱，沒(méi)有主次之分，用戶(hù)閱讀困難，視覺(jué)效果也顯得凌亂。
所以，剛接觸B端產(chǎn)品的小白設計師，如果不知道怎么運用不同字號字體的情況下，可以直接以這組字號12px、14px、16px、20px、34px的字號為參考使用，這樣的分布會(huì )層次明晰，能夠有個(gè)比較不錯的布局結構。
“行高”根據文字大小和使用場(chǎng)景來(lái)定，公式如下，
行高=文字大小+8px（或6px，視情況而定，我常用8）
例如：12號字體的行高=12+8=20px
同一個(gè)界面中，一定不要出現多個(gè)不同字體。盡量選擇用戶(hù)設備里自帶的字體來(lái)進(jìn)行設計，比如說(shuō)WIN系統默認用系統自帶的“微軟雅黑”，不能使用特殊字體。
如果必須要用特殊字體，建議用圖片替代。如果用戶(hù)的設備里沒(méi)有你使用的這些字體的話(huà)，會(huì )默認顯示設備的系統自帶字體，最終效果就會(huì )和你的設計稿相差很多。
從視覺(jué)方面來(lái)講，為了讓整體界面更簡(jiǎn)潔具有美感，體驗感更好，在使用字體方面，一般字體種類(lèi)不超過(guò)2種，越少越好。因為頁(yè)面的層次感主要是靠字號大小及顏色拉開(kāi)層次，如果字號在變，字體種類(lèi)也各種變化，整體就會(huì )感覺(jué)很凌亂，沒(méi)有統一性。
5. 顏色
顏色規范包含“品牌色”、“輔助色”、“中性色、圖表色”四部分。
5.1 品牌色系
品牌色系：即產(chǎn)品主色調，主色調的設定直接影響產(chǎn)品氣質(zhì)和直觀(guān)感受，也是產(chǎn)品的對外的形象。品牌色是根據這個(gè)產(chǎn)品的特征和定位、用戶(hù)群，以及使用場(chǎng)景等綜合考慮最后確定的。
品牌色的一般用于LOGO 、操作狀態(tài)、按鈕顏色、其他一些可操作圖標等。
1、品牌色一般建議選擇冷色系。這樣有效避免與“錯誤提醒”的紅色、黃色相沖突，讓人誤解。但要是被硬性要求必須選暖色系作為主色調，就得格外注意調節好主色調與錯誤提醒的區別了。
2、注意選的品牌色（主色調）不要太刺眼。要保證用戶(hù)長(cháng)時(shí)間使用也不至于顏色太亮太刺眼，而產(chǎn)生的視覺(jué)疲勞。
5.2 輔助色系
輔助色系：輔助色一般用于“提示”。類(lèi)似：成功、失敗、警告、無(wú)效等內容等。
5.3 中性色系
中性色系：中性色涵蓋黑、白、灰三個(gè)不同層級，通常在文本、背景、邊框、分割線(xiàn)用到它們。同一色相，只要改變它的透明度就能表現出不同的層級。
B端產(chǎn)品的文字中，一般會(huì )有：一級標題、二級標題、一級正文、二級正文、提示文字、輔助文字、說(shuō)明文字等。
為了區分層級，提升用戶(hù)的閱讀體驗感，通常會(huì )根據具體需求，把字體顏色的深淺，大致分成3到5個(gè)層級。常見(jiàn)的有#333333、#666666、#999999這個(gè)組合，這個(gè)組合的層級區分比較分明，適應性比較廣，設計師在設計時(shí)可以直接作為參考。
5.4 圖表色系
圖表色：我們常見(jiàn)的后臺管理類(lèi)產(chǎn)品， 像數據可視化、統計圖、多個(gè)標簽的不同配色方案，所以一般還會(huì )設定圖表的顏色。
6. 按鈕
按鈕是任何用戶(hù)界面不可或缺的交互元素，B端產(chǎn)品中用到按鈕的場(chǎng)景特別多，類(lèi)似：登錄注冊，保存，表單，彈窗，導航，提交，確認等等。
6.1 按鈕的形式
常見(jiàn)的按鈕形式包含這六大類(lèi)：圖標文字組合的按鈕 ，主按鈕，次按鈕（線(xiàn)性按鈕），按鈕菜單，文字按鈕，圖標按鈕。
6.2 按鈕的交互狀態(tài)
常見(jiàn)的按鈕交互狀態(tài)包含六種：
正常狀態(tài)、聚焦狀態(tài)（使用Tab鍵或方向鍵來(lái)對網(wǎng)頁(yè)進(jìn)行訪(fǎng)問(wèn)輸入的聚焦狀態(tài)，在設計時(shí)很多設計師都會(huì )把這一狀態(tài)忘記，導致用戶(hù)無(wú)法用方向鍵控制光標位置，會(huì )降低用戶(hù)的使用體驗感）
懸停狀態(tài)（鼠標正在按鈕上，但不點(diǎn)擊，需要注意的是平板電腦和移動(dòng)端設備上不會(huì )展示懸停狀態(tài)，因為手指跟光標不一樣，無(wú)法在屏幕上進(jìn)行懸停 ）
- 激活狀態(tài)（點(diǎn)擊按下?tīng)顟B(tài)）
- 加載狀態(tài)（等待期間不可操作，在B端產(chǎn)品中Loading狀態(tài)特別重要，能緩解用戶(hù)的焦慮情緒）
- 禁用狀態(tài)（不可操作狀態(tài)，置灰顯示和透明度（40%）代表不可操作狀態(tài)）
6.3 按鈕的圓角
按鈕圓角：在開(kāi)始設計產(chǎn)品之前，設計師都需要對按鈕圓角有具體的規劃。按鈕四角都是直角會(huì )比較有距離感和強烈的引導性，容易分散用戶(hù)注意力，所以我們一般會(huì )采用視覺(jué)上給人比較柔和親近感覺(jué)的圓角按鈕。
但按鈕的圓角并不是越大越好，因為在相同尺寸下，按鈕圓角小的，操作熱區會(huì )更大，頁(yè)面的使用效率也會(huì )更高，更容易操作。同時(shí)還要特別考慮到下拉菜單的設計，所以圓角大小一般采用偶數：2px,4px,6px,8px,16px為宜，不宜過(guò)大（這里的圓角弧度的值有一定的倍數關(guān)系或基數關(guān)系，例如：4/8/16, 4/6/8，4/8/12，都是可行的）。
注意：圓角大小也會(huì )跟著(zhù)按鈕尺寸的大小有相應的變化。
6.4 按鈕的高度
在B端產(chǎn)品中，當確定好網(wǎng)格基數時(shí)（通常網(wǎng)格設定為：4px。按鈕的高度會(huì )分兩種情況：
1、一種是寬度為高度的倍數關(guān)系。
2、第二種是如果寬度為高度的倍數關(guān)系，從視覺(jué)上看達不到想要的效果的話(huà)，設計師就可以靈活設置。
6.5 按鈕的大小
討論到按鈕的尺寸，我們需要大致知道如何設置網(wǎng)格基數。
在設計中，我們需要在常用的繪圖軟件（如：Ps、Sketch）里找到我們的網(wǎng)格功能，設定好一個(gè)數為基數，然后按照這個(gè)基數來(lái)進(jìn)行按鈕的繪制，按鈕就相對比較規范了。
那如何用繪圖工具設置網(wǎng)格基數呢？方法如下：在Sketch繪圖工具中找到：【視圖】-【畫(huà)布】-【網(wǎng)格設置】- 彈出網(wǎng)格設置對話(huà)框進(jìn)行設置就好了。
把網(wǎng)格基數設置為【4】的原因：它是谷歌Material Design繪制小組件的規范，模塊之間定義的基數就是【8】。
假設我們定這個(gè)基數為4，那采用的尺寸數值就需要是基數4的倍數。比如B端產(chǎn)品中，常用的按鈕高度尺寸有：24px、32px、36px 、40px、48px，這些都是可以整除基數4的值。例如：32/4=8，40/4=10，這里的4為基數。
按鈕的寬度尺寸，一般是確定好文字到邊框左右兩邊的距離（例如如圖Padding值為12px)后，開(kāi)發(fā)會(huì )根據文字內容的多少自適應的。
按鈕間距，按鈕之間的間距也遵循基數為4的倍數，比如：16，24，32，40，48等。這里的基數定為偶數（一般為4或8）
7. 表單
從廣義的定義來(lái)講，表單是指用于數據錄入的一切形式。從狹義上來(lái)講，表單在大家更廣泛的認知印象中，表單則是一類(lèi)包含輸入框、下拉選擇框等常見(jiàn)控件的組合形式的頁(yè)面才屬于表單。表單的本質(zhì)核心是提交數據，所以凡是具備采集數據并完成采集后提交數據的交互形式均可稱(chēng)之為表單。
表單在設計上的結構有：1、標題；2、表單標簽；3、占位符；4、表單域；5、提示信息；6、操作按鈕；
7.1 表單設計目標
表單的設計必須優(yōu)先考慮為用戶(hù)減負，提高效率并簡(jiǎn)化填寫(xiě)流程。另外表單中組件的選擇需要依據具體的數據類(lèi)型和具體的業(yè)務(wù)場(chǎng)景進(jìn)行合理正確的選用，為用戶(hù)提供高效的數據錄入表單，降低用戶(hù)操作成本、認知負擔，并提高數據采集效率才是表單設計的根本目的。
7.2 表單的輸入域
可交互輸入域，是構成表單的核心內容，是表單用來(lái)采集數據的入口。輸入區是用戶(hù)交互最多也是最能影響使用體驗的區域，不同類(lèi)型數據選擇與之相應的錄入方式，對提高表單操作效率和用戶(hù)體驗大有裨益。
表單并不是把一些不同類(lèi)型的輸入框排排版、標清楚必填非必填、哪些表單比較復雜適當的加個(gè)說(shuō)明就完了
其實(shí)，表單設計遠遠不止這些，表單本身也是一個(gè)小產(chǎn)品，它也需要有需求的支撐、也需要嵌套使用情境、也需要考慮用戶(hù)的心理模型；從表單的產(chǎn)生到表單在頁(yè)面上如何呈現，再到使用表單時(shí)與表單之間的交互，每一步都需要投入大量的思考來(lái)做好表單。
后面我會(huì )專(zhuān)門(mén)有一篇16000+的文章聊聊這個(gè)B端產(chǎn)品中比較核心的表單，有興趣的朋友可以關(guān)注一下，大概五月份就會(huì )發(fā)。
8. 表格
表格在整個(gè)B端產(chǎn)品比較常見(jiàn)的，它的地位也是相當重要的，我們在設計表格時(shí)需要注意一下幾點(diǎn)：
8.1.表格內的文字內容：
一般以左對齊為準。與左邊表格邊距盡量保持在10px以上的間距。（特別注意：金額和操作的標題和內容需要右對齊）
8.2 表格的列數：
默認展示的列數為3-8列，如果需要展示更多列數，則需要優(yōu)先固定展示重要列，其余的列的內容會(huì )以滾動(dòng)條滑動(dòng)而展展示出來(lái)。
8.3 表格列表的寬度：
寬度的尺寸大小自適應，但需要根據文字的重要性顯示，重要文字內容優(yōu)先完整顯示。
8.4 表頭每列標題文字字數：
字符不要多，最多可輸入8個(gè)。如果文字太多，就需要做文字信息精簡(jiǎn)化。
8.5 滾動(dòng)條使用場(chǎng)景：
表格內容超過(guò)一屏，就需要顯示豎向滾動(dòng)條，注意：表頭需要固定，但表格內容可滾動(dòng)展示。
8.6 表格無(wú)內容：
表格的某些單元格無(wú)數據內容時(shí)，需要用“—”表示，需要區別于“0”。
8.7 表格標題欄和內容欄高度尺寸：
標題欄高度（標準高度為56px）；內容欄（標準高度為56px，偏大的標題欄高度為80px），內容區和標題欄水平居中對齊。
8.8 表格內容對齊方式：
列的對齊方式（垂直方向）除了需要始終保持“右對齊”的：金額，最右側操作列內容外，其他的內容可自行左對齊或右對齊。行的對齊方式（水平方向）
當表格欄的高度尺寸小于80px 時(shí)，一般只有一排內容，內容水平需要居中對齊。當表格欄的高度尺寸大于80px時(shí)，如果是有兩排內容，所有的內容需要頂對齊；但是如果既有一排內容 又有多拍內容的話(huà) ，內容水平則需要居中對齊。
8.9 自適應規則：
表格中的內容，會(huì )根據字段的長(cháng)短定義所占的百分比，完成表格占比，從而達到希望實(shí)現的最佳效果。
8.10 滾動(dòng)條：
滾動(dòng)條分為橫豎兩種，當表格內容超過(guò)一屏時(shí)，就需要顯示滾動(dòng)條。豎向滾動(dòng)條時(shí)， 需要固定表頭標題欄和頁(yè)碼。只需滾動(dòng)表格內容部分即可。橫向滾動(dòng)條時(shí)， 需要固定第一列 和 正在操作的項列。只滾動(dòng)表格內容部分即可。
9. 反饋
9.1 弱反饋
僅提示用戶(hù)相關(guān)內容，不需要用戶(hù)做任何交互動(dòng)作。類(lèi)似：toast弱提示通知提示等彈窗（（一般3-5秒會(huì )自動(dòng)消失：包含普通信息，成功信息，失敗信息，警告信息）。
另外還有，鼠標經(jīng)過(guò)的時(shí)候即可出現而不用點(diǎn)擊的彈窗（這個(gè)彈窗通常會(huì )設計一個(gè)浮動(dòng)帶有陰影效果的框，不需要遮罩）。比如提示說(shuō)明，顯示更多信息，鼠標移過(guò)后立即消失，它不會(huì )影響下一層（當前頁(yè)面內容）頁(yè)面的視覺(jué)效果和操作。弱彈窗尺寸一般根據文字多少自行適配。
9.2 強反饋
第二種是強彈窗。它是一個(gè)需要用戶(hù)必須對這個(gè)對話(huà)框進(jìn)行操作后才可以離開(kāi)。
例如彈出的列表，詳情，表單等的確認信息彈窗、錯誤提示彈窗。這些強彈窗一般會(huì )對下面一層的頁(yè)面做一些遮罩處理，例如添加上一層有透明度（例如30%，50%都可以）的黑色/白色，給下一層頁(yè)面的內容做模糊濾鏡等等；
在寫(xiě)彈框規范時(shí)，應了解各自項目中需使用彈框的有哪些內容，給出相關(guān)大小彈框的比例，哪些為固定尺寸，哪些為適配比例。以及對于通知提示給出停留多少時(shí)間后自動(dòng)消失，彈窗彈出狀態(tài)等等相關(guān)的交互規范。
10. 其他
缺省頁(yè)是互聯(lián)網(wǎng)中常見(jiàn)的場(chǎng)景，當遇到網(wǎng)絡(luò )不好、頁(yè)面中沒(méi)有內容數據、暫無(wú)資料等等情況，所導致的空白頁(yè)面。
大致分可為：系統類(lèi)缺省頁(yè)，信息類(lèi)缺省頁(yè)，空白類(lèi)缺省頁(yè)。
遇到這些情況時(shí)，設計師一般采用一些插畫(huà)&文字的組合放置本來(lái)空白的頁(yè)面中提示或引導用戶(hù)進(jìn)行下一步操作，以緩解用戶(hù)的焦慮情緒。（也就是我們常說(shuō)的情感化設計的一種方式）
二、組件庫
設計規范很大一部分是組件庫，所以就把組件庫單獨拎出來(lái)聊聊。
1. 組件庫是什么？
做一個(gè)比喻，組件庫相當于積木玩具的一個(gè)個(gè)積木，每個(gè)組件就是一塊積木，通過(guò)組件的拼搭可以迅速搭建出一個(gè)頁(yè)面，而設計規范就相當于搭建的“說(shuō)明書(shū)”。
通常我們將組件庫分為基礎組件和業(yè)務(wù)組件兩大類(lèi)，前者是系統通用組件（圖標/按鈕/輸入框等），后者是由業(yè)務(wù)決定的相對更復雜的組件模塊。
而對于B端產(chǎn)品和C端產(chǎn)品，二者的組件庫又有些許差異。C端的組件庫更追求極致的交互和視覺(jué)體驗，因此需要考慮視覺(jué)、性能、實(shí)現、兼容性，另一方面，C端會(huì )根據活動(dòng)、節日切換不同的主題，也要考慮組件視覺(jué)上的個(gè)性化擴展。對于B端而言，組件庫更看重可復用性和穩定性，保證可以支持業(yè)務(wù)快速迭代。另外B端會(huì )涉及到各種各樣的數據錄入與展示，因此相對更高的要求是大而全，覆蓋面廣。
2. 組件庫的原子理論
2.1 原子設計/拆分
在業(yè)務(wù)已經(jīng)發(fā)展到一定體量情況下，需要將項目中具備復用性及拓展性的模塊進(jìn)行拆解，對于B端產(chǎn)品來(lái)說(shuō)篩選的時(shí)候會(huì )依據之前迭代的版本內容，把頁(yè)面一一羅列出來(lái)，將可替換與相似的模塊提取，并利用思維導圖的方式統一歸納，并做成可以被替換的組件。組件的替換建議合成一個(gè)大的排期進(jìn)行替換，避免了線(xiàn)上組件不一致導致體驗問(wèn)題。
以我們現在的產(chǎn)品為例：依據產(chǎn)品類(lèi)型將組件拆分為：基礎組件 、業(yè)務(wù)組件、數據可視化組件、常用模塊。
原子設計：
將產(chǎn)品拆分后，此時(shí)得到很多可復用組件。我們再依據原子設計理論針對性進(jìn)行拆解直至拆分出5個(gè)層面：
從原子開(kāi)始重新依據定好的視覺(jué)規范進(jìn)行更改，再由原子組成新的分子。
3. 盒子理論
在與開(kāi)發(fā)溝通設計規范制定的過(guò)程中，常提到他們寫(xiě)CSS樣式的時(shí)候是采用盒子（box）去寫(xiě)的。通過(guò)一個(gè)個(gè)盒子填充來(lái)將我們的組件元素放入其中，最終形成前端展示的頁(yè)面。
走查時(shí)使用瀏覽器我們也可以看到開(kāi)發(fā)寫(xiě)的盒子，了解盒子也可以方便我們走查時(shí)知道問(wèn)題在哪。
4. 如何搭建組件庫
搭建組件庫的步驟：
4.1 確定組件庫內容
對于新產(chǎn)品來(lái)說(shuō)，業(yè)務(wù)體量較小，較難抽取共性，組件也不全面，因此較好的方式是參考大廠(chǎng)的組件庫確定要做哪些組件，它們的相對成熟，參考價(jià)值較高。
對于已經(jīng)成熟的產(chǎn)品來(lái)說(shuō)，我們可以直接全面體驗查看頁(yè)面，找出所有用到的組件，除基礎組件外，提煉出復用率高的業(yè)務(wù)組件進(jìn)行結構化和組件制定。
4.2 搭建每一個(gè)組件庫
以提示彈窗為例，演示單個(gè)組件的建立方法。
1. 定義組件：根據業(yè)務(wù)定義提示彈窗使用場(chǎng)景，用于重要信息的提醒，且需要用戶(hù)自己關(guān)閉操作。
2. 拆分組件：這一步是將組件拆分為元件。對提示組件進(jìn)行拆分后得到如下：
3. 重組輸出根據業(yè)務(wù)場(chǎng)景，我們把各個(gè)元件重組為組件，建成組件集，并定義各種組件的使用規則。
4.3 輸出文檔并替換到產(chǎn)品中
在組件庫建立完成后，只有在日常設計中真正使用組件庫，提高組件庫在設計稿中的覆蓋率，才能真正達到組件庫的效果。這就要求我們要輸出一份完整的組件庫描述文檔，在團隊中進(jìn)行推廣，加強設計團隊的公用意識。設計團隊內部可以直接維護一套組件庫，設計師設計時(shí)直接調用公共組件庫組件使用。
另外，我們還要與開(kāi)發(fā)工程師配合逐步完成現有頁(yè)面的組件替換。
4.4 定期維護組件庫
組件庫的內容并非一成不變，而是在不斷地更新，以保證所包含的組件都是最新和有用的。與其他數據一樣，組件也會(huì )有增刪改。我們需要定期對組件庫進(jìn)行維護。
增加：當有新的組件產(chǎn)生時(shí)，我們需要通過(guò)判斷它的拓展性和復用率，以確定是否將它入庫。
刪除：隨著(zhù)產(chǎn)品的不斷升級迭代，如果某個(gè)組件已經(jīng)不用或復用率很低時(shí)，我們可以考慮是否要將它刪除。
改：不可避免的，組件會(huì )隨著(zhù)業(yè)務(wù)而進(jìn)行升級，我們可以通過(guò)數據埋點(diǎn)和A/B test的方式來(lái)確定某個(gè)組件是否要進(jìn)行改動(dòng)。
由于篇幅過(guò)長(cháng)，我將文章分成三個(gè)部分，有興趣的朋友可以關(guān)注我們，期待剩下的兩期吧！
感謝你的閱讀支持 · 歡迎留言互動(dòng)！
