工具快捷键设计指南

Recommanded by editor
杭州/产品设计师/1年前/800浏览
工具快捷键设计指南Recommanded by editor
引言
在如今的工作环境中,我们都追求能够高效便捷地完成操作和任务。那么「快捷键」大概就是大家最熟悉也最常用的一种提效手段,尤其是作为设计师的我们,无论是在 PS、Figma、Sketch 等设计工具中,还是 Word、PPT、Excel 办公软件中,快捷键的设计和使用都直接影响着我们的使用体验和工作效率,减少频繁的鼠标点击,提升操作流畅度。
工具快捷键设计指南
Collect
而酷家乐作为一款 3D 设计工具,快捷键也是必不可少的部分。年初在走访用户时发现,深度用户对于快捷键能力有着更高诉求,同时酷家乐内部对于快捷键的设计缺少规范和治理,因此上半年对酷家乐的快捷键能力进行升级。本文章将系统性探讨和分享如何设计和制定工具产品中的快捷键。
工具快捷键设计指南
Collect
一、快捷键的类型
在讲述如何设计快捷键之前,先来了解一些快捷键的类型。从广义上来讲,常见的快捷键类型可以分为「快捷键」和「快捷命令」。
工具快捷键设计指南
Collect
快捷键(Keyboard Shortcuts): 快捷键是指用户通过按下特定的键组合即可激活功能,一般是单个字母,例如 L-绘制直线,或者是组合键,例如 Ctrl+C-复制。通常我们熟知并且使用的都是这类快捷键。
快捷命令(Shortcut Commands):快捷命令比较复杂,在这里不作为重点去阐述。用过 CAD 软件的设计师应该比较明白,在 CAD 中,支持多字母命令,并且通过「空格」来激活功能。例如绘制矩形墙的快捷操作是,依次按下字母 REC 和空格。
工具快捷键设计指南
Collect
图:CAD 的快捷命令输入
本文则是围绕大家熟知的第一种快捷键展开讲述,下文提到的快捷键仅代表前者。
那么从狭义上来讲,快捷键的键值类型有以下几种:
工具快捷键设计指南
Collect
不同类型的键可以通过组合或单独使用来形成各种快捷键,满足不同的操作需求。常见的快捷键类型如下:
1. 单独使用的快捷键
某些键可以单独使用,例如字母键(L-绘制直线)、功能键(F5-刷新页面或窗口)、特殊功能(Delete-删除)等。
2. 组合使用的快捷键
常见的组合方式有:
  1. 字母键与修饰键的组合:Ctrl + C-复制选中的内容;Ctrl + V:粘贴剪贴板中的内容。
  2. 数字键与修饰键的组合:Ctrl + 1:在某些应用中切换到第一个标签页或视图;Shift + 2:在英语键盘布局中输入 @ 符号。
  3. 功能键与修饰键的组合:Ctrl + F5:在浏览器中强制刷新页面,忽略缓存;Alt + F1:在某些应用程序中打开或关闭帮助功能。
  4. 特殊键与修饰键的组合:Shift + Delete:直接删除文件而不放入回收站。
二、快捷键的应用场景
1. 工具中的快捷键越多越好?
当我们清楚快捷键的使用和组合方式后,就可以为功能指定合适的快捷键了。但是在制定快捷键前,不妨先想一想,是否所有的功能都需要快捷键?
在这次快捷键升级项目中,我感触最深的是,整个工具中居然有 200 个左右的快捷键,而大部分的快捷键唤起量很低。这让我不禁开始思考,在工具中,快捷键真的是越多越好吗?就好像我们在学习一门新技术时,找了很多很多的课程,然而当真的开始学习时,却不知道该选哪一个,最后都去收藏夹里吃灰了。
工具中的快捷键不受限制越来越多的话,会带来什么问题呢?
工具快捷键设计指南
Collect
  1. 官方增量快捷键设定受限:快捷键的数量和组合方式有一定的限制,过多的快捷键可能超出这些限制。
  2. 用户自定义的灵活度下降:用户通常希望能够自定义快捷键以适应个人的使用习惯。如果官方快捷键过多,用户自定义的灵活性会受到限制,不断检查和调整快捷键,避免冲突。
  3. 用户记忆成本增加:用户在学习和掌握所有快捷键时需要投入大量时间和精力,导致记忆负担过重。
