键盘没有反斜杠怎么输入（国际键盘快捷键(译文-来自）

2023 年 2 月 28 日

我对进入这个项目的键盘知之甚少。作为 Figma 编辑器可用性团队的一名软件工程师，我的日常工作通常专注于设计编辑器体验。事实证明，键盘快捷键是其中的重要组成部分。这些预设组合键对于高效、直观的工作流程至关重要，并且具有许多可访问性优势，例如可以更轻松地访问菜单和功能。然而 Figma 的许多快捷键最初是基于美国键盘设计的，这意味着它们不适用于许多其他类型的键盘。

我们的团队开始看到源源不断的与快捷方式相关的错误报告，因为用户在 Figma 中遇到指令，例如“按下⌘ \以切换 UI”——尽管他们的键盘没有\（反斜杠）键——或者禁止人们进行光标聊天对话，因为它是他们不可能按/（正斜杠）来启动消息。Figma 用户热衷于他们的工作流程，进而热衷于他们的键盘快捷键。我们希望确保任何地方的每个人都能获得相同的键盘效率。我们召集了一个跨职能团队，开始致力于使 Figma 快捷键对国际键盘更友好，这一章程将带我们踏上明年的曲折旅程。

当您按下任意键时，浏览器会向 Figma 标准发送KeyboardEvents有关按下哪个键的信息。我们收到 a 后的第一步KeyboardEvent是将其翻译成我们的编辑可以解释的内容。另外，我们在 JSON 文件中指定可能的键盘快捷键和它们触发的操作。这些操作根据快捷方式本身是启用还是禁用而有所不同，这取决于用户和产品状态、偏好、它们所在的产品、操作系统 (OS) 等方面。一旦我们收到用户的按键操作，我们就会针对可能的快捷键列表运行它。如果匹配，我们执行关联的操作（如果不匹配，则什么也不会发生）。Et voila ✨ 粘贴了一个框架，切换了 UI，出现了一个光标聊天气泡。

从表面上看，似乎我们需要做的就是向 JSON 文件添加一些新的快捷方式定义。如果用户使用瑞典语键盘，请为他们提供Meta Ä“Bring forward”而不是⌘ ]. 如果用户使用韩语键盘，请为他们提供“切换 UI”的映射，₩而不是⌘ \.

这是兔子洞开始的地方。

在德语键盘上，“减少文字粗细”的快捷方式是Meta Alt ß。看起来很简单，但是当插入我们的键盘快捷键 JSON 时，这个特定的键盘快捷键不起作用。事实证明，当我们尝试通过大写来规范化快捷方式时，我们看到它"ß".toUpperCase()变成了SS，在将单个关键字符转换ß为两个时导致意外行为SS。最不直观的是，这意味着"ß".toUpperCase().toLowerCase()不给我们ß，原始字符。

谨防！我们通过使用新的大写 eszett 字符解决了这个问题，ẞ谢天谢地，它在大写时保持不变。

什么？一个新的大写字母？2017 年，新的大写 eszett 字符被德国拼写委员会正式采用，尽管该字符在此之前已经存在于字体中。编码语言似乎还没有完全赶上来。

由于存在大量可能的键盘布局，我们希望首先支持用户最常使用的键盘布局的快捷方式。通过桌面应用程序可以更轻松地收集此信息，我们可以在其中检测操作系统键盘设置。但是，在浏览器上，我们最多只能根据涉及实验性键盘 API 的启发式方法进行猜测，这有其自身的局限性。以下是我们的启发式方法的工作原理：此 API 告诉我们与当前用户的每个位置键代码关联的字符，然后我们将其映射到已知的键盘布局。例如，我们可能会得到键盘代码Quote具有ä字符，并且结合其他此类映射，我们可以推断用户可能使用瑞典语键盘。

通过键盘检测日志记录，我们在 30 天内看到 Figma 上使用了超过 2500 种不同的布局！我什至不知道有这么多键盘布局，原来键盘布局一直有成千上万种。Marcin 向我们介绍了这些具有百年历史的 Remington 打字机布局，适用于国内��瑞士�标准和瑞典语。在这个细节上放个大头针，因为键盘检测的困难稍后会回来。

将我们的检测数据与论坛反馈帖子相结合，我们将我们的初始工作缩小到（不是很短）标准键盘的候选名单：德语、法语 AZERTY、日语、英国��瑞典���芬兰�、丹麦��挪威�、意大利��西班牙语�、西班牙语 LATAM 、中文、葡萄牙语和韩语。

