產品：這次需求很簡單，對比上期只有字段和操作項的差異，把上次的稿子直接復制一下應該不用很多時間吧？

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

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

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

……

通過以上對話不難看出，最常出現在需求溝通與研發過程中，由于缺少統一的規范和標準化體系，導致實施環節各方溝通成本高，造成設計成果與實現有一定差距，影響用戶體驗；通用組件和業務組件混用，導致設計模式和代碼復用率低。尤其是當業務發展到一定體量時，對于復雜產品的大量重復且類似的需求場景，如果沒有一種的工具和規范來協同工作，將大大影響團隊的生產及溝通效率。

問題

• 認知：產品、研發、設計師對于同一需求都有自己理解的解決方案，缺少統一規范的約束，難以達成共識。
• 效率：設計效率低，交互原型的維護成本及上下游團隊的溝通成本高，易造成不專業的印象。
• 品質：認知和效率的局限性，最終導致實施落地的產品質量和用戶體驗難以得到保障。

解決

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

組件庫是設計系統的一部分，是在我們常規界面設計過程中可以直接用來制作交互圖例和搭建頁面的組件集合，它可以作為單個組件獨立存在，也可以通過多個組件組合而成的結構或模式來解決類似場景的設計問題。組件庫是在約束條件下去構建解決方案的過程，所以組件的使用也需遵循一定的規范，按照一套標準化的體系復用于多個業務場景。

一個有效的組件庫，可以幫助設計師和研發提高工作效率，提升設計專業度的同時讓產品本身的體驗更加一致、可學，品牌感更強，它所具備的基本特征一定是通用的、靈活的、復用的。

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

那么用組件庫這種標準化體系來完成設計方案時，到底能帶來怎樣的價值？

組件庫的價值

保證產品體驗的一致性：對于一個含有多業務系統的大型復雜產品，每個獨立的業務系統雖然在功能上有一定區別，但整體的用戶體驗需要滿足基本的一致性。比如，當我使用同一個產品中的業務系統 A 和業務系統 B 時，我能通過類似的頁面結構、組件及樣式的一致性、操作反饋乃至提示文案結構的一致性，來感知到我使用的A、B業務系統隸屬于同一個產品。

提升設計師的效率：在需求量巨大且需求來自不同的業務線時，需要逐一繪制頁面及組件，造成大量重復勞動，并且在評審及需求溝通環節還可能存在不斷地細節調優。所以對于設計師而言，組件的高頻復用能大大提升設計效率，使設計師更多的將精力聚焦于理解和解決用戶的實際問題。

提升產研團隊的效率：通用場景及普通需求直接按規范進行設計和研發，減少上下游對同一頁面及組件使用方式的不同理解而產生的多余溝通成本。

利于沉淀設計規范：組件本身的設計和使用方式就可以直接作為交互和視覺規范的一部分，按照統一的設計規范來確定需要使用的主題色、組件樣式、組合方式及頁面結構，可以快速搭建出一個或多個產品的交互框架。

構建「FishDesign」企業級UI組件庫

那么如何構建一個企業級 UI 組件庫？

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

顧名思義，「企業級」意味著 FishDesign 所服務的業務都是具備一定體量的，可能是服務一個包含了多個獨立子業務系統的大型復雜產品，比如網易七魚；也可能是同時服務多款產品，比如網易七魚和網易定位等。

組件庫是幫助設計者及前端工程師快速構建業務系統的工具，除了最重要的組件內容，還需要設計原則、配色方案及布局規范來指導具體業務產品的設計有效落地。

1. 設計原則

基于 FishDesign 目前主要是幫助搭建 B 端企業級產品，而 B 端業務的產品目的決定了它所才采取的設計模式，所以我們將用以下四點作為塑造組件庫的設計原則：

• 簡潔：如無必要，勿增實體，慎重篩選客戶當前需要信息內容。
• 直接：提供用戶操作后的直接反饋，保證用戶的操作結果符合預期。
• 優雅：設計方案追求優雅，給使用者有質感的操作感受。
• 適應性：設計方案需提供可擴展能力及適應性，以適應不同模式的企業使用。

2. 顏色

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

• 主色：選擇藍色系來傳達智能服務、信任可靠、技術創新的品牌形象。
• 輔助色：除了品牌主色調藍色，在輔助色中也存在一樣的藍色，那是因為藍色是相對泛用性較廣的色系，用于產品中的主操作按鈕、文字按鈕或 icon 等。紅色喚起注意并昭示危險，所以一般用于謹慎操作及錯誤提示。黃色則常用于警示信息，提示用戶操作可能帶來的風險及后果。綠色能傳遞安全和健康的情緒感受，用于正向反饋提示或成功操作的引導。
• 中性色：一般采取黑灰色調來展示產品的文本信息、背景和邊框色，用來表現層次結構。

3. 布局規范

為處理多業務中網頁設計區域內的信息收納問題，我們用規則的網格陣列來指導和規范版面布局以及信息分布，即柵格系統和頁面布局。FishDesign 在 12 柵格系統的基礎上，將整個設計區域按照 24 等分的原則進行劃分，來增加頁面的相似度，提升用戶體驗。

我們通過基本的配色及布局規范解決了產品風格及信息區塊框架的設計，那組件庫中重要的組件部分，是如何作用于產品搭建的？Brad Frost 提出的「原子化設計理論」可以幫助我們更好的理解，原子化設計的靈感來自于現實世界當中的分子結構，UI 中顆粒度最小的元素，即「原子」，組成了顆粒度較大的元件，即「分子」；而諸多分子又組成了更加復雜的組件與模塊，即「有機體」。

組件庫構建之初無法一應俱全，是需要后續不斷的維護與迭代的。如何在最初海量組件中圈定適合的組件范圍呢？最合適的切入點就是從身邊的業務場景出發，從最基本、最簡單、最小的元素入手。

4. 組件分類

我們根據當下已有的業務場景和對往后一段時期的業務發展方向進行規劃，將組件庫的組件類型分為通用組件和業務組件。一般業務組件庫是不對外的（畢竟使用場景特殊也有限，放出來參考意義不大），所以在 FishDesign 官網只能看到通用組件部分。

• 通用組件：指適用范圍廣、復用頻次高，可復用于多個業務且不包含業務邏輯。比如導航欄、按鈕、toast、彈窗等。
• 業務組件：這類組件對比通用組件而言，最大的特點就是包含了較多業務屬性，跟產品功能有較強的關聯性，所以影響到適用范圍可能僅限于 1~2 個業務系統或特殊場景，且復用頻次不高。比如網易七魚的在線和呼叫系統中的咨詢分類組件。

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

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

由上述步驟，我們將通用組件繼續細分為五個子類別：基礎組件、導航、數據錄入、數據展示、操作反饋。

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

用組件庫設計「網易七魚」示例

以網易七魚為例，看下有組件庫參與搭建的設計示例，以下頁面中所用組件均出自 FishDesign 組件庫。

「導航組件」使用示例：

「表格組件」使用示例：

「彈窗組件」使用示例：

「步驟組件」使用示例：

總結

組件庫最大的價值在于提升整個團隊的產研效率，使設計質量得以保障的同時，提升產品整體的用戶體驗。

我們對構建企業級 UI 組件庫的步驟及要素做個簡單回顧：

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

任何組件庫的構建都離不開一個優秀的團隊在整個設計過程中的協同，十分感謝參與的設計師與前端工程師們。上文僅是個人參與過程中的一些經驗總結，還不夠全面，同時篇幅有限，關于組件的具體設計考量無法一次詳盡，歡迎一起討論組件庫及標準化設計體系相關的更多內容。

文章來源：優設