我一貫主張不要為工具所累，所以在各種誘人的 Sketch 插件面前，我總是提前思考下自己的真正需求，這款軟件是將我奴役，還是為我所用？

而我在親自使用 Anima 這款工具小半年后，開始意識到它是一款真正優(yōu)秀的提效工具，并且效果立竿見影。尤其是 Stack（堆棧）這個功能，毫不夸張地講，用“逆天”二字形容絲毫不為過。它能真正地將你的頁面內(nèi)容以動態(tài)的方式布局工作，從而實(shí)現(xiàn)與 css 中 Flexbox 類似的布局效果。

前排提醒，Anima 在國內(nèi)相關(guān)的文章不多，很多名詞未查證到專業(yè)的中文術(shù)語，所以大量名詞我直接以英文來講述，不過我都會給出清晰的解釋~

大綱：

• 關(guān)于 Anima
• Padding 內(nèi)間距
• Pin 固定邊緣
• Stack 堆棧
• Anima 的局限性
• 最后

關(guān)于 Anima

Anima（跟我念，ai ni me，不是阿尼瑪）產(chǎn)品的主打功能有兩個，一個是在線的響應(yīng)式原型，我們完成設(shè)計稿后用瀏覽器可以真實(shí)的預(yù)覽，而且可以手動添加各種逼真的交互動畫；另一個正如官網(wǎng)所說的那樣“讓設(shè)計與開發(fā)歸于統(tǒng)一”，幫助開發(fā)者在設(shè)計稿上一鍵獲取代碼（emmmmm，大概類似藍(lán)湖和 zeplin 那樣的高效協(xié)作平臺）。

但是?。?/p>

Anima 另一個功能 auto-layout 我絕對要推一下。雖然不知道為什么官網(wǎng)沒有半點(diǎn)對它的介紹和宣傳。。

auto-layout 主要包含三個功能，padding、pin 和 stack，我簡單翻譯為內(nèi)間距、固定和堆棧。

前 2 個是不是很熟悉？沒錯，sketch 里自帶，不過 Anima 讓創(chuàng)建的過程變得更簡單和高效。最后的堆棧放到了最后壓軸講，因?yàn)檫@是個驚艷全場的功能。

padding 內(nèi)間距

padding 對標(biāo) sketch 中的智能布局，我在組件動態(tài)自適應(yīng)這一篇有講到。智能布局主要解決的是組件自適應(yīng)問題，它可以將我們制作好的組件尺寸基于一類規(guī)則，跟隨內(nèi)容的變化而動態(tài)適應(yīng)。

但是 Anima，它有什么資格搶別人飯碗呢？

還真有。

簡單演示下它的 padding 功能。你可以切換 padding 的位置選項(xiàng)來實(shí)現(xiàn)不同位置的數(shù)值輸入。

而且 padding 只是圖層編組的過程，它對圖層不會產(chǎn)生破壞，我們依舊可以對文字和容器進(jìn)行任意編輯。

Anima 創(chuàng)建文本后無需組件化，一鍵 padding 即可生成，而且 padding 提供數(shù)值輸入，無需自己手動測量。如果想要去除 padding 效果直接解組即可，非常快捷方便。

但是，無需組件化的同時也為它的復(fù)用性埋下了隱患。

我后面嘗試將 padding 后的對象創(chuàng)建成 symbol 組件，自適應(yīng)上沒有任何問題，但是在進(jìn)行拉伸適配處理時是沒有效果的，這也就意味著它在響應(yīng)式上和 symbol 無法兼容。

所以，我建議界面設(shè)計中的自適應(yīng)依然使用 sketch 自帶的智能布局。Anima 的 padding 并非不能用，只是不適合用來響應(yīng)。

pins 固定

Anima 的 pins 除了本身 sktech 自帶的“pin to edge”和“fix size”之外，還提供了其他額外新增的功能。具體見我在面板中標(biāo)紅的位置。

1. 固定水平或垂直居中

