動(dòng)態(tài)布局

首先來解釋一下什么是動(dòng)態(tài)布局：

所謂動(dòng)態(tài)布局就是可以通過修改內(nèi)容實(shí)現(xiàn)關(guān)聯(lián)內(nèi)容自動(dòng)改變的布局方式。

在 sketch 45 之后的版本，我們可以通過 resizing 對(duì)元素的上下左右邊距進(jìn)行固定，來實(shí)現(xiàn)頁(yè)面布局的動(dòng)態(tài)響應(yīng)。這種響應(yīng)是被動(dòng)的，需要我們拖拽著它，它才能給出反饋。雖然不是多么的聰明，但是這種被動(dòng)的方式解放了很大一部分生產(chǎn)力，足以讓你鄙視一下 Photoshop 的 UI 設(shè)計(jì)了。

有了被動(dòng)響應(yīng)，自然也想要有主動(dòng)響應(yīng)，通過改變?cè)貎?nèi)容去改變布局。之前在 sketch 里面一直有一個(gè)功能：文字尾部跟隨（間距在 20px 以內(nèi)，后面可跟文字或圖標(biāo)）。如圖：

功能雖單一，但在工作效率上帶來了極大的提升。當(dāng)然我們想要的更多

比如：

一個(gè)標(biāo)簽，我希望可以跟隨文字長(zhǎng)度而自動(dòng)適應(yīng)。

△ 不是這樣

△ 而是這樣

在 Sketch 58 之前，我們可以通過 kitchen 或者 Anima 等外部插件實(shí)現(xiàn)這類效果。但是這類插件在創(chuàng)建為組件以后會(huì)出現(xiàn)一些莫名的抽搐，可用性不高。在 Sketch 58 之后 Sketch 自身就攜帶了這些技能，可以實(shí)現(xiàn)一些動(dòng)態(tài)布局，不過目前來看它還是存在一定的局限性，它的動(dòng)態(tài)布局是基于 symbol 的。但我們不會(huì)為了布局而刻意去做 symbol，這會(huì)加重組件庫(kù)的維護(hù)負(fù)擔(dān)，在整體的收益率及效率上不見得能帶來多大的提升。組件庫(kù)應(yīng)盡可能的保證干凈、靈活以及它的實(shí)用性。

我們?nèi)￠L(zhǎng)補(bǔ)短。所以，這里要講的不是某一個(gè)插件或某一個(gè)功能，而是結(jié)合插件與自身的布局來達(dá)到足夠的穩(wěn)定與，解放雙手，釋放大腦。

工具介紹

這里主要通過介紹 Kitchen、Anima 和 sketch 的布局部分，整合它們各自的優(yōu)勢(shì)來做一系列的動(dòng)態(tài)布局。

 

1. 我們先來建立一個(gè)簡(jiǎn)單的動(dòng)態(tài)按鈕

對(duì)比一下各個(gè)插件之間的差異

Kitchen

輸入按鈕的上下左右邊距，讓文字與按鈕背景的邊距固定。改變文字寬度，按鈕寬度隨之改變。

Anima Padding

Anima 不需要手動(dòng)輸入邊距，插件會(huì)自動(dòng)保留文字周圍的邊距并生成 padding。

Sketch 布局

sketch 也不需要手動(dòng)輸入邊距，但是需要將想要實(shí)現(xiàn)動(dòng)態(tài)布局的內(nèi)容創(chuàng)建為組件，在創(chuàng)建組件的過程中可以對(duì)它的動(dòng)態(tài)方向進(jìn)行限定。這里一共七種模式（無、水平「從左往右、居中、從右往左」、垂直「從上往下、居中、從下往上」）。文字的對(duì)齊方式最好和布局的動(dòng)態(tài)方向保持一致。

可以看出 Anima 和 Sketch 會(huì)更一點(diǎn)

我們可以讓按鈕再可以復(fù)雜一點(diǎn)。

比如加個(gè) icon：

或者換個(gè)行：

在一個(gè)維度上的動(dòng)態(tài)改變，大家應(yīng)用得都挺好。但 Sketch 組件在文字換行時(shí)并沒有在縱向上去改變高度。

解釋一下：

• Sketch 這里設(shè)置的是水平方向的「從左到右」，只能自動(dòng)處理一個(gè)維度。
• Kitchen 和 Anima 都可以設(shè)置 4 個(gè)方向的 padding，從而實(shí)現(xiàn)兩個(gè)維度的動(dòng)態(tài)改變。

2. 組件化

