設(shè)計(jì)組件庫是提升設(shè)計(jì)效率和一致性的重要工具，但如何在頻繁迭代和動(dòng)態(tài)調(diào)整中高效賦能業(yè)務(wù)設(shè)計(jì)交付，一直是行業(yè)面臨的挑戰(zhàn)。本文作者分享了他們?cè)谠O(shè)計(jì)組件庫建設(shè)中的新思考和實(shí)踐，供大家參考學(xué)習(xí)。

2025年竟然還有人在寫組件搭建方法論！但這次我們有了一些新思考~

前期我們介紹了設(shè)計(jì)系統(tǒng)的1.0 “統(tǒng)一化”(詳見百度搜索設(shè)計(jì)系統(tǒng)丨龐雜中建立秩序)，通過提升資產(chǎn)內(nèi)在一致性來優(yōu)化消費(fèi)體驗(yàn)。這次我們將從更實(shí)操的角度，探討如何從組件庫建設(shè)的角度入手，提升資產(chǎn)消費(fèi)效率。

本文將分享我們對(duì)于“什么是好的設(shè)計(jì)組件”的看法，并給出一種搭建復(fù)雜組件的實(shí)用思路。我們還會(huì)從資產(chǎn)消費(fèi)的角度，提供一些優(yōu)化建議。雖然過程中會(huì)涉及不少基于Figma軟件的操作細(xì)節(jié)，但核心思路就像一把“萬能鑰匙”，無論在哪個(gè)設(shè)計(jì)平臺(tái)都行之有效，希望這些內(nèi)容能給廣大設(shè)計(jì)師們帶來一些新的啟發(fā)。

01 “好的設(shè)計(jì)組件”在搜索設(shè)計(jì)場(chǎng)景中的定義

從網(wǎng)上搜索設(shè)計(jì)組件，我們能找到各種對(duì)外公開的設(shè)計(jì)組件庫，同樣還有不少或概括或詳細(xì)的文章，手把手教你“如何搭建一個(gè)好的設(shè)計(jì)組件庫”，但這些方法論很少探討面對(duì)C端組件頻繁增改、設(shè)計(jì)規(guī)范動(dòng)態(tài)調(diào)整，如何高效賦能業(yè)務(wù)設(shè)計(jì)交付的相關(guān)內(nèi)容，但這恰恰是搜索業(yè)務(wù)面臨的關(guān)鍵問題。

搜索是一個(gè)“牽一發(fā)而動(dòng)全身”的業(yè)務(wù)，每一個(gè)微小的設(shè)計(jì)細(xì)節(jié)都有可能影響各個(gè)業(yè)務(wù)的數(shù)據(jù)指標(biāo)，一個(gè)“好的設(shè)計(jì)組件庫”需要以一種潛移默化的方式讓設(shè)計(jì)師掌握設(shè)計(jì)規(guī)范，完成合規(guī)的設(shè)計(jì)，從這個(gè)角度而言它應(yīng)該比較「好懂」。

而作為服務(wù)于整個(gè)設(shè)計(jì)團(tuán)隊(duì)的公用設(shè)計(jì)組件庫，面對(duì)每月數(shù)以萬計(jì)的調(diào)用次數(shù)，它必須保障最基本的易用性，應(yīng)該非?！负糜谩?。

同時(shí)，面對(duì)頻繁迭代，“好的設(shè)計(jì)組件”還需要保持最快的更新速度，為各個(gè)橫向團(tuán)隊(duì)提供正確的樣式，從這個(gè)角度來說它還要「好維護(hù)」。

因此，「好懂、好用、好維護(hù)」是搜索設(shè)計(jì)語境下，對(duì)一個(gè)“好的設(shè)計(jì)組件”的定義。

接下來，我們將從這三個(gè)「好」入手，分享搜索設(shè)計(jì)組件庫在升級(jí)過程中的一些思考，希望能和大家共同探討。

02 好懂：一種耦合設(shè)計(jì)規(guī)范的組件搭建方式

“萬丈高樓平地起”，我們先來說說如何從零開始構(gòu)建一個(gè)既符合設(shè)計(jì)規(guī)范又易于理解的設(shè)計(jì)組件。