字面意思很好理解，在跟隨父級響應(yīng)時始終保持水平或者垂直方向的居中。

2. 數(shù)值化的邊緣間距

sketch 自帶的固定邊緣功能只能選擇向哪個方向固定，具體數(shù)值需要自己手動測量。

但是 Anima 提供了更加可控、便捷的數(shù)值功能，你只要輸入數(shù)值即可迅速控制元素的位置。

而且它還提供百分比的形式，即元素內(nèi)間距占父級總尺寸的。

3. 數(shù)值化的固定尺寸

這里直接結(jié)合上個例子固定了左上邊緣，勾選后默認(rèn)取值對象本身尺寸。跟隨響應(yīng)時始終保持尺寸的固定。

當(dāng)然也可以自己輸入固定數(shù)值，同樣支持百分比。另外，尺寸后的 min 和 max 分別代表了響應(yīng)過程中元素尺寸最小值和最大值，更加可控了。

4. 距離中心的偏移量

至于距離中心的偏移量，就是將對象基于中心朝某個方向偏移一段距離。

比如在勾選水平+垂直居中后，水平和垂直方向的偏移量就是 0。

如果你想基于 C 位向某個方向偏移，那就在對應(yīng)的方向上輸入數(shù)值即可（右上方為正數(shù)，左下方為負(fù)數(shù)）

Stack 堆棧

終于，到了我們的 Stack！為什么要把它放最后講，就像我開頭說的那樣，這個功能極為逆天。

官網(wǎng)文檔說明中在 Stacks 標(biāo)題后面括弧了一個 Flexbox，這也就意味著這個功能可以達(dá)到前端 CSS 中的 Flexbox 效果。

文檔里把 Stack 定義為：

A Stack is a special type of Group that defines the layout of its child Layers.

我簡單翻譯了下，就是堆棧這個東西是編組的一種特殊類型，它定義了子級圖層的布局。

光看也是懵懂，我上個動畫便于各位直觀 get 到它的逆天之處。

真的是太、逆、天、了。請?jiān)试S我多次這么形容。

下面我會先簡單講下 stack 可控制的外部屬性，而 stack 自身內(nèi)部的核心屬性放在了最后。

1. Stack 的創(chuàng)建

創(chuàng)建 stack 相當(dāng)簡單，只需要選中你想要控制的元素，一鍵點(diǎn)擊右側(cè) icon（group to a stack）即完成了創(chuàng)建。取消 stack 的操作和上面的 padding、pin 一樣，直接 ungroup 解組即可。

創(chuàng)建后，它會自動基于目前圖層的排列自動按某個方向堆棧并且對齊，同時自動保持 spacing 間距的一致。

2. Direction 堆棧方向

定義元素們排列的方向是水平還是垂直，對應(yīng)在面板中是 direction 這個功能。

3. Align 對齊方式

Anima 提供了四種元素的對齊方式，分別是 Top（頂對齊）、Center（居中對齊）、Bottom（底對齊）和 Spread（等寬對齊，即通過拉伸的方式強(qiáng)行使元素的尺寸保持一致）。對應(yīng)在面板中是 Align 功能。

4. Spacing 間距

即定義元素的間距，對應(yīng)在面板中是 spacing 這個輸入框。

5. Stack

Stack 自身的內(nèi)部屬性是 Flexbox 布局的核心精髓所在。為什么是內(nèi)部屬性，就是因?yàn)檫@個屬性屬于本身固有的屬性，它不會像上面的那些外部屬性那樣可以手動控制。

簡單來說，stack 能夠基于既定的 Spacing，實(shí)現(xiàn)所有（注意是所有）元素布局的自適應(yīng)。這是什么概念？

大家 Word 應(yīng)該都用過，當(dāng)我們在稿子中間插入一段文字后，后面的文字會自動折行，刪除這段文字后，下面的文字又會向上回到剛剛的空間。這是文本編輯器固有的屬性，所有的筆記類應(yīng)用也是這樣。

