恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
工具快捷键设计指南
14.0°
2024-10-18 原创文章 设计趋势 举报 3702 1 3 0

引言

在如今的工作环境中,我们都追求能够高效便捷地完成操作和任务。那么「快捷键」大概就是大家最熟悉也最常用的一种提效手段,尤其是作为设计师的我们,无论是在 PS、Figma、Sketch 等设计工具中,还是 Word、PPT、Excel 办公软件中,快捷键的设计和使用都直接影响着我们的使用体验和工作效率,减少频繁的鼠标点击,提升操作流畅度。

大厂实战案例!超详细的工具快捷键设计指南

而酷家乐作为一款 3D 设计工具,快捷键也是必不可少的部分。年初在走访用户时发现,深度用户对于快捷键能力有着更高诉求,同时酷家乐内部对于快捷键的设计缺少规范和治理,因此上半年对酷家乐的快捷键能力进行升级。本文章将系统性探讨和分享如何设计和制定工具产品中的快捷键。

大厂实战案例!超详细的工具快捷键设计指南

一、快捷键的类型

在讲述如何设计快捷键之前,先来了解一些快捷键的类型。从广义上来讲,常见的快捷键类型可以分为「快捷键」和「快捷命令」。

大厂实战案例!超详细的工具快捷键设计指南

快捷键(Keyboard Shortcuts): 快捷键是指用户通过按下特定的键组合即可激活功能,一般是单个字母,例如 L-绘制直线,或者是组合键,例如 Ctrl+C-复制。通常我们熟知并且使用的都是这类快捷键。

快捷命令(Shortcut Commands):快捷命令比较复杂,在这里不作为重点去阐述。用过 CAD 软件的设计师应该比较明白,在 CAD 中,支持多字母命令,并且通过「空格」来激活功能。例如绘制矩形墙的快捷操作是,依次按下字母 REC 和空格。

大厂实战案例!超详细的工具快捷键设计指南

图:CAD 的快捷命令输入

本文则是围绕大家熟知的第一种快捷键展开讲述,下文提到的快捷键仅代表前者。

那么从狭义上来讲,快捷键的键值类型有以下几种:

大厂实战案例!超详细的工具快捷键设计指南

不同类型的键可以通过组合或单独使用来形成各种快捷键,满足不同的操作需求。常见的快捷键类型如下:

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 个左右的快捷键,而大部分的快捷键唤起量很低。这让我不禁开始思考,在工具中,快捷键真的是越多越好吗?就好像我们在学习一门新技术时,找了很多很多的课程,然而当真的开始学习时,却不知道该选哪一个,最后都去收藏夹里吃灰了。

工具中的快捷键不受限制越来越多的话,会带来什么问题呢?

大厂实战案例!超详细的工具快捷键设计指南

  1. 官方增量快捷键设定受限:快捷键的数量和组合方式有一定的限制,过多的快捷键可能超出这些限制。
  2. 用户自定义的灵活度下降:用户通常希望能够自定义快捷键以适应个人的使用习惯。如果官方快捷键过多,用户自定义的灵活性会受到限制,不断检查和调整快捷键,避免冲突。
  3. 用户记忆成本增加:用户在学习和掌握所有快捷键时需要投入大量时间和精力,导致记忆负担过重。

因此产品和设计师在制定快捷键之前,先需要考虑,这个功能是否值得一个快捷键呢?


2. 哪些功能可以设定快捷键

上文提到了工具中的快捷键并不是越多越好的,那么什么样的功能可以指定快捷键呢?在分析了传统行业软件的快捷键设定规范,以及产品和设计内部多次讨论后,这里为大家提供几个思考维度:

① 基础功能

即属于基本的操作功能,在大多数的产品软件中都可以找到,因此也属于一种通用的标准和规范。

例如:保存——Ctrl+S,复制——Ctrl+C等,这类广泛标准化的快捷键,在绝大多数应用程序中都遵循相同的规范。

② 同类型工具产品中的常见快捷键

相信大部分的工具产品,都可以找到市面上存在已久的同类型热门产品。如果用户在其他产品中,习惯了对一些功能使用快捷键,那么在迁移的时候希望相同的功能都能有快捷键,减少迁移成本。

③ 自身工具中的高频功能

快捷键本身使用就有一定的门槛,一般中间用户和专家用户会频繁使用快捷键,小白用户对快捷键的感知可能并不强烈,因此快捷键的设定,一定是需要用户使用频率高才更有意义。

那么如何定义“高频”?功能的人均每天使用次数到达一定数值(根据不同产品业务特性制定),即可被认为是高频功能。

除此之外能够提高工作流的流畅性和用户的沉浸感至关重要的功能,也可以被赋予快捷键。例如在 3D 建模软件中从透视图切换到正视图,这些功能可以帮助用户更高效地完成工作,通过快捷键减少不必要的点击和导航,使用户能够专注于创作和设计。



三、怎么选择快捷键键值


在了解了快捷键类型,和哪些功能适合被赋予快捷键后,我们再来聊一聊该怎么选择快捷键。这里为大家提供几种选择思路:

大厂实战案例!超详细的工具快捷键设计指南

1. 标准法:遵循广泛标准化的设定规则

这个在第二章的时候也提到,像保存——Ctrl+S,复制——Ctrl+C等这类广泛标准化的快捷键,我们必须保持快捷键一致性。

