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

今天來(lái)分享關(guān)于規(guī)范應(yīng)用中軟件功能的具體介紹，發(fā)現(xiàn)用圖文的形式解釋軟件功能實(shí)在是太難做了。這次算是爆肝來(lái)解釋自動(dòng)布局 Autolayout 的使用，幫助還不理解，或者還在用 Sketch、XD 的同學(xué)搞清楚它到底是什么。

2.2 樣式功能

在軟件中，記錄樣式就是在對(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)一修改。

2.3 響應(yī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ǔ)位。

2.4 自動(dòng)布局功能

自動(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)。

2.4.1 父子級(jí)響應(yīng)布局

父子級(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è)置中的 “間距固定”。

2.4.2 依序排列布局

前面我們演示的案例都只有一個(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í)圖層之一。

2.4.3 混合布局模式

前面兩種布局模式，可以解決各種 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)了。

結(jié)尾

今天的分享就寫(xiě)到這里，后面我會(huì)將相關(guān)內(nèi)容更新到B端原子核課程中，大家記得去看～