但如果這兩段文字分別屬于獨(dú)立的圖層，那就會非常麻煩。

假設(shè)我們需要保持一致的間距。那你得先將下方文字移動一段合適的距離，然后拷貝上方文字，編輯、移動，然后再手動或者通過 Tidy（整理）功能保持間距的一致。

是不是跟產(chǎn)品突然要求你在頁面中加字段的場景很像？低效而無奈，尤其在我們 B 類產(chǎn)品復(fù)雜的后臺表單頁，新加字段的影響范圍一旦很廣會異常麻煩，當(dāng)時都恨不得扒了產(chǎn)品一層皮。

但 Stack 解決的就是這個?。?/p>

比如，我們給下面三個色塊加入 stack 后，刪除中間的色卡，下方色塊會基于給定的 spacing 自動補(bǔ)位。

另外，你也可以隨意調(diào)整、顛倒圖層的順序，它們的 spacing 始終也是固定的。

這些被賦予 stack 屬性的圖層仿佛有了自己的生命力，可以自己動，而不需要我們再去手動干預(yù)。

我可以毫不夸張地講，擁有了 Stack，你就可以告別那些因增減、調(diào)序而導(dǎo)致間距調(diào)整的低效重復(fù)性工作了。（怎么感覺像打廣告。。）

6. Collapsing 塌陷

（原諒我想不到其他更合適的翻譯。。）

Collapsing 聽起來逼格高，實(shí)則很簡單。沒有激活它時，Stack 刪除一個圖層才能起到間距自適應(yīng)的效果，但是有了 Collapsing，我們只要隱藏圖層即可同樣實(shí)現(xiàn)效果。

我通常建議是開啟的，避免“改了十幾稿，還是用初稿”，但你初稿早已不再的的人間慘劇發(fā)生。

7. Stack 的嵌套

Stack 支持嵌套來應(yīng)對那些較為復(fù)雜的版塊和頁面。

拿一開始的那個例子說。我通過將單行卡片 Stack 化，來保持每個卡片的間距保持 12px。這屬于右內(nèi)向外的第一層。

同時我希望這些卡片不論大小、數(shù)量，整體的寬度始終保持固定，并且卡片的行間距保持 12px。那么我們需要再次將剛剛的兩個 Stack 嵌套成一個更大的 Stack，通過 spacing 和等寬的 Align 來實(shí)現(xiàn)。

具體參數(shù)見下。

很簡單的幾步，就可以達(dá)到上述的效果。

當(dāng)然，我們可以結(jié)合 pins 來實(shí)現(xiàn)更多的目的。比如我們希望內(nèi)容的總寬度和人物圖片能夠固定、邊距能夠固定、人物圖片始終保持居中等等，都可以使用 Pins 中的屬性來控制。這里就不做演示了。各位有空可以自己去嘗試一波~

源文件和 Anima 插件我打包好了，文末/開頭即可下載

Anima 的局限性

可惜的是，目前 Anima 和 symbol 的兼容性依舊是個問題，我在搭建組件庫時曾經(jīng)試圖將兩者結(jié)合在一起，但在動態(tài)自適應(yīng)和響應(yīng)式上總會出現(xiàn)各種各樣的問題。所以，各位使用到 symbol 時需要謹(jǐn)慎使用。

但是，在組件的基礎(chǔ)上進(jìn)行頁面的快速搭建時，或者在不涉及到組件的頁面，我會毫不猶豫地跟你推薦它??！

最后

如果說原子設(shè)計解決的是一次性設(shè)計問題，那么 Anima 就是非常簡單粗暴地快。它不需要任何的組件、不需要手動調(diào)整間距、學(xué)習(xí)成本也比 sketch 的智能布局、彈性布局低得多，不得不說，它給你帶來的提效效果立竿見影。

我是 AndrewChen，下期見。

歡迎關(guān)注作者微信公眾號：「轉(zhuǎn)行人的設(shè)計筆記」