認(rèn)識(shí)一個(gè)主攻前端的全棧開發(fā)大牛，最近做一個(gè)項(xiàng)目需要用到 Sketch。前天跟我發(fā)牢騷說：你之前不是說 Sketch 就跟 web 開發(fā)一樣簡單嗎？但是我感覺和 PS 一樣又笨又呆，做按鈕、列表、段落的時(shí)候太死板，刪個(gè)元素還得把其他元素一個(gè)個(gè)調(diào)整，就不能像 web 的 float 浮動(dòng)一樣自己動(dòng)嗎？

我立即明白他的意思，推薦他使用了 Kitchen 插件。結(jié)果第二天淚流滿面地跟我說：Sketch 這玩意兒太好用了。

其實(shí)很多 UI設(shè)計(jì)師如果沒有了解過一些前端知識(shí)，可能不太理解這位程序員的心情。但是對(duì)于寫過 html 頁面，了解過 css 的設(shè)計(jì)師來說，網(wǎng)頁開發(fā)中的 float 浮動(dòng)真的應(yīng)該引入到 Sketch 中。

先看個(gè)例子，我們現(xiàn)在需要做一個(gè)橫向的文字導(dǎo)航，這應(yīng)該算是一個(gè)最簡單最常用的 UI組件了。每個(gè)文字標(biāo)簽之間的間距是40。

不過在實(shí)際工作中我們總會(huì)遇到這樣的需求，比如把熱門改為熱門文章。正常情況下我們是這樣處理的：更改文字后，為保持間距，后面三項(xiàng)需要手動(dòng)調(diào)整位置。

難道這個(gè)操作不對(duì)嗎？對(duì)于前端程序員和了解 css 的設(shè)計(jì)師來說，這個(gè)操作還真的「不對(duì)」。例子中只有5項(xiàng)，如果有十幾項(xiàng)不就麻煩了。文字內(nèi)容改變后，文字之間的間距應(yīng)該保持不變才是正確操作。

Sketch 作為設(shè)計(jì)軟件，天生遵守「絕對(duì)定位」這一原則：每個(gè)元素之間是相互獨(dú)立的，互不影響。但是在 web 開發(fā)中，頁面中的元素卻是互相聯(lián)系的（在不設(shè)定 position:absolute 的前提下），定義好間距樣式后，無論文字內(nèi)容怎么變，它們的間距都會(huì)保持一致。

Kitchen 插件中的智能排版

如果在 Sketch 中引入這個(gè)功能，那么不就極大解放設(shè)計(jì)師的生產(chǎn)力了嗎？所以隆重給大家推薦 Kitchen 插件中的自動(dòng)排版功能。

Kitchen 是阿里團(tuán)隊(duì)開發(fā)的一個(gè) Sketch 插件，https://kitchen.alipay.com/，本文就不介紹其他功能了，大家自己體驗(yàn)。這里只著重介紹它的自動(dòng)排版或者叫智能排版功能，這才是 Kitchen 的核心。

Kitchen 的智能排版主要包含間距和邊距兩個(gè)功能，用網(wǎng)頁前端的術(shù)語來說就是 margin 和 padding——盒子模型中最基本的兩個(gè)屬性。

下面我們就結(jié)合實(shí)際例子，看看它是如何提高設(shè)計(jì)師的生產(chǎn)力的。

制作彈性按鈕

一般我們做的按鈕主要分為兩種：固定寬度按鈕和彈性寬度按鈕。

固定寬度很簡單，一個(gè)寬度是120的按鈕，其他頁面也都是120，不管兩個(gè)字還是三個(gè)字，按鈕寬度保持不變。

彈性按鈕就不一樣了，在后臺(tái)的界面設(shè)計(jì)中，經(jīng)常遇到不同文字?jǐn)?shù)量的彈性寬度按鈕需求。不管按鈕文字是多少，兩端的留白（即padding）始終保持固定。這個(gè)對(duì)于設(shè)計(jì)師來說很麻煩，每次字?jǐn)?shù)變化后都要再調(diào)整按鈕寬度。

那么在使用 Kitchen 的智能排版之后，這個(gè)操作將變得絲一般的順滑。

制作彈性按鈕將會(huì)使用到智能排版中的邊距功能。我們選中這個(gè)按鈕組，打開智能排版面板，在左邊距和右邊距都寫上20，鍵盤回車。然后再改變文字試試看，原本又笨又呆的按鈕仿佛有了靈性，完全聽從我們的指揮，這就是彈性按鈕，用前端術(shù)語就是兩邊增加了 padding-left 和 padding-right。

上下邊距也是同樣操作，左下角的自動(dòng)排版需要勾上，否則按鈕組會(huì)被打散，失去自動(dòng)排版功能。

下面是一個(gè)示意圖，可以看到 Kitchen 給我們的按鈕組重新命名了，多了尖括號(hào)和數(shù)值，名稱中的x代表空，下邊距沒有填寫。順序是按照「上-右-下-左」順時(shí)針的方向，和前端的四數(shù)值簡寫方法是一樣的。需要注意的是，新增的尖括號(hào)及內(nèi)容不能刪除，否則智能排版會(huì)失效。