首先，在搭建組件時(shí)，我們可以考慮采用多層嵌套的方式，即組件(Component)內(nèi)部嵌套變體(Instance)。這種方式不僅能省去組件搭建和修改過程中的重復(fù)操作，甚至還能在解綁組件時(shí)，通過選中內(nèi)部的子組件圖層進(jìn)行解綁，大大簡(jiǎn)化了搭建和使用雙方的操作流程。

在多層嵌套的思路下，我們可以進(jìn)一步用“底層靈活、上層收斂”來指導(dǎo)組件的搭建。這意味著底層變體的形式足夠多樣，能夠支持大部分的狀態(tài)切換，而在上層組件搭建的過程中顯性地加強(qiáng)規(guī)范的指引(如規(guī)范中不允許使用的樣式不對(duì)外展示)，以降低超出規(guī)范設(shè)計(jì)的可能。

具體的搭建流程可以大致分為三步：場(chǎng)景收集和分析、搭建基本變體組、拓展高階變體組。

我們將通過視頻組件搭建的生動(dòng)案例，具體介紹如何依據(jù)“底層靈活、上層收斂”原則來搭建組件庫，使得組件本身既足夠靈活，又能起到足夠的約束作用。

在著手搭建某類組件時(shí)，我們首先通過規(guī)范確認(rèn)和場(chǎng)景遍歷，廣泛收集各類變體。

隨后，從我們能想到的所有維度出發(fā)，對(duì)這些變體進(jìn)行細(xì)致定義。

這樣，我們就能得到一張?jiān)敱M描述組件變體性質(zhì)的表格。表格的第一列依次列出變體1、變體2、變體3等，而第一行則羅列出各種維度，如寬度、比例等。

通過這種方法，我們可以將原本零散、雜亂的組件變體描述，系統(tǒng)地歸納整理成一張清晰明了的表格。

表格通過不同維度來唯一確定一個(gè)變體，這些維度可大致分為兩個(gè)特性和一個(gè)共性。共性指的是所有變體在這一維度上均保持一致，常見特性則涵蓋了最常見的分類性質(zhì)，如寬度、高度、數(shù)量和優(yōu)先級(jí)等，而業(yè)務(wù)特性則與具體業(yè)務(wù)緊密相關(guān)。

在搭建組件時(shí)，我們可以遵循「共性-常見特性-業(yè)務(wù)特性」順序，這樣的順序有助于降低理解成本，因?yàn)樽罘闲闹堑姆诸惐恢糜谕鈱?，同時(shí)底層的組件又保持了足夠的靈活性，便于切換各種變量。對(duì)于業(yè)務(wù)特性，我們可以根據(jù)實(shí)際情況靈活處理，既可以將其作為基本組件的延展，也可以不將其納入組件范疇。

以視頻組件為例，我們從表格中獲取的信息如下：

• 視頻尺寸及其組合是最符合用戶心智的變體選擇；
• 播放狀態(tài)是所有變體的共有性質(zhì)；
• 自動(dòng)播放情況與業(yè)務(wù)相關(guān)，但不一定需要在組件庫中呈現(xiàn)；
• 高階組件僅涉及少部分尺寸的組件，應(yīng)在完成基本組件搭建后再進(jìn)行。

據(jù)此，我們可以輕松梳理出視頻組件搭建流程的優(yōu)先級(jí)：

1. 播放狀態(tài)作為共性，應(yīng)首先搭建；
2. 基本組件尺寸和組合是最符合用戶心智的變體選擇，應(yīng)緊隨其后；
3. 高階組件在完成基本組件搭建后再進(jìn)行。

值得注意的是，“封面槽位”是“播放狀態(tài)”中的一個(gè)圖層。根據(jù)“底層靈活、上層收斂”的原則，我們將其插入到搭建播放狀態(tài)之前。

因此，視頻組件的最終搭建流程為：

1. 封面槽位；
2. 播放狀態(tài)；
3. 基本組件尺寸和組合；
4. 高階組件。

完成對(duì)視頻組件搭建的分析，我們就可以有條不紊地開始搭建組件了。

先搭建基本組件視頻組件，再用基本組件搭建高階組件。

這一步驟雖然為大家所熟知，但仍需格外注意，如配置項(xiàng)的設(shè)置要力求合理，也可以融入設(shè)計(jì)規(guī)范和使用規(guī)范，同時(shí)還應(yīng)將一些搭建過程中的零散組件集中收納避免被調(diào)用。

