前文鏈接：

從零講起 | B端設(shè)計(jì)規(guī)范和組件庫應(yīng)該怎么做？

實(shí)操講解 | B端設(shè)計(jì)規(guī)范和組件庫應(yīng)該怎么搭建？

2.5 組件功能

2.5.1 組件的使用邏輯

有了前面響應(yīng)式和自動(dòng)布局的認(rèn)識(shí)，我們就要進(jìn)入到組件功能的具體應(yīng)用上了。

組件的創(chuàng)建，首先要選中對(duì)應(yīng)的設(shè)計(jì)元素，可以是單個(gè)圖層，也可以是編組、自動(dòng)布局層，然后點(diǎn)擊生成組件按鈕就可以創(chuàng)建出一個(gè) “原始” 組件。

在即時(shí)設(shè)計(jì)中，這個(gè)組件叫 “引用組件”，從該組件復(fù)制、引用出來的副本叫做 “實(shí)例組件”。它們具有明確的從屬關(guān)系。

在這個(gè)關(guān)系中，引用組件是完全可編輯修改的，只要修改它就可以統(tǒng)一修改關(guān)聯(lián)的所有副本樣式。

但由引用組件創(chuàng)建出來的副本，卻不能任意編輯，我們不能修改它下級(jí)圖層的尺寸、位置、順序。但是，副本的編組大小、圖層色彩、文字內(nèi)容往往會(huì)有很多特殊的調(diào)節(jié)需求，所以目前主流的 UI 軟件都支持了副本組件的尺寸修改、色彩編輯和文本內(nèi)容編輯，讓組件的使用更靈活。

以上就是組件使用的最基本邏輯，更進(jìn)一步，組件作為一個(gè)編組，所包含的下級(jí)圖層的邏輯都會(huì)被保留下來，例如樣式設(shè)置、響應(yīng)式設(shè)置、自動(dòng)布局邏輯。如果一個(gè)編組原本就已經(jīng)創(chuàng)建好了這些規(guī)則，那么當(dāng)它被創(chuàng)建成組件，不管是引用組件還是副本，都會(huì)繼承這些設(shè)置。

比如上一小節(jié)中的通知彈窗案例，設(shè)置好自動(dòng)布局再創(chuàng)建成引用組件以后，生成的副本就可以靈活的進(jìn)行調(diào)整和修改文本內(nèi)容。

除了樣式、響應(yīng)、自動(dòng)布局外，組件也可以包含組件。我們前面說過，按原子核的結(jié)構(gòu)來講，一個(gè)復(fù)雜的組件是由若干基礎(chǔ)元素和控件組合而成。比如上方這個(gè)案例，就由多個(gè)模塊、文本區(qū)域和按鈕組成。

如果我們提前將按鈕、圖標(biāo)等創(chuàng)建成引用組件，那么最終整個(gè)大的編組再創(chuàng)建成引用組件也是沒有問題的，原來的組件格式并沒有被抹消。

但有個(gè)細(xì)節(jié)值得注意，就是一個(gè)引用組件下方包含的組件只能是 —— 副本。如果剛才我們將按鈕創(chuàng)建成引用組件，那么上級(jí)編組再創(chuàng)建的引用組件就會(huì)自動(dòng)將這些按鈕轉(zhuǎn)換成副本，并在畫布周圍生成新的引用組件。

所以這個(gè)順序也預(yù)示了，組件的嵌套是由下而上的，我們需要先創(chuàng)建低級(jí)的引用組件，再用它的副本逐步去組合更復(fù)雜的引用組件。這在后面的章節(jié)會(huì)進(jìn)一步做出說明。

2.5.2 組件的文件管理

創(chuàng)建引用組件，除了在畫布中它的描邊色彩不一樣，圖層中的圖標(biāo)改變了以外，還會(huì)出現(xiàn)在一個(gè)新的位置中 —— 組件管理面板。

