組件庫設(shè)計指南（三）：快速上手組件動態(tài)布局

前言

在組件系列的上一篇文章中，通過對業(yè)務(wù)需求進(jìn)行拆解、組合，我們向大家介紹了可復(fù)用組件的創(chuàng)建和細(xì)分管理。這一過程中，如果我們僅僅只是將拆解的元素進(jìn)行組合、調(diào)參，而不考慮組件內(nèi)容布局和響應(yīng)策略的話，還遠(yuǎn)遠(yuǎn)無法實(shí)現(xiàn)組件的復(fù)用需求。所以本篇我們會在前文的基礎(chǔ)上，結(jié)合案例來介紹如何實(shí)現(xiàn)組件的動態(tài)布局。

上篇回顧：

一、概念定義

要了解組件的動態(tài)布局，我們通常從自適應(yīng)和動態(tài)響應(yīng)兩個概念入手。

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

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

我們分別通過一個簡單的例子來演示自適應(yīng)和動態(tài)響應(yīng)。

1. 自適應(yīng)

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

而當(dāng)我們給這個標(biāo)簽設(shè)定一個規(guī)則，那么它就可以根據(jù)文本內(nèi)容進(jìn)行動態(tài)調(diào)整。

2. 動態(tài)響應(yīng)

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

圖標(biāo)變形、文字不對齊等等，在頁面上的呈現(xiàn)效果很差。但是如果我們對組件設(shè)置一個簡單的響應(yīng)策略，就會變得自然：

要實(shí)現(xiàn)組件的動態(tài)布局，我們便需要先了解哪些因素會影響最終組件的呈現(xiàn)效果。

二、自適應(yīng)規(guī)則

通常組件的自適應(yīng)由三個要素來實(shí)現(xiàn)，即內(nèi)間距、字符屬性、布局方向。

1. 內(nèi)間距

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

2. 對齊方式

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

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

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

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

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

3. 布局方向

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

以水平方向?yàn)槔?/p>

從左往右布局，即組件尺寸跟隨內(nèi)容從左往右變化。

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

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

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

三、響應(yīng)策略

要理解組件中動態(tài)響應(yīng)的原理，我們需要先了解組件的響應(yīng)策略。在 Sketch 中設(shè)置響應(yīng)策略的區(qū)域叫做“調(diào)整尺寸”，這個區(qū)域內(nèi)包含了靠邊固定、固定尺寸和預(yù)覽。

1. 靠邊固定

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

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

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

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

2. 固定尺寸

固定尺寸即固定元素自身的尺寸大小，不跟隨外部環(huán)境的變化而發(fā)生改變；

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

故我們在只要將圖標(biāo)的尺寸進(jìn)行固定并保持在右側(cè)，就可以得到我們想要的效果了。

3. 預(yù)覽

可以通過調(diào)整尺寸區(qū)域的最右側(cè)窗口，可以實(shí)時查看當(dāng)前元素已設(shè)置的響應(yīng)策略，以幫助我們判斷是不是想要的效果，可以通過鼠標(biāo) hover 重復(fù)預(yù)覽。

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

四、實(shí)戰(zhàn)演示

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

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

1. 商品圖片

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

要實(shí)現(xiàn)圖片在拉伸的過程中固定比例：

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

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

2. 內(nèi)容區(qū)域

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

內(nèi)間距：確定內(nèi)容區(qū)域內(nèi)個字段間的內(nèi)間距；

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

布局方向：同樣因?yàn)樯唐访Q允許多行展示的緣故，所以商品名稱的布局方向需要設(shè)置為從上往下布局。而標(biāo)簽、價格元素，其自動寬度的對齊方式?jīng)Q定了內(nèi)容水平方向的變化，我們可以對標(biāo)簽和價格行均設(shè)置為從左往右布局。

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

完成設(shè)置后，我們看一下內(nèi)容區(qū)域自適應(yīng)的效果：

緊接著我們思考響應(yīng)策略。在這一步，我們需要確定內(nèi)容區(qū)域中所有元素的嵌套關(guān)系、位置關(guān)系以及尺寸的響應(yīng)規(guī)則。

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

其次我們再對內(nèi)容區(qū)域內(nèi)的各個元素單獨(dú)設(shè)置彈性布局：

1. 商品名稱：保持上、左、右三側(cè)靠邊固定，高度固定。當(dāng)內(nèi)容區(qū)域響應(yīng)組件變化時，其文本顯示的顯示范圍也會隨之動態(tài)響應(yīng)；
2. 標(biāo)簽、價格：在已經(jīng)設(shè)置了自適應(yīng)規(guī)則的前提下，保持上、左兩側(cè)靠邊固定，寬高固定。

通過圖例，我們再復(fù)盤一下內(nèi)容區(qū)域內(nèi)所有的響應(yīng)策略：

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

下期預(yù)告

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

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

部分內(nèi)容參考來源：Sketch 官方文檔

歡迎關(guān)注作者微信公眾號：「Gtech UED」