工作中發(fā)現(xiàn),雖然僅使用Sketch 基礎(chǔ)功能也能很好的勝任設(shè)計(jì)工作,但是如果能掌握一些實(shí)用的小技巧則會讓你的工作更加輕松。所以從本期開始,會陸續(xù)寫一些關(guān)于 sketch 方面鮮為人知的小知識,可能會包括快捷操作,組件,庫,實(shí)用插件等等,希望這系列的文章能拋磚引玉,對大家有所啟發(fā)。
既然是冷知識,往往很難系統(tǒng)化的去梳理,可能會比較零散,所以大家看到感興趣的小技巧最好去動手試下,應(yīng)該就能很快明白了。
每個(gè)人都有自己的使用習(xí)慣,套路,所以很難知道我寫的對你來說是冷還是熱。我只是把我自己從第一次使用 sketch 到現(xiàn)在的過程中,覺得是比較冷門但又很實(shí)用的小技巧分享出來。所以,學(xué)到了就點(diǎn)個(gè)贊,老司機(jī)們就請見諒吧。
一、在屬性欄中快捷修改對象屬性
平時(shí)大家在修改對象時(shí),可以選擇對象并直接進(jìn)行縮放,其結(jié)果往往容易出現(xiàn)偏差,比如小數(shù)像素,沒有對齊等等,直接在右側(cè)屬性欄通過數(shù)值來操作會方便很多。
1. 鼠標(biāo)、Shift、Option實(shí)現(xiàn)快速修改
主界面中的右側(cè)的屬性欄中可以單擊屬性值以快速遞增或遞減該值(注意要把鼠標(biāo)放在文字的上下方位內(nèi),出現(xiàn)左右箭頭才可以快速修改)。如果按住 Shift鍵,Sketch 將相應(yīng)地將值遞增或遞減10倍,按住 Option鍵會將其增加/減少十分之一。
2. 屬性欄還能支持組合修改
支持簡單數(shù)學(xué)公式,支持樣式單位L(中心點(diǎn)左對齊)R(中心點(diǎn)居右)C(中心點(diǎn)居中)M(中心點(diǎn)居中)T(中心點(diǎn)置頂)B(中心點(diǎn)底部對齊),支持圓角快速自定義(格式是X;Y;N;M,順序是左上-右上-右下-左下),能幫助快速精確調(diào)整,是不是很高級?
△ 數(shù)字+功能組合操作
△ 簡單數(shù)學(xué)公式計(jì)算
△ 圓角快捷設(shè)置
二、圖層操作上的小技巧
在剛開始使用 sketch 時(shí),經(jīng)常會發(fā)生誤操作,比如移錯(cuò)圖層。比如你一開始選擇到了某個(gè)圖層,移動的時(shí)候還是把圖層組給移動了,很頭疼。所以在多圖層堆疊時(shí),有幾個(gè)快捷鍵技巧挺實(shí)用。
當(dāng)圖層深埋在一堆文件夾中時(shí),可以直接按住 command+鼠標(biāo)左鍵,可以快速選擇組內(nèi)的圖層。
按住 Option,就會只選擇完全位于某個(gè)圖形區(qū)域內(nèi)的圖層,避免誤選。(舉個(gè)例子,在一個(gè)有底部背景大圖上移動界面元素,但是又不想選中底部大圖,除了用鎖定圖層的方法解決這個(gè)問題,按 Option 也能很方便的解決)
△ 多圖層堆疊的情況
△ 多選且不想移動某些元素
同時(shí)按住 option+command 可以做到單獨(dú)移動圖層,鼠標(biāo)焦點(diǎn)可以不在被選圖層上,如果不按這2個(gè)快捷鍵組合,在元素區(qū)域外是沒法移動的,當(dāng)在界面中有大量圖層時(shí),也可以避免誤操作到其他圖層。(筆者強(qiáng)烈推薦,這個(gè)組合鍵經(jīng)常用到,對于解決選擇移動問題非常有幫助)
如果有重疊圖層,尤其是上層把下層遮住時(shí),要直接選擇它會比較麻煩,此時(shí)可以選擇最上層圖層右鍵選擇想要的圖層,結(jié)合前面提到的快捷鍵進(jìn)行移動或者修改操作。
對齊圖層:Control-Command-V 垂直方向上的等分;Control-Command-H 水平方向上的等分,這個(gè)快捷鍵非常常用,比每次點(diǎn)擊右上角的對齊工具要方便很多。
調(diào)整圖層:對圖層放大縮小是一個(gè)經(jīng)常需要用到的操作,但是如果某些圖層帶有圖層樣式,比如描邊,投影,圓角這些,在直接縮放時(shí)并不能同時(shí)縮放,比如長寬各為50px且描邊為10px的形狀改為長寬100px的形狀時(shí),其描邊還是為10px。那怎么解決這個(gè)問題呢?
其實(shí) sketch 是有2種縮放形式,一種是直接縮放,不改變元素樣式只修改基本屬性大?。涣硪环N是變換縮放,可以同時(shí)縮放基本屬性以及樣式屬性。操作方式是從菜單中選擇「 圖層」>「變換」>「縮放… 」(或按Command-K),這個(gè)對 symbol 也有效果。
三、圖層約束技巧
首先看看什么是圖層約束,直接看圖吧,圖層約束能做到下面這種效果:
在做界面適配的時(shí)候是不是很方便,那具體如何做到呢?
1. 圖層縮放固定邊距
在元素屬性欄,可以找到約束設(shè)置,根據(jù)需要設(shè)置子元素與父元素之間的關(guān)系(注意事項(xiàng):圖層約束必須是建立在圖層組中,如果沒有組的概念,則無法使用圖層約束;子父級關(guān)系是指參照關(guān)系,比如下圖中白色塊相對于底部的藍(lán)色塊,白色就是子級,藍(lán)色就是父級,而對 resizing 的設(shè)置其實(shí)就是設(shè)置子級)
△ 子父級關(guān)系
△ Apple官方組件關(guān)于圖層約束的設(shè)置
2. symbol內(nèi)容自動適應(yīng)
在輸入項(xiàng)里有光標(biāo)的情況下,能自動根據(jù)內(nèi)容長短改變位置。
四、圖形操作技巧
旋轉(zhuǎn)是需要經(jīng)常用到的操作,在 sketch 中也是有很多方式可以實(shí)現(xiàn)圖層旋轉(zhuǎn),需要看情況來使用。
通過屬性欄的角度設(shè)置直接設(shè)置圓角值,在旋轉(zhuǎn)角度很明確的時(shí)候很方便。
通過工具欄上的旋轉(zhuǎn)選項(xiàng)進(jìn)行旋轉(zhuǎn),優(yōu)點(diǎn)是選擇后可以在畫面上任何位置對對象進(jìn)行旋轉(zhuǎn)。
直接通過快捷鍵實(shí)現(xiàn)旋轉(zhuǎn),按住 command鍵并拖動對象其中一個(gè)控制柄即可旋轉(zhuǎn),這個(gè)快捷操作,在需要多頻次調(diào)整旋轉(zhuǎn)時(shí),會很實(shí)用。
另外,補(bǔ)充一點(diǎn)旋轉(zhuǎn)以外的小知識,在做變換的時(shí)候,comand鍵也很有用。它可以讓對象變換只從一個(gè)方向上調(diào)整。
五、蒙版技巧
在 sketch 中的蒙版功能很強(qiáng)大,不光對圖層可以使用蒙版,對圖層組也可以使用,但在蒙版組內(nèi),新建任何圖層或者圖層組都會被自動蒙版,有時(shí)候反而會成為麻煩。
有2種辦法可以解除蒙版:
1)把圖層或組拖出蒙版組之外,但是這樣會破壞元素結(jié)構(gòu);
2)直接選擇想要解除的圖層,右鍵忽略底層蒙版即可,這樣做的好處是,可以不會破壞對象組織結(jié)構(gòu)。
在 sketch 中有2種形式的蒙版,一種是基于圖形,另一種是基于透明度來實(shí)現(xiàn)的,常用漸變來做圖片漸隱效果。這2個(gè)都很常用,就不過多贅述。
六、sketch文件壓縮
在源文件中使用很多高清圖后,往往會讓整個(gè) sketch 文件變的很大,一是傳輸不方便,另一個(gè)也會導(dǎo)致文件卡頓,反應(yīng)慢。此時(shí)可以使用圖層-圖片-最小尺寸來對文件進(jìn)行快速壓縮。
七、批量替換顏色
在進(jìn)行多頁面多畫板修改顏色時(shí),在不是 symbol 的情況下,修改起來會很費(fèi)時(shí)間。其實(shí) sketch 內(nèi)置了批量修改顏色功能,只是可能用的人不多。
具體操作為:編輯——查找并替換顏色(option+command+F),需要注意顏色透明度,根據(jù)實(shí)際需要判斷是否勾選。
△ 圖片來源:sketch官網(wǎng)
八、快捷切換視圖
設(shè)計(jì)過程中,需要經(jīng)常切換不同視圖來查看設(shè)計(jì)內(nèi)容,簡直超高頻的使用需求!所以對于這些快捷鍵必須要在這里提一句:
Command +1 完整展示頁面里的所有內(nèi)容,適合全局展示,查看一致性。
Command +2 將選中的元素放大到合適屏幕的尺寸,這個(gè)視圖有一個(gè)妙用就是可以把復(fù)制的元素直接復(fù)制到當(dāng)前元素的中間,這個(gè)特性非常實(shí)用,自己試過就知道了,肯定會有用到的地方。
Command +3 將選中的元素顯示在屏幕中央。
Command + 0 以實(shí)際像素模式預(yù)覽頁面,即在100%大小下看設(shè)計(jì)效果。
九、圖層對齊
圖層對齊也是經(jīng)常要用到的操作。直接與對象對齊的話,Sketch 會將圖層對齊到所有選定對象的最外層。但要將圖層與特定對象對齊,怎么操作呢?
比如想讓下圖中兩個(gè)元素以正方形為參照物進(jìn)行居中,那應(yīng)該先使用圖層列表中的鎖定按鈕或使用 Shift-Command-L 鎖定該圖層,然后再執(zhí)行對齊操作即可。
十、設(shè)置sketch形狀默認(rèn)值
剛開始使用 sketch 時(shí),新建矩形,每次都會自帶描邊,然后再手動關(guān)閉描邊,很麻煩。這個(gè)默認(rèn)值能改嗎?當(dāng)然可以。
操作:首先建一個(gè)不帶描邊的矩形,然后選擇 layer-style-set style as default (這個(gè)功能以前是放在 Edit 里的,更新后合并到了 style 中)。搞定,下次再新建形狀時(shí)就會以你剛設(shè)置的樣式作為默認(rèn)值了。
另外再多說一句,文章中所提到的小技巧,一定要自己動手去試試啊,要不然看過了你也還是用不到,不信?那就試試看。
好了,本期sketch冷知識就先介紹到這里,下一期可能會分享symbols和Libraries的相關(guān)冷知識,敬請期待~
官方參考
本文由 @彩云Sky 原創(chuàng)發(fā)布,未經(jīng)許可,禁止轉(zhuǎn)載。