一些關(guān)于sketch方面鮮為人知的小知識,可能會包括快捷操作,組件,庫,實(shí)用插件等等,歡迎關(guān)注

2018-09-25 2294 0

工作中發(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)載。


15
評論區(qū)(0)
正在加載評論...