在设计过程中使用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設計教室 的文章