任何創(chuàng)建的組件都會(huì)被生成到左側(cè)的組件欄目面板中，只要從那里拖拽就可以置入當(dāng)前畫布中，方便我們調(diào)用和查看。

看起來雖然很簡單，但是需要我們管理的細(xì)節(jié)卻很多。首先就是這個(gè)列表是一個(gè)包含層級(jí)關(guān)系的樹樁結(jié)構(gòu)目錄，是允許我們對(duì)組件的層級(jí)進(jìn)行結(jié)構(gòu)自定義的。

當(dāng)我們創(chuàng)建一個(gè)引用組件的時(shí)候，如果它處于一個(gè)畫板中，那么創(chuàng)建后它會(huì)在組件面板中保留該組件的默認(rèn)文件路徑：

頁面 Page / 畫板 Frame / 組件 Compoent

如果我們?cè)诓煌撁婧筒煌嫲逯袆?chuàng)建引用組件，那么該面板的目錄一定是特別混亂無序的。所以為了創(chuàng)建出符合正常分類使用習(xí)慣的組件目錄，就要做出調(diào)整。

首先就是建議在項(xiàng)目文件中創(chuàng)建一個(gè)獨(dú)立的頁面 Page 用來存放引用組件，任何新增的引用組件我們都需要將它置入到該頁面中。且不要將引用組件直接置入到畫板中，這樣它就不會(huì)生產(chǎn)包含畫板的層級(jí)出來。

然后，我們就可以在文件命名中，使用正斜杠 Slash 符號(hào) “/” 作為層級(jí)劃分依據(jù)。比如下面的案例，包含相同上級(jí)結(jié)構(gòu)的組件會(huì)被聚合到一個(gè)目錄層級(jí)中：

• 數(shù)據(jù)錄入/上傳/亮色/拖拽上傳

• 數(shù)據(jù)錄入/上傳/亮色/上傳中

• 數(shù)據(jù)錄入/上傳/亮色/上傳成功

• 數(shù)據(jù)錄入/上傳/亮色/上傳失敗

• 數(shù)據(jù)錄入/上傳/亮色/上傳成功懸停

• 數(shù)據(jù)錄入/上傳/亮色/上傳失敗懸停

這種命名結(jié)構(gòu)帶來的另一個(gè)好處，就是處于同一個(gè)目錄層級(jí)下的組件，在屬性面板中可以進(jìn)行快速的切換。尤其是一些相近的組件要做替換不用再在樹樁列表中重新找一遍，直接通過下拉菜單替換即可。

使用命名方式來梳理組件列表，完成有邏輯性、清晰的組件目錄，可以極大地提升組件的利用率和效率。但命名必然不是一邊創(chuàng)建組件一邊憑感覺命名的，而是一開始就要在外部完成的，例如通過思維導(dǎo)圖的方式制定出結(jié)構(gòu)大綱，才能保證最終效果符合預(yù)期。

2.5.3 組件中的變體功能

組件的應(yīng)用中，除了不同組件的引用外，過去最讓我們頭痛的就是同一個(gè)組件的不同狀態(tài)。比如一個(gè)簡單的按鈕，就包含非常多的類型，默認(rèn)、懸浮、按壓、點(diǎn)過、禁用、讀取等等。

為了在項(xiàng)目中可以使用組件的不同狀態(tài)，就需要我們?cè)诿舷鹿Ψ?，比如?/p>

控件 / 基礎(chǔ) / 按鈕-大 / 默

控件 / 基礎(chǔ) / 按鈕-大 / 懸浮

控件 / 基礎(chǔ) / 按鈕-大 / 點(diǎn)擊

控件 / 基礎(chǔ) / 按鈕-大 / 禁用

就是用前面提到的右側(cè)下拉菜單，來完成同一組件的不同狀態(tài)切換。理論上這么實(shí)現(xiàn)是沒有問題的，但在實(shí)踐過程中，不僅組件列表的數(shù)量要大大增加，且下拉菜單第一步只改狀態(tài)顯得非常局促……