所以到這里大家應(yīng)該明白，智能排版本質(zhì)就是賦予 Sketch 前端布局的功能，讓設(shè)計(jì)師布局更加靈活。接下來我們看下間距的用法。

讓元素自動(dòng)調(diào)整間距

回到文章開頭的問題，一個(gè)橫向的文字導(dǎo)航，每項(xiàng)間距是40，其中第二項(xiàng)字?jǐn)?shù)發(fā)生了改變，為了保持間距統(tǒng)一，后面的元素位置需要手動(dòng)調(diào)整。那么利用智能排版的間距功能，我們就會(huì)給每個(gè)文字賦予生命力，讓它們之間實(shí)現(xiàn)自動(dòng)排版。在水平間距填寫40看看效果。

搞定，從此以后面對(duì)任何導(dǎo)航再也不怕修改文字了。垂直間距也是同樣的道理。在間距操作中，導(dǎo)航所在的組，名字被 Kitchen 改為h40，h即 horizontal，同樣，如果是垂直間距會(huì)加上 v，即vertical。

制作一個(gè)彈性按鈕組

到此，我們已經(jīng)掌握了智能排版的兩個(gè)核心間距和邊距，在實(shí)際工作中還有很多需要兩個(gè)功能結(jié)合起來的操作，比如做一個(gè)彈性按鈕組：按鈕內(nèi)部兩端的邊距固定，按鈕之間的間距也保持固定。

在沒有 Kitchen 之前，這樣的操作簡直要命，先要更改按鈕寬度，接下來再改變按鈕間距。作為一名追求工作效率的 UI設(shè)計(jì)師，我可忍受不了這種復(fù)雜糟糕的體驗(yàn)。所以在智能排版的幫助下，復(fù)雜的操作也是瞬間完成。

不過也有一些小瑕疵，就是當(dāng)按鈕寬度改變后，間距卻沒有及時(shí)變化，需要再次點(diǎn)擊這個(gè)按鈕組才可以，應(yīng)該是插件的一個(gè)bug，希望后續(xù)的更新能優(yōu)化下。

智能縮放應(yīng)用到 Symbol

在上面的例子中，我們用了不同寬度的按鈕，但是像文字、顏色、描邊等樣式都是一樣的。對(duì)于 Sketch 來說，這些按鈕統(tǒng)一可以使用Symbol 來代替，實(shí)際工作中我們肯定也是這樣操作的。那么如果每個(gè)按鈕都調(diào)用了同一個(gè) Symbol，上面講到的彈性按鈕組可以實(shí)現(xiàn)嗎？當(dāng)然可以。

我們先把按鈕轉(zhuǎn)換為 Symbol，復(fù)制四個(gè)分別再命名，然后把整個(gè)組用智能排版的間距功能設(shè)置為h20。不過出現(xiàn)了問題，按鈕高度塌陷了，一個(gè)bug。

我們需要進(jìn)入到 Symbol 中，把按鈕的圓角矩形底的 Resizing 給設(shè)置下，頂部固定，高度禁止拉伸。

設(shè)置之后再看下效果，已經(jīng)可以了。不過還有個(gè)小問題，按鈕之間的間距無法自動(dòng)完成，需要我們手動(dòng)選擇按鈕組，再使用智能排版的間距功能，設(shè)置為h20，確定回車就可以了。這個(gè)應(yīng)該也算是一個(gè)bug。

總結(jié)

通過利用 Kitchen 的智能排版功能，我們已經(jīng)實(shí)現(xiàn)了想要的效果，節(jié)約了大量時(shí)間，以后的界面設(shè)計(jì)效率將會(huì)極大提升。當(dāng)然，還有很多其他的使用場景，大家可以自己在實(shí)戰(zhàn)中去體驗(yàn)。不過在使用中也發(fā)現(xiàn)了一些 bug，希望 Kitchen 的團(tuán)隊(duì)能夠在后續(xù)版本修復(fù)。

當(dāng)然了，本文的自動(dòng)排版效果也有其他插件可以實(shí)現(xiàn)，比如：

• Paddy：https://github.com/DWilliames/paddy-sketch-plugin
• Anima：https://www.animaapp.com/

不過由于 Kitchen 插件還附帶數(shù)據(jù)填充、iconfont庫、圖表生成器等常用功能，而且插件裝多了也會(huì)影響 Sketch 的性能，一些設(shè)計(jì)師也不愿意裝那么多插件，所以 Kitchen 整體還是有一定優(yōu)勢的。

歡迎關(guān)注作者的微信公眾號(hào)：「UI黑客」

「提升效率的Sketch插件」

• 《螞蟻金服推出超好用的Sketch 插件「Kitchen」》
• 《神器來了！9款幫設(shè)計(jì)師提升效率的Sketch 插件》
• 《用這個(gè)免費(fèi)的 Sketch 插件，幫你完美還原安卓界面！》