⌨️ 阿里巴巴语雀体验设计师:快捷键的体验设计

2020-03-31

本篇文章为阿里巴巴语雀体验设计师 Suki 的快捷键体验设计心得,文中涉及大量对照表,建议先收藏,在电脑打开,获取更好的阅读体验

image

📌快捷键设计的重要性

对于工具型产品来说,效率对于用户体验来说太重要了,而快捷键能极大地提高用户的操作效率。

回想一下哪个设计师没有苦背过Sketch快捷键大全呢?

试想一下,如果你的产品有大量表单,如果不能使用Tab键切换,用户就必须不断地将右手从键盘脱离去寻找鼠标,又从鼠标脱离去寻找键盘……如此往复上百遍,真的很令人崩溃!

但是不是所有的产品所有的功能都需要快捷键呢?

当然不是。

这里有几项建议给你:

  • 生产工具类的产品最需要快捷键。

比如sketch,Excel,语雀等等,用户需要长时间停留在产品上不停地操作,快捷键能极大的提高生产效率。

  • 键盘操作最能提高效率的就是选择、移动、输入类操作。

优先将你的快捷键留给这几类操作,不是所有的功能都需要快捷键。

  • 高频操作优先,为熟练用户设计。

为用户高频的操作增加快捷键能提升熟练用户的体验。

📌如何设计快捷键


那如何为你的产品设计快捷键呢?

  • 一定避开系统常用键。

因为用户已经习惯将这个组合键执行另一种操作了,在产品里强行覆盖,极大违背了用户的习惯。下面会有常用键的说明,可以对照来查询。

  • 遵循功能键的使用习惯。

每个功能键有特定的含义,如Command在mac里就是命令的意思,Shift则和切换相关。

  • 注意Mac和Win的不同操作习惯。

比如虽然Mac里也有ctrl键,但核心的控制键应该由ctrl映射到Command上。

  • 好的快捷键设计具有隐喻,能方便用户记忆理解。

常见的隐喻方式有,英文的首字母,如Ctrl+C里的C其实就是Copy的首字母。

  • 好的快捷键设计是便捷易操作的。

比如“复制”和“粘贴”常常是一起操作的,因此选用了C旁边的V作为粘贴的组合键。同时高频的操作尽量照顾单手操作性,一只手就能点按。

📌理解功能键

   功能键说明   

Shift

Shift 本意是「换挡」。
Shift键学名叫上档键。它有两种意思,有书面的意思和键盘上面的上档意思,书面意思有很多解释,指的是移动,搬移、替换、更换、变动、改变等意思,当然有的时候又指变速、换挡、消除的意思。
用来做输入法切换、快速切换半角和全角、选择连续文件、直接删除文件等功能。

Ctrl

Ctrl本意是「控制」。

英文全称为”control”。Win系统下最常用的命令键,大多数情况下等同于Command。基本上通过Ctrl键和其他键组合的方式,将“输入”变成一种“命令”。

Tab

Tab本意是「制表键」。

“Tab”一词由英文“tabulate”派生而来,意思是“以表格、或表格形式排列数据”。Tab键来源于打字机,过去在打字机上如果要输入一份文字或数字表格,必须不断使用空白键以及Backspace键,不仅重复也十分费时。Tab键由此诞生,用来快速移动定位点。

所以Tab相关的操作大多数和定位、光标相关,比如Mac上「Command」+「Tab」快速在不同应用之间切换。

Alt

Alt 是 Alter ⁴的缩写,本意是「改变」。

如果只以 Alt 键为核心,那它在 Windows 上的主要作用便是「呼出菜单或点击按钮的组合键」以及「使用 ASCII 码输入字符的组合键」。而在 Mac OS 上,它早已被改名为 Option,主要作用则是「快速访问系统偏好设置中某个选项的组合键」(比如「Option+静音/-/+」即为「打开声音偏好设置」)。

Command⌘

Command本意是「命令」。

苹果公司为了避免和命令行界面操作冲突引入的修饰键,大多数情况下和 Ctrl 等同。

Option⌥

Option本意是「选项」

据说“⌥”的图形是来自火车并轨时有两个选择。

image

按 Option 时一般可以减少或增加选项,或者增加和减少信息量。比如「Shift」 +「Command」+「Delete」需要选择是否倾倒废纸篓,「Shift」+「Command」+「Option」 +「Delete」就无需选择直接倾倒。

Option还常用来输入特殊字符,如「Option」+「A」就是å。

    Mac和Win的系统差异    

独有键:Command⌘


