你不知道的Sketch黑科技-智能排版

朋友說Sketch就跟web開發一樣簡單嗎?但是我感覺和PS一樣又笨又呆,做按鈕、列表、段落的時候太死板,刪個元素還得把其他元素一個個調整,就不能像web的float浮動一樣自己動嗎?

推薦他使用了Kitchen插件。結果第二天淚流滿面地跟我說:Sketch這玩意兒太TM好用了。

簡介

智能排版有間距?與?邊距?兩大功能,間距?設置兩個或以上元素之間水平間距或豎直間距,邊距?設置元素與圖形或位圖的上下左右邊距關系,根據內部元素尺寸變化而變化。

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

Kitchen是一個阿里團隊開發的Sketch插件

https://kitchen.alipay.com/

本文就不介紹其他功能了,大家自己體驗,這里只著重介紹它的自動排版或者叫智能排版功能。這才是Kitchen的核心。

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

智能排版簡介

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

元素自動調整間距

Sketch作為設計軟件,天生遵守“絕對定位”這一原則:每個元素之間是相互獨立的,互不影響。但是在web開發中,頁面中的元素卻是互相聯系的(在不設定position:absolute的前提下),定義好間距樣式后,無論文字內容怎么變,它們的間距都會保持一致。

按鈕

智能縮放應用到Symbol

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

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

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

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

段落自動排版

1、作出鍛煉編號

一般的標號都是從數字1開始的,一直到N。這里我們做個簡單的樣式,同時轉化為symbol,方便后期統一修改,養成良好的設計習慣。

2、作出段落層

這里我們就不能用一大段文字加段落間距來處理了,需要把每段規則單獨建文本層。這里寬度我們先隨便拉伸固定到一個差不多的值,高度需要它的彈性特點,所以不要進行拉伸。

3、段落間距固定

現在我們有了第一條暫時還沒有內容的規則,序號symbol和右側文本進行編組。接下來復制四個,然后利用Kitchen設置好每行的間距,這里我設置了20。

同時我們現在再看下目前的圖層狀況。

4、在Kitchen增加規則文本

接下來我們要在Kitchen的數據填充功能中,添加活動規則的全部5條文本內容。需要注意兩點:一是不要帶序號,二是每段之間換行即可,不要空行。實際操作中,我們可以讓需求方提供遵守上述規則的文本txt文件,直接復制粘貼。同時要勾選保持順序,否則每段會隨機排列。

5、規則文案填充

最后一步,選中五個段落層,點擊剛才在Kitchen創建的規則文本,即可實現快速文案填充,而且每段的高度雖不固定,但是間距卻能在Kitchen自動排版功能下一直保持在我們設置的20。

6、數字序號填充

基本搞定,剩下的就是數字序號。當然了,我們可以一個個修改,但是如果有很多項,改起來就特別費勁,所以可以利用剛才的文案填充來實現。

同樣的方法,建立數字序號填充文本1、2、3、4、5……每個數字換行。這里需要注意的是,對于順序數字來說,我們在設計的時候經常會用到,頻率非常高。所以設計師很有必要建立一個順序數字文本源。

對于選擇,目前有5個序號,如果是幾十個,選擇操作會很麻煩,需要一個個點選。這里再提供一個插件叫做Select Similar Layers,可以根據名稱、樣式、描邊等屬性進行同時選擇。由于數字序號開始就被我們做成了symbol,因此它們具有相同的name屬性,而且symbol中的text由于被嵌套了一層,所以同一層級上是無法被Kitchen文本填充識別的,不會被影響。

先選中第一個序號,然后按Select Similar Layers的快捷鍵control+alt+7(其他常用屬性都有對應快捷鍵),就可以選擇相同名稱的圖層。接下來用Kitchen填充順序數字編號。

當然了,我們也可以利用Sketch的Filter圖層過濾功能來進行同類篩選。選擇symbol,會篩選當前頁所有symbol元素,接下來還可以利用文字名稱再次進行二次篩選,之后按shift鍵進行全選即可。

Sketch的Filter功能還是挺實用的,一共內置了形狀、文本、圖片、組、切片、原型和symbol七種類型,好好利用會帶來很多效率提升。

如果后面需求方說規則1下面需要加一張圖片,很簡單,直接放入圖片,每條之間的間距會自動排列。

如果第1條的文案變化了,高度也相繼改變,那么下面的元素也會自動補充,始終保持固定的間距。

如果我們是先加好圖片在進行文案填充也是可以的,Kitchen的數據填充會忽略掉圖片和同一層級的symbol。

還有一點,如果圖層是6個,只有5段文案,那么全部填充后,第6條會填充第一段的文案,多余的我們最后刪掉即可,不用擔心發生混亂。

最后我們再看下利用Sketch強大的Resizing功能,實現彈性寬度的圖文段落自動排列。序號symbol寬高固定,位置左固定;圖片寬高固定,位置左固定;段落只需要位置左固定即可。

總結

通過利用Kitchen的智能排版功能,我們已經實現了想要的效果,節約了大把時間,以后的界面設計效率將會極大提升。當然,還有很多其他的使用場景,各位可以自己在實戰中去體驗。


歡迎掃描關注我的微信公眾號。熱愛設計,關注用戶體驗,分享設計思考。

公眾號回復以下關鍵詞獲取設計資源

* 回復“軟件”可以獲取全套設計軟件(包括win系統和Mac系統)

* 回復"PS"可獲取最新版PS cc 2019

* 回復“字體”可獲取最全的設計常用字體

* 回復“C4D”可獲取從新手到進階全套C4D視頻教程

* 回復“筆刷”可獲最全的筆刷資源

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容