在設計過程中使用Sketch快捷鍵可以大幅提升工作效率,雖然每個操作只節省了幾秒鐘,但當這些個“幾秒鐘”累加在一起的時候,我們就會感覺快捷鍵太方便啦。下面讓我們瞭解一些你不太熟知的,但又能提升工作效率的快捷鍵。
靜電說:請注意,快捷鍵不要強記,強記是沒有意義的,沒過多久你就會忘,需要用的時候,看一下快捷鍵,沒過多久,你就會熟悉並記住他們。另外,使用英文版Sketch會有助於你理解快捷鍵的名字哦。
屬性檢查器(Inspector)
當和像素打交道的時候,設計師需要快速轉換單位。在Sketch中,你不僅能通過上下箭頭調整位置和尺寸值,還可以在輸入框中進行加減乘除等算數操作。
比如,你只需要將數字乘以2,就可以輕鬆將1X轉換成2X。
同時,你也可以使用百分比。比如將子圖層的寬度調整為100%,那麼子圖層就會和父容器的尺寸保持一致。這非常方便!
總結一下:
在輸入框中可以進行加減乘除和百分比運算
用Tab鍵可以移到下一個輸入焦點
↑或↓箭頭:講值增加或者減少1Px
Shift+↑或↓箭頭:將數值增加或者減少10px
Option+↑或↓箭頭:將數值增加或者減少0.1px
鼠標左右拖動:鼠標懸停在輸入框中,拖動,增加和減少數字。
使用Tab鍵切換焦點。
縮放工具
縮放工具是我最喜歡並且使用最多的工具之一。縮放工具的快捷鍵是(⌘)+ K。
請注意,縮放工具和調整大小不同,它會調整圖形的每個屬性:大小,邊框,陰影,半徑等等。
小提示:根據經驗,請避免進行縮小操作。因為它可能會導致位置或者大小出現小數點。如果你希望像素完美的話,請做放大操作。
間距
創建元素後,可以使用Option(⌥)鍵顯示這些元素之間的距離。選擇所需的元素,然後在按Option(⌥)的同時,將鼠標懸停在要確定距離的元素上。
這是非常有用的,因為在設計時,距離對於確定舒適的間距和一致性至關重要。例如,如果在設計的各個部分之間使用16px,則還應該嘗試在其他地方保持相同的距離。
插入形狀
你每天可能要繪製數百個圖形。有了這些快捷鍵,操作將會更加便捷。請養成條件反射吧!
A:畫板 R:矩形 O:橢圓形 U:圓角矩形 L:線 T:文字 V:繪製曲線 P:鉛筆 S:切片 H:熱點
你可以在創建形狀時按住這些鍵來完成一些酷的事情:
按住Shift鍵:保持形狀的長寬比
按住Option鍵(⌥):從中心繪製形狀
因此,您可以同時按住Shift + Option(⌥)從中心繪製形狀,同時保持其長寬比:
調整形狀大小時,按住Shift鍵可保持其長寬比。請注意,當您插入形狀並按住Shift時,Sketch會嘗試自動創建完美的圓形或正方形。
如果選擇了圖層,則可以使用以下快捷方式來滿足您的需求:
- 0–1:0代表100%不透明度,而1代表10%
- F:切換填充
- Option(⌃)+ C:從頁面上的任意位置選擇一種顏色。Sketch的吸管工具甚至允許您在應用程序外部選擇顏色
- 雙擊或返回(未成組):編輯模式
- 雙擊(成組):更深一層
- Command(⌘)+單擊:選擇任意層;團體不可知。
- Command(⌘)+ Shift + T:變換
- Command(⌘)+ Shift + R:旋轉
- Command(⌘)+ Shift + L:鎖定/解鎖層
- Command(⌘)+ Shift + H鍵:隱藏/顯示圖層
- Command(⌘)+ Shift + E:導出層
- Esc:選擇父級畫板或組
- 空格鍵+拖動:在畫布上移動
多個形狀的操作
Command (⌘) + Option (⌥) + U: 布爾運算Union
Command (⌘) + Option (⌥) + I: 布爾運算Intersect
Command (⌘) + Option (⌥) + S: 布爾運算Subtract
Command (⌘) + Option (⌥) + D: 布爾運算Difference
Command (⌘) + Control (⌃) + M: 遮罩或蒙版
Command (⌘) + G: 成組
Command (⌘) + Shift + G: 解組
進入“ 編輯”模式後,您可以利用一些快捷方式來編輯形狀
要切換到編輯模式,直接雙擊圖形或者按回車鍵即可。
移動並調整大小
拖動或調整形狀大小時,Sketch中的“距離”和“智能參考線”會自動顯示。
選項(⌥)+拖動:重複圖層
Command(⌘)+ D:如果在Option(⌥)+ 拖動之後立即使用此快捷方式,則重複的圖層將保持一致的間距
- Shift +拖動:保持寬高比
- Option(⌥)+拖動:從中心調整大小
- Shift + Option(⌥)+拖動:從中心調整大小,同時保持寬高比
- Command(⌘)+懸停在邊界上:旋轉
- Option(⌥)+↑,→,↓或←:移動1px
- Shift +↑,→,↓或←:移動10px
- Option(⌥)+ Shift +↑,→,↓或←:移動10像素,同時查看元素的相對位置(懸停在目標元素上)
- Command(⌘)+↓或→:擴大1像素
- Command(⌘)+ Shift +↓或→:擴大10像素
- Command(⌘)+↑或←:縮小1px
- Command(⌘)+ Shift +↑或←:縮小10px
文本圖層
- Command (⌘) + B: 粗體 (當字體有粗體時)
- Command (⌘) + I: 斜體(當字體有斜體時)
- Command (⌘) + Option (⌥) + “+”: 字體增大一號
- Command (⌘) + Option (⌥) + “-”: 字體縮小一號
- Command (⌘) + T: 更改字體
- Command (⌘) + Shift + O: 轉換為輪廓
- Command (⌘) + Shift + {: 文本左對齊
- Command (⌘) + Shift + |: 文本居中對齊
- Command (⌘) + Shift + }: 文本右對齊
- Command (⌘) + Control (⌃) + 空格: 插入Emojis和符號
排列圖層
- Command(⌘)+]:向上一層
- Command(⌘)+ [:向下一層
- Command(⌘)+ Option(⌥)+]:置於最前面(這完全將圖層置於最前面)
- Command(⌘)+ Option(⌥)+ [:置於底層
畫布縮放
您可以使用這些方便的工具專注於特定的Artboard或圖層。避免在Sketch中進行大量漫無目的的滾動。
Command(⌘)+1:專注於當前頁面中的所有元素
Command(⌘)+ 2:專注於所選元素
Command(⌘)+ 3:將焦點集中在所選元素上
Option(⌘)+“ +”:放大
Option(⌘)+“-”:縮小
Command(⌘)+ 0:縮放到實際大小(即100%)
網格和標尺
在Sketch的首選項,圖層欄目中啟用“適配像素”,可以讓你的形狀準確的適應於網格。
如果你希望設計稿以位圖模式顯示,可以使用Ctrl+P快捷鍵進行切換。
Ctrl+G可以切換顯示網格
Ctrl+L:切換柵格化佈局顯示。
Ctrl+X:切換像素網格,像素網格只在1000%縮放時可見。
窗口操作:
Command (⌘) + “~”: 切換到下一個Sketch窗口
Command (⌘) + Option (⌥) + 1: 切換圖層列表
Command (⌘) + Option (⌥) + 2: 切換屬性檢查器窗口顯示
Command (⌘) + Option (⌥) + T: 切換狀態欄是否顯示
Command (⌘) + “.”: 進入或者退出演示模式
Command (⌘) + Control (⌃) + F: 切換到全屏狀態
圖層列表操作:
Option:鼠標懸停在圖層列表上,可以切換操作鎖定還是顯示隱藏圖層
Command (⌘) + R or 雙擊鼠標: 圖層重命名
Command (⌘) + 單擊: 選擇多個圖層
Tab: 切換到下個圖層
Shift + Tab: 選擇上一圖層
Fn + ↓: 下一頁
Fn + ↑: 上一頁
選中圖層並拖動到Sketch窗口外:為圖層,組或Artboard導出1x PNG資源。您可以使用“ 使可導出”選項覆蓋將位圖導出為高分辨率的選項。
自定義快捷方式
Sketch為用戶提供了在“系統偏好設置”窗格中自定義其快捷方式的選項。要自定義快捷方式,請轉到系統偏好設置>鍵盤>快捷方式>應用快捷方式。然後,單擊添加(+)按鈕。在彈出窗口中,從“應用程序”下拉列表中選擇“Sketch”,然後設置您的自定義快捷方式。
請注意,菜單名稱必須嚴格對應Sketch的菜單,否則快捷鍵將不生效。
推薦幾個我經常使用的自定義快捷鍵:
Command(⌘)+ Shift + C鍵:建立Symbols
Command(⌘)+ Shift + M:建立網格…
Command(⌘)+ Shift + P:舍入到最近的像素邊緣
Command(⌘)+“ /”:摺疊畫板和組
喜歡的話,就趕緊收藏本文吧!
閱讀更多 靜電的UI設計教室 的文章