我相信同时使用过Win和Mac系统的人都有过这种疑惑:Mac系统上也有Ctrl键,为什么不沿用Ctrl键而要新引入Command代替呢?

简单来说,引入Command键主要是为了解决图形界面(GUI)和命令行界面(CLI)工作时快捷键冲突的问题。

Ctrl系列快捷键功能在计算机图形界面出现之前的命令行界面已有定义;Windows图形界面还是使用Ctrl键,但对各种组合的功能涵义进行了重新定义;而Mac OS的图形界面新设计了一个键Command来负责,避免了和命令行界面冲突的问题。

至于为什么不跟Win一样用logo,而使用“⌘”的原因,有一篇文章讲到这个趣事,感兴趣可以一读。
《标志的源起:Command》

其他映射关系


Mac上是没有Page Up/Down、Home和End键的,因此可通过别的键映射。
Page UP = Fn + 向上方向键
Page Down = Fn + 向下方向键
Home= Fn + 向左方向键
End= Fn + 向右方向键

📌常用键对照表

   Excel常用键   

Excel作为用户量最广的表格工具,有一系列自己专属的快捷键操作。这份表格可用来对表格型工具产品做快捷键自查。

高频重要操作

中心键 直接按 Ctrl+(Cmd+) Shift+ Ctrl(Cmd)+Shift+
Enter 向下移动一个单元格 批量输入相同内容 向上移动一个单元格 输入数组公式
向上方向键 向上移动一个单元格 向上移动一段区域 向上多选一行 直接向上选中一段区域
向下方向键 向下移动一个单元格 向下移动一段区域 向下多选一行 直接向下选中一段区域
向左方向键 向左移动一个单元格 向左移动一段区域 向左多选一行 向左选中一段区域
向右方向键 向右移动一个单元格 向右移动一段区域 向右多选一行 向右选中一段区域

| Page Up (Fn+向上) | 向上翻页 | 切换到上一个Sheet | 向上选中一屏范围 | 向左多选Sheet | | Page Down (Fn+向下) | 向下翻页 | 切换到下一个Sheet | 向下选中一屏范围 | 向右多选Sheet | | Home (Fn+向左) | 到达行首 | 到达A1单元格(Mac这里仍用Ctrl) | 选中当前单元格至行首区域(Mac这里仍用Ctrl) | 选中当前单元格到对角线的区域(Mac这里仍用Ctrl) | | End (Fn+向右) | | 最右下角非空单元格 | | 选中当前单元格到最右下角非空单元格的区域(Mac这里仍用Ctrl) | | Backspace | 清除当前单元格内容 | | | | | Delete | 清除当前单元格内容 | 清除当前单元格内容 | | | | Esc | 退出当前编辑状态 | 调出Win开始菜单 | | 调出任务管理器 | | Tab | 向右移动一个单元格 | 向左移动一个单元格 | | |

低频重要操作

快捷键 说明
Ctrl(Cmd) + Enter 选定区域一次性输入相同内容
Ctrl(Cmd) + 1 调出单元格格式设置对话框
Ctrl(Cmd) + G 调出定位对话框
Ctrl(Cmd) + T 将选中数据生成智能表格
Alt + = 快速求和
Alt + ; 选中可见单元格
Ctrl(Cmd) + Alt + V 选择性粘贴

    浏览器常用键   

快捷键 说明
Ctrl(Cmd) + T 新的标签页
Ctrl(Cmd) + N 新的浏览器窗口
Ctrl(Cmd) + Shift + N 隐身窗口
Ctrl(Cmd) + Tab 切换标签页
Ctrl(Cmd) + Shift + [ ] 向前后切换标签页
Ctrl + 1、2、3… 切换对应标签页
Alt(Cmd) + 左右方向键 返回和前进按钮
Ctrl(Cmd) + Shift + Delete 清除历史记录
Alt + F4 关闭当前窗口
Ctrl + F4 关闭所有窗口

   Mac/Win常用键   

这张表主要是查询作用,避免和系统常用键冲突。使用方法:使用「Ctrl」+「F」/「Command」+「F」开启查询,输入你想设置的快捷键查询是否和系统快捷键冲突。

Ctrl(Cmd)

