2023-2-16 濤濤
這是一篇醞釀了比較久的內(nèi)容了，來講解 B 端設(shè)計規(guī)范和組件庫的分享。這幾年網(wǎng)上出了不少類似的分享，雖然都寫得很全，都還是覺得不夠滿意，缺了一點點細(xì)節(jié)。
所以我自己出一版，希望能幫助你們一次性解決這些問題。
B 端項目設(shè)計中，設(shè)計規(guī)范和組件庫是一個繞不過去的檻。作為專業(yè)的 B 端設(shè)計師，必須有自己完成設(shè)計規(guī)范和組件庫的能力。
所以，首先我們要先理清楚什么是設(shè)計規(guī)范和組件庫。
設(shè)計規(guī)范是項目設(shè)計中要遵守的要求、細(xì)節(jié)、準(zhǔn)則，規(guī)定了諸如色彩、字體、柵格、間距、圓角等要素的規(guī)則，這些內(nèi)容都是可以在大量設(shè)計元素中應(yīng)用的細(xì)節(jié)。
換句話說，設(shè)計規(guī)范就是提取在項目中會廣泛使用的要素，并進(jìn)行統(tǒng)一制定的過程，防止設(shè)計師在設(shè)計過程中隨意發(fā)揮，導(dǎo)致項目統(tǒng)一性的崩壞。
組件庫，是通過梳理項目中應(yīng)用到的按鈕、開關(guān)、滑塊、日歷、下拉菜單等控件、組件的設(shè)計樣式、狀態(tài)、交互規(guī)則，再將它們統(tǒng)一復(fù)用到項目的不同頁面中去。
嚴(yán)格意義上來說也是設(shè)計規(guī)范的一部分，是基礎(chǔ)規(guī)范的進(jìn)一步延伸，但還是單拎出來講。因為組件庫的應(yīng)用不僅僅是設(shè)計統(tǒng)一性的問題，還融合了 ”組件化“ 的編程思路在里面。
組件化：將復(fù)雜系統(tǒng)拆分成不同功能獨立的模塊并重組的過程，且每個模塊包含對應(yīng)的狀態(tài)和屬性。
對于程序員來說，一個項目就是若干功能模塊的合集，往往是先開發(fā)這些功能模塊，再搭建對應(yīng)的完整頁面，而不是看一個頁面開發(fā)一個頁面。
所以制定完善的組件庫，除了提升設(shè)計質(zhì)量外，還可以很好的提升開發(fā)效率，推進(jìn)項目進(jìn)度。
設(shè)計規(guī)范和組件庫的搭建，就是一個由下至上的設(shè)計鏈路，通過對細(xì)節(jié)的制定來實現(xiàn)最終的項目表現(xiàn)層。可以借助廣為流傳的分子原理來理解：
任何成熟的 B 端項目都應(yīng)該具備自己的設(shè)計規(guī)范和組件庫，雖然有很多小團(tuán)隊在前期推進(jìn)項目時，因為各種問題沒有搭建或落地設(shè)計規(guī)范，但并不代表他們在招人的時候沒有要求。
在今天搭建 B 端項目規(guī)范時，新手還有一個普遍的問題：
項目規(guī)范和開源框架的規(guī)范有什么區(qū)別，如果選了一套開源框架做設(shè)計，設(shè)計師不就不用做規(guī)范了？
初級設(shè)計師會這么想并不奇怪，因為以 AntDesign 為首的開源框架做的實在是太完善了，不僅囊括了整套的 Web 色彩系統(tǒng)，還有各類常用的、不常用的交互組件。
它們不僅僅提供了相關(guān)的設(shè)計源文件，也給開發(fā)提供了對應(yīng)的代碼和接口，方便程序員應(yīng)用。看起來我們只要拼拼組件就可以和開發(fā)無縫銜接了……
這顯然是不可能的，正是因為開源框架太全面，可以產(chǎn)生無數(shù)種可能，我們才更應(yīng)該整理自己的項目規(guī)范。就像我前面已經(jīng)提到過的，設(shè)計規(guī)范是種 ”限制“，而不僅僅是設(shè)計風(fēng)格的簡單沉淀。
比如，不管你選了哪套開源框架，它提供了多少種色彩，你的項目都應(yīng)該有自己的項目主色，適當(dāng)?shù)妮o助色彩，而不可能把它的整套配色都應(yīng)用進(jìn)去。所以，即使顏色沒有跳出原有色彩系統(tǒng)，也要篩選出你用到的顏色進(jìn)行記錄。
再比如，開源框架的很多控件，都提供了好幾種樣式和方案，并不是讓你全部都用進(jìn)去，而是選擇自己覺得合適的。所以你每個控件中選擇的方案，也需要做記錄，統(tǒng)一后續(xù)的頁面設(shè)計。
前面只是記錄選擇，都還比較簡單，而最關(guān)鍵的問題在于，開源框架的組件不可能完美符合項目的全部需求。必然要在原有的基礎(chǔ)上作出大量細(xì)節(jié)的優(yōu)化，或者創(chuàng)建出新的業(yè)務(wù)組件出來，所以設(shè)計師還是要把這些內(nèi)容整理出來。
開源框架，就是給我們提供了一個比較全面的設(shè)計范圍，讓我們站在別人的肩膀上做選擇，提高設(shè)計規(guī)范的制作效率，而并不是讓我們直接躺平，復(fù)制黏貼就可以了。
同時，設(shè)計規(guī)范和組件需要在軟件中進(jìn)行運用，我們也同樣不能直接使用官方提供給我們的組件庫展開自己的項目設(shè)計，要根據(jù)自己項目的規(guī)范獨立進(jìn)行搭建和使用。
下面，我們就要根據(jù)設(shè)計規(guī)范的內(nèi)容，來講解如何結(jié)合并使用即時設(shè)計、Figma 的相關(guān)功能。
之所以 UI 設(shè)計軟件能取代 PS 獨立發(fā)展，就是因為 UI 設(shè)計中包含大量需要復(fù)用和批量修改的功能。而這些功能和設(shè)計規(guī)范有非常大的聯(lián)系，也是 UI 設(shè)計中項目規(guī)范能被落地實踐的重要保障。
但因為 Figam 和即時等次時代 UI 設(shè)計軟件提供了越來越多的功能，用來支持設(shè)計規(guī)范的實踐，且這些功能可以相互交叉、重疊、組合，導(dǎo)致很多人在前期學(xué)習(xí)中會被軟件功能繞暈，導(dǎo)致很多人沒有理解這些功能意義和價值，更不知道如何在項目中具體實踐。
所以，我們先將這些功能整體理解一遍，再逐一來對它們的使用規(guī)則和應(yīng)用場景進(jìn)行拓展。
樣式功能是用來記錄圖層樣式設(shè)置的功能。簡單點理解，就是記錄圖層右側(cè)的屬性設(shè)置的功能。正常我們選擇一個基礎(chǔ)圖層，軟件右側(cè)的屬性面板會將圖層樣式拆解成若干的類別，包括填充、描邊、字體、陰影、模糊。
而樣式功能，就是幫助設(shè)計師對不同的樣式類別進(jìn)行記錄和復(fù)用的過程，它會直接將該分類內(nèi)的相關(guān)參數(shù)值記錄下來，并進(jìn)行命名，方便后續(xù)的調(diào)用。
響應(yīng)式功能是讓圖層隨上級編組尺寸變動而自適應(yīng)的功能，方便我們在修改組件的大小時不用重新調(diào)節(jié)里面的元素細(xì)節(jié)。
例如設(shè)計一個卡片，可以通過響應(yīng)式的設(shè)置，讓頭部的元素左右對齊，下方的文本區(qū)域自動拓展，保持卡片的內(nèi)間距不變。
或者頁面右下角懸浮按鈕，也可以通過響應(yīng)式設(shè)置始終處于頁面底部，這樣我們在增加頁面高度的時候不用重新設(shè)置該元素的 Y 軸位置。
自動布局功能，是通過前端布局思路來設(shè)置元素布局方法自動排版功能，是 Figma 開發(fā)的最重要的功能，也是讓 Sketch 不再成為 B 端設(shè)計首選的核心因素。
它的主要功能如根據(jù)內(nèi)容自動完成尺寸變更，并列排版和順序的變更等。
自動布局可以極大的提升設(shè)計效率，正因為自動布局的出現(xiàn)，才讓項目組件庫可以真正被運用和落地實踐起來。
組件功能在不同軟件有不同的叫法，如 Symbol、Component、Kits 等，主要是將指定的圖層或編組生成一個新的編組單位（類似智能對象），在后續(xù)設(shè)計中進(jìn)行復(fù)用。
例如設(shè)計一個按鈕、開關(guān)，我們只要將它們生成為組件，就可以在后續(xù)設(shè)計中快速從組件庫里拖拽到設(shè)計頁面中，不用重新畫一遍，并且支持批量修改。
在組件應(yīng)用中，生成的第一個組件也叫父級組件，其它調(diào)用它的組件都是它的子組件，這是一個非常清晰的從屬關(guān)系。如果我們修改父級組件的內(nèi)容，所有子組件都會被統(tǒng)一修改。
組件的應(yīng)用除了這種最基礎(chǔ)的應(yīng)用以外，還包含了很多特殊的功能，如將低級組件合并成一個高級組件的嵌套，或者 Figma 前兩年發(fā)布的變體（Vriants），可以將一個組件的不同狀態(tài)聚合到一起，通過屬性面板來切換相關(guān)的狀態(tài)。
組件功能是 UI 類軟件最復(fù)雜的功能，它不僅本身設(shè)置很豐富，同時也可以結(jié)合樣式、響應(yīng)、自動布局，讓本來死板的組件變得更靈活可控，應(yīng)對復(fù)雜的設(shè)計環(huán)境。
在軟件中，記錄樣式就是在對應(yīng)的屬性面板上 “創(chuàng)建” 并 “命名”，就將對應(yīng)設(shè)置數(shù)據(jù)轉(zhuǎn)化成一個指定名稱的記錄，方便我們記憶和調(diào)用。
比如，填充色中使用了兩種色彩相近的色彩和不同透明度，我們就可以使用中文命名來區(qū)分，其中 #2B6DCF 80% 叫 輔助色，#2B93CF 90% 叫 主色。
創(chuàng)建完成的填充色記錄，就會在對應(yīng)的屬性樣式列表中出現(xiàn)，之后就可以在對應(yīng)圖層的屬性中關(guān)聯(lián)該記錄了。
之后，所有關(guān)聯(lián)到該記錄的圖層屬性，都可以快速應(yīng)用該記錄內(nèi)的參數(shù)。如果我們在樣式的列表中修改該記錄的數(shù)值，那么所有關(guān)聯(lián)到該記錄的圖層就會一起被修改。
一定要牢記，目前的主流 UI 工具中，樣式是根據(jù)不同屬性類型記錄的。比如一個字體圖層，它的填充、字體、描邊、投影，是可以創(chuàng)建不同的樣式記錄的，各不影響。
而軟件 Sketch 的樣式邏輯，則是根據(jù)圖層類型來記錄的，比如矩形和字體，會記錄該圖層下所有樣式屬性的參數(shù)，且該記錄只能應(yīng)用在同類的圖層上（而 XD 只能記錄色彩和字體樣式…）。
這種做法雖然理解起來容易，但是會導(dǎo)致樣式數(shù)量大幅度增加。尤其是在字體上，變動填充、描邊都要設(shè)置一個新的樣式，這在實際項目中的靈活性是非常差的。
而即時設(shè)計、Figma 則不考慮圖層類型，只關(guān)注屬性類型。類似前端的樣式表中 “類（Class）” 的應(yīng)用，每個類有不同的樣式參數(shù)，只要定義了類的命名和屬性、參數(shù)，那么不同 Div （即圖層）就可以自由組合這些樣式記錄了。
比如色彩 color、陰影 shadow、描邊 board 各定義了1、2、3 三種樣式類，那么就可以像下方案例中自由組合：
<Div Class = “ color2 shadow1 board3 ”> </div>
<Div Class = “ color1 shadow3 board2 ”> </div>
所以，樣式功能可以幫助我們在前期快速搭建基礎(chǔ)視覺規(guī)范內(nèi)容，將規(guī)范中的配色、字體、投影、模糊等參數(shù)整理進(jìn)樣式表中，方便我們后續(xù)的快速調(diào)用和統(tǒng)一修改。
響應(yīng)式是我們前面做過很多期分享的課題了，基于 BootStrap 的完整響應(yīng)式功能確實非常強(qiáng)大，可以通過柵格布局來實現(xiàn)豐富的響應(yīng)方式。
雖然 UI 軟件中也提供了 ”響應(yīng)式“ 這樣的功能，但它可以實現(xiàn)的效果非常有限。用一句話概括就是：
“圖層基于父級畫板 Frame 的匹配邏輯”
比如我們先創(chuàng)建一個畫板，然后再置入相關(guān)的圖層，那么這些圖層就可以啟用響應(yīng)式規(guī)則。包含間距固定、居中對齊、等比縮放這三種響應(yīng)規(guī)則。
間距固定的意思，就是圖層基于父級畫板的某間距數(shù)值是固定的，不管畫布尺寸怎么變動，圖層和畫布的對應(yīng)間距都是保持一致的。比如常規(guī)的某一方向間距固定。
比如在模塊上的標(biāo)題欄，就可以將欄目設(shè)置成一個 Frame，然后標(biāo)題相關(guān)元素左間距對齊，更多圖標(biāo)右間距對齊，之后變更標(biāo)題欄的寬，圖層的對齊關(guān)系就是不變的。
而設(shè)置左右、上下間距同時對齊，則是圖層會隨畫布的尺寸變動修改自身的寬高來滿足。
居中模式則是圖層根據(jù)畫布的大小進(jìn)垂直、水平方向的對齊，忽略間距數(shù)值。
最后一個縮放的設(shè)置，用起來和兩側(cè)間距對齊很接近，也是放大縮小畫布圖層會跟著一起變動，但它響應(yīng)的邏輯是依據(jù)比例，而不是間距。這個設(shè)置在實際項目中很難派上用場。
過往的設(shè)計軟件中，父集尺寸變更，下級元素只能機(jī)械的執(zhí)行縮放效果。而響應(yīng)式設(shè)置就是避免這種僵硬的效果，向真實的網(wǎng)頁適配方式看齊。
同時，這種父集對齊的邏輯是可以進(jìn)行嵌套使用的，比如剛才的標(biāo)題欄，可以將這個畫板再置入到整個卡片畫板之下，并對 “標(biāo)題欄畫板” 創(chuàng)建頂部對齊，左右間距對齊，那么該畫板本身的尺寸不管怎么變動，頭部標(biāo)題欄頂部位置固定，寬度間距和父集統(tǒng)一，標(biāo)題欄下方的元素也會左右對齊。
所以，將一個畫板中的元素響應(yīng)方式設(shè)置好，可以節(jié)省我們很多時間，不用再因為父集元素尺寸修改而一個圖層一個圖層修改下級元素的尺寸和位置。
在后續(xù)生成組件前，我們就要優(yōu)先完成畫板下方的響應(yīng)設(shè)置，這樣就能確保該組件支持靈活的調(diào)節(jié)和布局。比如用上方的卡片，就可以快速搭建一個表盤頁面的基本框架，我們要做的就是拖拽畫板到一個合適的尺寸即可，無需調(diào)節(jié)下級圖層。
但需要注意的事，即時設(shè)計和 Figma 觸發(fā)響應(yīng)式的設(shè)置是元素需要處于畫板 Frame 之下，而不是編組 Group 中， Sketch、XD 因為沒有 Frame 的概念，所以使用編組就可以應(yīng)用響應(yīng)式設(shè)置，這個區(qū)別一定要牢記。 同時，響應(yīng)式雖然可以完成很多高效的適配，但是它的局限性是無法打破的，例如無法實現(xiàn) 3 列以上的卡片列表等間距放大，或者隨寬度增加生成新列下方卡片補(bǔ)位。
自動布局 Autolayout 作為一個自動排版功能，使用場景包含兩類，父子級響應(yīng)和依序排列。它們有各自的生成條件。
首先需要一個矩形圖層作為背景，并將其它下級圖層置入到矩形背景中去，全選后點擊 “自動布局“ 按鈕即可生成父子級響應(yīng)。如果圖層沒有完全置入矩形中或沒有相交，那么就會生成一個依序排列的自動布局出來。
創(chuàng)建自動布局會生成一個新的 “特殊編組”，用來收納下級圖層，它在圖層列表中會有新的圖標(biāo)。
父子級響應(yīng)布局中，背景的矩形圖層會被自動移除，樣式被繼承到自動布局的編組上，針對該編組層的屬性設(shè)置，就等同于原先的背景矩形設(shè)置（和畫板 Frame 圖層邏輯一樣）。
這類布局最常應(yīng)用于按鈕控件上，可以讓按鈕的寬度隨文本寬度變化。
但光靠創(chuàng)建這個效果顯然是無法完整解釋自動布局的，我們就必須從前端的邏輯，來理解這種包含父子層級的元素如何實現(xiàn)自動布局。
首先就是前端環(huán)境中，很多控件、組件本身的尺寸是無法直接寫死的，它們是隨內(nèi)容自動調(diào)節(jié)的。而自動布局右側(cè)的設(shè)置面板中的田字格一欄，旁邊會有寬度和高度設(shè)置，默認(rèn)都是 “自動 Auto”，這就是說它們會隨內(nèi)容寬高進(jìn)行響應(yīng)。
比如上方的按鈕，它實現(xiàn)的邏輯就是：
按鈕寬 = 元素內(nèi)容寬 + 左右間距
按鈕高 = 元素內(nèi)容高 + 上下間距
這種情況是父層級基于子層級的響應(yīng)，應(yīng)用于無法確定父級圖形尺寸的場景，如按鈕、標(biāo)簽、單元格、瀑布卡片等。
但前端中的不確定性并不是只有這一種，還可以反過來，子圖層大小不確定，需要它們?nèi)ロ憫?yīng)父級圖層的尺寸變更。
比如一些文本卡片，會應(yīng)用在不同的頁面中，且根據(jù)應(yīng)用的場景會有寬高的調(diào)節(jié)，所以需要下級的文本區(qū)域可以跟隨上級尺寸響應(yīng)。
我們就需要把父級布局設(shè)置成 “固定寬/高”。還要選中子圖層，在它的自動布局選項中選擇 “自適應(yīng)”，來滿足這個相反的需求。
如果子圖層沒有設(shè)置自適應(yīng)，那么它就不會直接隨著父級圖層變更自己的尺寸。但還是有針對子元素的響應(yīng)設(shè)置 —— 對齊模式。
在父級布局設(shè)置中，有一個網(wǎng)點模塊，可以設(shè)置下級圖層的對齊模式。當(dāng)下級圖層不處于自適應(yīng)模式時，則對齊可以修改下級元素的對齊方向，即前面響應(yīng)式設(shè)置中的 “間距固定”。
前面我們演示的案例都只有一個子圖層，如果出現(xiàn)多個子圖層的話，自動布局也可以幫我們進(jìn)行調(diào)節(jié)，除對齊外還包含子圖層排列方式、分布方式，而這就是依序排列的布局模式。
排列方式就是多個子圖層橫排還是豎排的設(shè)置。
分布方式，則是這些子圖層布局的位置怎么定，默認(rèn)包含固定間距和自適應(yīng)兩種。
固定間距即子元素排列的間距保持一致，在右側(cè)的輸入框中可以設(shè)置間距數(shù)值，也可以結(jié)合對齊模式來設(shè)置整體的對齊方向。
而自適應(yīng)，則是在父級區(qū)域內(nèi)進(jìn)行等分，這個等分的邏輯比較特別，需要左右各有一個子圖層靠到頭，新增的圖層在這個基礎(chǔ)上進(jìn)行 “等間距分布”。
依序排列的優(yōu)勢，除了把現(xiàn)有的子圖層快速布局以外，還可以用拖拽、鍵盤調(diào)整元素順序。或者從外部拖動某個圖層到該區(qū)域中，就可以插入序列，成為下級圖層之一。
前面兩種布局模式，可以解決各種 UI 設(shè)計中的細(xì)節(jié)設(shè)置問題，理解起來也并不難，只要自己去操作一下就能學(xué)會。而真正讓人頭疼的，是自動布局可以相互嵌套，并混合這兩種模式，在復(fù)雜的頁面設(shè)計場景和組件模塊中靈活應(yīng)用。
下面我們通過一個模態(tài)對話框 Modal Dialog 案例來進(jìn)行說明。這個對話框會包含3種不同的寬度規(guī)格，且對話內(nèi)容不確定，可能會字?jǐn)?shù)很多包含很多行的高度。
想要用自動布局實現(xiàn)一個滿足需求的對話框，我的建議是先學(xué)會拆分里面的下級模塊，通過完成下級模塊的設(shè)置后再進(jìn)行最終的合并調(diào)節(jié)。
在這個對話框中， 包含三個模塊，頂部標(biāo)題欄、中間內(nèi)容區(qū)域，底部操作欄。
首先從頂部標(biāo)題欄開始，我們隨意創(chuàng)建個 280px * 44px 的矩形，然后再置入標(biāo)題和圖標(biāo)到矩形中。之后全選它們創(chuàng)建成自動布局，然后設(shè)置父層級內(nèi)間距，且改成寬度固定、分布自適應(yīng)，就可以獲得一個可以隨意修改寬度的標(biāo)題欄了。
然后就是內(nèi)容區(qū)域，本質(zhì)上就是一個文本區(qū)域，所以我們拖拽一個文本區(qū)域出來，設(shè)置好對應(yīng)的參數(shù)和填充一點文本即可。
而底部操作欄，則在一開始做好兩個按鈕（可以使用自動布局做）和背景以后，就可以進(jìn)行合并，只是父級元素上的設(shè)置要改成固定寬度和右對齊，并設(shè)置布局間距（按鈕間距）。
這三個模塊完成以后，我們再選中它們進(jìn)行自動布局合并，把它們設(shè)置成豎排模式，再添加背景色和排列間距，就可以實現(xiàn)出一個正常的對話框效果。
到這一步，如果我們修改對話框整體的寬度，或者輸入多行的文本，都無法達(dá)到預(yù)期的效果，所以還要在這個基礎(chǔ)上進(jìn)一步的調(diào)整。
首先是寬度適應(yīng)，我們要先將最上級的自動布局改成 “固定寬度”，然后將下級圖層都改為 “自適應(yīng)”，這樣我們增加組件的寬，下方布局就會立即響應(yīng)，且推導(dǎo)到更下級的圖層中。
為了滿足文字寬度隨父級響應(yīng)，高度影響父級高度，就要將頂部的自動布局改成 “高度適配”，再將下級的文本改成 “寬度自適應(yīng)”、“自動高度”，然后，我們就可以隨意拖動這個自動布局的寬，和添加任意的文本內(nèi)容了。
完成這個基本的版本以后，我們再根據(jù)項目需要的三個寬度，直接將它復(fù)制成 3 份，每份直接設(shè)置對應(yīng)的寬度出來，就可以作為后續(xù)的 “原始組件” 在項目中進(jìn)行快速引用了。
在這個案例中，我們前后嵌套了若干層的自動布局，每層自動布局的上下級會有各自的響應(yīng)關(guān)系，需要我們逐一進(jìn)行確認(rèn)。并且，細(xì)心的同學(xué)應(yīng)該也發(fā)現(xiàn)，這里面有很多設(shè)置似乎和前面的響應(yīng)式設(shè)置非常類似，那把一些下級布局從一開始就做成響應(yīng)式的編組行不行？
答案是可以的…… 響應(yīng)式設(shè)置和自動布局，本質(zhì)上都是為了節(jié)省我們操作時間而設(shè)計的功能，我們要從實際設(shè)計的對象出發(fā)，選擇合理的功能來實現(xiàn)最終的效果。而不是只能使用自動布局，或者只能使用響應(yīng)式。
也不要因為了解了響應(yīng)式包含了非常強(qiáng)大的自適應(yīng)功能，而認(rèn)為項目中任何組件、頁面，都要全由它們組成。在需要頻繁優(yōu)化頁面內(nèi)容、調(diào)整設(shè)計需求的項目里，過度嵌套的自動布局會讓設(shè)計文件的 “熵” 值無限增加，會產(chǎn)生更多復(fù)雜的、沒有效率的問題。
相信引用過 Ant、TDesign 等組件庫文件進(jìn)行設(shè)計的同學(xué)應(yīng)該都深有體會……
至于怎么用才好，沒有標(biāo)準(zhǔn)的答案，就需要未來大家自己去積累相關(guān)經(jīng)驗了。
有了前面響應(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é)會進(jìn)一步做出說明。
創(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)建一個獨立的頁面 Page 用來存放引用組件，任何新增的引用組件我們都需要將它置入到該頁面中。且不要將引用組件直接置入到畫板中，這樣它就不會生產(chǎn)包含畫板的層級出來。
然后，我們就可以在文件命名中，使用正斜杠 Slash 符號 “/” 作為層級劃分依據(jù)。比如下面的案例，包含相同上級結(jié)構(gòu)的組件會被聚合到一個目錄層級中：
這種命名結(jié)構(gòu)帶來的另一個好處，就是處于同一個目錄層級下的組件，在屬性面板中可以進(jìn)行快速的切換。尤其是一些相近的組件要做替換不用再在樹樁列表中重新找一遍，直接通過下拉菜單替換即可。
使用命名方式來梳理組件列表，完成有邏輯性、清晰的組件目錄，可以極大地提升組件的利用率和效率。但命名必然不是一邊創(chuàng)建組件一邊憑感覺命名的，而是一開始就要在外部完成的，例如通過思維導(dǎo)圖的方式制定出結(jié)構(gòu)大綱，才能保證最終效果符合預(yù)期。
組件的應(yīng)用中，除了不同組件的引用外，過去最讓我們頭痛的就是同一個組件的不同狀態(tài)。比如一個簡單的按鈕，就包含非常多的類型，默認(rèn)、懸浮、按壓、點過、禁用、讀取等等。
為了在項目中可以使用組件的不同狀態(tài)，就需要我們在命名上下功夫，比如：
就是用前面提到的右側(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)和文字加圖標(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)一命名，如：
然后，將這些組件統(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)驗做判斷。
通過前面的功能，就可以完成組件庫的對應(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é)操作，就需要大家自己去實踐了。
藍(lán)藍(lán)設(shè)計( www.devb.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍(lán)藍(lán)設(shè)計的小編 http://www.devb.cn