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

當我們進入一個成熟的設(shè)計團隊，團隊文檔中都會有組件庫和對應(yīng)的設(shè)計規(guī)范。

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

設(shè)計規(guī)范是指導團隊組員組件使用的規(guī)則和項目設(shè)計的指導原則。

本篇文章內(nèi)容目錄如下：

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

01 無組件化的問題

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

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

02 組件化的好處

當團隊在做項目時，有組件化的好處有：統(tǒng)一性、高效性和延續(xù)性。

統(tǒng)一性：

1. 整個產(chǎn)品不同模塊的業(yè)務(wù)按照統(tǒng)一規(guī)范使用，提升整個產(chǎn)品的視覺交互統(tǒng)一性，減少開發(fā)樣式，提升開發(fā)效率。
2. 避免設(shè)計師創(chuàng)造新的組件控件樣式。
3. 統(tǒng)一交互設(shè)計規(guī)則，減少用戶操作的迷惑感，提升產(chǎn)品的體驗。

高效性：

1. 一套設(shè)計規(guī)范衍生兩套組件庫，分別為sketch ui組件庫和auxre元件庫。sketch ui組件面向?qū)ο鬄橐曈X設(shè)計師，auxre元件庫面向?qū)ο鬄榻换ピO(shè)計師和產(chǎn)品經(jīng)理。設(shè)計師和產(chǎn)品經(jīng)理通過拖動組件搭建界面，節(jié)約時間，提升工作效率。
2. 減少制作組件控件的時間，不需要對組件重新下定義，提升設(shè)計效率，可將更多時間放在流程體驗和設(shè)計推動上。

延續(xù)性：

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

03 組件化支撐的設(shè)計理論

組件化所支撐設(shè)計理念是原子設(shè)計。

原子設(shè)計是一種方法論，由原子、分子、組織、模板和頁面共同協(xié)作以創(chuàng)造出更有效的用戶界面系統(tǒng)的一種設(shè)計方法。

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

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

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

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

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

04 如何搭建組件化

組件化什么時候開始做?

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

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

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

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

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

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

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

05 如何使用組件化

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

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

后記

以上就是關(guān)于組件化思維設(shè)計流程的基本內(nèi)容，如果你想了解更多內(nèi)容可以在留言區(qū)留言。

#相關(guān)閱讀#

從淘寶、微信等產(chǎn)品中掌握“搜索”交互

#專欄作家#

UX，人人都是產(chǎn)品經(jīng)理專欄作家。前美團點評高級交互設(shè)計師。微信公眾號：Echo的設(shè)計筆記，歡迎關(guān)注

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議