确定键盘后，下一步是审核哪些键盘快捷键有问题，原因可能是缺少键、物理上无法访问或与其他快捷键冲突。几乎所有这些快捷方式都涉及符号字符（而不是罗马字母），这减少了要调查的快捷方式的数量。

作为存在于浏览器领域（也存在于操作系统中）的图形工具和文本编辑器——Figma 继承了每个空间的所有快捷方式，其中许多已经相互冲突。在开发会影响用户工作流程的快捷方式时，全面了解 Figma 在这些不同生态系统中的位置非常重要。例如，我们希望保持用户可能已经从其他工具获得的运动记忆，将我们的快捷方式与类似的操作（例如，复制、粘贴、缩放）对齐。同时，我们不仅需要避免现有 Figma 快捷方式之间的重复快捷方式冲突，还需要避免操作系统或其他主要桌面应用程序定义的快捷方式之间的重复快捷方式冲突。

此外，在将现有的美国 QWERTY 键盘快捷键调整为一系列新键盘布局时，还有许多其他注意事项：

• 键盘快捷键的物理舒适度：键盘上的组合键位于何处，触及它们是否舒适？
• 在适用的情况下保持“配对”逻辑：像“移到前面”和“移到后面”这样的动作应该有键盘快捷键，并且按键物理上彼此相邻。
• 所有快捷键的 Mac 和 Windows 版本：⌘Mac 上的键通常像ControlWindows 上的键一样使用，但 Mac 上仍然有一个Controll键用于某些快捷键，为此 OS 修改键转换添加了边缘情况和例外情况。

我们的下一个产品问题之一是如何存储用户的键盘首选项。我最初的直觉是，与大多数偏好一样，键盘布局偏好也应该为每个用户分配。但键盘首选项不仅仅是一个软件产物，它们与物理对象有着不可磨灭的联系：键盘本身。因此，我们必须考虑同一用户可能拥有多台设备的情况，可能一台在工作，一台在家里，键盘布局各不相同。

我们决定将键盘布局偏好存储在 device 上localStorage，以便不同的设备可以具有不同的默认 Figma 键盘布局——同时还将用户偏好写入数据库。如果用户清除了他们的浏览器缓存（包括localStorage），或者登录到全新的设备，我们仍然可以从我们的后端加载他们最近的偏好。虽然这个存储系统很复杂，但我们知道它会带来更好的用户体验。

回到重新映射这些快捷方式的挑战：在法语 AZERTY 键盘上，“Unindent text”的快捷方式是Meta ^。更明确地说，如果用户按下Meta ^，我们希望他们的文本取消缩进，而不是输出^字符。不幸的是，^是一个变音键，这意味着它在另一个字符之上添加了一个字形。当^在 AZERTY 键盘上按下时，浏览器会告诉我们，“这是一个死键”*，表示我们正在等待将其与另一个键组合，并向我们抛出一堆我们需要按顺序处理的其他键盘事件以防止^出现。

但是，当然，浏览器是不一致的，特别是Safari 交换变音键的顺序keydownn和事件，导致我们在应该执行操作时compositionstart发出字符。^

因此，尽管Chromee 对事件进行了排序：

1. 按键
2. 合成开始
3. 构图更新
4. 输入

Safarii 命令它们：

1. 合成开始
2. 构图更新
3. 输入
4. 按键

我们依靠 keydown 事件来了解快捷方式是否被接受，并基于此，将拒绝input事件侦听器中的字符。在 Safari 上，如果这些事件乱序，逻辑就会中断。实际上，这意味着我们取消缩进的快捷方式在 Safari 上不起作用。

*除了我们的常驻键盘专家 Marcin：“死键”来自打字机世界，其中一个键会输出重音，但不会推进马车 - 因为它们没有移动，所以它们是“死的”。正确的事件顺序是通过先输入一个死键来“组装”一个字母，将重音放在页面上，然后再在上面输入一个普通字母。

在所有键盘上，“缩放重置”是Shift 0.一个无害的快捷方式，除非您广泛使用键盘上的小键盘。Shift与小键盘键组合使用会覆盖numlockk，也许令人惊讶的是，这意味着“缩放重置”不起作用。Marcin在 2021 年发布了关于这个错误怪癖的推文，这是其他设计师/制造商几十年前做出的决定的结果——简而言之，这基本上就是键盘的故事。

