1. 程式人生 > >設計乾貨:產品設計團隊如何搭建和維護元件庫?

設計乾貨:產品設計團隊如何搭建和維護元件庫?

作為設計師的你,一定對「元件庫」的概念並不陌生。

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

一個優秀的元件庫可以複用在許多專案中,也可以大大減少設計師的工作量。目前市面上已經有一些開源的元件庫(如:ant design、material design),然而這些元件庫在我們經手的實際專案中卻沒有太大的意義。

這是因為不同行業、不同產品、不同專案的常用元件差異非常大,即使有了這些現成的元件庫,也無法適用自己的產品

,可以說每個公司所需的元件庫都是非常個性化的,這也正是千米網想要搭建自己元件庫的原因。

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

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

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

在工具的選用上,幾乎沒花太多時間。千米一直在使用墨刀作為生產力設計工具,也已在墨刀中積累了大量的設計檔案和素材。同時,墨刀的產品特性支援多人協同編輯,也方便記錄互動邏輯跳轉,這些特性是在元件庫搭建和維護當中都不可或缺的。所以,千米UE組毫不猶豫地敲定用墨刀來完成元件庫搭建。

大而全還是小而美?

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

如果只將核心業務模組拆解,形成小而美的元件庫,那實際投入使用後,許多頁面沒辦法用元件庫而只能從零到一繪製,最後與沒有元件庫的時候相比也沒有太好地提升效率。

然而,大而全的元件庫也有一些問題。

首先,大型元件庫意味著維護成本高,在產品高速迭代的情況下,元件庫的迭代有可能跟不上產品的迭代最後導致被棄用。

同時,以什麼樣的框架搭建元件庫也會大大影響後期的維護與使用。

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

1基礎元件

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

2通用元件

通用元件就是複用性很高的一類非行業性元件,比如“登陸註冊”、“找回密碼“等大部分 App 都有的功能。

 

3核心元件

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

4聚合元件

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

 

5個性元件

個性元件是複用性較低的部分,比如營銷類活動。

在搭建中理解業務

基礎框架梳理清楚後,設計團隊著手梳理業務,搭建元件庫。

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

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

從某種程度上講,元件庫是對設計師的約束

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

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

從另一個角度看,元件庫也是對設計師的解放

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

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

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

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

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

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

維護與迭代

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

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

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

 

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

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

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

總結

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

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

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