今天來分享關于規范應用中軟件功能的具體介紹，發現用圖文的形式解釋軟件功能實在是太難做了。這次算是爆肝來解釋自動布局 Autolayout 的使用，幫助還不理解，或者還在用 Sketch、XD 的同學搞清楚它到底是什么。

上期回顧：

一、樣式功能

在軟件中，記錄樣式就是在對應的屬性面板上 “創建” 并 “命名”，就將對應設置數據轉化成一個指定名稱的記錄，方便我們記憶和調用。

比如，填充色中使用了兩種色彩相近的色彩和不同透明度，我們就可以使用中文命名來區分，其中 2B6DCF 80% 叫 輔助色，2B93CF 90% 叫 主色。

創建完成的填充色記錄，就會在對應的屬性樣式列表中出現，之后就可以在對應圖層的屬性中關聯該記錄了。

之后，所有關聯到該記錄的圖層屬性，都可以快速應用該記錄內的參數。如果我們在樣式的列表中修改該記錄的數值，那么所有關聯到該記錄的圖層就會一起被修改。

一定要牢記，目前的主流 UI 工具中，樣式是根據不同屬性類型記錄的。比如一個字體圖層，它的填充、字體、描邊、投影，是可以創建不同的樣式記錄的，各不影響。

而軟件 Sketch 的樣式邏輯，則是根據圖層類型來記錄的，比如矩形和字體，會記錄該圖層下所有樣式屬性的參數，且該記錄只能應用在同類的圖層上（而 XD 只能記錄色彩和字體樣式…）。

這種做法雖然理解起來容易，但是會導致樣式數量大幅度增加。尤其是在字體上，變動填充、描邊都要設置一個新的樣式，這在實際項目中的靈活性是非常差的。

而即時設計、Figma 則不考慮圖層類型，只關注屬性類型。類似前端的樣式表中 “類（Class）” 的應用，每個類有不同的樣式參數，只要定義了類的命名和屬性、參數，那么不同 Div （即圖層）就可以自由組合這些樣式記錄了。

比如色彩 color、陰影 shadow、描邊 board 各定義了 1、2、3 三種樣式類，那么就可以像下方案例中自由組合：

所以，樣式功能可以幫助我們在前期快速搭建基礎視覺規范內容，將規范中的配色、字體、投影、模糊等參數整理進樣式表中，方便我們后續的快速調用和統一修改。

三、響應式功能

響應式是我們前面做過很多期分享的課題了，基于 BootStrap 的完整響應式功能確實非常強大，可以通過柵格布局來實現豐富的響應方式。

雖然 UI 軟件中也提供了 ”響應式“ 這樣的功能，但它可以實現的效果非常有限。用一句話概括就是：

“圖層基于父級畫板 Frame 的匹配邏輯”

比如我們先創建一個畫板，然后再置入相關的圖層，那么這些圖層就可以啟用響應式規則。包含間距固定、居中對齊、等比縮放這三種響應規則。

間距固定的意思，就是圖層基于父級畫板的某間距數值是固定的，不管畫布尺寸怎么變動，圖層和畫布的對應間距都是保持一致的。比如常規的某一方向間距固定。

比如在模塊上的標題欄，就可以將欄目設置成一個 Frame，然后標題相關元素左間距對齊，更多圖標右間距對齊，之后變更標題欄的寬，圖層的對齊關系就是不變的。

而設置左右、上下間距同時對齊，則是圖層會隨畫布的尺寸變動修改自身的寬高來滿足。

居中模式則是圖層根據畫布的大小進垂直、水平方向的對齊，忽略間距數值。

最后一個縮放的設置，用起來和兩側間距對齊很接近，也是放大縮小畫布圖層會跟著一起變動，但它響應的邏輯是依據比例，而不是間距。這個設置在實際項目中很難派上用場。

過往的設計軟件中，父集尺寸變更，下級元素只能機械的執行縮放效果。而響應式設置就是避免這種僵硬的效果，向真實的網頁適配方式看齊。

