Sketch畢竟沒有什么學(xué)習(xí)曲線损同,頗易上手,相應(yīng)的也時常導(dǎo)致新手在一開始就忽略掉一些重要的堕伪、高頻的使用小技巧揖庄,而將一些稍許費(fèi)力耗時的方式一路沿用下去。這篇內(nèi)容所針對的便是這樣的情況欠雌。幾乎沒有進(jìn)階的要點(diǎn)蹄梢,只針對初學(xué)的同學(xué)培養(yǎng)正確習(xí)慣,還望各位老司機(jī)們見諒富俄。下面進(jìn)入正文禁炒。
關(guān)于對象、圖層霍比、畫板的使用技巧
1.通過快捷鍵調(diào)整圖形的形狀
選中圖形幕袱,按住 Command 鍵,然后通過上悠瞬、下们豌、左涯捻、右方向鍵即可按1像素為單位調(diào)整圖形形狀。同時按住 Command + Shift +?方向鍵望迎,則可以按10像素為單位進(jìn)行調(diào)整障癌。
2.復(fù)制元素
選中某元素,按 Command + D 即可進(jìn)行復(fù)制辩尊;復(fù)制出的新元素默認(rèn)與原有元素的位置相同涛浙,且覆蓋于原有元素之上。
此外摄欲,按住 Option 健轿亮,同時拖拽目標(biāo)元素,同樣可實(shí)現(xiàn)復(fù)制胸墙;保持復(fù)制出的新元素仍處于選中態(tài)我注,并連續(xù)使用 Command + D 快捷鍵,即可按照之前手動拖拽的距離為間隔單位實(shí)現(xiàn)多重復(fù)制劳秋。
3.智能選擇
按住 Option 鍵仓手,面向多個元素拉選擇框,最終只有完全處于選擇框內(nèi)部的元素會被選中玻淑,而其他元素會被忽略嗽冒。
4.分組與解組
選中多個元素,按 Command + G 將其合并為一組补履。選中某個組添坊,按 Command + Shift + G 則可實(shí)現(xiàn)解組。
5.組內(nèi)單選
要選中某分組內(nèi)的特定元素箫锤,無需到圖層列表中尋找贬蛙,按住 Command 鍵,同時用鼠標(biāo)直接指向該元素谚攒,即可“穿透”分組阳准,直接選中元素。
6.將畫板的縮放比還原為100%
按 Command + 0馏臭,即可快速將畫板的縮放比還原為100%野蝇。
7.調(diào)整縮放比,使所有的畫板得以同屏呈現(xiàn)
按 Command + 1括儒,即可快速將畫板調(diào)整為恰當(dāng)?shù)目s放比绕沈,所有的畫板得以同時呈現(xiàn)在視圖當(dāng)中。
8.使視圖聚焦于選中的元素
按 Command + 2帮寻,即可將編輯區(qū)域的視圖焦點(diǎn)快速移至處于選中態(tài)的元素或畫板乍狐。
9.將元素置于圖層序列的首位或末位
按住 Option 鍵,Sketch頂部工具欄里的“向前(Forward)”固逗、“向后(Backward)”按鈕會自動變?yōu)椤白钋?To Front)”浅蚪、“最后(To Back)”藕帜,即可使選中的元素排列到圖層序列的首位或末尾。
10.重命名圖層
選中某元素惜傲,按 Command + R耘戚,該元素在圖層列表中的條目即進(jìn)入可編輯狀態(tài),此時輸入新的圖層名稱即可操漠。
關(guān)于元素的編輯與導(dǎo)出
1.測量元素間距
選中一個或多個元素,按住 Option 鍵饿这,同時將鼠標(biāo)指向要測量間距的目標(biāo)元素浊伙。在移動元素時,也可同時按住 Option 鍵长捧,即可在移動過程中即時查看元素距離特定元素或畫板邊緣的距離嚣鄙。
2.通過數(shù)字鍵設(shè)置元素的不透明度
選中元素,然后按一個或一組數(shù)字鍵即可直接設(shè)置其不透明度?(alpha 值)串结,例如“1”代表10%哑子,“5”代表50%,“9”代表90%肌割,“75”代表75%卧蜓,等等。

