B端设计指南：6800字干货帮你掌握快捷键设计

前言

键盘，在很多人的眼中，就是一个信息录入的硬件设备。但你却不清楚完整的键盘当中，字符按键只占到了整个键盘数量的 60% （完整键盘共 108 键，字符键 65 键）

你会发现，键盘除了打字之外，还会有其他很多用途。快捷键，就是不可忽视的一部分。（注：完整的快捷键会包含，快捷组合键与快捷按键两部分，文章就不做过多纠结，意在讨论这样的交互形式，这里简单统称为快捷键。）

无论是设计师常见的三件套：Photoshop、Sketch、Figma，还是很多协作类型的产品：Word、PPT。

快捷键，仿佛早已是许多产品的标配。但是我们在做 B 端设计时，又时常忽略掉快捷键这一特殊的交互形式。今天我们就来聊聊 B 端产品与快捷键之间的关系。

在实际的工作当中，如何设计快捷键？我会产生这些疑惑：

• 一款 B 端产品，有必要去设计快捷键吗？
• 快捷键是否会增加用户的使用门槛？
• 如果想要去做快捷键设计，究竟应该如何设计？

我们就带着问题一起来了解快捷键之间的差异。

往期回顾：

B端设计指南：从 4 个方面帮你掌握「审批」的知识点

一直以来，业务都是 B 端逃不开的话题，你可以在许多文章当中看到我们的改版方向是因为业务需求、设计的思路是因为业务需求。

阅读文章 >

B端设计指南：网页布局方式科普

栅格一直都是很多同学非常疑惑的地方，无论是栅格的日常使用，又或者是栅格在整个产品当中的作用，一直以来都有非常多的疑惑，今天就来聊聊栅格在实际工作如何使用，以及产品之间究竟有何区别。

阅读文章 >

B端设计指南：栅格的定义和使用方法

在一个 B 端页面当中，关于栅格的使用方法，你或多或少都会有所疑惑。

阅读文章 >

老规矩

开始之前，还是先科普一下桌面端与移动端，虽然他们之间存在很多差异，比如，页面布局、交互方式等等… 这些咱们以后再聊。但是今天想贴合主题，聊聊录入设备之间的差异。

在移动端的设备当中，我们多数情况下，采取的是软键盘的形式，也就是手机录入是以虚拟键盘的形式存在。

这样也就导致虚拟键盘存在一些常见问题

1. 缺少快捷键：虚拟键盘无法通过组合键，实现快捷操作
2. 录入门槛高：不能对键盘进行精准定位，无法实现盲打键盘的快捷录入
3. 功能按键少：在录入标点符号等信息时，需要切换页面进行实现

总结下来就是整体信息录入效率低，准确率低。比如我们最常使用的复制粘贴，到了手机当中，只能够通过点击光标的方式来解决。对于桌面端键盘而言，由于我们录入信息的方式是通过双手与实体键盘进行交互，可以实现更多信息的点击。因此快捷键就会有很大的发展空间，这时候就会很好奇，快捷键究竟是如何诞生的？

我们简单回顾一下计算机发展的早期，发现快捷键设定其实是源自 “硬件设计上的无奈”。早在 1980 年，IBM 所研发的个人电脑 Acorn，在当时遇到了一个棘手的问题，在电脑产生系统故障过后，它都需要通过手动重启，并且需要很长的时间来进行内存测试，验证计算机是否出现问题。但在公司内部进行系统测试时，并不是需要这样的一个机制。因此工程师 Bradley 在当时创造了一个快捷键：Ctrl+Alt+Del 可以在不需要内存测试的情况下将系统进行快速恢复重置。

我们现在回顾，当时作为工程师，他在快捷键的设定上也是进行了很多思考，因为 Ctrl+Alt 键靠得很近，但 Del 则在键盘上的另一边，这样可以避免一些用户在日常使用的过程当中进行误触。

而后续 Windows 电脑遭遇蓝屏死机，而 Ctrl+Alt+Del 这样一组快捷键便留在很多人的心中。

随着个人电脑的不断发展，你会发现快捷键的设计也越来越复杂，因为我们想要了解如何设计快捷键，必须先知道，常见的按键分类有哪些？

常见快捷键的分类

目前共有 Windows MacOS 两大操作系统，在快捷键的设定上也会有着许多差异化，文章部分会将 Win/Mac 的系统统一进行讲解，大家可以优先看看关于两个系统之间的映射关系：

想要知道我们快捷键的差异，我们必须了解每一个按键的基本定义：

Ctrl / Command

Windows 系统当中的核心快捷键，可以理解为是各项操作的快速触发。

我们可以使用它去实现各种组合快捷键，比如使用 Ctrl + C（复制） Ctrl + D （创建副本），算是用户使用最高频的快捷键。

