Sketch 52 有哪些值得關注的功能?來看這份總結!
@燒燉:在上一篇文章 ofollow,noindex" target="_blank">《幫你大幅提高設計效率的Sketch Symbol 深度指南》 中,我與大家分享了自己使用 Sketch Symbol 的心得。
那時我用的 Sketch 版本還是 51.3,在文章收尾準備釋出的那天早上, Sketch 52 Beta 來了,在機場的我只來得及讓朋友截了幾張圖,匆忙放在了文章的結尾……
24小時前,Sketch 52 正式版終於釋出了。
我簡單翻譯了一下這次的更新日誌:
重點有四部分:全新介面,巢狀布林運算,資料,樣式覆蓋,讓我們逐一詳解。
一、全新介面
Sketch 52 的視覺風格更加扁平化,減少了對 macOS 原生元件和分割線的應用,重繪了畫板、分組的圖示(終於不再用系統自帶的資料夾圖示了),整體看起來更加乾淨。
除了視覺風格外,Sketch 52 的功能組織也更加清晰合理。
變化最明顯的是右側檢查器欄:頂部尺寸、位置面板被大幅壓縮,縮放(RESIZING)面板進行了重新設計,增加了便於理解的預覽。
元件中可變內容的覆蓋(OVERRIDE)面板同樣有很大改進,增加了重置所有覆蓋的按鈕,並在子元件、圖片類可變內容的下拉選框中加入了縮圖。
概括起來兩個詞:舒服,好用。
二、巢狀布林運算
布林運算是介面設計時的常用操作。在 Sketch 52 以前,因為文字、元件不能直接進行布林運算,諸如漸變文字的內容可變、布林圖形的部件更換等操作是無法實現的。
1. 文字的布林運算
現在,Sketch 中的文字可以與圖形進行四種布林運算,運算後的文字不會被變成圖形,內容依然可變。
與文字布林運算後的圖形結果,同樣支援填充、描邊(僅支援居中描邊)、外投影、內陰影、模糊等常規的樣式設定。
2. 元件的布林運算
元件的布林運算規則與文字的相同,元件中布林運算過的子元件也可以被覆蓋。
支援文字與元件的布林運算,為我們改進設計流程帶來了新的思路。
三、資料
在 Sketch 52 中新增了資料(Data)這一功能,可以讓我們使用資料批量填充元件的內容。
選中同一元件的多個例項(在畫板中的個體),在右側的覆蓋(OVERRIDES)面板中,點選可變內容標題旁的資料圖示,選擇要使用的資料集,即可填充到元件。
顯然,Sketch 中預置的英文資料、西方人頭像不適合我們日常的設計工作。那麼,要如何引入我們自己的資料呢?
點選頂部選單欄 Sketch – > Preferences ,在 Data 選項卡中點「Add Data…」按鈕,從本地選擇要使用的資料。文字資料需要選擇 .txt 格式的檔案(一行一條),圖片則是選擇圖片所在的資料夾。
這裡需要注意的是,如果資料來源對應的檔案發生改變,比如我們修改了 txt 中某幾行的文字,之前填充過的內容不會被更新。再次使用該資料集進行填充時,應用的才是更改後的內容。
Sketch 52 的資料是一項革命性的功能,它從底層上為給元件快速填充資料開拓了更多可能。往深研究,我們可以編寫自己的 Sketch 外掛,來自動為元件填充各項資料。
四、樣式覆蓋
在 Sketch 52 以前,要為元件內的文字、圖形更換字型、字號、顏色,只能靠複製元件,或是將圖形制作為蒙版來對付。這樣的做法,在進行一款產品的整體元件化設計時,會導致元件的冗餘。
現在,樣式覆蓋(Style Override)的出現徹底解決了這個問題。
當我們為元件內的文字、圖形指定了樣式後,就可以在使用元件的地方對樣式進行覆蓋。
樣式覆蓋可以和子元件的布林運算一起使用,從而實現上圖中換衣服款式、換顏色的效果。
以上四部分,就是 Sketch 52 的主要更新內容,你能想到什麼有趣的用途呢?
另外,在更新到 Sketch 52 前,請一定注意:Sketch 52 開啟並儲存過的檔案,在51.x 及以下版本開啟後無法正常顯示。如果團隊人數較多,建議選擇合適的時間大家集體更新,避免因軟體版本不同影響協作。
五、問題回覆與勘誤
1. 問題回覆
因為平時較少登入公眾號後臺,錯過了一些留言的回覆時間(公眾號後臺超過48小時不允許回覆),在這裡專門回覆一下。
有位暱稱為 Victor Lin 的朋友留言問:
我把文字做成symbol了,然後我使用文字元件的時候遇到了幾個問題: 1、文字超過symbol本身的字型不會自動展開 2、做成symbol的文字好像做不了內容跟隨?還是回到第一個問題。
關於這個問題,的確如他所描述的,在目前版本的 Sketch 中, 元件的尺寸只能外部改變(人為),不能由內自行改變,所以即便元件內部的文字設定為自動尺寸,元件本身也無法做內容跟隨。如果只是要將不同樣式的文字做成元件方便統一,可以嘗試 Sketch 52 的樣式覆蓋功能。
2. 勘誤
在上一篇文章中,我寫過:
「如上圖,當文字被尺寸設定為 Auto 時,根據對齊方式的不同,其尺寸可變的一側(左對齊文字的右側,右對齊文字的左側,不包括居中對齊)的組或圖層會與文字保持固定的距離。」
這段存在一個問題。
如上圖,事實上,尺寸為 Auto 的居中對齊文字,其右側內容也能夠進行自動跟隨。有心的朋友可以用上篇文章中的原始檔自己實驗。
歡迎關注作者的微信公眾號:「燒燉」