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

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

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

組件化思維是設(shè)計師必備的技能之一。如何搭建組件庫和設(shè)計規(guī)范更是設(shè)計師應(yīng)該掌握的。

無組件化的問題

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

維護成本高：需要所有設(shè)計師一起維護更新，有時候存在同步不及時的情況，導(dǎo)致設(shè)計師之間對最新組件的更新不同步，從而產(chǎn)生更大的維護成本。

效率低：設(shè)計師重復(fù)設(shè)計相同類型的組件，設(shè)計一系列組件狀態(tài)，這一過程中會消耗設(shè)計師大量的時間。設(shè)計師工作效率低。

統(tǒng)一性差：存在相同組件被重復(fù)造新樣式的情況，導(dǎo)致統(tǒng)一性差，造成用戶的認(rèn)知成本。

開發(fā)成本高：開發(fā)需要寫重復(fù)的樣式，沒法全局調(diào)用，耗費時間，開發(fā)成本高，安裝包的體積大，甚至是會影響產(chǎn)品的性能。

復(fù)用性差：組件之間無法復(fù)用，需要不停地制作新樣式。

難以協(xié)同：同事之間協(xié)同困難，每個設(shè)計師都有自己設(shè)計習(xí)慣。

組件化的好處

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

統(tǒng)一性：

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

高效性：

• 一套設(shè)計規(guī)范衍生兩套組件庫，分別為 sketch ui 組件庫和 auxre 元件庫。sketch ui 組件面向?qū)ο鬄橐曈X設(shè)計師，auxre 元件庫面向?qū)ο鬄?a href="http://76r.com.cn/tag/%e4%ba%a4%e4%ba%92" class="tag_a" target="_blank">交互設(shè)計師和產(chǎn)品經(jīng)理。設(shè)計師和產(chǎn)品經(jīng)理通過拖動組件搭建界面，節(jié)約時間，提升工作效率。
• 減少制作組件控件的時間，不需要對組件重新下定義，提升設(shè)計效率，可將更多時間放在流程體驗和設(shè)計推動上。

延續(xù)性：

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

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

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

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

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

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

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

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

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

如何搭建組件化

組件化什么時候開始做?

一種情況是產(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ī)范模板。里面包含組件的定義、組件的幾種類型、組件的標(biāo)注、組件的交互規(guī)范和組件的極限情況等。

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

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

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

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

如何使用組件化

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

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

后記

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

組件化設(shè)計思維培養(yǎng)：

歡迎關(guān)注作者的微信公眾號：「Echo的設(shè)計筆記」