一旦我们完成了对所有这些键盘布局的所有这些新键盘快捷键的支持，我们仍然勉强完成了一半。我们需要通知非 QWERTY 用户他们现在有更多的键盘快捷键覆盖范围，而不打扰 QWERTY 用户，因为他们没有任何变化。此外，如果用户更改了他们的物理或操作系统键盘布局，我们不想混淆为什么现在他们的 Figma 键盘快捷键与他们在指尖看到的内容不匹配。该团队制定了几个处理此类情况的流程图，其中路径分支基于 Figma 桌面应用程序与浏览器、用户现有的 Figma 键盘布局首选项（如果有）以及用户的系统键盘布局。

重新输入用户键盘布局检测的不确定性。

在 Figma 桌面应用程序上，我们可以看到用户的操作系统键盘布局作为他们��字符串�名称：com.apple.keylayout.ABCor00004009或org.sil.ukelele.keyboardlayout.armenianphonetic.armenian-phonetic。

鉴于这些信息，我们还不清楚应该向用户推荐什么样的 Figma 键盘布局。我们不得不忍受不确定性，其中明显的匹配——com.apple.keylayout.US是 Figma 上的美国 QWERTY 布局，0000040C是 Figma 上的法国 AZERTY 布局——可以用来帮助引导用户的 Figma 键盘布局偏好，但否则我们会退回到什么都不做. （甚至这也有它的缺陷：在这个项目的中间，Apple 改变了它的一些日文布局的名称，这打破了我们的本地内部映射。

具体来说，变成了 。这导致我们切换到前缀匹配com.apple.inputmethod.Kotoeri.Japanese，com.apple.inputmethod.Kotoeri.KanaTyping.Japanese.Katakana虽然仍然不完美，比精确的字符串匹配要好。）

在浏览器上，这个决策树变得更加模糊，因为在实际检测用户的键盘布局方面存在挑战。我们不仅因为 KeyboardLayout API 并非在所有浏览器上都可用而获得较少的覆盖，而且弥合该数据与实际布局之间的差距也是一个不完美的过程。在浏览器上，我们根本无法通过这种方法检测到几种布局。

更复杂的是，在操作系统级别定期和频繁地在罗马字符键盘布局和非罗马字符布局之间切换是一种常见模式。例如，对于日本用户来说，在一个会话中多次在日语和 ABC 布局之间切换是很常见的，同时使用相同的物理键盘。您的键盘快捷键可以使用与您的文字不同的语言；并非所有键盘布局更改都需要更改 Figma 键盘布局设置。

这是一个秘密：我们非常接近推出一个国际键盘快捷键支持版本，该版本带有一个选项，可以在检测到系统键盘更改时自动更新用户的键盘布局。但是，所有上述关于我们的键盘检测技术有多直接的挑战让我们停下来思考我们实际想要完成的事情。最后，我们放弃了这个想法。最好的情况是，它会在人们切换键盘布局时提醒他们，最坏的情况是，会导致他们的设置发生意外更改。我们对我们的入职和键盘检测决策树进行了几次迭代，旨在尽可能减少干扰。

我们最终的设计风格？在设置窗格中添加键盘布局的可视化。有大量的键盘布局（并且可以为那些喜欢的人定制），所以仅仅通过名称来识别一个并不总是那么容易。我们的解决方案：绘制所有支持的 Figma 键盘布局图，从而为人们提供一种直观的方式来确认他们的 Figma 键盘与他们的物理键盘相匹配。

好的，现在让我们Shift -（“缩小”）：在 11 月，我们为一组非美国QWERTY 键盘�提供了键盘快捷键支持。我们从兔子洞的另一边出现了。话虽这么说，这项工作永远不会完成！我们继续添加新的快捷方式，改进现有的快捷方式，并添加护栏以防止回归。我们的键盘布局覆盖范围远非全面，我们欢迎您通过此 Google 表单提出请求。

非常感谢整个团队：Marcin Wichary（设计师和常驻键盘专家）、KC Oh（产品经理）、Rachel Miller（工程经理）、Sula Yang（产品营销经理）和Michael Feldstein（工程师）。

作者:Dorothy Chen - Software Engineer

出处:https://www.figma.com/blog/behind-the-scenes-international-keyboard-shortcuts/