編輯導讀：組件化思維是設計師必備的技能之一，如何搭建組件庫和設計規范更是設計師應該掌握的。本文作者從自身工作經驗出發，對組件化思維的設計流程進行了分析總結，供大家一同參考和學習。

當我們進入一個成熟的設計團隊，團隊文檔中都會有組件庫和對應的設計規范。

組件庫是當設計師遇到同一類組件設計場景時，可復用，避免造新的樣式。這樣既減少設計和開發的時間成本，同時增強產品的統一性，避免多樣式給用戶帶來認知障礙。

設計規范是指導團隊組員組件使用的規則和項目設計的指導原則。

本篇文章內容目錄如下：

1. 無組件化的問題
2. 組件化的好處
3. 組件化支撐的設計理念
4. 如何搭建組件化
5. 如何使用組件化

01 無組件化的問題

設計團隊在做項目的過程中，如果沒有組件化時，那么會遇到維護成本高、效率低、統一性差、開發成本高、復用性差和難以協同等6大問題。

1. 維護成本高：需要所有設計師一起維護更新，有時候存在同步不及時的情況，導致設計師之間對最新組件的更新不同步，從而產生更大的維護成本。
2. 效率低：設計師重復設計相同類型的組件，設計一系列組件狀態，這一過程中會消耗設計師大量的時間。設計師工作效率低。
3. 統一性差：存在相同組件被重復造新樣式的情況，導致統一性差，造成用戶的認知成本。
4. 開發成本高：開發需要寫重復的樣式，沒法全局調用，耗費時間，開發成本高，安裝包的體積大，甚至是會影響產品的性能。
5. 復用性差：組件之間無法復用，需要不停地制作新樣式。
6. 難以協同：同事之間協同困難，每個設計師都有自己設計習慣。

02 組件化的好處

當團隊在做項目時，有組件化的好處有：統一性、高效性和延續性。

統一性：

1. 整個產品不同模塊的業務按照統一規范使用，提升整個產品的視覺交互統一性，減少開發樣式，提升開發效率。
2. 避免設計師創造新的組件控件樣式。
3. 統一交互設計規則，減少用戶操作的迷惑感，提升產品的體驗。

高效性：

1. 一套設計規范衍生兩套組件庫，分別為sketch ui組件庫和auxre元件庫。sketch ui組件面向對象為視覺設計師，auxre元件庫面向對象為交互設計師和產品經理。設計師和產品經理通過拖動組件搭建界面，節約時間，提升工作效率。
2. 減少制作組件控件的時間，不需要對組件重新下定義，提升設計效率，可將更多時間放在流程體驗和設計推動上。

延續性：

1. 通過設計規范，在以后更新中可以連續迭代，避免斷層。
2. 團隊即使有成員離開或者加入，通過設計規范和組件庫可以快速的接手和進行正常工作

03 組件化支撐的設計理論

組件化所支撐設計理念是原子設計。

原子設計是一種方法論，由原子、分子、組織、模板和頁面共同協作以創造出更有效的用戶界面系統的一種設計方法。

原子：設計系統的最小單位。原子包括調色板，分割線，字體，單個元素（即標題，段落，按鈕等）這些元素有個特點就是最小元素不可再切割，如下圖。

分子：通過多個原子組合而成，作為一個單元組成UI元素的一個組件，如下圖。

組織：通過多個分子組合而成，我們可以構建更復雜但可重復的組織。組織是組成模板的主要組成部分，如下圖。

模板：通過多個組織組合而成。是頁面的基礎架構。將以上元素進行排版，將原子，分子，組織進行排版成最終的模板，如下圖。

頁面：將實際內容（圖片、文章等）套件在特定模板，每個頁面由將實際內容（圖片、文章等）模板修改而成，如下圖。

04 如何搭建組件化

組件化什么時候開始做?

一種情況是產品立項前就開始組件化，在產品0到1之前，擁有一套組件和設計規范。設計師可以從以前項目的組件庫和設計規范直接套用并修改，這樣項目前期設計做起來更加方便且省時省力少挖坑。

另一種情況是產品經歷過0到1后，產品趨于成熟，這個時候開始做組件化。組件化搭建最多會有六個步驟，分別為：整理目錄、制定規范模板、填充目錄內容、生成組件庫、sketch插件庫和開發服務平臺。

整理目錄：將線上的產品的組件進行梳理并做分組，形成一個組件目錄。制定規范模板：以一個典型的組件為例，制定組件內容規范模板。里面包含組件的定義、組件的幾種類型、組件的標注、組件的交互規范和組件的極限情況等。

填充目錄內容：按照制定的規范模板，將每個組件的內容進行填充完成，形成一套完整的設計規范。

生成組件庫：將設計規范里面的組件樣式單獨抽離出來，生成完整的組件庫。

sketch插件庫：如果有前端支持，可以將sketch組件庫開發成對應的插件，這樣設計師可以更方便的使用和實時更新。

開放服務平臺：有前端開發資源支持的話，可以將組件進行代碼封裝。移動端或PC端都可以做組件開發平臺。

05 如何使用組件化

當團隊搭建完成組件化之后，接下來就是成員間的使用，這一過程有業務需求產生組件模板、組件模版形成頁面、頁面形成頁面流程和頁面流程形成用戶體驗。

1. 業務需求產生組件模板：基于業務需求，產生符合業務屬性的組件，當來新需求時，根據業務場景選擇合適的組件組合成對應的模板。
2. 組件模版形成頁面：組件模板根據實際產品需求，形成對應的產品頁面。
3. 頁面形成頁面流程：設計師根據組件模板所搭建的頁面，形成一個個頁面操作流程。
4. 頁面流程形成用戶體驗：根據最終完成的頁面流程，則形成最終的用戶體驗。

后記

以上就是關于組件化思維設計流程的基本內容，如果你想了解更多內容可以在留言區留言。

#相關閱讀#

從淘寶、微信等產品中掌握“搜索”交互

#專欄作家#

UX，人人都是產品經理專欄作家。前美團點評高級交互設計師。微信公眾號：Echo的設計筆記，歡迎關注

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議