一個擁有1328個組件的完整組件庫是如何搭建和維護的

作為設計師的你，一定對「組件庫」的概念并不陌生。

簡單的來說，組件庫就是界面設計中常用的控件與元素的組合?；蛟S我們可以將組件庫比作樂高的基礎顆粒，它們看起來很簡單，也沒什么特別的，卻可以通過設計師的巧手搭建出炫酷的城堡。

千米網是中國領先的專業電商 SaaS 平臺，主要服務新零售企業，產品包含訂貨系統、分銷系統、微商城、門店管理系統等電商解決方案。

電商產品錯綜復雜，產品線之間牽連很深，讓這棵盤根錯節的大樹在面臨大版本迭代時苦不堪言。

為了保持迭代時設計風格統一、設計語言一致，并減少溝通成本，同時減輕產品經理原型設計的負擔，產品架構師宋高峰協助UE組從零到一搭建一套相對完整的組件庫。

大而全還是小而美？

組件庫究竟應該小而美還是大而全？這似乎是一個兩難的抉擇。

憑借對業務的深入理解和扎實的產品背景，千米UE組以技術架構為基礎，結合業務特點和產品邏輯，將千米眾多產品線歸納成為5個組件庫

基礎組件

基礎組件如同積木的最小顆粒，按鈕、下拉框、輸入框等基礎內容被歸檔在這里。

通用組件

通用組件就是復用性很高的一類非行業性組件，比如登陸注冊、找回密碼等 大部分 App 都有的功能。

核心組件

核心組件是基于行業來提取的，比如電商常用的購物車、結算頁面、訂單頁面。

聚合組件

聚合組件更像是多個導航集合的入口，比如商城的個人中心頁面。

個性組件

個性組件是復用性較低的部分，比如營銷類活動。

在搭建中理解業務

基礎框架梳理清楚后，設計團隊著手梳理業務，搭建組件庫。

通過將具體產品的抽象提取，設計師們在搭建過程中更加深了對業務的理解。

UE負責人劉甜甜說：“大家都知道，業內很多的UI設計師只關注界面的美丑，而忽略頁面的流程交互。我們用墨刀搭建組件庫，讓我們的設計小伙伴們對頁面的流轉更加清晰，避免了一些頁面流程交互的疏漏，在交互上有了更多的提升。”

從某種程度上講，組件庫是對設計師的約束。

配色、圖標、按鈕等一系列設計語言要素共同構成了一套標準化的設計體系，限制了基礎設計方向，為后期的設計決策提供著指引。

通過這些組件的設計積累，也避免了多業務線多款產品設計上的不統一。

從另一個角度看，組件庫也是對設計師的解放。

過去，在時間有限的情況下，設計師常常會優先基礎層面的表層設計，而忽略了業務層面的體驗優化。

有了組件庫后，通過提升設計團隊的業務認知，把組件省下的時間去觸及業務，來更好的為設計服務，讓業務和設計相輔相承。

團隊協同時，組件庫的功用被放大到極致。

組件庫搭建好后，設計團隊在墨刀上與產品團隊共享了這套組件庫，將其提供給產品經理使用，進行原型搭建。

協同之間，組件庫讓產品和設計團隊避免了表層展現不同所帶來的理解誤差。

“比如單選項，一般選項少時我們會用radio ，選項多時會用下拉框選擇，當我們定義了組件給到了說明，就相當于給到了規范，定義了規范，減少了一些不必要的溝通和解釋。包括一些核心組件的信息結構布局，由專業的設計定義，產品直接使用，也提升了產品的效率。”千米UE負責人劉甜甜解釋道。

維護與迭代

迭代分為兩方面，一方面的迭代是基于業務，業務有變化，組件就需要跟著更新。

另一方面是設計本身需要迭代，這是出于視覺優化的迭代。

迭代可以基于需要分周期進行，舊的版本對應封版作為記錄留存。

在搭建之初，千米UE組就考慮到了后期的維護和迭代。結構清晰的基礎搭建為后期維護提供了一個條理清楚的框架。

對于日常維護，UE組為每個組件庫分配了相應的責任人，讓團隊每個人只需要關注自己相關業務的組件庫維護。而墨刀本身的多人協同屬性，也讓組件庫的協同維護成為可能。

另外，組件不僅需要 UI 的維護，還要有前端開發的通力配合的，才能保證更好的推進和落地。

總結

組件庫搭建是一個團隊共同完成的大項目，為了搭建出一個真正高可用、可拓展的組件庫，一定要在團隊內、部門間打通溝通阻礙，完成高效配合。

開始搭建前，也需要以產品特點和技術架構確定組件庫的結構，再順著結構脈絡梳理產品功能。

當然，一款優秀的工具更是不不可或缺的。上手快，功能涵蓋頁面設計與交互跳轉，支持多人協作共同編輯，墨刀或許也可以成為你搭建組件庫時的得力幫手。