3.單獨(dú)調(diào)整某個位置上的圓角半徑
你可以為元素的四角獨(dú)立設(shè)置不同的圓角半徑把敞。選中該元素弥奸,在右側(cè)面板的“半徑?(Radius)”當(dāng)中輸入一組四個數(shù)字,由分號隔開奋早,分別代表左上角盛霎、右上角、右下角耽装、左下角的半徑值愤炸,例如“10;20;30;40”。

4.訂制快捷鍵
你可以為自己常用的 Sketch 功能設(shè)置快捷鍵掉奄。進(jìn)入 macOS 的系統(tǒng)偏好設(shè)置?-?鍵盤?-?快捷鍵规个,選擇左側(cè)列表中的“應(yīng)用快捷鍵”,點(diǎn)擊右側(cè)的“+”按鈕挥萌,在對話窗口的“應(yīng)用程序”列表中選擇?“Sketch”绰姻,在“菜單標(biāo)題”中輸入你所需的功能在 Sketch 菜單欄里的準(zhǔn)確名稱,然后設(shè)定自己的快捷鍵組合即可引瀑。

5.在屬性檢查器中使用數(shù)學(xué)運(yùn)算符
Sketch 可以在右側(cè)檢查器面板的文本框當(dāng)中執(zhí)行數(shù)字運(yùn)算狂芋。例如你想將當(dāng)前矩形的寬度翻倍,那么可以在“寬度?(Width)”當(dāng)中的數(shù)字后面輸入“*2”憨栽,代表“乘以2”帜矾。

6.復(fù)雜圖形
對于一些復(fù)雜的圖形翼虫,例如多邊形或星型,可以在右側(cè)檢查器面板中設(shè)置邊?(Sides)或頂點(diǎn)?(Points)的數(shù)量屡萤。

7.旋轉(zhuǎn)復(fù)制?(萬花筒效果)
在 Sketch 的工具欄上右鍵單擊珍剑,選擇“訂制工具欄?(Customize Toolbar)”,然后將“旋轉(zhuǎn)復(fù)制?(Rotate Copies)”按鈕拖入工具欄死陆。
選中某元素招拙,點(diǎn)擊“旋轉(zhuǎn)復(fù)制”按鈕,輸入需要復(fù)制出的元素數(shù)量措译,點(diǎn)擊“OK”即可别凤。

8.切片
切片工具?(快捷鍵“S”)可以拖拽出矩形區(qū)域,供你導(dǎo)出圖形领虹。但導(dǎo)出區(qū)域未必要覆蓋到元素或畫布整體规哪,你可以把切片作為一種靈活的截屏工具進(jìn)行使用。

9.導(dǎo)出元素塌衰、分組或畫板
選中某個元素诉稍、分組或畫板,在右側(cè)檢查器面板的底部點(diǎn)擊“Make Exportable”最疆,在展開的選項單當(dāng)中選擇導(dǎo)出規(guī)格杯巨、文件名后綴和文件格式,即可開始導(dǎo)出肚菠。

10.導(dǎo)出高分辨率素材
我們在設(shè)計界面時通常會按照字面意義的像素規(guī)格來設(shè)置畫板?(1x規(guī)格)舔箭,例如使用375x667的畫板來設(shè)計4.7寸規(guī)格的界面。但你需要面向高像素密度的屏幕導(dǎo)出畫板或局部素材?-?在“Make Exportable”選項單的“Size”當(dāng)中輸入“2x”或更高值即可蚊逢〔惴觯或者你也可以直接在這里輸入所需導(dǎo)出的具體規(guī)格,例如“750px”等等烙荷。

關(guān)于 symbols
1.通過 symbols 實(shí)現(xiàn)元素復(fù)用
怎樣判斷是否要使用 symbols镜会?答案在于目標(biāo)元素的復(fù)用性。symbols 就像郵戳终抽,制作了一個之后便可以反復(fù)使用戳表。在 Sketch 中,當(dāng)你修改了主 symbol昼伴,所有來自于該 symbol 的實(shí)例對象都會被自動更新匾旭,這能使設(shè)計稿的迭代效率得到極大提升。

