前言

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

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

其實很多UI設計師如果沒有了解過點前端知識，可能不太理解這位程序員的心情。但是對於寫過html頁面，了解過css的設計師來說，網頁開發中的float浮動真的應該引入到Sketch中。

先看個例子，我們現在需要做一個橫向的文字導航，這應該算是一個最簡單最常用的UI組件了。每個文字標籤之間的間距是40。

不過在實際工作中我們總會遇到這樣的需求，比如把熱門改為熱門文章。正常情況下我們是這樣處理的：更改文字後，為保持間距，後面三項需要手動調整位置。

難道這個操作不對嗎？對於前端程序員和了解css的設計師來說，這個操作還真的「不對」。例子中只有5項，如果有十幾項不就麻煩死了。文字內容改變後，文字之間的間距應該保持不變才是正確操作。

Sketch作為設計軟體，天生遵守「絕對定位」這一原則：每個元素之間是相互獨立的，互不影響。但是在web開發中，頁面中的元素卻是互相聯繫的（在不設定position:absolute的前提下），定義好間距樣式後，無論文字內容怎麼變，它們的間距都會保持一致。

Kitchen插件中的智能排版

如果在Sketch中引入這個功能，那麼不就極大解放設計師的生產力了嗎？所以隆重給大家推薦Kitchen插件中的自動排版功能。

Kitchen是一個阿里團隊開發的Sketch插件，kitchen.alipay.com/，本文就不介紹其他功能了，大家自己體驗，這裡只著重介紹它的自動排版或者叫智能排版功能。這才是Kitchen的核心。

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

下面我們就結合實際例子，看看它是如何提高設計師的生產力的。

製作彈性按鈕

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

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

彈性按鈕就不一樣了，在中後台的界面設計中，經常遇到不同文字數量的彈性寬度按鈕需求。不管按鈕文字是多少，兩端的留白（即padding）始終保持固定。這個對於設計師來說很坑爹了，每次字數變化後都要再調整按鈕寬度。

那麼在使用Kitchen的智能排版之後，這個操作將變得絲一般的順滑。

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

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

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

所以到這裡大家應該明白，智能排版本質就是賦予Sketch前端布局的功能，讓設計師布局更加靈活。接下來我們看下間距的用法。

讓元素自動調整間距

回到文章開頭的問題，一個橫向的文字導航，每項間距是40，其中第二項字數發生了改變，為了保持間距統一，後面的元素位置需要手動調整。那麼利用智能排版的間距功能，我們就會給每個文字賦予生命力，讓它們之間實現自動排版。在水平間距填寫40看看效果。

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

製作一個彈性按鈕組

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

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

不過也有一些小瑕疵，就是當按鈕寬度改變後，間距卻沒有及時變化，需要再次點擊這個按鈕組才可以，應該是插件的一個bug，希望後續的更新能優化下。

智能縮放應用到Symbol

在上面的例子中，我們用了不同寬度的按鈕，但是像文字、顏色、描邊等樣式都是一樣的。對於Sketch來說，這些按鈕統一可以使用Symbol來代替，實際工作中我們肯定也是這樣操作的。那麼如果每個按鈕都調用了同一個Symbol，上面講到的彈性按鈕組可以實現嗎？當然可以。

我們先把按鈕轉換為Symbol，複製四個分別再命名，然後把整個組用智能排版的間距功能設置為h20。不過出現了問題，按鈕高度塌陷了，一個bug。

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

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

總結

通過利用Kitchen的智能排版功能，我們已經實現了想要的效果，節約了大把時間，以後的界面設計效率將會極大提升。當然，還有很多其他的使用場景，各位可以自己在實戰中去體驗。不過在使用中也發現了一些bug，希望Kitchen的團隊能夠在後續版本修復。

當然了，本文的自動排版效果也有其他插件可以實現，比如

Paddy

github.com/DWilliames/p

Anima

animaapp.com/

不過由於Kitchen插件還附帶數據填充、iconfont庫、圖表生成器等常用功能，而且插件裝多了也會影響Sketch的性能，一些設計師也不願意裝那麼多插件，所以Kitchen整體還是有一定優勢的。

END


推薦閱讀：
相关文章