產(chǎn)品：這次需求很簡單，對(duì)比上期只有字段和操作項(xiàng)的差異，把上次的稿子直接復(fù)制一下應(yīng)該不用很多時(shí)間吧？

交互：上次你是不是做過高級(jí)篩選組合？我這期需求要用到，你把那部分稿子發(fā)給我用用吧。

研發(fā)：這個(gè)組件我在其他模塊里看到過已有樣式，這次為什么用不一樣的？不然又要重復(fù)開發(fā)呀，能不能統(tǒng)一一下。

視覺：同一個(gè)按鈕在不同的模塊顏色不一樣誒，這次要和哪個(gè)模塊一致??？

……

通過以上對(duì)話不難看出，最常出現(xiàn)在需求溝通與研發(fā)過程中，由于缺少統(tǒng)一的規(guī)范和標(biāo)準(zhǔn)化體系，導(dǎo)致實(shí)施環(huán)節(jié)各方溝通成本高，造成設(shè)計(jì)成果與實(shí)現(xiàn)有一定差距，影響用戶體驗(yàn)；通用組件和業(yè)務(wù)組件混用，導(dǎo)致設(shè)計(jì)模式和代碼復(fù)用率低。尤其是當(dāng)業(yè)務(wù)發(fā)展到一定體量時(shí)，對(duì)于復(fù)雜產(chǎn)品的大量重復(fù)且類似的需求場景，如果沒有一種的工具和規(guī)范來協(xié)同工作，將大大影響團(tuán)隊(duì)的生產(chǎn)及溝通效率。

問題

• 認(rèn)知：產(chǎn)品、研發(fā)、設(shè)計(jì)師對(duì)于同一需求都有自己理解的解決方案，缺少統(tǒng)一規(guī)范的約束，難以達(dá)成共識(shí)。
• 效率：設(shè)計(jì)效率低，交互原型的維護(hù)成本及上下游團(tuán)隊(duì)的溝通成本高，易造成不專業(yè)的印象。
• 品質(zhì)：認(rèn)知和效率的局限性，最終導(dǎo)致實(shí)施落地的產(chǎn)品質(zhì)量和用戶體驗(yàn)難以得到保障。

解決

大家應(yīng)該都知道樂高（LEGO）積木，它是一種可以互相嵌套組合的塑料積木，形狀共有 1300 多種，每種形狀都有 12 種不同的顏色，可以拼插出多種造型。其實(shí)組件庫的工作方式就很像樂高，通過小元件的互相嵌套來產(chǎn)生多種組件或模塊，多種組件模塊結(jié)合生成頁面結(jié)構(gòu)。我們先來梳理一個(gè)概念，組件庫是什么？

組件庫是設(shè)計(jì)系統(tǒng)的一部分，是在我們常規(guī)界面設(shè)計(jì)過程中可以直接用來制作交互圖例和搭建頁面的組件集合，它可以作為單個(gè)組件獨(dú)立存在，也可以通過多個(gè)組件組合而成的結(jié)構(gòu)或模式來解決類似場景的設(shè)計(jì)問題。組件庫是在約束條件下去構(gòu)建解決方案的過程，所以組件的使用也需遵循一定的規(guī)范，按照一套標(biāo)準(zhǔn)化的體系復(fù)用于多個(gè)業(yè)務(wù)場景。

一個(gè)有效的組件庫，可以幫助設(shè)計(jì)師和研發(fā)提高工作效率，提升設(shè)計(jì)專業(yè)度的同時(shí)讓產(chǎn)品本身的體驗(yàn)更加一致、可學(xué)，品牌感更強(qiáng)，它所具備的基本特征一定是通用的、靈活的、復(fù)用的。

• 通用性：意味著足夠基礎(chǔ)和常見且不帶業(yè)務(wù)屬性，參與設(shè)計(jì)環(huán)節(jié)的每個(gè)人都應(yīng)該知道這個(gè)組件的功能及目的，同時(shí)具備一定擴(kuò)展性。
• 靈活性：要求元件的組合需靈活，可以在不同場景下通過互相組合來快速搭建交互框架原型圖，并根據(jù)不同頁面結(jié)構(gòu)的演變來適應(yīng)新的業(yè)務(wù)需求。
• 復(fù)用性：指的是適用于多個(gè)業(yè)務(wù)或產(chǎn)品，在設(shè)計(jì)過程和研發(fā)過程中都可以高頻復(fù)用。

那么用組件庫這種標(biāo)準(zhǔn)化體系來完成設(shè)計(jì)方案時(shí)，到底能帶來怎樣的價(jià)值？

組件庫的價(jià)值

