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

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

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

設(shè)計(jì)規(guī)范是指導(dǎo)團(tuán)隊(duì)組員組件使用的規(guī)則和項(xiàng)目設(shè)計(jì)的指導(dǎo)原則。

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

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

01 無(wú)組件化的問(wèn)題

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

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

02 組件化的好處

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

統(tǒng)一性：

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

高效性：

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

延續(xù)性：

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

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

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

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

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

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

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

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

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

04 如何搭建組件化

組件化什么時(shí)候開(kāi)始做?

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

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

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

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

生成組件庫(kù)：將設(shè)計(jì)規(guī)范里面的組件樣式單獨(dú)抽離出來(lái)，生成完整的組件庫(kù)。

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

開(kāi)放服務(wù)平臺(tái)：有前端開(kāi)發(fā)資源支持的話(huà)，可以將組件進(jìn)行代碼封裝。移動(dòng)端或PC端都可以做組件開(kāi)發(fā)平臺(tái)。

05 如何使用組件化

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

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

后記

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

#相關(guān)閱讀#

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

#專(zhuān)欄作家#

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

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

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