所以，從 Figma 開始推出了變體 Variants 功能，來更好地應(yīng)對(duì)同一組件不同狀態(tài)的高效應(yīng)用。目前該功能已經(jīng)在線上 UI 設(shè)計(jì)軟件中普及。

在即時(shí)設(shè)計(jì)中，只要?jiǎng)?chuàng)建了引用組件，那么選中它后右側(cè)就會(huì)有 “變體” 一欄，點(diǎn)擊它就可以針對(duì)該組件創(chuàng)建出變體效果。

變體中原來的組件一分為二，并不是完全生成出一個(gè)全新的組件，而是在這個(gè)組件的概念下創(chuàng)建了一個(gè)新的狀態(tài)出來，在組件列表面板中沒有生成任何新的內(nèi)容。

但是當(dāng)我們?cè)偬砑右粋€(gè)該組件的副本以后，就會(huì)發(fā)現(xiàn)它的右側(cè)多了一個(gè)條目和下拉菜單，通過這個(gè)下拉菜單就可以切換剛才變體內(nèi)的不同組件。

比如我們?cè)谧凅w內(nèi)選中兩個(gè)組件，在右側(cè)變體的下拉菜單中可以點(diǎn)擊修改命名，將它們分別改成 “默認(rèn)” 和 “選中”，再修改對(duì)應(yīng)的樣式。然后再應(yīng)用同一個(gè)副本，就可以看見下拉菜單的內(nèi)容也替換成了“默認(rèn)” 和 “選中”，通過選擇不同的文字，就可以切換成對(duì)應(yīng)的組件樣式。

這個(gè)功能可以很方便的切換組件的不同狀態(tài)，但如果它僅僅支持到這一步，那確實(shí)和使用命名編組的方法沒有本質(zhì)區(qū)別。真正讓變體產(chǎn)生價(jià)值的，就在于同一組件的多屬性、多狀態(tài)支持。

還用按鈕舉例，比如一個(gè)按鈕包含 3 種樣式：純文字、純圖標(biāo)和文字加圖標(biāo)，再包含 3 種狀態(tài)：默認(rèn)、懸浮、點(diǎn)擊，還有淺色和深色模式……

也就意味著，按鈕包含樣式、狀態(tài)、色彩三種屬性，每個(gè)屬性中的值可以相互結(jié)合，那么總共就要設(shè)計(jì)出 18 個(gè)對(duì)應(yīng)的按鈕出來。

如果我們使用變體每個(gè)樣式命名一個(gè)名字，那么下拉菜單有12個(gè)選項(xiàng)選起來也是很頭疼的。所以，變體允許我們自定義組件屬性和值，幫助我們更好的歸類和選擇組件樣式。

所以，在變體面板中，我們可以在更多選項(xiàng)中選擇添加分類就添加對(duì)應(yīng)的屬性內(nèi)容，添加出 3 個(gè)分類后，通過雙擊修改它們的名字為 ”樣式“、”狀態(tài)“、”色彩“。

有了屬性，變體下方的組件命名就會(huì)根本變更。如下圖所示，默認(rèn)一次顯示屬性值，雙擊則可以查看對(duì)應(yīng)的屬性名和值。

即變體的基本命名語法為 —— 屬性1 = 對(duì)應(yīng)類型, 屬性2 = 對(duì)應(yīng)類型, 屬性3 = 對(duì)應(yīng)類型。

我們就可以通過這種語法方式完成對(duì)上方按鈕的統(tǒng)一命名，如：

• 樣式 = 圖標(biāo), 狀態(tài) = 默認(rèn), 色彩 = 淺色

• 樣式 = 圖標(biāo), 狀態(tài) = 懸浮, 色彩 = 淺色

• 樣式 = 圖標(biāo), 狀態(tài) = 點(diǎn)擊, 色彩 = 淺色