同样，在 Mac OS 当中，你会发现 Mac 的 Control 几乎很少使用，因为系统本身就没有给它 “安排太多任务” 取而代之的是饱经风霜的 Command 键。

Command 作为 Mac 独有的按键，它的地位几乎等同于 Win 当中的 Ctrl，并且两者的快捷键方式都极为类似，因此也就造成两个系统当中的按键差异。

Shift

Shift 也叫上档键，可将其意为连续的按键，因为在连续选择时会用到，它的功能主要有两点：

在中文输入的场景下，可以组合按键进行中英文的切换

在文件选中的场景当中，对文件的内容进行快捷选择的操作

Tab

Tab 也叫制表键，不过现如今已不再是制表的含义，更多可以为切换按键，比如我们经常使用 Command + Tab 来对软件进行切换。其用途主要有两点：

在信息录入时，按下 Tab 键来实现字符的缩进

在表格页面当中，通过 Tab 键实现对单元格的快速切换

Alt / Option

Win 系统当中的 Alt 与 Mac 系统的 Option 基本一致。他们的主要用途有两点

WIN：呼出菜单或点击按钮的组合键

MAC：快速访问系统偏好设置中某个选项的组合键

如何设计快捷键，是否需要快捷键

在我们的设计快捷键之前，需要考虑清楚是否真的需要快捷键。就像我们在网上冲动消费一样，购买的东西总会有当时觉得有用，然后立马吃灰的产品。所以明确需求的目的就显得尤为重要。

因为 B 端产品存在太多产品类型，在每一个产品类型当中，我们也会有不同的使用场景。这里我总结了几个维度去思考。

1. 高频使用

俗话说得到，好钢得用到刀刃上，快捷键的设定，一定是需要用户使用频率高才会有意义。因为快捷键的使用本身就会有使用门槛，如果你做在一些用户本身就不会频繁操作的地方，对于用户而言感知并不强烈。其次你也不想自己花费了精力，到头来设计思路并没有落地。

2. 核心功能

这里的核心功能其实是针对不同的角色。比如一个在线教育的产品，老师需要每天在产品当中去点评同学们的作业，也就意味着老师需要高频的在点评学生作业，这个时候其实作业点评就是老师的核心功能。那你对这个功能上的操作进行优化，大概率就不会存在太多问题。

比如我们以 figma 为例，如果它现在在 Darfts 首页增加了很多快捷操作，如：Command + N 新建画板 、Command+O 打开通知。

但是 Figma 并未对核心功能，编辑区域页面当中添加快捷键，我想这对于很多人而言，就是一个糟糕的设计。

3. 沉浸场景

B 端产品的使用大致会分为三种状态：暂留、沉浸、配置（这里就不展开讲了）。而最常见的便是专注于用户使用的沉浸场景，也就是说，我们必须要让用户在沉浸场景下使用产品，这些快捷键才会变得更加有意义。

沉浸及专注，专注就需要高效，因此高效使用快捷键就显得合情合理。

归纳整理快捷键的诉求

当我们明确真的需要快捷键的诉求过后，我们可以去思考，究竟应该设计哪些快捷键？哪些操作是属于高频操作？是否会存在操作之间的先后顺序？

首先可以通过实地观察，先去判断用户在某一页面当中，具体使用顺序或者流程，然后通过流程图将数据内容进行整理。这其实是我们设计快捷键的基础依据。

然后通过对页面当中不同操作进行数据埋点，能够得到用户具体的操作信息。通过这些数据信息，能够保证我们在做的设计都是有理有据，而不是拍脑袋的自己随意 YY 出来的。最后拿到数据进行分析，在数据当中并不能够单纯的去看它的点击量，而是要深入了解这个数据它背后的意义是什么？

这也是我不建议初级的设计师去做数据埋点的原因。因为我见过有太多设计师拿到数据过后直接不分析上手就看，导致出现太多数据背后的问题。

避免冲突

在快捷键的设定，我们应该考虑避免与其他快捷键重复。想要解决这个问题，我们必须先搞清楚，产品究竟采取什么架构方式。通常会分为 BS 架构与 CS 架构。

这里简单解释一下 BS 架构与 CS 架构的区别

BS 架构：（Browser/Server,浏览器/服务器模式）web 应用，可以实现跨平台，但是个性化能力低，响应速度较慢

CS 架构：（Client/Server,客户端/服务器模式）桌面级应用，响应速度快，安全性强，个性化能力强，响应数据较快

可以简单理解为，目前产品是否需要通过浏览器才能够打开。需要浏览器打开，那就是 BS 架构，不然则反之只有我们确定了具体的产品架构之后，你才能够知道你设定的快捷键是否与浏览器本身到快捷键有所冲突。因为浏览器自身的快捷键权限肯定是会高于你页面当中的快捷键，所以在设计上我们需要格外留意。