關(guān)于這些具體的注意事項(xiàng)，我們將在后續(xù)部分進(jìn)行詳細(xì)闡述。

至此我們完成了組件搭建的基本流程，一個(gè)達(dá)到及格線的視頻組件就誕生了。

據(jù)統(tǒng)計(jì)，優(yōu)化后每次調(diào)用視頻組件將節(jié)省至少10步的點(diǎn)擊操作！

03 好用：消費(fèi)視角下的組件自檢

完成了一個(gè)基本組件的搭建后，我們可以轉(zhuǎn)換視角，從使用的角度來審視并檢查這個(gè)組件。

我們期望，從插入組件變體、切換組件配置，再到最后的解綁組件，整個(gè)流程都能縱享絲滑且穩(wěn)定可靠，確保業(yè)務(wù)設(shè)計(jì)師在使用過程中獲得最佳體驗(yàn)。

我們可以一步步來審視組件的使用過程。

首先是插入組件，據(jù)觀察，通常有三種方式：

①在左側(cè)的資產(chǎn)面板(Assets)中直接找到對(duì)應(yīng)組件并插入；

②通過查閱設(shè)計(jì)規(guī)范，鎖定所需的變體后復(fù)制粘貼；

③選中一個(gè)不需要的組件，通過右側(cè)的“切換變體”面板(Swap instance)切換成所需的變體。

很明顯，在這個(gè)過程中依賴的是組件的精準(zhǔn)搜索和快速定位。

為了提升搜索精度，我們可以從組件命名入手，采用中、英、數(shù)字結(jié)合的方式，實(shí)現(xiàn)模糊匹配；也可以在發(fā)布時(shí)隱藏不希望被調(diào)用的組件，以減少無用的搜索結(jié)果。

如果組件是采用前文提到的“多層嵌套”方式搭建的，我們可以添加“Preferred”子組件，這樣在切換時(shí)會(huì)優(yōu)先展示這些子組件，這個(gè)功能在切換圖標(biāo)時(shí)尤為實(shí)用。

對(duì)于習(xí)慣邊查閱設(shè)計(jì)規(guī)范邊使用組件的設(shè)計(jì)師，我們?cè)黾恿烁鄬?shí)際使用的正誤案例，這些案例直觀展示了組件變體的正確選擇和使用方式，進(jìn)一步降低了規(guī)范的理解成本，有效輔助設(shè)計(jì)決策。同時(shí)，我們專門維護(hù)了一個(gè)固定區(qū)域，用于平鋪展示所有組件變體。

為了確保能夠輕松點(diǎn)選，我們將變體放在最外層展示(即不在任何Frame、Group或Section中)。這樣能讓設(shè)計(jì)師一目了然地看到所有變體，從而快速選擇所需的組件。

在組件配置階段，有三項(xiàng)注意點(diǎn)能讓組件更加易用，即“重視組件的可視化效果、設(shè)置高效易用的配置項(xiàng)、貼心地保存修改”。

考慮到C端組件的多樣性和用戶的使用習(xí)慣，我們應(yīng)避免使用過于復(fù)雜的分組方式。相反，應(yīng)更注重組件的樣式展示，并盡量簡(jiǎn)化組件的層級(jí)結(jié)構(gòu)。這樣，設(shè)計(jì)師在使用時(shí)能夠更直觀地看到組件的外觀，而無需深入復(fù)雜的層級(jí)去查找。

另外值得注意的是，F(xiàn)igma會(huì)默認(rèn)用組件集合中最左上角的組件生成預(yù)覽樣式，因此應(yīng)當(dāng)把視覺上最有代表性的變體放在左上角，這個(gè)效果在切換變體(Swap instance)時(shí)很重要，因?yàn)槟壳霸谠撁姘逯袥]法查看組件細(xì)節(jié)，只能靠縮略圖和名稱來推測(cè)是哪個(gè)組件。

其次對(duì)于配置項(xiàng)的設(shè)置也大有講究，業(yè)界有組件庫為了實(shí)現(xiàn)C2D2C，從源頭上將設(shè)計(jì)組件和前端組件的配置項(xiàng)打平，這是不錯(cuò)的思路，但有可能會(huì)提升設(shè)計(jì)側(cè)的理解成本。