Win 快捷键 Mac 快捷键 介绍
Ctrl + F Command + F 在当前文件进行文本查找
Ctrl + R Command + R 在当前文件进行文本替换
Ctrl + Z Command + Z 撤销
Ctrl + Y Command + Delete 删除光标所在行 或 删除选中的行
Ctrl + D Command + D 复制光标所在行 或 复制选择内容,并把复制内容插入光标位置下面
Ctrl + W Option + 方向键上 递进式选择代码块。可选中光标所在的单词或段落,连续按会在原有选中的基础上再扩展选中范围
Ctrl + E Command + E 显示最近打开的文件记录列表
Ctrl + N Command + O 根据输入的 类名 查找类文件
Ctrl + J Command + J 插入自定义动态代码模板
Ctrl + P Command + P 方法参数提示显示
Ctrl + U Command + U 前往当前光标所在的方法的父类的方法 / 接口定义
Ctrl + B Command + B 进入光标所在的方法/变量的接口或是定义处,等效于 Ctrl + 左键单击
Command + Q 退出该应用
Command + H 隐藏该应用
Command + Op + H 隐藏当前应用外的其他应用
Ctrl + / Command + / 注释光标所在行代码,会根据当前不同文件类型使用不同的注释符号
Ctrl + F1 Command + F1 在光标所在的错误代码处显示错误信息
Ctrl + F11 Option + F3 选中文件 / 文件夹,使用助记符设定 / 取消书签
Ctrl + Space Control + Space 基础代码补全,默认在 Windows 系统上被输入法占用,需要进行修改,建议修改为 Ctrl + 逗号
Ctrl + Delete Option + Fn + Delete 删除光标后面的单词或是中文句
Ctrl + BackSpace Option + Delete 删除光标前面的单词或是中文句
Ctrl + 1,2,3…9 Control + 1,2,3…9 定位到对应数值的书签位置
Ctrl + 加号 Command + + 展开代码
Ctrl + 减号 Command + - 折叠代码
Command + , 打开偏好设置面板
Ctrl + 左键单击 Control + 左键单击 在打开的文件标题上,弹出该文件路径
Ctrl + 左方向键 Option + 左方向键 光标跳转到当前单词 / 中文句的左侧开头位置
Ctrl + 右方向键 Option + 右方向键 光标跳转到当前单词 / 中文句的右侧开头位置
Ctrl + 前方向键 等效于鼠标滚轮向前效果
Ctrl + 后方向键 等效于鼠标滚轮向后效果

Alt(Op)

