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

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

Sketch畢竟沒有什麼學習曲線,頗易上手,相應的也時常導致新手在一開始就忽略掉一些重要的、高頻的使用小技巧,而將一些稍許費力耗時的方式一路沿用下去。

Sketch畢竟沒有什麼學習曲線,頗易上手,相應的也時常導致新手在一開始就忽略掉一些重要的、高頻的使用小技巧,而將一些稍許費力耗時的方式一路沿用下去。這篇內容所針對的便是這樣的情況,幾乎沒有進階的要點,只針對初學的同學培養正確習慣。
 
 

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

 

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規格),例如使用375×667的畫板來設計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」,這將使實例變為普通的圖層組。

 

本文地址: http://www.uisdc.com/sketch-skills-improve-efficiency

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。