Sketch?58 Beta版本已于近期推出（其實(shí)最近一段時(shí)間已更新了好幾個(gè)測(cè)試版），官方終于推出Smart Layout智能布局，讓Symbol組件獲得響應(yīng)功能，變得更加靈活和強(qiáng)大。

之前我們只能使用第三方插件來制作響應(yīng)式組件，比如之前介紹的Kitchen和Anima。不過畢竟不是官方親生的，難免會(huì)包含一些bug和不足。

比如Kitchen插件在制作Symbol組件的時(shí)候，其自動(dòng)排版功能會(huì)出錯(cuò)。Anima插件對(duì)上傳到藍(lán)湖的標(biāo)注會(huì)有顯示問題。關(guān)鍵是在團(tuán)隊(duì)協(xié)作的時(shí)候，其他使用源文件的同學(xué)也必須安裝對(duì)應(yīng)的插件，否則沒有效果。

那么這次Sketch 58 Beta版本新推出的Smart Layout智能布局功能，能否解決長(zhǎng)期困擾我們?cè)O(shè)計(jì)師的響應(yīng)布局問題呢？一起來看下。

Sketch最新Beta版本下載

如果想知道57版本的新功能，請(qǐng)看這篇文章《Sketch 57 Beta版本探秘，看看都有什么新功能》。

如果想體驗(yàn)Sketch最新Beta版本，請(qǐng)進(jìn)入Sketch測(cè)試版主頁下載 https://www.sketch.com/beta/。但是要記住，一定不要用在自己的正式文件中，防止修改后，低版本打不開。

Sketch 58要求Mac系統(tǒng)版本是macOS High Sierra 10.13.4及以上，下面是Sketch各大版本對(duì)應(yīng)的Mac系統(tǒng)版本，如果遇到新版的Sketch打不開就需要檢查下自己的系統(tǒng)版本。

Sketch52-58系列版本需要macOS High Sierra 10.13.4及以上

Sketch51系列版本需要macOS Sierra 10.12.2及以上

Sketch50系列版本需要OS X El Capitan 10.11.2及以上

Smart Layout智能布局介紹

本次Sketch 58 Beta最大的更新就是這個(gè)Smart Layout。

在新建Symbol組件時(shí)，彈窗新增Layout選項(xiàng)，總共有7個(gè)屬性，分別對(duì)應(yīng)不同的圖標(biāo)，下面是每個(gè)屬性的簡(jiǎn)單介紹。

No Layout

正常布局，也就是和原先一樣，沒有特殊效果。

Left to Right Layout

賦予Symbol組件智能布局效果，組件尺寸會(huì)根據(jù)內(nèi)容變化，方向是水平從左往右布局。

Horizontally Center Layout

同上，方向是中間往左右兩端布局。

Right to Left Layout

同上，方向是從右往左布局。

Top to Bottom Layout

賦予Symbol組件智能布局效果，組件尺寸會(huì)根據(jù)內(nèi)容變化，方向是垂直從上往下布局。

Vertically Center Layout

同上，方向是中間往上下兩端布局。

Bottom to Top Layout

同上，方向是從下往上布局。

另外在選擇好Layout屬性后，Symbol頁面的畫板組件圖標(biāo)會(huì)發(fā)生變化，除了No Layout布局還是之前的畫板圖標(biāo)之外，其余6個(gè)都有對(duì)應(yīng)的新圖標(biāo)，看下圖。

此外，選擇畫板后，右側(cè)的屬性面板中會(huì)新增布局選擇功能，包含上面講的7種屬性，可隨時(shí)對(duì)Layout布局進(jìn)行更改。

看上面的描述還是比較迷惑，實(shí)際上智能布局簡(jiǎn)單說就是賦予Symbol組件內(nèi)容邊距的功能，尺寸隨內(nèi)容變化而變化，有點(diǎn)類似于前端CSS中的padding屬性。下面用實(shí)際例子展示。

