從網(wǎng)上搜索設(shè)計(jì)組件，我們能找到各種對(duì)外公開的設(shè)計(jì)組件庫(kù)，同樣還有不少或概括或詳細(xì)的文章，手把手教你“如何搭建一個(gè)好的設(shè)計(jì)組件庫(kù)”，但這些方法論很少探討面對(duì)C端組件頻繁增改、設(shè)計(jì)規(guī)范動(dòng)態(tài)調(diào)整，如何高效賦能業(yè)務(wù)設(shè)計(jì)交付的相關(guān)內(nèi)容，但這恰恰是搜索業(yè)務(wù)面臨的關(guān)鍵問(wèn)題。
搜索是一個(gè)“牽一發(fā)而動(dòng)全身”的業(yè)務(wù)，每一個(gè)微小的設(shè)計(jì)細(xì)節(jié)都有可能影響各個(gè)業(yè)務(wù)的數(shù)據(jù)指標(biāo)，一個(gè)“好的設(shè)計(jì)組件庫(kù)”需要以一種潛移默化的方式讓設(shè)計(jì)師掌握設(shè)計(jì)規(guī)范，完成合規(guī)的設(shè)計(jì)，從這個(gè)角度而言它應(yīng)該比較
「好懂」
。
而作為服務(wù)于整個(gè)設(shè)計(jì)團(tuán)隊(duì)的公用設(shè)計(jì)組件庫(kù)，面對(duì)每月數(shù)以萬(wàn)計(jì)的調(diào)用次數(shù)，它必須保障最基本的易用性，應(yīng)該非常
「好用」
。
同時(shí)，面對(duì)頻繁迭代，“好的設(shè)計(jì)組件”還需要保持最快的更新速度，為各個(gè)橫向團(tuán)隊(duì)提供正確的樣式，從這個(gè)角度來(lái)說(shuō)它還要
「好維護(hù)」
。
因此，
「好懂、好用、好維護(hù)」
是搜索設(shè)計(jì)語(yǔ)境下，對(duì)一個(gè)“好的設(shè)計(jì)組件”的定義。
接下來(lái)，我們將從這三個(gè)「好」入手，分享搜索設(shè)計(jì)組件庫(kù)在升級(jí)過(guò)程中的一些思考，希望能和大家共同探討。
“萬(wàn)丈高樓平地起”，我們先來(lái)說(shuō)說(shuō)如何從零開始構(gòu)建一個(gè)既符合設(shè)計(jì)規(guī)范又易于理解的設(shè)計(jì)組件。
首先，在搭建組件時(shí)，我們可以考慮采用
多層嵌套
的方式，即組件(Component)內(nèi)部嵌套變體(Instance)。這種方式不僅能省去組件搭建和修改過(guò)程中的重復(fù)操作，甚至還能在解綁組件時(shí)，通過(guò)選中內(nèi)部的子組件圖層進(jìn)行解綁，大大簡(jiǎn)化了搭建和使用雙方的操作流程。
在多層嵌套的思路下，我們可以進(jìn)一步用
“底層靈活、上層收斂”
來(lái)指導(dǎo)組件的搭建。這意味著底層變體的形式足夠多樣，能夠支持大部分的狀態(tài)切換，而在上層組件搭建的過(guò)程中顯性地加強(qiáng)規(guī)范的指引(如規(guī)范中不允許使用的樣式不對(duì)外展示)，以降低超出規(guī)范設(shè)計(jì)的可能。
具體的搭建流程可以大致分為三步：
場(chǎng)景收集和分析、搭建基本變體組、拓展高階變體組
。
我們將通過(guò)視頻組件搭建的生動(dòng)案例，具體介紹如何依據(jù)“底層靈活、上層收斂”原則來(lái)搭建組件庫(kù)，使得組件本身既足夠靈活，又能起到足夠的約束作用。
在著手搭建某類組件時(shí)，我們首先通過(guò)規(guī)范確認(rèn)和場(chǎng)景遍歷，廣泛收集各類變體。隨后，從我們能想到的所有維度出發(fā)，對(duì)這些變體進(jìn)行細(xì)致定義。這樣，我們就能得到一張?jiān)敱M描述組件變體性質(zhì)的表格。表格的第一列依次列出變體1、變體2、變體3等，而第一行則羅列出各種維度，如寬度、比例等。通過(guò)這種方法，我們可以將原本零散、雜亂的組件變體描述，系統(tǒng)地歸納整理成一張清晰明了的表格。
表格通過(guò)不同維度來(lái)唯一確定一個(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)，但不一定需要在組件庫(kù)中呈現(xiàn)；
-
高階組件僅涉及少部分尺寸的組件，應(yīng)在完成基本組件搭建后再進(jìn)行。
據(jù)此，我們可以輕松梳理出視頻組件搭建流程的優(yōu)先級(jí)：
-
播放狀態(tài)作為共性，應(yīng)首先搭建；
-
基本組件尺寸和組合是最符合用戶心智的變體選擇，應(yīng)緊隨其后；
-
值得注意的是，“封面槽位”是“播放狀態(tài)”中的一個(gè)圖層。根據(jù)“底層靈活、上層收斂”的原則，我們將其插入到搭建播放狀態(tài)之前。因此，視頻組件的最終搭建流程為：
-
-
-
-
完成對(duì)視頻組件搭建的分析，我們就可以有條不紊地開始搭建組件了。先搭建基本組件視頻組件，再用基本組件搭建高階組件。這一步驟雖然為大家所熟知，但仍需格外注意，如配置項(xiàng)的設(shè)置要力求合理，也可以融入設(shè)計(jì)規(guī)范和使用規(guī)范，同時(shí)還應(yīng)將一些搭建過(guò)程中的零散組件集中收納避免被調(diào)用。關(guān)于這些具體的注意事項(xiàng)，我們將在后續(xù)部分進(jìn)行詳細(xì)闡述。
至此我們完成了組件搭建的基本流程，一個(gè)達(dá)到及格線的視頻組件就誕生了。據(jù)統(tǒng)計(jì)，優(yōu)化后每次調(diào)用視頻組件將節(jié)省至少10步的點(diǎn)擊操作！
完成了一個(gè)基本組件的搭建后，我們可以轉(zhuǎn)換視角，從使用的角度來(lái)審視并檢查這個(gè)組件。
我們期望，從插入組件變體、切換組件配置，再到最后的解綁組件，整個(gè)流程都能縱享絲滑且穩(wěn)定可靠，確保業(yè)務(wù)設(shè)計(jì)師在使用過(guò)程中獲得最佳體驗(yàn)。
我們可以一步步來(lái)審視組件的使用過(guò)程。首先是插入組件，據(jù)觀察，通常有三種方式，①在左側(cè)的資產(chǎn)面板(Assets)中直接找到對(duì)應(yīng)組件并插入；②通過(guò)查閱設(shè)計(jì)規(guī)范，鎖定所需的變體后復(fù)制粘貼；③選中一個(gè)不需要的組件，通過(guò)右側(cè)的“切換變體”面板(Swap instance)切換成所需的變體。很明顯，在這個(gè)過(guò)程中依賴的是組件的精準(zhǔn)搜索和快速定位。
為了提升搜索精度，我們可以從組件命名入手，采用中、英、數(shù)字結(jié)合的方式，實(shí)現(xiàn)模糊匹配；也可以在發(fā)布時(shí)隱藏不希望被調(diào)用的組件，以減少無(wú)用的搜索結(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)避免使用過(guò)于復(fù)雜的分組方式。相反，應(yīng)更注重組件的樣式展示，并盡量簡(jiǎn)化組件的層級(jí)結(jié)構(gòu)。這樣，設(shè)計(jì)師在使用時(shí)能夠更直觀地看到組件的外觀，而無(wú)需深入復(fù)雜的層級(jí)去查找。
另外值得注意的是，F(xiàn)igma會(huì)默認(rèn)用組件集合中最左上角的組件生成預(yù)覽樣式，因此應(yīng)當(dāng)把視覺上最有代表性的變體放在左上角，這個(gè)效果在切換變體(Swap instance)時(shí)很重要，因?yàn)槟壳霸谠撁姘逯袥]法查看組件細(xì)節(jié)，只能靠縮略圖和名稱來(lái)推測(cè)是哪個(gè)組件。
其次對(duì)于配置項(xiàng)的設(shè)置也大有講究，業(yè)界有組件庫(kù)為了實(shí)現(xiàn)C2D2C，從源頭上將設(shè)計(jì)組件和前端組件的配置項(xiàng)打平，這是不錯(cuò)的思路，但有可能會(huì)提升設(shè)計(jì)側(cè)的理解成本。針對(duì)搜索業(yè)務(wù)的特殊語(yǔ)境，我們還是選擇了從「規(guī)范理解」角度去設(shè)置組件的配置項(xiàng)，將所有允許自定義的配置盡可能外露，并清晰地說(shuō)明修改限制，如字?jǐn)?shù)限定、選項(xiàng)個(gè)數(shù)等，這樣能夠在使用的過(guò)程中強(qiáng)化業(yè)務(wù)設(shè)計(jì)師對(duì)規(guī)范的掌握。
另一個(gè)常常被忽視的關(guān)鍵點(diǎn)是選項(xiàng)和配置的排序問(wèn)題。為了提高瀏覽和選擇的效率，建議對(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è)置就顯得尤為重要，它能夠記憶并保存修改過(guò)的文字內(nèi)容，從而免于重復(fù)輸入。
還有一些情況是，某個(gè)組件變體實(shí)際上并沒有與某個(gè)值相對(duì)應(yīng)的組件(盡管Figma機(jī)制允許選擇該值)，用戶切換后就會(huì)發(fā)現(xiàn)組件完全變了，只能撤回。為了避免這類情況，建議使用另外的標(biāo)記來(lái)表明組件某個(gè)設(shè)置項(xiàng)是不可切換的。
完成了組件的搭建和檢查，接下來(lái)讓我們聚焦于組件的日常維護(hù)。
這一環(huán)節(jié)可以從兩個(gè)維度展開，一是依托中臺(tái)的日常數(shù)據(jù)監(jiān)控進(jìn)行維護(hù)，二是通過(guò)團(tuán)隊(duì)內(nèi)部的緊密協(xié)同機(jī)制來(lái)保障。后者更多側(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)建成組件。
以上是百度搜索設(shè)計(jì)團(tuán)隊(duì)在設(shè)計(jì)組件庫(kù)升級(jí)過(guò)程中的心得分享，包括搜索業(yè)務(wù)對(duì)于“好的設(shè)計(jì)組件”的訴求，以及一些搭建和優(yōu)化組件的實(shí)用思路，核心是探討如何從組件庫(kù)建設(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é)束，未來(lái)我們將持續(xù)探索設(shè)計(jì)系統(tǒng)工具化的形態(tài)、與AI大模型結(jié)合的機(jī)會(huì)，通過(guò)豐富消費(fèi)途徑，實(shí)現(xiàn)在業(yè)務(wù)交付的不同階段下全方位提效。這部分內(nèi)容后續(xù)有機(jī)會(huì)也將會(huì)和大家見面，請(qǐng)大家期待！
感謝閱讀，以上內(nèi)容均由百度MEUX團(tuán)隊(duì)原創(chuàng)設(shè)計(jì)，以及百度MEUX版權(quán)所有，轉(zhuǎn)載請(qǐng)注明出處，違者必究，謝謝您的合作。申請(qǐng)轉(zhuǎn)載授權(quán)后臺(tái)回復(fù)【轉(zhuǎn)載】。
作者：百度MEUX鏈接：https://www.zcool.com.cn/article/ZMTY1MTYwOA==.html來(lái)源：站酷著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