保證產(chǎn)品體驗(yàn)的一致性：對(duì)于一個(gè)含有多業(yè)務(wù)系統(tǒng)的大型復(fù)雜產(chǎn)品，每個(gè)獨(dú)立的業(yè)務(wù)系統(tǒng)雖然在功能上有一定區(qū)別，但整體的用戶體驗(yàn)需要滿足基本的一致性。比如，當(dāng)我使用同一個(gè)產(chǎn)品中的業(yè)務(wù)系統(tǒng) A 和業(yè)務(wù)系統(tǒng) B 時(shí)，我能通過類似的頁面結(jié)構(gòu)、組件及樣式的一致性、操作反饋乃至提示文案結(jié)構(gòu)的一致性，來感知到我使用的A、B業(yè)務(wù)系統(tǒng)隸屬于同一個(gè)產(chǎn)品。

提升設(shè)計(jì)師的效率：在需求量巨大且需求來自不同的業(yè)務(wù)線時(shí)，需要逐一繪制頁面及組件，造成大量重復(fù)勞動(dòng)，并且在評(píng)審及需求溝通環(huán)節(jié)還可能存在不斷地細(xì)節(jié)調(diào)優(yōu)。所以對(duì)于設(shè)計(jì)師而言，組件的高頻復(fù)用能大大提升設(shè)計(jì)效率，使設(shè)計(jì)師更多的將精力聚焦于理解和解決用戶的實(shí)際問題。

提升產(chǎn)研團(tuán)隊(duì)的效率：通用場景及普通需求直接按規(guī)范進(jìn)行設(shè)計(jì)和研發(fā)，減少上下游對(duì)同一頁面及組件使用方式的不同理解而產(chǎn)生的多余溝通成本。

利于沉淀設(shè)計(jì)規(guī)范：組件本身的設(shè)計(jì)和使用方式就可以直接作為交互和視覺規(guī)范的一部分，按照統(tǒng)一的設(shè)計(jì)規(guī)范來確定需要使用的主題色、組件樣式、組合方式及頁面結(jié)構(gòu)，可以快速搭建出一個(gè)或多個(gè)產(chǎn)品的交互框架。

構(gòu)建「FishDesign」企業(yè)級(jí)UI組件庫

那么如何構(gòu)建一個(gè)企業(yè)級(jí) UI 組件庫？

我將用前段時(shí)間參與的「FishDesign企業(yè)級(jí)UI組件庫」項(xiàng)目為例，通過在網(wǎng)易七魚產(chǎn)品中的應(yīng)用，來介紹一個(gè)企業(yè)級(jí) UI 組件庫的設(shè)計(jì)原則，內(nèi)容構(gòu)成包含哪些類型和元素，每種組件類型在分類和設(shè)計(jì)過程中是如何考量的。本文側(cè)重講述構(gòu)建一個(gè)組件庫所涵蓋的內(nèi)容，而不是某組件類別本身的設(shè)計(jì)方法。

顧名思義，「企業(yè)級(jí)」意味著 FishDesign 所服務(wù)的業(yè)務(wù)都是具備一定體量的，可能是服務(wù)一個(gè)包含了多個(gè)獨(dú)立子業(yè)務(wù)系統(tǒng)的大型復(fù)雜產(chǎn)品，比如網(wǎng)易七魚；也可能是同時(shí)服務(wù)多款產(chǎn)品，比如網(wǎng)易七魚和網(wǎng)易定位等。

組件庫是幫助設(shè)計(jì)者及前端工程師快速構(gòu)建業(yè)務(wù)系統(tǒng)的工具，除了最重要的組件內(nèi)容，還需要設(shè)計(jì)原則、配色方案及布局規(guī)范來指導(dǎo)具體業(yè)務(wù)產(chǎn)品的設(shè)計(jì)有效落地。

1. 設(shè)計(jì)原則

基于 FishDesign 目前主要是幫助搭建 B 端企業(yè)級(jí)產(chǎn)品，而 B 端業(yè)務(wù)的產(chǎn)品目的決定了它所才采取的設(shè)計(jì)模式，所以我們將用以下四點(diǎn)作為塑造組件庫的設(shè)計(jì)原則：

• 簡潔：如無必要，勿增實(shí)體，慎重篩選客戶當(dāng)前需要信息內(nèi)容。
• 直接：提供用戶操作后的直接反饋，保證用戶的操作結(jié)果符合預(yù)期。
• 優(yōu)雅：設(shè)計(jì)方案追求優(yōu)雅，給使用者有質(zhì)感的操作感受。
• 適應(yīng)性：設(shè)計(jì)方案需提供可擴(kuò)展能力及適應(yīng)性，以適應(yīng)不同模式的企業(yè)使用。

2. 顏色