制作彈性按鈕

以前我們使用過Kitchen和Anima制作過彈性按鈕。需求是，文字兩端的邊距（即CSS中的padding）保持固定，文字?jǐn)?shù)量不固定，按鈕寬度隨文字內(nèi)容走。

那么在Sketch 58中，我們先制作一個(gè)按鈕，文字兩端的邊距是20。

轉(zhuǎn)化為Symbol，出現(xiàn)彈窗，在新增的Layout下拉中，選擇Left to Right Layout，這樣文字變化時(shí)，左邊是固定不動(dòng)的，內(nèi)容往右邊延展。

這樣一個(gè)彈性按鈕就做好了，不管文字有多少，兩端邊距永遠(yuǎn)保持固定20。和前端CSS中的padding-left和padding-right功能一樣。

如果這個(gè)時(shí)候我們?cè)倮霺ymbol，右側(cè)Overrides會(huì)出現(xiàn)一個(gè)新的圖標(biāo)：縮小實(shí)例以適配內(nèi)容。點(diǎn)擊后，被拉伸的組件會(huì)還原為文字內(nèi)容長(zhǎng)度。

注意，這個(gè)和原先的重設(shè)覆蓋層圖標(biāo)不同，不會(huì)清除覆蓋的文本內(nèi)容，只會(huì)還原為適合內(nèi)容大小。

以上是從左往右的布局，水平兩端和從右往左也是一樣的道理，只是方向不一樣，下圖是從右往左的布局。

這就是智能布局的主要功能，賦予Symbol組件CSS代碼padding屬性，具備響應(yīng)特征。還需要注意的是，智能布局目前只針對(duì)Symbol組件，Kitchen插件是可以作用于普通組的。

制作彈性按鈕組

上面是單個(gè)組件的智能布局，如果是嵌套組件呢？也是可以的，一起試下。

我們把剛才做的按鈕橫向分布三個(gè)，再一起做成新的按鈕組Symbol組件，結(jié)構(gòu)看下圖。

新的按鈕組內(nèi)，每個(gè)按鈕已經(jīng)是響應(yīng)式的，那么做成組后就會(huì)保持組內(nèi)元素的間距固定，更改下文字內(nèi)容看下圖。

非常棒，已經(jīng)滿足了我們剛開始的需求。但是不建議嵌套過多，要保持組件化設(shè)計(jì)思維。當(dāng)然了，間距問題，Sketch 57已經(jīng)提供了多元素間距調(diào)整功能，只多了一步，但是不用把整體再次轉(zhuǎn)化Symbol，大家可以根據(jù)自己的需要靈活選擇。

制作信息卡片

以上講的是水平方向布局，同理垂直方向布局道理也一樣，我們以最常見的信息卡片為例子。一般情況下卡片圖片不變，標(biāo)題和內(nèi)容文字的不固定會(huì)導(dǎo)致卡片整體高度也會(huì)發(fā)生變化。利用智能布局我們可以讓卡片變成響應(yīng)式擴(kuò)展。

確定好上下左右的間距，例子中用的16，然后建立組件，Layout選擇從上往下布局，這樣標(biāo)題和內(nèi)容文字增多，上下的間距是保持不變的，內(nèi)容高度自動(dòng)增加。

總結(jié)

以上就是Sketch 58 Beta版本新增的Smart Layout智能布局介紹。關(guān)于這個(gè)新功能，我們還可以做很多響應(yīng)式的組件，提升設(shè)計(jì)效。Sketch的更新速度也在加快，很多之前第三方插件才可以實(shí)現(xiàn)的效果也被官方一一收入囊中。希望Sketch的發(fā)展越來越好，成為設(shè)計(jì)師真正的設(shè)計(jì)利器。

差點(diǎn)漏了一個(gè)點(diǎn)，58版本的歡迎界面也做了大更新，至于好不好看就因人而異了。最后來一睹芳容。

THE END