按鈕、標(biāo)簽等這類元素，我們通常都會(huì)創(chuàng)建為組件，方便我們管理及調(diào)用。接下來我們把剛才做好的動(dòng)態(tài)按鈕組件化，再來看看它們是否能實(shí)現(xiàn)動(dòng)態(tài)響應(yīng)。

Kitchen

Anima

Sketch

在組件化之后，Anima 出現(xiàn)了未知錯(cuò)誤，按鈕并沒有任何變化。在實(shí)際使用中，sketch58 之前的版本可以正常變化。58 及其之后的版本暫時(shí)會(huì)出現(xiàn)問題，把 Anima 更新到 3.2.2 之后，官方更新說修改了 symbol 之后的 padding bug，但是在實(shí)際使用中并沒有帶來改善。

所以在這里不建議用任何第三方插件去做 symbol，即使 Kitchen 在這里沒有出現(xiàn)什么大的問題，但在實(shí)際操作中的響應(yīng)速度及穩(wěn)定性都比較差。此外 sketch 的更新速度很快，大多插件很難即時(shí)跟上它的更新速度，從而導(dǎo)致一些不可預(yù)知的問題。為了組件的可維護(hù)性、自身安全，請(qǐng)盡量用 sketch 的自帶技能去搭建組件。

3. 固定間距

按鈕或標(biāo)簽這類組件通常會(huì)多個(gè)同時(shí)出現(xiàn)，比如這樣：

這樣：

我們可以通過以下幾種方式快速實(shí)現(xiàn)布局：

Kitchen

Anima

Sketch

其中 Kitchen 和 Anima 可以實(shí)現(xiàn)全自動(dòng)的動(dòng)態(tài)響應(yīng)，包括復(fù)制、刪除等操作。而 Sketch 需要手動(dòng)去維護(hù)或者創(chuàng)建為組件后才能實(shí)現(xiàn)全自動(dòng)的動(dòng)態(tài)響應(yīng)。

這里傾向于直接利用 Kitchen 或 Anima，不會(huì)產(chǎn)生不必要的 symbol，但同時(shí)也能提升我們的設(shè)計(jì)效率。對(duì)比 Kitchen 和 Anima，Anima 的響應(yīng)速度更快，功能更豐富，在實(shí)現(xiàn)固定間距的同時(shí)可以保證對(duì)齊方式。具體的應(yīng)用場(chǎng)景，我們后面會(huì)講到。

動(dòng)態(tài)的組件，結(jié)合固定間距可以實(shí)現(xiàn)一系列便捷的操作。接下來我們講一些具體的實(shí)現(xiàn)效果。

動(dòng)態(tài)組件搭建

基于上面的結(jié)論，我們?cè)谶@里的動(dòng)態(tài)組件都會(huì)用 sketch 的布局功能來搭建。

1. label

label 在之前的版本中不需要特殊處理，因?yàn)橛形搽S功能。59 版本之后這個(gè)功能被移除，新的布局可以完全取代它了。這里我們手動(dòng)配置一下水平方向的布局。

注意文本的對(duì)齊方式與布局方向要保持一致。

再利用 「Anima-Padding」/「Kitchen-自動(dòng)排版」 實(shí)現(xiàn)動(dòng)態(tài)布局。

2. 用類似的方式實(shí)現(xiàn)下拉彈窗

• sketch 布局創(chuàng)建為組件后可以通過隱藏的方式實(shí)現(xiàn)刪除的效果，但不可增加。
• 通過 Kitchen/Anima 編組的方式可以達(dá)到任意增刪的效果。不過這類組件在實(shí)際應(yīng)用時(shí)主要起到展示的作用，所以這里建議用 sketch 布局并把他們做成組件。
• 其次，sketch 在這里的布局會(huì)更加簡(jiǎn)單，不用考慮分組以及組間關(guān)系，它會(huì)保持現(xiàn)有元素間的距離（包括邊距和間距）并應(yīng)用。不過在靈活性上比較低。

Anima 需要合理編組來實(shí)現(xiàn)

圖標(biāo)解釋

△ Padding（內(nèi)邊距）

△ Stack（堆載）

3. 導(dǎo)航

導(dǎo)航欄也是常用的組件之一。

首先創(chuàng)建「選中」與「未選中」兩種狀態(tài)組件。也可以用一種狀態(tài)（選中狀態(tài)）通過控制元素隱藏/顯示、修改文字樣式等來實(shí)現(xiàn)狀態(tài)改變。不過操作比較繁瑣，這里就不推薦了。

