Sketch畢竟沒(méi)有什么學(xué)習(xí)曲線(xiàn),頗易上手,相應(yīng)的也時(shí)常導(dǎo)致新手在一開(kāi)始就忽略掉一些重要的、高頻的使用小技巧,而將一些稍許費(fèi)力耗時(shí)的方式一路沿用下去。這篇內(nèi)容所針對(duì)的便是這樣的情況。幾乎沒(méi)有進(jìn)階的要點(diǎn),只針對(duì)初學(xué)的同學(xué)培養(yǎng)正確習(xí)慣,還望各位老司機(jī)們見(jiàn)諒。
創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供舒蘭網(wǎng)站建設(shè)、舒蘭做網(wǎng)站、舒蘭網(wǎng)站設(shè)計(jì)、舒蘭網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、舒蘭企業(yè)網(wǎng)站模板建站服務(wù),十多年舒蘭做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。下面進(jìn)入正文。
關(guān)于對(duì)象、圖層、畫(huà)板的使用技巧1. 通過(guò)快捷鍵調(diào)整圖形的形狀選中圖形,按住 Command 鍵,然后通過(guò)上、下、左、右方向鍵即可按1像素為單位調(diào)整圖形形狀。同時(shí)按住 Command + Shift + 方向鍵,則可以按10像素為單位進(jìn)行調(diào)整。
2. 復(fù)制元素選中某元素,按 Command + D 即可進(jìn)行復(fù)制;復(fù)制出的新元素默認(rèn)與原有元素的位置相同,且覆蓋于原有元素之上。
此外,按住 Option 健,同時(shí)拖拽目標(biāo)元素,同樣可實(shí)現(xiàn)復(fù)制;保持復(fù)制出的新元素仍處于選中態(tài),并連續(xù)使用 Command + D 快捷鍵,即可按照之前手動(dòng)拖拽的距離為間隔單位實(shí)現(xiàn)多重復(fù)制。
3. 智能選擇按住 Option 鍵,面向多個(gè)元素拉選擇框,最終只有完全處于選擇框內(nèi)部的元素會(huì)被選中,而其他元素會(huì)被忽略。
4. 分組與解組選中多個(gè)元素,按 Command + G 將其合并為一組。選中某個(gè)組,按 Command + Shift + G 則可實(shí)現(xiàn)解組。
5. 組內(nèi)單選要選中某分組內(nèi)的特定元素,無(wú)需到圖層列表中尋找,按住 Command 鍵,同時(shí)用鼠標(biāo)直接指向該元素,即可“穿透”分組,直接選中元素。
6. 將畫(huà)板的縮放比還原為100%按 Command + 0,即可快速將畫(huà)板的縮放比還原為100%。
7. 調(diào)整縮放比,使所有的畫(huà)板得以同屏呈現(xiàn)按 Command + 1,即可快速將畫(huà)板調(diào)整為恰當(dāng)?shù)目s放比,所有的畫(huà)板得以同時(shí)呈現(xiàn)在視圖當(dāng)中。
8. 使視圖聚焦于選中的元素按 Command + 2,即可將編輯區(qū)域的視圖焦點(diǎn)快速移至處于選中態(tài)的元素或畫(huà)板。
9. 將元素置于圖層序列的首位或末位按住 Option 鍵,Sketch頂部工具欄里的“向前(Forward)”、“向后(Backward)”按鈕會(huì)自動(dòng)變?yōu)?ldquo;最前(To Front)”、“最后(To Back)”,即可使選中的元素排列到圖層序列的首位或末尾。
10. 重命名圖層選中某元素,按 Command + R,該元素在圖層列表中的條目即進(jìn)入可編輯狀態(tài),此時(shí)輸入新的圖層名稱(chēng)即可。
關(guān)于元素的編輯與導(dǎo)出1. 測(cè)量元素間距選中一個(gè)或多個(gè)元素,按住 Option 鍵,同時(shí)將鼠標(biāo)指向要測(cè)量間距的目標(biāo)元素。在移動(dòng)元素時(shí),也可同時(shí)按住 Option 鍵,即可在移動(dòng)過(guò)程中即時(shí)查看元素距離特定元素或畫(huà)板邊緣的距離。
2. 通過(guò)數(shù)字鍵設(shè)置元素的不透明度選中元素,然后按一個(gè)或一組數(shù)字鍵即可直接設(shè)置其不透明度 (alpha 值),例如“1”代表10%,“5”代表50%,“9”代表90%,“75”代表75%,等等。
3. 單獨(dú)調(diào)整某個(gè)位置上的圓角半徑你可以為元素的四角獨(dú)立設(shè)置不同的圓角半徑。選中該元素,在右側(cè)面板的“半徑 (Radius)”當(dāng)中輸入一組四個(gè)數(shù)字,由分號(hào)隔開(kāi),分別代表左上角、右上角、右下角、左下角的半徑值,例如“10;20;30;40”。
4. 訂制快捷鍵你可以為自己常用的 Sketch 功能設(shè)置快捷鍵。進(jìn)入 macOS 的系統(tǒng)偏好設(shè)置 – 鍵盤(pán) – 快捷鍵,選擇左側(cè)列表中的“應(yīng)用快捷鍵”,點(diǎn)擊右側(cè)的“+”按鈕,在對(duì)話(huà)窗口的“應(yīng)用程序”列表中選擇 “Sketch”,在“菜單標(biāo)題”中輸入你所需的功能在 Sketch 菜單欄里的準(zhǔn)確名稱(chēng),然后設(shè)定自己的快捷鍵組合即可。
5. 在屬性檢查器中使用數(shù)學(xué)運(yùn)算符Sketch 可以在右側(cè)檢查器面板的文本框當(dāng)中執(zhí)行數(shù)字運(yùn)算。例如你想將當(dāng)前矩形的寬度翻倍,那么可以在“寬度 (Width)”當(dāng)中的數(shù)字后面輸入“*2”,代表“乘以2”。
6. 復(fù)雜圖形對(duì)于一些復(fù)雜的圖形,例如多邊形或星型,可以在右側(cè)檢查器面板中設(shè)置邊 (Sides)或頂點(diǎn) (Points)的數(shù)量。
7. 旋轉(zhuǎn)復(fù)制(萬(wàn)花筒效果)在 Sketch 的工具欄上右鍵單擊,選擇“訂制工具欄 (Customize Toolbar)”,然后將“旋轉(zhuǎn)復(fù)制 (Rotate Copies)”按鈕拖入工具欄。
選中某元素,點(diǎn)擊“旋轉(zhuǎn)復(fù)制”按鈕,輸入需要復(fù)制出的元素?cái)?shù)量,點(diǎn)擊“OK”即可。
8. 切片切片工具 (快捷鍵“S”)可以拖拽出矩形區(qū)域,供你導(dǎo)出圖形。但導(dǎo)出區(qū)域未必要覆蓋到元素或畫(huà)布整體,你可以把切片作為一種靈活的截屏工具進(jìn)行使用。
9. 導(dǎo)出元素、分組或畫(huà)板選中某個(gè)元素、分組或畫(huà)板,在右側(cè)檢查器面板的底部點(diǎn)擊“Make Exportable”,在展開(kāi)的選項(xiàng)單當(dāng)中選擇導(dǎo)出規(guī)格、文件名后綴和文件格式,即可開(kāi)始導(dǎo)出。
10. 導(dǎo)出高分辨率素材我們?cè)谠O(shè)計(jì)界面時(shí)通常會(huì)按照字面意義的像素規(guī)格來(lái)設(shè)置畫(huà)板 (1x規(guī)格),例如使用375×667的畫(huà)板來(lái)設(shè)計(jì)4.7寸規(guī)格的界面。但你需要面向高像素密度的屏幕導(dǎo)出畫(huà)板或局部素材 – 在“Make Exportable”選項(xiàng)單的“Size”當(dāng)中輸入“2x”或更高值即可?;蛘吣阋部梢灾苯釉谶@里輸入所需導(dǎo)出的具體規(guī)格,例如“750px”等等。
關(guān)于 symbols1. 通過(guò) symbols 實(shí)現(xiàn)元素復(fù)用怎樣判斷是否要使用 symbols?答案在于目標(biāo)元素的復(fù)用性。symbols 就像郵戳,制作了一個(gè)之后便可以反復(fù)使用。在 Sketch 中,當(dāng)你修改了主 symbol,所有來(lái)自于該 symbol 的實(shí)例對(duì)象都會(huì)被自動(dòng)更新,這能使設(shè)計(jì)稿的迭代效率得到極大提升。
2. 創(chuàng)建 symbol通過(guò) symbols 將復(fù)用率較高的設(shè)計(jì)模式進(jìn)行打包。舉例來(lái)說(shuō),我們現(xiàn)在有一個(gè)卡片組件,其中包含一個(gè)圓形圖片、一段文字描述以及一個(gè)按鈕。完成布局設(shè)計(jì),將它們打包成組,然后在工具欄中點(diǎn)擊“Create Symbol”按鈕即可。
3. 通過(guò)屬性覆寫(xiě) (overrides) 對(duì)symbol進(jìn)行訂制譬如我們將一個(gè)卡片模式打包成為symbol,在日常使用時(shí)通常需要在不修改主symbol的前提下更改每個(gè)實(shí)例當(dāng)中的具體屬性值,例如圖片、文字等等。屬性覆寫(xiě)功能 (overrides) 就是用來(lái)解決這個(gè)問(wèn)題的。
將symbol插入到畫(huà)板當(dāng)中,保持選中態(tài),右側(cè)檢查器面板當(dāng)中會(huì)出現(xiàn)“Overrides”選項(xiàng)單。下圖所示的范例共包含4項(xiàng)可覆寫(xiě)文本字段,你只需在這里進(jìn)行修改,便能使該symbol衍生出的每一個(gè)實(shí)例對(duì)象都體現(xiàn)出不同的內(nèi)容。
4. 創(chuàng)建symbol之前,對(duì)圖層進(jìn)行重命名為了使可覆寫(xiě)的屬性在檢查器面板當(dāng)中呈現(xiàn)出恰當(dāng)?shù)膶傩悦?ldquo;姓名”、“職能”等等,而不是在創(chuàng)建symbol時(shí)所使用的特定范例內(nèi)容,你可以在打包創(chuàng)建symbol之前對(duì)圖層進(jìn)行重命名,使其與最終希望呈現(xiàn)出的屬性名稱(chēng)一一對(duì)應(yīng)。
5. 為特定的元素禁用屬性覆寫(xiě)symbol當(dāng)中并非每一個(gè)元素都需要支持覆寫(xiě)功能,譬如那些永遠(yuǎn)不會(huì)發(fā)生內(nèi)容變動(dòng)的屬性。如果不想該屬性出現(xiàn)在symbol的檢查器面板當(dāng)中,只需在創(chuàng)建symbol之前在圖層列表當(dāng)中將該圖層鎖定即可(鎖型圖標(biāo))。
6. symbols嵌套“設(shè)計(jì)模式”當(dāng)中本就包含著多層次的概念,這同樣能體現(xiàn)到symbol的實(shí)現(xiàn)方式里。譬如我們首先定義了一個(gè)全局通用的按鈕symbol,然后我們還需要一個(gè)全局通用的工具欄symbol,而這個(gè)工具欄當(dāng)中又會(huì)用到剛剛定義的按鈕,這時(shí)我們便可以將按鈕symbol插入到工具欄當(dāng)中,并一同打包創(chuàng)建為新的symbol,實(shí)現(xiàn)嵌套。如果按鈕symbol得到樣式更新,那么工具欄symbol當(dāng)中的按鈕樣式便可自動(dòng)更新。
7. symbols的尺寸可變你可以隨意調(diào)整symbols實(shí)例對(duì)象的尺寸,而不用受制于symbol本身的規(guī)格。不過(guò)一旦將來(lái)主symbol的尺寸發(fā)生變化,所有實(shí)例都將統(tǒng)一更新為新的尺寸樣式,而忽略掉你之前所做的調(diào)整。
8. 從symbol中分離要將某實(shí)例對(duì)象從原本的symbol當(dāng)中分離 (譬如要基于該symbol的布局設(shè)計(jì)更為復(fù)雜的模式時(shí)),在該對(duì)象上右鍵單擊,選擇“Detach from Symbol”,這將使實(shí)例變?yōu)槠胀ǖ膱D層組。