因此产品和设计师在制定快捷键之前,先需要考虑,这个功能是否值得一个快捷键呢?
2. 哪些功能可以设定快捷键
上文提到了工具中的快捷键并不是越多越好的,那么什么样的功能可以指定快捷键呢?在分析了传统行业软件的快捷键设定规范,以及产品和设计内部多次讨论后,这里为大家提供几个思考维度:
① 基础功能
即属于基本的操作功能,在大多数的产品软件中都可以找到,因此也属于一种通用的标准和规范。
例如:保存——Ctrl+S,复制——Ctrl+C等,这类广泛标准化的快捷键,在绝大多数应用程序中都遵循相同的规范。
② 同类型工具产品中的常见快捷键
相信大部分的工具产品,都可以找到市面上存在已久的同类型热门产品。如果用户在其他产品中,习惯了对一些功能使用快捷键,那么在迁移的时候希望相同的功能都能有快捷键,减少迁移成本。
③ 自身工具中的高频功能
快捷键本身使用就有一定的门槛,一般中间用户和专家用户会频繁使用快捷键,小白用户对快捷键的感知可能并不强烈,因此快捷键的设定,一定是需要用户使用频率高才更有意义。
那么如何定义“高频”?功能的人均每天使用次数到达一定数值(根据不同产品业务特性制定),即可被认为是高频功能。
除此之外能够提高工作流的流畅性和用户的沉浸感至关重要的功能,也可以被赋予快捷键。例如在 3D 建模软件中从透视图切换到正视图,这些功能可以帮助用户更高效地完成工作,通过快捷键减少不必要的点击和导航,使用户能够专注于创作和设计。
三、怎么选择快捷键键值
在了解了快捷键类型,和哪些功能适合被赋予快捷键后,我们再来聊一聊该怎么选择快捷键。这里为大家提供几种选择思路:
工具快捷键设计指南
Collect
1. 标准法:遵循广泛标准化的设定规则
这个在第二章的时候也提到,像保存——Ctrl+S,复制——Ctrl+C等这类广泛标准化的快捷键,我们必须保持快捷键一致性。
2. 类比法:参考同行已有的快捷键
保持与同类软件的快捷键一致,可以减少用户在不同软件之间切换时的认知负担,使用户能够更符合直觉的使用快捷键,无需额外学习。例如大家可以发现,PS 和 AI,Sketch 和 Figma 的快捷键重合度相当高。
3. 隐喻法:和功能含义建立联系
好的快捷键通常使用了隐喻法,能够方便用户联想和记忆。常见的隐喻方式是英文/中文功能的首字母,如果考虑到国内用户群体的本土化,则可以考虑中文功能的首字母,例如柱子-Z,墙-Q。
4. 便利性:键位布局的便利性
快捷键的组合应尽量选择相邻或容易同时按下的键位。避免使用需要同时按下距离较远的按键的组合,导致复杂或不自然的手指操作。下面提供了不同的组合修饰键下推荐的键值范围:
工具快捷键设计指南
Collect
四、快捷键的拓展能力
如果想更进一步体现快捷键的价值,我们不妨考虑快捷键的拓展能力。接下来,将跟大家分享,这次酷家乐快捷键升级中,最重要的快捷键自定义能力。
很多朋友看到这里可能会感到不屑,不就是开放快捷键自定义能力吗?似乎没有什么值得深入探讨的。在设计之前,我也是这么想的,但是在实际的设计过程中发现,快捷键自定义背后的坑太多了。作为设计师不应该仅仅只能想到,用户能够自定义输入快捷键这一步,更应该思考自定义能力会带来哪些更多复杂的问题,而我们又该如何解决?
工具快捷键设计指南
Collect
1. 快捷键冲突校验
在用户自定义过程中,很容易发生和已有快捷键冲突的情况,导致用户需要不断地修改快捷键,查验是否冲突。这里提供两个解决冲突过多的思路。
  1. 限制官方快捷键数量:上文也已经分析过,快捷键并不是越多越好的,如果官方快捷键越多的话,用户冲突的概率更大。因此在这次改版中,我们制定了严格业务设置快捷键门槛,后续增量的快捷键必须要到达门槛后才能够使用。
  2. 缩小快捷键校验范围:在改版之前,酷家乐的快捷键是全量校验的,导致冲突概率极大,但分析后发现,只判断同一个上下文中的快捷键是否存在冲突即可。举一个简单的例子,酷家乐的画墙功能激活后,可以通过多个快捷键修改绘制属性,假设属性 A 的快捷键是 A,属性 B 的快捷键是 B,属性 C 的快捷键是 C,那么在校验时,只需要校验 ABC 之间不冲突即可。