這里的選中狀態(tài)需要用到 sketch 的水平布局，短橫線才可以跟隨文字動(dòng)態(tài)改變。

置入建立的組件，確定好間距，再次建立組件，保持水平布局。就可以得到一個(gè)動(dòng)態(tài)的導(dǎo)航欄了

也可以用 Anima/Kitchen 的布局去實(shí)現(xiàn)這個(gè)效果。

再次強(qiáng)調(diào)：Anima/Kitchen 的最好不要作為組件使用。

通用性強(qiáng)，復(fù)用率高的組件建議用 sketch 的布局去建立組件。

4. 步驟條

如何把大象放進(jìn)冰箱

這里要實(shí)現(xiàn)的效果是「改變文字寬度，保持文字與右側(cè)的線條間距不變」

方法：

序號(hào)、文字、白色背景成組，并水平「從左向右」布局

這樣文字可以推動(dòng)白色背景變寬，與右側(cè)線條始終維持相同間距。

結(jié)合 sketch 的調(diào)整尺寸（resizing）還可以手動(dòng)改變步驟條的寬度。

5. 表單

表單也可以通過 anima 或者 kitchen 來布局，實(shí)現(xiàn)數(shù)據(jù)的快速增刪。

PS: Anima 的 stack 會(huì)默認(rèn)選一種對(duì)齊方式，出現(xiàn)下列這幾種布局效果（下方左對(duì)齊異常的原因和我組件的搭建方式有關(guān)）。

左對(duì)齊

居中對(duì)齊

兩端對(duì)齊

右對(duì)齊

6. switch / radioButton

同樣的，利用 sketch 的布局，還可以創(chuàng)建動(dòng)態(tài)的 switch 和 radiobutton。

7. tooltips

方法和之前建立動(dòng)態(tài)按鈕類似，不過需要注意的是：這類 tooltip 會(huì)存在一個(gè)最大寬度，在超出這個(gè)寬度后需要換行處理。但是sketch 的動(dòng)態(tài)維度只有一個(gè)象限（x或y）。這個(gè)時(shí)候當(dāng)超出最大寬度后就需要手動(dòng)去換行并調(diào)節(jié)高度（動(dòng)態(tài)高度，手動(dòng)調(diào)節(jié)寬度，可以依據(jù)文字是否換行來判斷邊距是否正確）。

建議：這里我們可以建立兩個(gè)組件，一個(gè)動(dòng)態(tài)高度，一個(gè)動(dòng)態(tài)寬度，根據(jù)文本量的多少去選擇合適的動(dòng)態(tài)方向。上面換行的按鈕也可以這樣處理。

再多說一句：Anima 可以通過拖動(dòng)寬度來改變文字的對(duì)齊方式（自動(dòng)寬度、自動(dòng)高度），結(jié)合自身的 padding 可以實(shí)現(xiàn)兩個(gè)象限的動(dòng)態(tài)改變。但是出于穩(wěn)定性的考慮，我們不推薦用它來做 symbol。

8. 模塊-留言

模塊相對(duì)于簡(jiǎn)單的組件結(jié)合了多種布局方法。

以這個(gè)留言版為例展開說明：

這個(gè)留言版由頭像、name、like、dislike、留言內(nèi)容等 5 個(gè)元素組成。從布局上看可以把頭像、name、like、dislike四個(gè)元素作為一個(gè)部分，留言作為一個(gè)部分。在整體上形成一個(gè)上下動(dòng)態(tài)布局的組件。

頭像和 name 固定于左側(cè)；頭像鎖定寬高，name 文本自動(dòng)寬度，布局方式從左向右。

like、dislike編組固定于右側(cè)，文本自動(dòng)寬度，布局方式從右向左。

留言部分固定左右間距，文本自動(dòng)高度。這樣我們可以通過拖動(dòng)該區(qū)域的寬度去實(shí)現(xiàn)高度的動(dòng)態(tài)改變。

利用 Anima 的 stack，實(shí)現(xiàn)每個(gè)留言版之間的固定間距。此外，在 stack 里面我們可以選中兩邊對(duì)齊的方式。

讓組內(nèi)留言版的寬度保持一致。

9. 模塊-表格

分別建立「左上、上、右上、左、中、右、左下、下、右下」等 9 個(gè)單元格組件。通過（左、上邊框+th+td）的方式也可以，這里不細(xì)說。