2. 类比法:参考同行已有的快捷键

保持与同类软件的快捷键一致,可以减少用户在不同软件之间切换时的认知负担,使用户能够更符合直觉的使用快捷键,无需额外学习。例如大家可以发现,PS 和 AI,Sketch 和 Figma 的快捷键重合度相当高。

3. 隐喻法:和功能含义建立联系

好的快捷键通常使用了隐喻法,能够方便用户联想和记忆。常见的隐喻方式是英文/中文功能的首字母,如果考虑到国内用户群体的本土化,则可以考虑中文功能的首字母,例如柱子-Z,墙-Q。

4. 便利性:键位布局的便利性

快捷键的组合应尽量选择相邻或容易同时按下的键位。避免使用需要同时按下距离较远的按键的组合,导致复杂或不自然的手指操作。下面提供了不同的组合修饰键下推荐的键值范围:

大厂实战案例!超详细的工具快捷键设计指南

四、快捷键的拓展能力


如果想更进一步体现快捷键的价值,我们不妨考虑快捷键的拓展能力。接下来,将跟大家分享,这次酷家乐快捷键升级中,最重要的快捷键自定义能力。

很多朋友看到这里可能会感到不屑,不就是开放快捷键自定义能力吗?似乎没有什么值得深入探讨的。在设计之前,我也是这么想的,但是在实际的设计过程中发现,快捷键自定义背后的坑太多了。作为设计师不应该仅仅只能想到,用户能够自定义输入快捷键这一步,更应该思考自定义能力会带来哪些更多复杂的问题,而我们又该如何解决?

大厂实战案例!超详细的工具快捷键设计指南

1. 快捷键冲突校验

在用户自定义过程中,很容易发生和已有快捷键冲突的情况,导致用户需要不断地修改快捷键,查验是否冲突。这里提供两个解决冲突过多的思路。

  1. 限制官方快捷键数量:上文也已经分析过,快捷键并不是越多越好的,如果官方快捷键越多的话,用户冲突的概率更大。因此在这次改版中,我们制定了严格业务设置快捷键门槛,后续增量的快捷键必须要到达门槛后才能够使用。
  2. 缩小快捷键校验范围:在改版之前,酷家乐的快捷键是全量校验的,导致冲突概率极大,但分析后发现,只判断同一个上下文中的快捷键是否存在冲突即可。举一个简单的例子,酷家乐的画墙功能激活后,可以通过多个快捷键修改绘制属性,假设属性 A 的快捷键是 A,属性 B 的快捷键是 B,属性 C 的快捷键是 C,那么在校验时,只需要校验 ABC 之间不冲突即可。

大厂实战案例!超详细的工具快捷键设计指南

2. 快捷键自定义联动

酷家乐工具里的业务是非常多的,例如画户型、摆家具、硬装设计、定制设计、照明水电设计等,在这里为了后续方便描述,将这些称为子工具。子工具有独立的快捷键面板,并且子工具之间有一些相同的能力,例如参考线、精准布置、材质刷等。那么为了保持一致性,用户在一个子工具中修改的快捷键能够自动更新到其他子工具中。这可以减少用户的记忆负担,避免不同子工具之间的快捷键混淆。

大厂实战案例!超详细的工具快捷键设计指南

例如子工具 ABC 都有参考线功能,用户在子工具 A 的快捷键面板上把参考线改成了 A,那么子工具 B、C 的参考线快捷键也需要被联动修改为 A。

3. 快捷键文案联动

除了上述提到的键值联动外,还需要保证用户自定义后的文案联动。在工具 UI 中透传出很多快捷键的提示文案,那么当用户自定义快捷键后,UI 上的快捷键文案也需要联动。

4. 不设置官方快捷键的自定义能力

酷家乐也是一款面向商家的 To B 工具,相信 To B 业务的公司都深有体会,经常会收到 KA 商家的个性化需求。

大厂实战案例!超详细的工具快捷键设计指南

例如某个商家,要求我们对功能 A 增加快捷键,但是这功能 A 又不属于第二章中提到的任何一个类型,那怎么办呢?

这里也给大家提供一个解决思路,我们对功能 A 开放了自定义快捷键能力,但是不设置默认官方快捷键,商家用户可以根据自己的习惯去自定义快捷键,这样既满足了商家需求,又同时维护了我们内部的快捷键设置门槛。


五、总结


在本文中,我们深入探讨了快捷键的类型,分析了并非所有功能都需要快捷键,如何合理选择快捷键的键值,以及最后快捷键拓展能力的实际应用场景。希望这篇文章能够帮助你更好地理解快捷键,能够在快捷键设计的工作中,带来启发。


作者:丰草

Powered by Froala Editor

更新:2024-10-18

收藏

1人已收藏

  • 71

    作品

  • 1344

    粉丝

  • 0

    关注

  • 设计视角下用户习惯的养成和迁移
  • 企业级SaaS「工作台」的设计观察
  • 善用设计洞见,提升设计效用
  • 数智时代下的三维云软件代换趋势
相关标签

    猜你喜欢

      2024-10-18 原创文章 设计趋势 举报 3702 1 3 0

      工具快捷键设计指南

      14.0°

      你确定要举报工具快捷键设计指南

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2024年10月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      1
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录