今天這篇從組件的使用邏輯、文件管理、變體功能、發(fā)布和共享4個方面，幫你掌握組件功能的具體應(yīng)用。

上期回顧：

一、組件功能

1. 組件的使用邏輯

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

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

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

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

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

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

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

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

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

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

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

2. 組件的文件管理

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

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

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

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

頁面 Page / 畫板 Frame / 組件 Compoent

如果我們在不同頁面和不同畫板中創(chuàng)建引用組件，那么該面板的目錄一定是特別混亂無序的。所以為了創(chuàng)建出符合正常分類使用習(xí)慣的組件目錄，就要說動做出調(diào)整。

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

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

1. 數(shù)據(jù)錄入/上傳/亮色/拖拽上傳
2. 數(shù)據(jù)錄入/上傳/亮色/上傳中
3. 數(shù)據(jù)錄入/上傳/亮色/上傳成功
4. 數(shù)據(jù)錄入/上傳/亮色/上傳失敗
5. 數(shù)據(jù)錄入/上傳/亮色/上傳成功懸停
6. 數(shù)據(jù)錄入/上傳/亮色/上傳失敗懸停

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

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

3. 組件中的變體功能

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

為了在項目中可以使用組件的不同狀態(tài)，就需要我們在命名上下功夫，比如：

1. 控件 / 基礎(chǔ) / 按鈕-大 / 默
2. 控件 / 基礎(chǔ) / 按鈕-大 / 懸浮
3. 控件 / 基礎(chǔ) / 按鈕-大 / 點擊
4. 控件 / 基礎(chǔ) / 按鈕-大 / 禁用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 樣式 = 圖標(biāo), 狀態(tài) = 默認(rèn), 色彩 = 淺色
2. 樣式 = 圖標(biāo), 狀態(tài) = 懸浮, 色彩 = 淺色
3. 樣式 = 圖標(biāo), 狀態(tài) = 點擊, 色彩 = 淺色
4. 樣式 = 文字, 狀態(tài) = 默認(rèn), 色彩 = 淺色
5. 樣式 = 文字, 狀態(tài) = 懸浮, 色彩 = 淺色
6. ……

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

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

如果我們在色彩的值中只使用 ”是，否“、”yes，no“、”開，關(guān)“ 等反義詞，那么副本變體選項中就會啟用開關(guān)按鈕，來替代原本的下拉菜單，提升操作的效率。

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

雖然變體功能看起來非常強(qiáng)大，但它并不能適用所有場景，因為修改起來影響的要素過多。它更適用于基礎(chǔ)的控件和組件類型。如果針對復(fù)雜組件，尤其是包含多層組件嵌套的場景，往往使用命名的方式會比使用變體更有效率，這就需要大家自己在項目中積累經(jīng)驗做判斷。

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

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

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

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

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

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

結(jié)尾

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

歡迎關(guān)注作者的微信公眾號：「超人的電話亭」