前言

在組件系列的上一篇文章中，通過對業務需求進行拆解、組合，我們向大家介紹了可復用組件的創建和細分管理。這一過程中，如果我們僅僅只是將拆解的元素進行組合、調參，而不考慮組件內容布局和響應策略的話，還遠遠無法實現組件的復用需求。所以本篇我們會在前文的基礎上，結合案例來介紹如何實現組件的動態布局。

上篇回顧：

一、概念定義

要了解組件的動態布局，我們通常從自適應和動態響應兩個概念入手。

組件的自適應，簡單來說就是基于設定的規則，使組件適應內容的變化。我們可以理解為組件主動去適應“內部環境”的變化。這里的內部環境可以是文本、圖標或者其他元素。在 Sketch 中，實現自適應所對應的功能叫做智能布局 (Smart Layout)。

組件的動態響應，和我們常接觸的頁面響應式在本質上是一樣的，即在組件或頁面發生變化時，組件內各個元素按照設定的策略布局。我們可以理解為組件被動去響應“外部環境”的變化。外部環境可以是一個編組、或者是另一個組件，也可以是畫板。在 Sketch 中，實現動態響應效果的功能叫做調整尺寸 (Resizing)。

我們分別通過一個簡單的例子來演示自適應和動態響應。

1. 自適應

如下圖我們創建了一個常見的標簽，它由基礎形狀和文字組成。該標簽通常會應用到不同的場景中并更換文本內容。在沒有為其設定規則之前，當文本超出或減少時，標簽的寬度無法跟隨編輯的內容而動態變化。

而當我們給這個標簽設定一個規則，那么它就可以根據文本內容進行動態調整。

2. 動態響應

下面是一個常見的單元格組件，它由圖標、文字和分割線組成。通常我們將其應用在不同的場景或頁面尺寸中。如果我們不對其設置任何響應策略，那在進行拉伸縮放時就會這樣：

圖標變形、文字不對齊等等，在頁面上的呈現效果很差。但是如果我們對組件設置一個簡單的響應策略，就會變得自然：

要實現組件的動態布局，我們便需要先了解哪些因素會影響最終組件的呈現效果。

二、自適應規則

通常組件的自適應由三個要素來實現，即內間距、字符屬性、布局方向。

1. 內間距

內間距即當前元素距離容器或其他元素的距離，前端一般稱之為“Padding”。它通常是一個固定的值，我們在創建組件時確定內間距，無論內容長度怎么變，內間距都始終不變。

2. 對齊方式

字符屬性決定了組件的內容呈現方式，包括字體大小、顏色、字形、字符寬度和對齊等的特性。其中對齊方式是影響組件自適應最重要的因素之一。在 Sketch 中的對齊方式包含了自動寬度(Auto Width)、自動高度(Auto Height)和固定尺寸(Fixed Width)三種屬性。

通常新建的字符層默認就是自動寬度，即文本始終保持一行高度，寬度會自動跟隨內容，在一行內全部顯示。

自動高度，就是字符層寬度得到約束，高度會自動跟隨文本內容變化，超出一行后自動折行并全部顯示。

固定尺寸，就是字符層的寬度和高度都得到約束，它的尺寸是不能跟隨文本內容變化的。你可以把它理解成一個文本的顯示區域，任何超出區域的部分都將被隱藏。

我們通過以下示例，更直觀感受三者的區別：

3. 布局方向

布局方向決定了組件跟隨內容變化的方向。在創建組件時，命名輸入框下方有水平和垂直兩個方向的多種布局的選項，當我們選擇任意一種方向的布局后，即可賦予組件相應的布局效果。（最新的 Sketch96 版本中，也支持對編組進行智能布局，這對于日常簡單的設計需求來說變得更加方便了。）

以水平方向為例：

從左往右布局，即組件尺寸跟隨內容從左往右變化。

水平居中布局，即組件尺寸跟隨內容從中間向兩邊變化。

從右往左布局，即組件尺寸跟隨內容從右向左變化。

需要注意的是，布局方向和字符層的對齊方式是緊密聯系的。在同一組件中，我們需要確保智能布局和字符層的對齊方向保持同步，即自動寬度屬性的內容使用水平方向布局，而自動高度屬性的內容使用垂直方向布局。如果二者不一致，可能會與我們所希望的效果相差甚遠，如下圖：

三、響應策略

要理解組件中動態響應的原理，我們需要先了解組件的響應策略。在 Sketch 中設置響應策略的區域叫做“調整尺寸”，這個區域內包含了靠邊固定、固定尺寸和預覽。

1. 靠邊固定

靠邊固定即固定元素與容器的內間距，無論外部如何拉伸縮放，其已設置的（某一邊）內間距始終保持不變。

還是以常規的單元格組件為例，未靠邊固定時，拉伸會將組件內的間距破壞。

而最理想的呈現效果是，我們希望單元格能固定左右間距，使標題和內容區域跟隨頁面拉伸時，保持在左右兩側。依照這樣的思路，我們可以進行以下操作：

這樣，便可以得到我們想要的效果了。

2. 固定尺寸