• 邊框可用陰影或線條實(shí)現(xiàn)。
• 表格內(nèi)文本自動(dòng)高度，固定左右兩側(cè)邊距。通過文本樣式可以快速切換左中右的對(duì)齊方式。
• 自動(dòng)高度可以實(shí)現(xiàn)單元格高度的動(dòng)態(tài)改變，表格寬度一般手動(dòng)調(diào)節(jié)，所以不用設(shè)定文本為自動(dòng)寬度。

每一列單元格分別打組，用 Anima（stack 左右對(duì)齊）或 Kitchen 固定垂直間距（間距為 0），組名 tr。無論是單元格的增減，還是單元格高度的變化，都可以在縱向上動(dòng)態(tài)改變。

對(duì) tr 打組，固定左右間距（間距為 0），實(shí)現(xiàn)表格在水平方向上的動(dòng)態(tài)變化。

10. 模塊-卡片

利用上面的知識(shí)我們來做一個(gè)相對(duì)復(fù)雜的卡片

要點(diǎn)

• 做好編組，對(duì)組內(nèi)的元素做好布局。
• 利用 resizing 固定元素。
• 確定文本區(qū)域。
• 明確模塊的動(dòng)態(tài)方向。

具體步驟

從上圖可以看出卡片主要分為三個(gè)部分

• 圖片+標(biāo)題
• 人物及標(biāo)簽
• 介紹

對(duì)圖片+標(biāo)題編組，命名「banner」，確定標(biāo)題的文本區(qū)域及動(dòng)態(tài)方向，這里的標(biāo)題我希望它在換行時(shí)往上走。這樣可以把文字定為下方固定。如圖：

對(duì)頭像、名字、標(biāo)簽編組，命名「人物簡(jiǎn)介」。固定頭像大小，固定名字位置。對(duì)標(biāo)簽編組，這里標(biāo)簽應(yīng)該是動(dòng)態(tài)的，從左往右布局。

標(biāo)簽高度固定；人物簡(jiǎn)介寬高固定；

固定人物介紹文本與卡片左右間距以及上邊距

對(duì)「海報(bào)」「人物簡(jiǎn)介」「人物介紹」再次編組，確定組內(nèi)各元素間距。編組和背景確定邊距。

這個(gè)過程剛開始可能是一個(gè)漫長(zhǎng)的調(diào)試過程，在熟悉后，會(huì)讓調(diào)試有一個(gè)明確的方向，從而縮短時(shí)間。

總結(jié)

不對(duì)，工作還沒交付給開發(fā)就不算完成。工作中我會(huì)使用藍(lán)湖把設(shè)計(jì)資源交付給開發(fā)。

結(jié)果

Anima 的布局在上傳藍(lán)湖后，藍(lán)湖上顯示正常，但是 sketch 本地布局統(tǒng)統(tǒng)崩潰了。我不禁長(zhǎng)嘆一聲，?。?

藍(lán)湖官方解釋「兩個(gè)插件在 Sketch 提供的方法調(diào)用是有沖突的，建議在上傳前關(guān)掉 Anima 插件」。

關(guān)掉 Anima 需要在插件中關(guān)掉后并重啟 sketch 才能生效，不然編組的內(nèi)容依舊會(huì)保留 Anima 特性。

接下來重新總結(jié)一下：

• 盡量使用 sketch 自帶功能去建立組件，能極大地保證組件庫(kù)的安全性。
• 第三方插件可以用作布局編組的輔助支持，Anima 的性能優(yōu)于 Kitchen，在實(shí)現(xiàn)相同功能時(shí)優(yōu)先使用 Anima。sketch 的手動(dòng)布局雖然不夠靈活，但是還算省心。
• 動(dòng)態(tài)組件內(nèi)的文字的對(duì)齊方式，要和 sketch 布局方向一致。
• 合理利用 resizing 的被動(dòng)響應(yīng)和布局的主動(dòng)響應(yīng)。
• sketch 的布局暫時(shí)只支持一個(gè)維度的動(dòng)態(tài)變化，不過滿足了絕大部分的需求。有必要的話可以為一個(gè)樣式制作在兩個(gè)維度上變化的組件。
• 第三方插件的更新一定晚于 sketch 的更新，如果涉及到重要內(nèi)容，延遲更新 sketch。
• 第三方插件之間可能存在沖突，請(qǐng)合理規(guī)避風(fēng)險(xiǎn)。
• 雖然這樣的動(dòng)態(tài)布局還有這樣或那樣的問題，但在合理的使用后，不禁覺得是真香啊

結(jié)合以上內(nèi)容為開發(fā)同事做的一個(gè)上線海報(bào)，他們可以只關(guān)注內(nèi)容了。

文章來源：優(yōu)設(shè)