2.創(chuàng)建 symbol
通過 symbols 將復(fù)用率較高的設(shè)計模式進(jìn)行打包圃郊。舉例來說价涝,我們現(xiàn)在有一個卡片組件,其中包含一個圓形圖片持舆、一段文字描述以及一個按鈕色瘩。完成布局設(shè)計伪窖,將它們打包成組,然后在工具欄中點(diǎn)擊“Create Symbol”按鈕即可居兆。

3.通過屬性覆寫?(overrides)?對symbol進(jìn)行訂制
譬如我們將一個卡片模式打包成為symbol覆山,在日常使用時通常需要在不修改主symbol的前提下更改每個實(shí)例當(dāng)中的具體屬性值,例如圖片泥栖、文字等等簇宽。屬性覆寫功能?(overrides)?就是用來解決這個問題的。
將symbol插入到畫板當(dāng)中吧享,保持選中態(tài)晦毙,右側(cè)檢查器面板當(dāng)中會出現(xiàn)“Overrides”選項單。下圖所示的范例共包含4項可覆寫文本字段耙蔑,你只需在這里進(jìn)行修改,便能使該symbol衍生出的每一個實(shí)例對象都體現(xiàn)出不同的內(nèi)容孤荣。

4.創(chuàng)建symbol之前甸陌,對圖層進(jìn)行重命名
為了使可覆寫的屬性在檢查器面板當(dāng)中呈現(xiàn)出恰當(dāng)?shù)膶傩悦纭靶彰毖喂伞ⅰ奥毮堋钡鹊惹恚皇窃趧?chuàng)建symbol時所使用的特定范例內(nèi)容,你可以在打包創(chuàng)建symbol之前對圖層進(jìn)行重命名疯汁,使其與最終希望呈現(xiàn)出的屬性名稱一一對應(yīng)牲尺。

5.為特定的元素禁用屬性覆寫
symbol當(dāng)中并非每一個元素都需要支持覆寫功能,譬如那些永遠(yuǎn)不會發(fā)生內(nèi)容變動的屬性幌蚊。如果不想該屬性出現(xiàn)在symbol的檢查器面板當(dāng)中谤碳,只需在創(chuàng)建symbol之前在圖層列表當(dāng)中將該圖層鎖定即可?(鎖型圖標(biāo))。

6.symbols嵌套
“設(shè)計模式”當(dāng)中本就包含著多層次的概念溢豆,這同樣能體現(xiàn)到symbol的實(shí)現(xiàn)方式里蜒简。譬如我們首先定義了一個全局通用的按鈕symbol,然后我們還需要一個全局通用的工具欄symbol漩仙,而這個工具欄當(dāng)中又會用到剛剛定義的按鈕搓茬,這時我們便可以將按鈕symbol插入到工具欄當(dāng)中,并一同打包創(chuàng)建為新的symbol队他,實(shí)現(xiàn)嵌套卷仑。如果按鈕symbol得到樣式更新,那么工具欄symbol當(dāng)中的按鈕樣式便可自動更新麸折。

7.symbols的尺寸可變
你可以隨意調(diào)整symbols實(shí)例對象的尺寸锡凝,而不用受制于symbol本身的規(guī)格。不過一旦將來主symbol的尺寸發(fā)生變化磕谅,所有實(shí)例都將統(tǒng)一更新為新的尺寸樣式私爷,而忽略掉你之前所做的調(diào)整雾棺。

8.從symbol中分離
要將某實(shí)例對象從原本的symbol當(dāng)中分離?(譬如要基于該symbol的布局設(shè)計更為復(fù)雜的模式時),在該對象上右鍵單擊衬浑,選擇“Detach from Symbol”捌浩,這將使實(shí)例變?yōu)槠胀ǖ膱D層組。

本文來自Be For Web