Win 快捷键 Mac 快捷键 介绍
Alt + ` | Control + V | 显示版本控制常用操作菜单弹出层
Alt + F1 Option + F1 显示当前文件选择目标弹出层,弹出层中有很多目标可以进行选择
Alt + F7 Option + F7 查询所选对象/变量被引用
Alt + Enter Option + Enter IntelliJ IDEA 根据光标所在问题,提供快速修复选择,光标放在的位置不同提示的结果也不同
Alt + Insert Command + N 代码自动生成,如生成对象的 set / get 方法,构造函数,toString() 等
Alt + 左方向键 Control + 左方向键 切换当前已打开的窗口中的子视图,比如Debug窗口中有Output、Debugger等子视图,用此快捷键就可以在子视图中切换
Alt + 右方向键 Control + 右方向键 切换当前已打开的窗口中的子视图,比如Debug窗口中有Output、Debugger等子视图,用此快捷键就可以在子视图中切换
Alt + 前方向键 Control + 前方向键 当前光标跳转到当前文件的前一个方法名位置
Alt + 后方向键 Control + 后方向键 当前光标跳转到当前文件的后一个方法名位置
Alt + 1,2,3…9 Command + 1,2,3…9 显示对应数值的选项卡,其中 1 是 Project 用得最多

Shift

Win 快捷键 Mac 快捷键 介绍
Shift + F11 Command + F3 弹出书签显示层
Shift + Tab Shift + Tab 取消缩进
Shift + Enter Shift + Enter 开始新一行。光标所在行下空出一行,光标定位到新行位置
Shift + 左键单击 Shift + 左键单击 在打开的文件名上按此快捷键,可以关闭当前打开文件

Ctrl+Alt(Cmd+Op)

Win 快捷键 Mac 快捷键 介绍
Ctrl + Alt + L Command + Option + L 格式化代码,可以对当前文件和整个包目录使用
Ctrl + Alt + O Control + Option + O 优化导入的类,可以对当前文件和整个包目录使用
Ctrl + Alt + T Command + Option + T 对选中的代码弹出环绕选项弹出层
Ctrl + Alt + S Command + 逗号 打开 IntelliJ IDEA 系统设置
Ctrl + Alt + Enter Command + Option + Enter 光标所在行上空出一行,光标定位到新行
Ctrl + Alt + 左方向键 Command + Option + 左方向键 退回到上一个操作的地方
Ctrl + Alt + 右方向键 Command + Option + 右方向键 前进到上一个操作的地方

Ctrl+Shift(Cmd+Shift)

Win 快捷键 Mac 快捷键 介绍
Ctrl + Shift + F Command + Shift + F 根据输入内容查找整个项目 或 指定目录内文件
Ctrl + Shift + R Command + Shift + F 根据输入内容替换对应内容,范围为整个项目 或 指定目录内文件
Ctrl + Shift + J Control + Shift + J 自动将下一行合并到当前行末尾
Ctrl + Shift + Z Command + Shift + Z 取消撤销
Ctrl + Shift + W Option + 方向键下 递进式取消选择代码块。可选中光标所在的单词或段落,连续按会在原有选中的基础上再扩展取消选中范围
Ctrl + Shift + N Command + Shift + O 通过文件名定位 / 打开文件 / 目录,打开目录需要在输入的内容后面多加一个正斜杠
Ctrl + Shift + U Command + Shift + U 对选中的代码进行大 / 小写轮流转换
Ctrl + Shift + T Command + Shift + T 对当前类生成单元测试类,如果已经存在的单元测试类则可以进行选择
Ctrl + Shift + C Command + Shift + C 复制当前文件磁盘路径到剪贴板
Ctrl + Shift + B Control + Shift + B 跳转到类型声明处
Ctrl + Shift + / Command + Option + / 代码块注释
Ctrl + Shift + [ Command + Shift + [ 选中从光标所在位置到它的顶部中括号位置
Ctrl + Shift + ] Command + Shift + ] 选中从光标所在位置到它的底部中括号位置
Ctrl + Shift + 加号 Command + Shift + 加号 展开所有代码
Ctrl + Shift + 减号 Command + Shift + 减号 折叠所有代码
Ctrl + Shift + F7 Command + Shift + F7 高亮显示所有该选中文本,按Esc高亮消失
Ctrl + Shift + F12 Command + Shift + F12 编辑器最大化
Ctrl + Shift + Enter Command + Shift + Enter 自动结束代码,行末自动添加分号
Ctrl + Shift + Backspace Ctrl + Shift + Backspace 退回到上次修改的地方
Ctrl + Shift + 1,2,3…9 Control + Shift + 1,2,3…9 快速添加指定数值的书签
Ctrl + Shift + 左键单击 Command + Shift + 左键单击 把光标放在某个类变量上,按此快捷键可以直接定位到该类中
Ctrl + Shift + 左方向键 Option + Shift + 左方向键 在代码文件上,光标跳转到当前单词 / 中文句的左侧开头位置,同时选中该单词 / 中文句
Ctrl + Shift + 右方向键 Option + Shift + 右方向键 在代码文件上,光标跳转到当前单词 / 中文句的右侧开头位置,同时选中该单词 / 中文句
Ctrl + Shift + 前方向键 Command + Shift + 前方向键 光标放在方法名上,将方法移动到上一个方法前面,调整方法排序
Ctrl + Shift + 后方向键 Command + Shift + 后方向键 光标放在方法名上,将方法移动到下一个方法前面,调整方法排序

Alt+Shift(Op+Shift)

Win 快捷键 Mac 快捷键 介绍
Alt + Shift + N Option + Shift + B 选择 / 添加 task
Alt + Shift + 左键双击 Option + Shift + 左键双击 选择被双击的单词 / 中文句,按住不放,可以同时选择其他单词 / 中文句
Alt + Shift + 前方向键 Option + Shift + 前方向键 移动光标所在行向上移动
Alt + Shift + 后方向键 Option + Shift + 后方向键 移动光标所在行向下移动

Ctrl+Shift+Alt(Cmd+Shift+Op)

Win 快捷键 Mac 快捷键 介绍
Ctrl + Shift + Alt + V Command + Shift + Option + V 无格式黏贴
Ctrl + Shift + Alt + S Command + ; 打开当前项目设置

总结


语雀一直致力于为用户提供高效优雅的书写环境,所以语雀内也设置了非常多的快捷键,希望让熟练的语雀用户可以高效愉快地在语雀完成工作。

前段时间,我们就语雀的目录收起快捷键展开了欢乐愉快(?)的大讨论,经过轮番自我否定,终于确定了目录收起的快捷键。同时,语雀表格的快捷键也逐步丰富起来了。

我们希望每轮的自我纠结都能换来语雀用户愉快的使用体验。就让这只小绿雀,陪你一起成长吧😘。

image