这里总结了一份浏览器的快捷键汇总，可以通过这个方式避浏览器的踩坑

但客户端的快捷键设定，相对会更加开放，因为客户端不会受到浏览器的限制，在快捷键的设定的空间则会大很多

快捷键的设定

明确清楚上面的诉求与限制过后，接下来我们可以从三个方面，来对快捷键进行设定：

1. 语义法

在电脑快捷键设定的早期，最常使用的办法便是通过翻译英文单词首字母，进而实现快捷键的设定。比如我们经常使用的 Command+D 进行复制，D 便是 Duplication 的首字母、Command+N 进行新建，N 便是 New 的首字母。这样的设定方式其实源于国外，同样也是我们日常设定最为常见的一种方式。

2. 流程法

流程法就是去思考整个快捷操作的具体流程，比如我们最常使用的 Command + C 与 Command + V 就是一个例子。

因为如果按照常规的设计思路，粘贴在大家的印象当中一定会是 Paste，但是由于复制、粘贴本身就是高频操作，并且两者按键相互关联，再加上 P 也是 Paint 的缩写，Command + P 有打印的含义，因此通过用户使用流程上的思考，最后将粘贴放在字母 V 上面。Viscidity 的缩写，它是一个名词，具有粘聚性、黏性的意思。

3. 竞品法

如果假设目前设计的产品当中已经存在许多竞品，它们就已经有了相对应的解决方案，这个时候可以考虑借鉴直接竞争对手的按键设计，因为你可以通过这样的竞品设计，让你的用户的切换成本更低，也能够让他们快速上手。

举一个例子，比如 Sketch 与 Figma，Figma 的出现本身就是与 Sketch 进行竞争，因此没有必要在快捷键上进行特立独行，反而会增加用户的使用门槛。

在哪使用快捷键

既然上面讲到了如何设计，咱们还是不得不提一提在 B 端产品当中，哪些地方可以使用快捷键？好方便在读文章的同学们直接抄作业，用在自己的系统当中。

1. 详情页编辑

详情页几乎是每一个 B 端产品必备的页面。它能够帮助用户进行详细数据的阅读，其核心诉求会分为两种：

对表格页当中的信息不太清楚，想要通过详情页进行更为仔细的阅读；

对存储的数据有所质疑，想要更改几条数据；

因此，分析完了这两种情况过后，我们可以使用快捷键，去满足用户对详情页编辑的诉求，进而可以实现对某一个页面的快速操作。具体做法我们可以按照上一章节讲的，如何设计快捷键的思路。我也举几个例子

比如现在对纷享销客这样一款 CRM 产品的详情页进行编辑时，除了思考初级 B 端设计师需要处理的视觉部分之外，你还可以使用快捷键，将详情页的编辑，与按键的字母 “E” 进行绑定，这样可以配合鼠标来完成页面的快速操作，提高 “高级用户” 的操作效率。

这样的优化就算是完了么？

其实这也是市面上绝大多数教程不会涉及的点。因为他们缺乏 B 端的实际工作经验。也就导致只会教大家如何依葫芦画瓢，教学员去实现某一个页面的具体布局，根本不考虑实际的项目当中的各种诉求与逻辑关系。这也可能是我上课只喜欢去画草图的原因，因为 B 端的“形”很简单，有太多的组件可以支撑你进行设计，但是 B 端的“意”则会过于复杂，很难理解。

说了这么多，我们来看看究竟应该如何进行优化？也就是在这个功能新增之下，还会有哪些存在的漏洞？

简单列三点：

1. 在用户进入到详情页，但并没有编辑权限时，点击了按键 E 应该怎么办？
2. 在整体的页面当中，就只绑定编辑操作吗？其他操作需要绑定按键吗？如果需要你会怎么设计？
3. 让用户知道快捷键的存在？是简单的信息外漏？还是会有一整套 “机制” 来去辅佐进行解释。

这样不断完善，设计方案才能更加完整。

大家要记住，虽然得到一个设计结论很简单，但是 B 端系统本身就不是简单去删除列表，去增加更多视觉上的引导。而是你增加了一个功能模块过后，有没有考虑到它在整个产品当中的合理性，是否有具备思考完整的设计思考。不扯那么多了，我们继续～

再举两个真实落地的例子：

1. 在网页端的 B 站视频播放页面（你可以理解为是视频的详情页），用户可以通过点击 W 为投币、D 为弹幕开关、E 为添加收藏夹、F 为全屏播放，实现对视频的快速操作。而投币、弹幕开关、收藏夹、全屏播放都是属于 B 站最为核心的功能操作，因此这样的设计非常的赞。

但 B 站的处理，还是会有小小的瑕疵。会有很多用户对于这样的快捷操作并不知情，可以考虑在入口提示上，进行对应的简单优化。当然这样的产品还会有很多，比如 Youtube、抖音网页版都采取了这样的设计，大家可以自己去查看总结一下不同产品的特点。

