Sketch 58 Beta版本探秘,看看都有什么新功能! - 優設網 - UISDC

Sketch 58 Beta版本探秘,看看都有什么新功能!

2019/09/09 8340評論 12

Sketch 58 Beta 版本已于近期推出(其實最近一段時間已更新了好幾個測試版),官方終于推出 Smart Layout 智能布局,讓 Symbol 組件獲得響應功能,變得更加靈活和強大。

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

比如 Kitchen 插件在制作 Symbol 組件的時候,其自動排版功能會出錯。Anima 插件對上傳到藍湖的標注會有顯示問題。關鍵是在團隊協作的時候,其他使用源文件的同學也必須安裝對應的插件,否則沒有效果。

那么這次 Sketch 58 Beta 版本新推出的 Smart Layout 智能布局功能,能否解決長期困擾設計師的響應布局問題呢?一起來看下。

Sketch最新Beta版本下載

如果想體驗 Sketch 最新 Beta 版本,請進入 Sketch 測試版主頁下載→https://www.sketch.com/beta/。但是要記住,一定不要用在自己的正式文件中,防止修改后,低版本打不開。

Sketch 58 要求 Mac 系統版本是 macOS High Sierra 10.13.4 及以上,下面是 Sketch 各大版本對應的 Mac 系統版本,如果遇到新版的 Sketch 打不開就需要檢查下自己的系統版本。

  • 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 最大的更新就是 Smart Layout。

在新建 Symbol 組件時,彈窗新增 Layout 選項,總共有 7 個屬性,分別對應不同的圖標,下面是每個屬性的簡單介紹。

1. No Layout

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

2. Left to Right Layout

賦予 Symbol 組件智能布局效果,組件尺寸會根據內容變化,方向是水平從左往右布局。

3. Horizontally Center Layout

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

4. Right to Left Layout

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

5. Top to Bottom Layout

賦予 Symbol 組件智能布局效果,組件尺寸會根據內容變化,方向是垂直從上往下布局。

6. Vertically Center Layout

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

7. Bottom to Top Layout

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

另外在選擇好 Layout 屬性后,Symbol 頁面的畫板組件圖標會發生變化,除了 No Layout 布局還是之前的畫板圖標之外,其余 6 個都有對應的新圖標,看下圖。

此外,選擇畫板后,右側的屬性面板中會新增布局選擇功能,包含上面講的7種屬性,可隨時對 Layout 布局進行更改。

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

制作彈性按鈕

以前我們使用過 Kitchen 和 Anima 制作過彈性按鈕。需求是,文字兩端的邊距(即CSS中的padding)保持固定,文字數量不固定,按鈕寬度隨文字內容走。

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

轉化為 Symbol,出現彈窗,在新增的 Layout 下拉中,選擇 Left to Right Layout,這樣文字變化時,左邊是固定不動的,內容往右邊延展。

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

如果這個時候我們再拉伸 Symbol,右側 Overrides 會出現一個新的圖標:縮小實例以適配內容。點擊后,被拉伸的組件會還原為文字內容長度。

注意,這個和原先的重設覆蓋層圖標不同,不會清除覆蓋的文本內容,只會還原為適合內容大小。

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

這就是智能布局的主要功能,賦予 Symbol 組件 CSS 代碼 padding 屬性,具備響應特征?;剮枰⒁獾氖?,智能布局目前只針對 Symbol 組件,Kitchen 插件是可以作用于普通組的。

制作彈性按鈕組

上面是單個組件的智能布局,如果是嵌套組件呢?也是可以的,一起試下。

我們把剛才做的按鈕橫向分布三個,再一起做成新的按鈕組 Symbol 組件,結構看下圖。

新的按鈕組內,每個按鈕已經是響應式的,那么做成組后就會保持組內元素的間距固定,更改下文字內容看下圖。

非常棒,已經滿足了我們剛開始的需求。但是不建議嵌套過多,要保持組件化設計思維。當然了,間距問題,Sketch 57 已經提供了多元素間距調整功能,只多了一步,但是不用把整體再次轉化 Symbol,大家可以根據自己的需要靈活選擇。

制作信息卡片

以上講的是水平方向布局,同理垂直方向布局道理也一樣,我們以最常見的信息卡片為例子。一般情況下卡片圖片不變,標題和內容文字的不固定會導致卡片整體高度也會發生變化。利用智能布局我們可以讓卡片變成響應式擴展。

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

總結

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

58 版本的歡迎界面也做了大更新,至于好不好看就因人而異了。最后來一睹芳容。

歡迎關注作者的微信公眾號:「UI黑客」

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/sketch-58-beta

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

sketch 界面設計 版式設計 排版布局 職場 優設專訪 設計師干貨 優設大課堂 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 設計規范 海報設計 設計趨勢 用戶體驗設計 動效設計 平面設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里