好習慣學起來！幫新手提高效率的Sketch高頻使用技巧

@C7210?：Sketch畢竟沒有什么學習曲線，頗易上手，相應的也時常導致新手在一開始就忽略掉一些重要的、高頻的使用小技巧，而將一些稍許費力耗時的方式一路沿用下去。這篇內容所針對的便是這樣的情況。幾乎沒有進階的要點，只針對初學的同學培養正確習慣，還望各位老司機們見諒。下面進入正文。

歡迎關注譯者（高級交互設計師、貓奴、吉他手、鼓手、老狗，現就職于騰訊ISUX）的微信公眾號：Beforweb

這兒有他的訪談：《優設訪談！騰訊高級交互設計師C7210的十年設計路》

關于對象、圖層、畫板的使用技巧

1. 通過快捷鍵調整圖形的形狀

選中圖形，按住 Command 鍵，然后通過上、下、左、右方向鍵即可按1像素為單位調整圖形形狀。同時按住 Command + Shift + 方向鍵，則可以按10像素為單位進行調整。

?2. 復制元素

選中某元素，按 Command + D 即可進行復制；復制出的新元素默認與原有元素的位置相同，且覆蓋于原有元素之上。

此外，按住 Option 健，同時拖拽目標元素，同樣可實現復制；保持復制出的新元素仍處于選中態，并連續使用 Command + D 快捷鍵，即可按照之前手動拖拽的距離為間隔單位實現多重復制。

?3. 智能選擇

按住 Option 鍵，面向多個元素拉選擇框，最終只有完全處于選擇框內部的元素會被選中，而其他元素會被忽略。

?4. 分組與解組

選中多個元素，按 Command + G 將其合并為一組。選中某個組，按 Command + Shift + G 則可實現解組。

?5. 組內單選

要選中某分組內的特定元素，無需到圖層列表中尋找，按住 Command 鍵，同時用鼠標直接指向該元素，即可“穿透”分組，直接選中元素。

?6. 將畫板的縮放比還原為100%

按 Command + 0，即可快速將畫板的縮放比還原為100%。

?7. 調整縮放比，使所有的畫板得以同屏呈現

按 Command + 1，即可快速將畫板調整為恰當的縮放比，所有的畫板得以同時呈現在視圖當中。

?8. 使視圖聚焦于選中的元素

按 Command + 2，即可將編輯區域的視圖焦點快速移至處于選中態的元素或畫板。

?9. 將元素置于圖層序列的首位或末位

按住 Option 鍵，Sketch頂部工具欄里的“向前(Forward)”、“向后(Backward)”按鈕會自動變為“最前(To Front)”、“最后(To Back)”，即可使選中的元素排列到圖層序列的首位或末尾。

?10. 重命名圖層

選中某元素，按 Command + R，該元素在圖層列表中的條目即進入可編輯狀態，此時輸入新的圖層名稱即可。

?關于元素的編輯與導出

1. 測量元素間距

選中一個或多個元素，按住 Option 鍵，同時將鼠標指向要測量間距的目標元素。在移動元素時，也可同時按住 Option 鍵，即可在移動過程中即時查看元素距離特定元素或畫板邊緣的距離。

?2. 通過數字鍵設置元素的不透明度

選中元素，然后按一個或一組數字鍵即可直接設置其不透明度 (alpha 值)，例如“1”代表10%，“5”代表50%，“9”代表90%，“75”代表75%，等等。

?3. 單獨調整某個位置上的圓角半徑

你可以為元素的四角獨立設置不同的圓角半徑。選中該元素，在右側面板的“半徑 (Radius)”當中輸入一組四個數字，由分號隔開，分別代表左上角、右上角、右下角、左下角的半徑值，例如“10;20;30;40”。

?4. 訂制快捷鍵

你可以為自己常用的 Sketch 功能設置快捷鍵。進入 macOS 的系統偏好設置 - 鍵盤 - 快捷鍵，選擇左側列表中的“應用快捷鍵”，點擊右側的“+”按鈕，在對話窗口的“應用程序”列表中選擇 “Sketch”，在“菜單標題”中輸入你所需的功能在 Sketch 菜單欄里的準確名稱，然后設定自己的快捷鍵組合即可。

?5. 在屬性檢查器中使用數學運算符

Sketch 可以在右側檢查器面板的文本框當中執行數字運算。例如你想將當前矩形的寬度翻倍，那么可以在“寬度 (Width)”當中的數字后面輸入“*2”，代表“乘以2”。

6. 復雜圖形

對于一些復雜的圖形，例如多邊形或星型，可以在右側檢查器面板中設置邊 (Sides)或頂點 (Points)的數量。

?7. 旋轉復制 (萬花筒效果)

在 Sketch 的工具欄上右鍵單擊，選擇“訂制工具欄 (Customize Toolbar)”，然后將“旋轉復制 (Rotate Copies)”按鈕拖入工具欄。