• 樣式 = 文字, 狀態(tài) = 默認(rèn), 色彩 = 淺色

• 樣式 = 文字, 狀態(tài) = 懸浮, 色彩 = 淺色

• ……

然后，將這些組件統(tǒng)一添加到同一個(gè)變體下，之后創(chuàng)建的副本，就可以在右側(cè)變體面板中進(jìn)行多維度的選項(xiàng)操作了。

具體的變體設(shè)置，分類、值的設(shè)置，可以自己在軟件中摸索，我就不演示了。這里再額外提一個(gè)功能，就是對(duì)值的設(shè)置上，還可以應(yīng)用 “布爾” 的規(guī)則，即選項(xiàng)中只包含 “是” 或 ’否“。

如果我們?cè)谏实闹抵兄皇褂?”是，否“、”yes，no“、”開，關(guān)“ 等反義詞，那么副本變體選項(xiàng)中就會(huì)啟用開關(guān)按鈕，來替代原本的下拉菜單，提升操作的效率。

變體的使用可以很好的減少組件面板中組件的數(shù)量，提升組件狀態(tài)切換的效率。如果一個(gè)組件創(chuàng)建變態(tài)后被嵌套在另一個(gè)組件之下，那么這個(gè)復(fù)合組件也可以快速修改下級(jí)組件的變體類型。

雖然變體功能看起來非常強(qiáng)大，但它并不能適用所有場景，因?yàn)樾薷钠饋碛绊懙囊剡^多。它更適用于基礎(chǔ)的控件和組件類型。如果針對(duì)復(fù)雜組件，尤其是包含多層組件嵌套的場景，往往使用命名的方式會(huì)比使用變體更有效率，這就需要大家自己在項(xiàng)目中積累經(jīng)驗(yàn)做判斷。

2.5.4 組件的發(fā)布和共享

通過前面的功能，就可以完成組件庫的對(duì)應(yīng)設(shè)置了，你可以在這個(gè)項(xiàng)目文件中調(diào)用這些組件完成項(xiàng)目。

但實(shí)際項(xiàng)目中，組件庫的使用可不能被局限在一個(gè)項(xiàng)目文件里，我們往往會(huì)創(chuàng)建很多個(gè)項(xiàng)目文件，來設(shè)計(jì)不同的流程、版本、模塊。于是，這些不同的文件都需要調(diào)用同一個(gè)樣式和組件庫。

所以，要讓包含規(guī)范的文件能被其它文件引用，就需要我們?cè)诮M件面板中，點(diǎn)擊設(shè)計(jì)庫按鈕，在彈窗中點(diǎn)擊 ”發(fā)布“，將它創(chuàng)建成一個(gè)設(shè)計(jì)資源庫。這樣，我們?cè)趧e的文件中再次打開這個(gè)面板，就可以看到這個(gè)資源的開關(guān)，點(diǎn)擊開關(guān)后，該文件就能調(diào)用里面的樣式和組件了。

在項(xiàng)目中，需要先新建團(tuán)隊(duì)并邀請(qǐng)相關(guān)成員，然后再創(chuàng)建設(shè)計(jì)資源庫，那么其他設(shè)計(jì)師才可以引用該資源來完成相關(guān)頁面的設(shè)計(jì)。

至于每次原文件更新并落實(shí)到引用的其它文件這些細(xì)節(jié)操作，就需要大家自己去實(shí)踐了。

結(jié)尾

今天的分享就到這邊結(jié)束，前面幾篇就是軟件相關(guān)功能的完整介紹了。只有完全搞明白這些功能的應(yīng)用方法，我們才可以真正在項(xiàng)目中進(jìn)行設(shè)計(jì)規(guī)范的落地和實(shí)踐。

下一篇，我們就要展開具體的項(xiàng)目設(shè)計(jì)規(guī)范創(chuàng)建說明了。

下篇再賤！