工具快捷键设计指南
Collect
2. 快捷键自定义联动
酷家乐工具里的业务是非常多的,例如画户型、摆家具、硬装设计、定制设计、照明水电设计等,在这里为了后续方便描述,将这些称为子工具。子工具有独立的快捷键面板,并且子工具之间有一些相同的能力,例如参考线、精准布置、材质刷等。那么为了保持一致性,用户在一个子工具中修改的快捷键能够自动更新到其他子工具中。这可以减少用户的记忆负担,避免不同子工具之间的快捷键混淆。
工具快捷键设计指南
Collect
例如子工具 ABC 都有参考线功能,用户在子工具 A 的快捷键面板上把参考线改成了 A,那么子工具 B、C 的参考线快捷键也需要被联动修改为 A。
3. 快捷键文案联动
除了上述提到的键值联动外,还需要保证用户自定义后的文案联动。在工具 UI 中透传出很多快捷键的提示文案,那么当用户自定义快捷键后,UI 上的快捷键文案也需要联动。
4. 不设置官方快捷键的自定义能力
酷家乐也是一款面向商家的 To B 工具,相信 To B 业务的公司都深有体会,经常会收到 KA 商家的个性化需求。
工具快捷键设计指南
Collect
例如某个商家,要求我们对功能 A 增加快捷键,但是这功能 A 又不属于第二章中提到的任何一个类型,那怎么办呢?
这里也给大家提供一个解决思路,我们对功能 A 开放了自定义快捷键能力,但是不设置默认官方快捷键,商家用户可以根据自己的习惯去自定义快捷键,这样既满足了商家需求,又同时维护了我们内部的快捷键设置门槛。
五、总结
在本文中,我们深入探讨了快捷键的类型,分析了并非所有功能都需要快捷键,如何合理选择快捷键的键值,以及最后快捷键拓展能力的实际应用场景。希望这篇文章能够帮助你更好地理解快捷键,能够在快捷键设计的工作中,带来启发。
作者:丰草
5
Report
|
8
Share
相关推荐
Figma组件设计思路
Homepage recommendation
文章
2024酷+大会视觉解析
Homepage recommendation
内容含视频
教程学习
教程学习
教程学习
教程学习
作品收藏夹
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
华为项目——Ai智慧网图
Homepage recommendation
相关收藏夹
教程学习
教程学习
教程学习
教程学习
作品收藏夹
文章
文章
文章
文章
作品收藏夹
茶包装
茶包装
茶包装
茶包装
精选收藏夹
作品收藏夹
交互
交互
交互
交互
精选收藏夹
作品收藏夹
中国风元素插画
中国风元素插画
中国风元素插画
中国风元素插画
精选收藏夹
作品收藏夹
地产VI
地产VI
地产VI
地产VI
精选收藏夹
作品收藏夹
大家都在看
Log in