固定尺寸即固定元素自身的尺寸大小，不跟隨外部環境的變化而發生改變；

以跳轉單元格組件為例，若不固定圖標（跳轉箭頭）的尺寸，那么在拉伸或收縮時，圖標會產生變形：

故我們在只要將圖標的尺寸進行固定并保持在右側，就可以得到我們想要的效果了。

3. 預覽

可以通過調整尺寸區域的最右側窗口，可以實時查看當前元素已設置的響應策略，以幫助我們判斷是不是想要的效果，可以通過鼠標 hover 重復預覽。

需要注意的是，無論是靠邊固定還是固定尺寸均需要選中元素通過參照物來實現尺寸和位置關系的對照。所以調整尺寸的設定面板，只有當元素存在父級關系時才會出現，父級可以是編組、組件和畫板等。如果元素沒有任何父級關系，僅僅存在在一個頁面中，就不會出現調整尺寸的設定面板。

四、實戰演示

回歸到日常設計的工作，在我們實際創建組件的過程中，自適應規則和響應策略往往是相互搭配、多次使用，這就對設計師的組件思維提出了很高的要求。接下來我們還是以電商 PLP 頁面(商品列表)中常見的商品組件為例，來幫助各位更快的理解組件的動態布局。

我們先解析商品組件的組成部分。以圖中的組件為例，它是由背景層、商品圖片、內容區域組成，其中內容區域內包含了商品名稱、標簽、價格字段。為便于理解我們將每個區域標記出來：

1. 商品圖片

為了保證商品圖片在響應的過程中不變形，通常有兩種處理方式：第一種是固定比例，即無論組件如何拉伸，隨組件動態響應的圖片比例保持不變。第二種是固定尺寸，且圖片始終保持區域居中的位置。兩種方式雖然都能使圖片不變形，但實現原理完全不一樣，此處不展開細講。今天我們先來演示第一種方案，即固定比例。

要實現圖片在拉伸的過程中固定比例：

1. 我們需要新建一個容器（需要和背景層的寬度保持一致）；
2. 在確定圖片與容器的間距后，將圖片與容器編組，同時設置圖片上下左右在容器中全部靠邊固定；
3. 將編組放置在背景層上半部分，并且鎖定組件的寬高比例。

我們便可以得到一個無論怎么拉伸，圖片比例都保持固定的組件，看一下效果：

2. 內容區域

內容區域我們先從智能布局入手。上文提到，無論什么組件，都需要通過確定內間距、（字符層）對齊方式、布局方向這三個要素來實現其自適應。

內間距：確定內容區域內個字段間的內間距；

對齊方式：商品名稱允許多行展示，所以我們設置其字符層的對齊方式為自動高度屬性，讓內容在固定寬度的區域中折行處理；而標簽文本和價格文本一般單行展示，故我們將其文本設定為自動寬度屬性。

布局方向：同樣因為商品名稱允許多行展示的緣故，所以商品名稱的布局方向需要設置為從上往下布局。而標簽、價格元素，其自動寬度的對齊方式決定了內容水平方向的變化，我們可以對標簽和價格行均設置為從左往右布局。

需要注意的是，當商品名稱長度發生變化時，整個內容區域的高度會隨之發生變化，所以我們還需要額外將整個內容區域的布局方向設置為從上往下布局。

完成設置后，我們看一下內容區域自適應的效果：

緊接著我們思考響應策略。在這一步，我們需要確定內容區域中所有元素的嵌套關系、位置關系以及尺寸的響應規則。

首先是內容區域整體，我們需要保持區域整體的左、下、右側靠邊固定。確保組件拉伸時，內容區域始終保持左、下、右側固定間距。

其次我們再對內容區域內的各個元素單獨設置彈性布局：

1. 商品名稱：保持上、左、右三側靠邊固定，高度固定。當內容區域響應組件變化時，其文本顯示的顯示范圍也會隨之動態響應；
2. 標簽、價格：在已經設置了自適應規則的前提下，保持上、左兩側靠邊固定，寬高固定。

通過圖例，我們再復盤一下內容區域內所有的響應策略：

最后，我們將背景層、商品圖片、內容區域組合創建為一個組件，組件整體的布局方向設置為垂直方向-從下往下布局。通過預覽最終的效果，可以看到無論是自適應還是動態響應，組件都可以輕松 hold 住。

下期預告

在本篇文章里，我們通過實例向各位介紹和演示了組件動態布局的相關概念、規則策略和創建方法。雖然大家使用的設計工具可能不一樣，但解決思路都大同小異，希望可以幫到各位。在一些設計場景中，也許我們的方法不是最優解，如果有更好更合適的方法，也歡迎各位在評論區留言指正。

到目前為止，我們僅僅入門了一些常用的基礎組件。但在實際工作中，一些復用性很高的組件，往往需要運用到多層嵌套，來滿足復雜場景下的響應效果。在這個系列的下一篇文章里，我們將跟大家聊聊組件內的嵌套關系以及搭建技巧。

部分內容參考來源：Sketch 官方文檔

歡迎關注作者微信公眾號：「Gtech UED」