同時，這種父集對齊的邏輯是可以進行嵌套使用的，比如剛才的標題欄，可以將這個畫板再置入到整個卡片畫板之下，并對 “標題欄畫板” 創建頂部對齊，左右間距對齊，那么該畫板本身的尺寸不管怎么變動，頭部標題欄頂部位置固定，寬度間距和父集統一，標題欄下方的元素也會左右對齊。

所以，將一個畫板中的元素響應方式設置好，可以節省我們很多時間，不用再因為父集元素尺寸修改而一個圖層一個圖層修改下級元素的尺寸和位置。

在后續生成組件前，我們就要優先完成畫板下方的響應設置，這樣就能確保該組件支持靈活的調節和布局。比如用上方的卡片，就可以快速搭建一個表盤頁面的基本框架，我們要做的就是拖拽畫板到一個合適的尺寸即可，無需調節下級圖層。

但需要注意的事，即時設計和 Figma 觸發響應式的設置是元素需要處于畫板 Frame 之下，而不是編組 Group 中，Sketch、XD 因為沒有 Frame 的概念，所以使用編組就可以應用響應式設置，這個區別一定要牢記。

同時，響應式雖然可以完成很多高效的適配，但是它的局限性是無法打破的，例如無法實現 3 列以上的卡片列表等間距放大，或者隨寬度增加生成新列下方卡片補位。

四、自動布局功能

自動布局 Autolayout 作為一個自動排版功能，使用場景包含兩類，父子級響應和依序排列。它們有各自的生成條件。

首先需要一個矩形圖層作為背景，并將其它下級圖層置入到矩形背景中去，全選后點擊 “自動布局“ 按鈕即可生成父子級響應。如果圖層沒有完全置入矩形中或沒有相交，那么就會生成一個依序排列的自動布局出來。

創建自動布局會生成一個新的 “特殊編組”，用來收納下級圖層，它在圖層列表中會有新的圖標。

1. 父子級響應布局

父子級響應布局中，背景的矩形圖層會被自動移除，樣式被繼承到自動布局的編組上，針對該編組層的屬性設置，就等同于原先的背景矩形設置（和畫板 Frame 圖層邏輯一樣）。

這類布局最常應用于按鈕控件上，可以讓按鈕的寬度隨文本寬度變化。

但光靠創建這個效果顯然是無法完整解釋自動布局的，我們就必須從前端的邏輯，來理解這種包含父子層級的元素如何實現自動布局。

首先就是前端環境中，很多控件、組件本身的尺寸是無法直接寫死的，它們是隨內容自動調節的。而自動布局右側的設置面板中的田字格一欄，旁邊會有寬度和高度設置，默認都是 “自動 Auto”，這就是說它們會隨內容寬高進行響應。

比如上方的按鈕，它實現的邏輯就是：

1. 按鈕寬 = 元素內容寬 + 左右間距
2. 按鈕高 = 元素內容高 + 上下間距

這種情況是父層級基于子層級的響應，應用于無法確定父級圖形尺寸的場景，如按鈕、標簽、單元格、瀑布卡片等。

但前端中的不確定性并不是只有這一種，還可以反過來，子圖層大小不確定，需要它們去響應父級圖層的尺寸變更。

比如一些文本卡片，會應用在不同的頁面中，且根據應用的場景會有寬高的調節，所以需要下級的文本區域可以跟隨上級尺寸響應。

我們就需要把父級布局設置成 “固定寬/高”。還要選中子圖層，在它的自動布局選項中選擇 “自適應”，來滿足這個相反的需求。

如果子圖層沒有設置自適應，那么它就不會直接隨著父級圖層變更自己的尺寸。但還是有針對子元素的響應設置 —— 對齊模式。

在父級布局設置中，有一個網點模塊，可以設置下級圖層的對齊模式。當下級圖層不處于自適應模式時，則對齊可以修改下級元素的對齊方向，即前面響應式設置中的 “間距固定”。

2. 依序排列布局

前面我們演示的案例都只有一個子圖層，如果出現多個子圖層的話，自動布局也可以幫我們進行調節，除對齊外還包含子圖層排列方式、分布方式，而這就是依序排列的布局模式。

排列方式就是多個子圖層橫排還是豎排的設置。

分布方式，則是這些子圖層布局的位置怎么定，默認包含固定間距和自適應兩種。

