在上一篇文章中，我們通過實例講述了構建和維護組件庫的一些方法和思路：

在聊到關于持續維護組件的意義時，我們說到，組件在保證合理性的同時，還需要滿足復用性、易用性，以便更好地服務于日常的設計需求。所以在組件維護過程中我們不可避免的需要考慮復用性和易用性二者之間的平衡。此時我們需要思考“如何使一個組件在滿足多業務場景需求的同時，又能保證其易用性？

一、關于復用性

復用性是指組件具備一定的可配置屬性以適用不同場景的能力。適應的場景越多，組件的復用性就越高。「可配置」主要體現在以下方面：

1. 支持通過替換內容，樣式，尺寸等操作改變其狀態，以適應不同的場景；
2. 支持局部元素展示隱藏，例如商品卡片的標題、說明、標簽、價格等可根據接口數據控制展示邏輯；
3. 支持多種布局和排列方式，例如商品卡片的左圖右文排列、上圖下文排列；

我們在上一篇文章中的提到的基礎樣式或組件，例如文字(字號、顏色、對齊方式)、顏色、圖標等即是可配置屬性，通過這些基礎樣式預設的變量，來滿足各場景的需求。

組件的內部元素的可控性越高，其適用的場景就越寬泛。為了滿足不同場景的需求，設計師在調用組件時往往需要通過“覆蓋層”設置其嵌套邏輯和樣式選取，整個過程中所產生的思考與操作成本較高。但相應地，正因為「組件」高度整合了多個可配置屬性和變量，組件庫的整體規模會相對容易把控，結構也會相對清晰。

二、關于易用性

易用性是指組件對于使用者的友好程度，即組件的設計能夠符合使用者的認知及需求，使用者能通過較低的學習成本、快速上手使用。我們通常需要從以下 4 個指標來度量組件是否易用：

1. 結構清晰：組件所包含的所有組成元素是否可視；
2. 便利檢索：指在文檔內查找組件的難易程度，通常與組件命名相關；
3. 即拖即用：單一組件用于業務設計所花費的成本；
4. 幫助可視：是否容易獲取組件使用的提示和幫助。

組件內部元素的可控性越低，其適用的場景就越單一。對于使用者來說，可以快速地檢索、發現所需樣式，并能快速完成調用，也更易于組件的認知和記憶。但要滿足多樣化的設計需求，所需「組件」的數量需要足夠多，組件庫的整體規模相對較大，后期更新和維護成本更高。

總的來說復用性和易用性是優秀組件必不可少的特性，二者缺一不可，但任何一個極端都不利于構建高效實用的組件庫，設計師需要明確組件庫的目標并制定規劃，針對每一個圖標、按鈕、組件、模塊，考慮如何實現復用性和易用性的平衡。

下面將以“Gtech UI Kit (Mob)”組件庫當中的實例，來簡單闡述我們對于二者平衡的思考，以及我們是如何做的。

二、以商品卡片(網格布局)為例

以電商 PLP 頁面（商品列表）中常見的商品卡片為例，我們知道在列表中每個商品最終呈現在用戶面前的內容取決于商家后臺的配置。對于承載內容的組件來說，我們在維護時需要結合業務需求考慮諸多問題：例如自適應場景、商品名稱的長短限制、卡片內容的布局和排列方式等等...

1. 拆解 - 從業務出發，拆解組件的表達結構和所需元素

如果對商品卡片進行拆解，最基礎的商品卡片通常包含：背景、圖片、名稱、標簽和價格等元素。

圖片通常以 1:1 的比例展示，無論在什么屏幕寬度下，均保持比例一致；

商品名稱通常不會超過兩行，需要考慮自動布局以適應不同的文本長度和屏幕寬度；

標簽行通常展示 1-3 個不等，甚至沒有的情況，標簽組件中需預設足夠多的樣式支持；

價格通常會展示折前價和折后價對比，或僅展示最終售價。

當某一組件拆解到足夠細分的時候，可拆解出多個可配置屬性（即基礎樣式和組件）可以形成多種組合。依照這些組合，我們可以開始創建組件的工作。

2. 組合 - 通用的組件的布局及可配置屬性的搭建母組件

建立商品卡片的基本結構和內容排列：網格布局以上圖下文為主，將所有的元素設置成合適的大小，除圖片外的其他內容均以名稱、標簽、價格的順序自上而下展示，另外，建議標簽和價格元素各自合并成組，以方便后續進行自動布局；

選擇所有元素，創建為組件；

對于網格布局的商品卡片，我們除了一系列的自動布局和尺寸的設置外，需要注意的是新建一個空對象容器、將圖片放置其中，以方便固定比例。

以上我們就完成了滿足上述需求的商品組件，我拆解了一下結構，如下圖：

按照上述操作，我們完成了一個基礎商品組件的創建，我們通常稱之為“復用組件”，通過復用組件我們在需求設計時可以根據實際業務場景進行替換圖片、替換文字內容、增刪元素或者拖拽拉伸均等操作。

3. 精細化 - 從多維度，多場景輸出子組件的方案和組合

精細化是根據實際情況對復用組件進行細分管理，通過對可配置屬性的替換，輸出多個樣式組合即“子組件”；子組件一般根據使用頻次和屬性分類展示在組件庫文檔內，以供使用者瀏覽、使用；如果需要調整某一子組件時，只需進行獨立調整，無需改動復用組件，且其他子組件也不會受其影響。這種管理方式的優點諸多不一一贅述，但需要在前期整理、理解和細化時需要花費一點精力。

三、思路

在整個過程中，我們前期將目標進行拆解細分，中期整合多個屬性變量創建可復用組件，最后通過精細化管理，盡可能的在單一組件目錄下展示多個樣式組合，并通過不同的菜單對其布局、類型、狀態等屬性進行分類，使之在使用環節能夠易于檢索、識別、并即拖即用，快速上手。

以上是我在整理組件時的思路，拋磚引玉，僅供參考。在實際維護的過程中需要考量不同屬性和變量的使用頻率。并不是組件整合的屬性和變量越多越好，兼容越多的屬性和變量往往意味著組件的復雜度越高，對于各個場景的調整成本也越高，反而會增加額外的操作和認知成本，就舍本逐末了。

再舉個例子，如果設計能夠在需求階段就得知后臺配置的商品名稱有字數限制的情況的話，我們在創建商品卡片時，可以直接以最極端的場景考慮即可，這樣也能減少試錯成本，提高維護效率。所以也請大家注意，要結合業務需求和日常工作習慣，找到最適合自己的組件整理維護方案。

四、易用性在前，復用性在后

實際上，無論何種事物，復雜的邏輯往往是隱藏在看不見的地方，就如同我們日常接觸的應用程序一樣，展現在用戶面前的永遠是優秀的界面和體驗設計，而其背后往往是開發者無數行代碼交織形成的復雜邏輯。組件也是如此：

在整理和維護組件的環節，我們需要考慮多種組合場景，衡量這些場景的使用頻率，整合出一個或多個高度復用性高的組件，并以此精細化足夠多的可供快速使用的子組件。

而對于使用環節，我們希望設計師和開發者可以通過瀏覽設計文檔、網頁等方式查看所有子組件選項和使用幫助，并能快速選擇業務所需的組件，減輕改造組件的成本，以實現更有效率的設計和封裝工作。

最后，不要盲目追求兼容性和復雜度，適合即是最好。

更多組件設計干貨：

歡迎關注作者微信公眾號：「Gtech UED」