選中某元素，點擊“旋轉復制”按鈕，輸入需要復制出的元素數量，點擊“OK”即可。

?8. 切片

切片工具 (快捷鍵“S”)可以拖拽出矩形區域，供你導出圖形。但導出區域未必要覆蓋到元素或畫布整體，你可以把切片作為一種靈活的截屏工具進行使用。

?9. 導出元素、分組或畫板

選中某個元素、分組或畫板，在右側檢查器面板的底部點擊“Make Exportable”，在展開的選項單當中選擇導出規格、文件名后綴和文件格式，即可開始導出。

?10. 導出高分辨率素材

我們在設計界面時通常會按照字面意義的像素規格來設置畫板 (1x規格)，例如使用375x667的畫板來設計4.7寸規格的界面。但你需要面向高像素密度的屏幕導出畫板或局部素材 - 在“Make Exportable”選項單的“Size”當中輸入“2x”或更高值即可。或者你也可以直接在這里輸入所需導出的具體規格，例如“750px”等等。

?關于 symbols

1. 通過 symbols 實現元素復用

怎樣判斷是否要使用 symbols？答案在于目標元素的復用性。symbols 就像郵戳，制作了一個之后便可以反復使用。在 Sketch 中，當你修改了主 symbol，所有來自于該 symbol 的實例對象都會被自動更新，這能使設計稿的迭代效率得到極大提升。

?2. 創建 symbol

通過 symbols 將復用率較高的設計模式進行打包。舉例來說，我們現在有一個卡片組件，其中包含一個圓形圖片、一段文字描述以及一個按鈕。完成布局設計，將它們打包成組，然后在工具欄中點擊“Create Symbol”按鈕即可。

?3. 通過屬性覆寫 (overrides) 對symbol進行訂制

譬如我們將一個卡片模式打包成為symbol，在日常使用時通常需要在不修改主symbol的前提下更改每個實例當中的具體屬性值，例如圖片、文字等等。屬性覆寫功能 (overrides) 就是用來解決這個問題的。

將symbol插入到畫板當中，保持選中態，右側檢查器面板當中會出現“Overrides”選項單。下圖所示的范例共包含4項可覆寫文本字段，你只需在這里進行修改，便能使該symbol衍生出的每一個實例對象都體現出不同的內容。

?4. 創建symbol之前，對圖層進行重命名

為了使可覆寫的屬性在檢查器面板當中呈現出恰當的屬性名，例如“姓名”、“職能”等等，而不是在創建symbol時所使用的特定范例內容，你可以在打包創建symbol之前對圖層進行重命名，使其與最終希望呈現出的屬性名稱一一對應。

?5. 為特定的元素禁用屬性覆寫

symbol當中并非每一個元素都需要支持覆寫功能，譬如那些永遠不會發生內容變動的屬性。如果不想該屬性出現在symbol的檢查器面板當中，只需在創建symbol之前在圖層列表當中將該圖層鎖定即可 (鎖型圖標)。

?6. symbols嵌套

“設計模式”當中本就包含著多層次的概念，這同樣能體現到symbol的實現方式里。譬如我們首先定義了一個全局通用的按鈕symbol，然后我們還需要一個全局通用的工具欄symbol，而這個工具欄當中又會用到剛剛定義的按鈕，這時我們便可以將按鈕symbol插入到工具欄當中，并一同打包創建為新的symbol，實現嵌套。如果按鈕symbol得到樣式更新，那么工具欄symbol當中的按鈕樣式便可自動更新。

?7. symbols的尺寸可變

你可以隨意調整symbols實例對象的尺寸，而不用受制于symbol本身的規格。不過一旦將來主symbol的尺寸發生變化，所有實例都將統一更新為新的尺寸樣式，而忽略掉你之前所做的調整。

?8. 從symbol中分離

要將某實例對象從原本的symbol當中分離 (譬如要基于該symbol的布局設計更為復雜的模式時)，在該對象上右鍵單擊，選擇“Detach from Symbol”，這將使實例變為普通的圖層組。

「Sketch 全方位使用指南」

1. PS 和 Sketch 哪個好用？丨《巔峰對決！新晉神器SKETCH VS. 經典老炮PHOTOSHOP》
2. 新手使用技巧丨《SKETCH新手指南！10個幫你UI設計提速的SKETCH使用技巧》
3. 達人使用技巧丨《幫到心坎了！一組實用熱門的SKETCH技巧幫你快速過稿》
4. 好用的Sketch 插件丨《快成一道閃電！讓你設計效率疾速提升的免費SKETCH插件》
5. Windows 用戶福利丨《用虛擬機體驗Sketch！為設計師準備的MAC OSX安裝指南》

原文地址：trydesignlab

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量190萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com