固定間距即子元素排列的間距保持一致，在右側的輸入框中可以設置間距數值，也可以結合對齊模式來設置整體的對齊方向。

而自適應，則是在父級區域內進行等分，這個等分的邏輯比較特別，需要左右各有一個子圖層靠到頭，新增的圖層在這個基礎上進行 “等間距分布”。

依序排列的優勢，除了把現有的子圖層快速布局以外，還可以用拖拽、鍵盤調整元素順序。或者從外部拖動某個圖層到該區域中，就可以插入序列，成為下級圖層之一。

3. 混合布局模式

前面兩種布局模式，可以解決各種 UI 設計中的細節設置問題，理解起來也并不難，只要自己去操作一下就能學會。而真正讓人頭疼的，是自動布局可以相互嵌套，并混合這兩種模式，在復雜的頁面設計場景和組件模塊中靈活應用。

下面我們通過一個模態對話框 Modal Dialog 案例來進行說明。這個對話框會包含 3 種不同的寬度規格，且對話內容不確定，可能會字數很多包含很多行的高度。

想要用自動布局實現一個滿足需求的對話框，我的建議是先學會拆分里面的下級模塊，通過完成下級模塊的設置后再進行最終的合并調節。在這個對話框中，

包含三個模塊，頂部標題欄、中間內容區域，底部操作欄。

首先從頂部標題欄開始，我們隨意創建個 280px * 44px 的矩形，然后再置入標題和圖標到矩形中。之后全選它們創建成自動布局，然后設置父層級內間距，且改成寬度固定、分布自適應，就可以獲得一個可以隨意修改寬度的標題欄了。

然后就是內容區域，本質上就是一個文本區域，所以我們拖拽一個文本區域出來，設置好對應的參數和填充一點文本即可。

而底部操作欄，則在一開始做好兩個按鈕（可以使用自動布局做）和背景以后，就可以進行合并，只是父級元素上的設置要改成固定寬度和右對齊，并設置布局間距（按鈕間距）。

這三個模塊完成以后，我們再選中它們進行自動布局合并，把它們設置成豎排模式，再添加背景色和排列間距，就可以實現出一個正常的對話框效果。

到這一步，如果我們修改對話框整體的寬度，或者輸入多行的文本，都無法達到預期的效果，所以還要在這個基礎上進一步的調整。

首先是寬度適應，我們要先將最上級的自動布局改成 “固定寬度”，然后將下級圖層都改為 “自適應”，這樣我們增加組件的寬，下方布局就會立即響應，且推導到更下級的圖層中。

為了滿足文字寬度隨父級響應，高度影響父級高度，就要將頂部的自動布局改成 “高度適配”，再將下級的文本改成 “寬度自適應”、“自動高度”，然后，我們就可以隨意拖動這個自動布局的寬，和添加任意的文本內容了。

完成這個基本的版本以后，我們再根據項目需要的三個寬度，直接將它復制成 3 份，每份直接設置對應的寬度出來，就可以作為后續的 “原始組件” 在項目中進行快速引用了。

在這個案例中，我們前后嵌套了若干層的自動布局，每層自動布局的上下級會有各自的響應關系，需要我們逐一進行確認。并且，細心的同學應該也發現，這里面有很多設置似乎和前面的響應式設置非常類似，那把一些下級布局從一開始就做成響應式的編組行不行？

答案是可以的……

響應式設置和自動布局，本質上都是為了節省我們操作時間而設計的功能，我們要從實際設計的對象出發，選擇合理的功能來實現最終的效果。而不是只能使用自動布局，或者只能使用響應式。

也不要因為了解了響應式包含了非常強大的自適應功能，而認為項目中任何組件、頁面，都要全由它們組成。在需要頻繁優化頁面內容、調整設計需求的項目里，過度嵌套的自動布局會讓設計文件的 “熵” 值無限增加，會產生更多復雜的、沒有效率的問題。

相信引用過 Ant、TDesign 等組件庫文件進行設計的同學應該都深有體會……

至于怎么用才好，沒有標準的答案，就需要未來大家自己去積累相關經驗了。

今天的分享就寫到這里。

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