Sketch 58 Beta版

Sketch 58是知名的mac平臺原型設(shè)計(jì)工具，這次發(fā)布的全新版本終于推出 Smart Layout 智能布局，讓 Symbol 組件獲得響應(yīng)功能，變得更加靈活和強(qiáng)大。雖然使用簡單，它提供了功能強(qiáng)大的矢量繪圖和文字工具。如完美的布爾運(yùn)算，符號，和強(qiáng)大的標(biāo)尺，參考線和網(wǎng)格。

新版特色：

Smart Layout智能布局介紹

本次 Sketch 58 Beta 最大的更新就是 Smart Layout。

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

1. No Layout

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

2. Left to Right Layout

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

3. Horizontally Center Layout

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

4. Right to Left Layout

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

5. Top to Bottom Layout

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

6. Vertically Center Layout

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

7. Bottom to Top Layout

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

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

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

看上面的描述還是比較迷惑，實(shí)際上智能布局簡單來說，就是賦予 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í)，左邊是固定不動的，內(nèi)容往右邊延展。

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

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

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

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

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

制作彈性按鈕組

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

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

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

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

制作信息卡片

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

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