2. Salesforce，还没开始对它进行调研的时候，我其实就能够猜到作为世界上如此出名的产品，肯定会有快捷键的设计。但随着调研的深入，发现在早些年间，它并没有进行快捷键的设计，因此受到很多用户的 Diss。随之便有人自行开发一款浏览器插件来实现对应的功能。

而在后续的产品迭代当中，SF 逐步更进了这一功能，通过快捷按键，可以实现多个功能。逐渐将快捷键的方式放在整个系统当中，得到更多人的认可。目前形成了这样的一个完整快捷键体系。

表格页新建

在表格页当中，我们最常使用的便是新建操作。同样可以按照详情页的思路，将整个页面当中的新建操作进行键盘按键绑定，实现快捷操作的效果。

比如在飞书管理后台的成员与部门页面当中，我是否可以通过点击 N 实现快速添加成员的操作？通过这样的方式就能够保证，用户的快速按键操作。其实这里还可以将问题再稍稍加深，我们是否还可以考虑一些新的方式？比如全局新建，在整个系统当中提供一个全局新建的入口，让入口更为统一，甚至可以实现全局键盘操作的“梦想”。又或者是通过快捷键呼出全局搜索，进行实现对应的操作？类似于 Notion 这样的产品，这些都是可以去思考的方向。

导航菜单切换

在 B 端产品当中，导航菜单的设计是最痛苦的一件事。因为一个员工，想要完成自己的工作，就必定会在不同的导航菜单之间进行来回切换。在 2022 年的趋势这篇文章里也讲到，越来越多的 B 端产品开始变得臃肿。也就意味着用户需要不断寻找、不停的切换导航菜单，来完成这个角色自身的工作，因此针对臃肿的 B 端产品，我们可以使用快捷键来实现导航菜单的切换。这里给到几个产品的思路，大家可以学习借鉴一下：

比如常见的飞书，因为本身是 CS 架构（客户端），因此可以通过组合键的形式，来实现对导航菜单的快速切换。

飞书通过按住 command + 1、2、3 … 来实现切换。

钉钉则在这部分就缺少了这样的设计。而薪人薪事的做法则会有所不同，它的入口非常特殊，采取全局导航的形式（这个后面会单独出导航菜单的文章来进行讲解），将整个入口进行绑定，通过双击 command 对导航中心进行呼出，并且后续可以支持更多导航菜单的切换，这也是一个不错的思路，值得大家借鉴。

全局功能

在你的系统当中，一定会存在一些全局影响的功能。它会影响到系统当中的每一个角落。比如 CRM 系统里面的通讯录、消息、邮件。它本身和主营业务差别不大，但是由于业务发展等其他关系，需要单独处理。因此会有很多全局使用的功能，这时候便可考虑将其与快捷键进行绑定。比如明道云，因为在明道云的整体设计当中，消息、通讯录都是游离产品架构之外的一些协作内容。因此名道云将其通过快捷键的方式进行查看，进而实现页面的快速呼出，能够加大用户的使用效率

总结：

分享了过后，最后再唠一唠我的自己感受。其实快捷键是一个非常立竿见影的设计提升方式，我们除了去想清楚快捷键应该如何设计之外，更多还需要让用户能够发现有这样快捷键。虽然 B 端产品我们可以通过客户培训、新手引导、帮助文档的方式来教会用户，但是快捷键这样的一个功能本身是针对中、高熟练度的用户，也就意味着，你需要不断的去培养用户养成快捷键的习惯，这样才能够保证，快捷键能够真正的被用户所接受。

其实现如今出现了很多无障碍的设计，大多数情况下都是在讨论如何脱离鼠标进行快捷的操作。其实比起无障碍，快捷键应该能够出现在更多 B 端产品当中。

最后做个总结：

我们常见的常见快捷键会分为：Ctrl、Command、Shift、Tab、Alt、Option

如何设计快捷键？

首先要去判断是否需要快捷键，共有三种判断方法、高频使用、核心功能、沉浸场景。其次要去归纳用户的快捷键诉求，想清楚快捷键的使用场景，避免与其他软件冲突。接着去想想究竟怎么设计快捷键？可以使用语义法、流程法、竞品法。最后我们可以在哪使用快捷键，能不能抄一抄作业？可以在详情页编辑操作、表格页新建操作、导航菜单的快速切换、以及全局的功能操作。

唯快不破！可能是最全面的PS快捷键使用指南（图文演示）

@阿随向前冲 ：看完这篇，帮你掌握最常用的32个Photoshop 快捷键。

阅读文章 >

我是 CE 青年，一个 2 B 行业 的 2B 设计师

欢迎关注作者的微信公众号：CE青年交互设计