針對(duì)搜索業(yè)務(wù)的特殊語境，我們還是選擇了從「規(guī)范理解」角度去設(shè)置組件的配置項(xiàng)，將所有允許自定義的配置盡可能外露，并清晰地說明修改限制，如字?jǐn)?shù)限定、選項(xiàng)個(gè)數(shù)等，這樣能夠在使用的過程中強(qiáng)化業(yè)務(wù)設(shè)計(jì)師對(duì)規(guī)范的掌握。

另一個(gè)常常被忽視的關(guān)鍵點(diǎn)是選項(xiàng)和配置的排序問題。為了提高瀏覽和選擇的效率，建議對(duì)選項(xiàng)和選項(xiàng)之間，以及外層的不同配置項(xiàng)，都按照一定的邏輯順序進(jìn)行排序。

最后一點(diǎn)，我們稱之為“貼心地保存修改”機(jī)制，這個(gè)針對(duì)的是文字修改的場(chǎng)景。

在實(shí)際操作中，使用一個(gè)組件可能需要對(duì)多個(gè)配置項(xiàng)進(jìn)行修改。有時(shí)在修改完文字內(nèi)容后再去調(diào)整其他配置時(shí)，已修改的文字會(huì)被重置。這時(shí)文本屬性(text property)的設(shè)置就顯得尤為重要，它能夠記憶并保存修改過的文字內(nèi)容，從而免于重復(fù)輸入。

還有一些情況是，某個(gè)組件變體實(shí)際上并沒有與某個(gè)值相對(duì)應(yīng)的組件(盡管Figma機(jī)制允許選擇該值)，用戶切換后就會(huì)發(fā)現(xiàn)組件完全變了，只能撤回。

為了避免這類情況，建議使用另外的標(biāo)記來表明組件某個(gè)設(shè)置項(xiàng)是不可切換的。

04 好維護(hù)：持續(xù)監(jiān)測(cè)，不斷迭代

完成了組件的搭建和檢查，接下來讓我們聚焦于組件的日常維護(hù)。

這一環(huán)節(jié)可以從兩個(gè)維度展開，一是依托中臺(tái)的日常數(shù)據(jù)監(jiān)控進(jìn)行維護(hù)，二是通過團(tuán)隊(duì)內(nèi)部的緊密協(xié)同機(jī)制來保障。后者更多側(cè)重協(xié)作流程和機(jī)制上的建設(shè)，在本文中我們不做更多展開，重點(diǎn)討論前者。

數(shù)據(jù)監(jiān)控的方式主要依托Figma中的組件數(shù)據(jù)看板(查看路徑：View libraries-Analytics)，看板中展示了各個(gè)組件的調(diào)用數(shù)和解綁數(shù)數(shù)據(jù)，這些數(shù)據(jù)不直接反映組件的優(yōu)劣，但如果我們觀測(cè)到某個(gè)組件解綁率偏高，我們會(huì)考慮直接把它作為模板而不是創(chuàng)建成組件。

總結(jié)

以上是百度搜索設(shè)計(jì)團(tuán)隊(duì)在設(shè)計(jì)組件庫升級(jí)過程中的心得分享，包括搜索業(yè)務(wù)對(duì)于“好的設(shè)計(jì)組件”的訴求，以及一些搭建和優(yōu)化組件的實(shí)用思路，核心是探討如何從組件庫建設(shè)的角度入手，成功助力團(tuán)隊(duì)提升設(shè)計(jì)資產(chǎn)消費(fèi)效率。

當(dāng)前我們已經(jīng)完成設(shè)計(jì)資產(chǎn)工程化的前序環(huán)節(jié)，我們對(duì)設(shè)計(jì)資產(chǎn)的升級(jí)和探索并沒有結(jié)束，未來我們將持續(xù)探索設(shè)計(jì)系統(tǒng)工具化的形態(tài)、與AI大模型結(jié)合的機(jī)會(huì)，通過豐富消費(fèi)途徑，實(shí)現(xiàn)在業(yè)務(wù)交付的不同階段下全方位提效。

這部分內(nèi)容后續(xù)有機(jī)會(huì)也將會(huì)和大家見面，請(qǐng)大家期待！