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