產(chǎn)品會(huì)根據(jù)自身的產(chǎn)品目標(biāo)和受眾群體去選定產(chǎn)品的配色方案。前文提到，一個(gè)有效的組件庫需滿足通用性、靈活性、復(fù)用性，像配色方案就應(yīng)該能被靈活自定義來應(yīng)對(duì)多樣化的訴求。以網(wǎng)易七魚為例（下文均以網(wǎng)易七魚為例），設(shè)置了 1 種主色，4 種輔助色和 6 種中性色來搭建一致的外觀感受。

• 主色：選擇藍(lán)色系來傳達(dá)智能服務(wù)、信任可靠、技術(shù)創(chuàng)新的品牌形象。
• 輔助色：除了品牌主色調(diào)藍(lán)色，在輔助色中也存在一樣的藍(lán)色，那是因?yàn)樗{(lán)色是相對(duì)泛用性較廣的色系，用于產(chǎn)品中的主操作按鈕、文字按鈕或 icon 等。紅色喚起注意并昭示危險(xiǎn)，所以一般用于謹(jǐn)慎操作及錯(cuò)誤提示。黃色則常用于警示信息，提示用戶操作可能帶來的風(fēng)險(xiǎn)及后果。綠色能傳遞安全和健康的情緒感受，用于正向反饋提示或成功操作的引導(dǎo)。
• 中性色：一般采取黑灰色調(diào)來展示產(chǎn)品的文本信息、背景和邊框色，用來表現(xiàn)層次結(jié)構(gòu)。

3. 布局規(guī)范

為處理多業(yè)務(wù)中網(wǎng)頁設(shè)計(jì)區(qū)域內(nèi)的信息收納問題，我們用規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范版面布局以及信息分布，即柵格系統(tǒng)和頁面布局。FishDesign 在 12 柵格系統(tǒng)的基礎(chǔ)上，將整個(gè)設(shè)計(jì)區(qū)域按照 24 等分的原則進(jìn)行劃分，來增加頁面的相似度，提升用戶體驗(yàn)。

我們通過基本的配色及布局規(guī)范解決了產(chǎn)品風(fēng)格及信息區(qū)塊框架的設(shè)計(jì)，那組件庫中重要的組件部分，是如何作用于產(chǎn)品搭建的？Brad Frost 提出的「原子化設(shè)計(jì)理論」可以幫助我們更好的理解，原子化設(shè)計(jì)的靈感來自于現(xiàn)實(shí)世界當(dāng)中的分子結(jié)構(gòu)，UI 中顆粒度最小的元素，即「原子」，組成了顆粒度較大的元件，即「分子」；而諸多分子又組成了更加復(fù)雜的組件與模塊，即「有機(jī)體」。

組件庫構(gòu)建之初無法一應(yīng)俱全，是需要后續(xù)不斷的維護(hù)與迭代的。如何在最初海量組件中圈定適合的組件范圍呢？最合適的切入點(diǎn)就是從身邊的業(yè)務(wù)場景出發(fā)，從最基本、最簡單、最小的元素入手。

4. 組件分類

我們根據(jù)當(dāng)下已有的業(yè)務(wù)場景和對(duì)往后一段時(shí)期的業(yè)務(wù)發(fā)展方向進(jìn)行規(guī)劃，將組件庫的組件類型分為通用組件和業(yè)務(wù)組件。一般業(yè)務(wù)組件庫是不對(duì)外的（畢竟使用場景特殊也有限，放出來參考意義不大），所以在 FishDesign 官網(wǎng)只能看到通用組件部分。

• 通用組件：指適用范圍廣、復(fù)用頻次高，可復(fù)用于多個(gè)業(yè)務(wù)且不包含業(yè)務(wù)邏輯。比如導(dǎo)航欄、按鈕、toast、彈窗等。
• 業(yè)務(wù)組件：這類組件對(duì)比通用組件而言，最大的特點(diǎn)就是包含了較多業(yè)務(wù)屬性，跟產(chǎn)品功能有較強(qiáng)的關(guān)聯(lián)性，所以影響到適用范圍可能僅限于 1~2 個(gè)業(yè)務(wù)系統(tǒng)或特殊場景，且復(fù)用頻次不高。比如網(wǎng)易七魚的在線和呼叫系統(tǒng)中的咨詢分類組件。

一個(gè)大型復(fù)雜的業(yè)務(wù)產(chǎn)品通常有不止一位設(shè)計(jì)師或前端工程師參與設(shè)計(jì)，需要在多種處理方式中選擇合適的設(shè)計(jì)模式來解決不同的場景問題，這要求根據(jù)組件屬性的差異，需對(duì)通用組件做細(xì)分，那么如何確定通用組件中的子分類呢？

• 競品學(xué)習(xí)與研究，窮舉該部分產(chǎn)品類型中的組件類型。
• 遍歷自己所負(fù)責(zé)產(chǎn)品內(nèi)已有的業(yè)務(wù)場景，提取并整理業(yè)務(wù)場景中所用到的組件。
• 將整理好的兩部分組件進(jìn)行篩選去重，保留高頻通用的部分。比如同樣是下拉篩選組件，由于缺少統(tǒng)一規(guī)范和組件，可能導(dǎo)致的后果就是在同一產(chǎn)品不同業(yè)務(wù)系統(tǒng)的相同場景下，使用的組件從樣式到交互方式都不一致。我們要做的就是對(duì)這部分在類似業(yè)務(wù)場景中使用了多種表達(dá)形式的組件做合并去重，然后通過設(shè)計(jì)組內(nèi)審來圈定最后通用組件的范圍。
• 基于組件的屬性和使用場景，對(duì)圈定的組件范圍進(jìn)行歸類。

由上述步驟，我們將通用組件繼續(xù)細(xì)分為五個(gè)子類別：基礎(chǔ)組件、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、操作反饋。

• 基礎(chǔ)組件：即按鈕、圖標(biāo)等，相較于其他組件的使用場景更通用，或其他組件在實(shí)現(xiàn)時(shí)依賴了這些組件來實(shí)現(xiàn)的組件類別。
• 導(dǎo)航：即導(dǎo)航菜單、標(biāo)簽、面包屑等，可以幫助用戶產(chǎn)品系統(tǒng)內(nèi)快速找到所在頁面層級(jí)或位置的組件類別。
• 數(shù)據(jù)錄入：即輸入框、選擇器、表單等，支持用戶將數(shù)據(jù)信息錄入到系統(tǒng)的組件類別。
• 數(shù)據(jù)展示：即圖表、表格、氣泡卡片等，將錄入到系統(tǒng)的數(shù)據(jù)信息多樣化展示出來的組件類別。
• 操作反饋：即對(duì)話框、警告提示（Alert）、全局提示（Toast）等，在用戶操作前后，使系統(tǒng)狀態(tài)得以合理反饋的組件類別。

用組件庫設(shè)計(jì)「網(wǎng)易七魚」示例

以網(wǎng)易七魚為例，看下有組件庫參與搭建的設(shè)計(jì)示例，以下頁面中所用組件均出自 FishDesign 組件庫。

「導(dǎo)航組件」使用示例：

「表格組件」使用示例：

「彈窗組件」使用示例：

「步驟組件」使用示例：

總結(jié)

組件庫最大的價(jià)值在于提升整個(gè)團(tuán)隊(duì)的產(chǎn)研效率，使設(shè)計(jì)質(zhì)量得以保障的同時(shí)，提升產(chǎn)品整體的用戶體驗(yàn)。

我們對(duì)構(gòu)建企業(yè)級(jí) UI 組件庫的步驟及要素做個(gè)簡單回顧：

• 首先，明確組件庫所需解決的問題及存在的價(jià)值，這決定組件庫的體量和服務(wù)范圍是什么，以及構(gòu)建的時(shí)機(jī)是否合適。
• 其次，通過競品分析并結(jié)合身邊最熟悉或深耕的業(yè)務(wù)入手，通過產(chǎn)品目的來選擇設(shè)計(jì)模式，從最小元素開始逐步整理，包括產(chǎn)品配色方案和柵格系統(tǒng)等布局規(guī)范。
• 第三，需要對(duì)組件庫的重要組成部分「組件」，進(jìn)行圈定及合理分類。這里需要注意的是，組件范圍的圈定，尤其在組件庫搭建的初級(jí)階段并不是越多越好，而是需要有效的覆蓋那些經(jīng)過規(guī)劃的業(yè)務(wù)場景即可。
• 最后，組件庫并不是構(gòu)建完就結(jié)束了，是需要在后續(xù)項(xiàng)目中逐步維護(hù)與更新的長期積累過程。

任何組件庫的構(gòu)建都離不開一個(gè)優(yōu)秀的團(tuán)隊(duì)在整個(gè)設(shè)計(jì)過程中的協(xié)同，十分感謝參與的設(shè)計(jì)師與前端工程師們。上文僅是個(gè)人參與過程中的一些經(jīng)驗(yàn)總結(jié)，還不夠全面，同時(shí)篇幅有限，關(guān)于組件的具體設(shè)計(jì)考量無法一次詳盡，歡迎一起討論組件庫及標(biāo)準(zhǔn)化設(shè)計(jì)體系相關(guān)的更多內(nèi)容。

文章來源：優(yōu)設(shè)