Web是新的终端：您是否正在使用Web的键盘快捷键和热键？

NUI is OUI, Dear Reader. About eight years ago I blogged about "text mode" and said (if I may be silly and quote myself):

NUI是OUI，亲爱的读者。 大约八年前，我在博客上发表了关于“文本模式”的文章，并说(如果我可能很愚蠢并引用自己的话)：

"I’m just saying that my Tab,Tab,Tab,Enter will beat your Click,Tab,Alt-F,O,Click,Double-Click, more often than not." - Me

“我只是说我的Tab，Tab，Tab，Enter将击败您的Click，Tab，Alt-F，O，Click，Double-Click。” - 我

I like to look at the computer systems of the businesses that I visit on a regular but spaced apart basis over the course of years. You know these businesses - your dentist, your eye doctor, the car shop that changes your oil, perhaps your bank or finance person. You see them every 3 to 6 months, or perhaps over a many years.

我喜欢看我多年来定期但间隔一定地访问的企业的计算机系统。 您知道这些业务-您的牙医，眼科医生，更换机油的汽车维修店，也许是您的银行或财务人员。 您每隔3到6个月(或可能是多年)就会看到它们。

At my automotive shop, I watch them move from:

在我的汽车店里，我看到它们从以下位置移动：

• Keyboard heavy, very fast

  键盘沉重，速度非常快

  • VT100 Dumb Terminal
    VT100哑终端
  • Windows running a VT100 Dumb Terminal Emulator
    Windows运行VT100哑终端仿真器
  • Netscape with Java running a VT100 Dumb Terminal plugin
    Netscape与Java运行VT100 Dumb Terminal插件

• Mouse heavy, very slow

  鼠标沉重，非常慢

  • Ugly gray HTML application in Netscape
    Netscape中的难看的灰色HTML应用程序
  • Pretty AJAXy HTML application in Firefox
    Firefox中的漂亮AJAXy HTML应用程序

• Keyboard heavy, very fast

  键盘沉重，速度非常快

  • Very terminal-like AJAXY HTML application in Firefox
    Firefox中非常类似于终端的AJAXY HTML应用程序
  • ???
    ???

Tab, Tab, Enter is just the start. I propose that the interaction model for this "timeline" looks like somewhat like this.

Tab，Tab，Enter只是一个开始。 我建议此“时间轴”的交互模型看起来像这样。

If you are an airline counter customer service person, you're going to want to touch the mouse as little as possible. Every keystroke counts, in fact, and this is one of the reason that every airline counter system I've ever seen is either a terminal itself or a browser window into a terminal. The interaction model for an airline workers apps needs to be terse and crisp and keyboard based because they are using it all day.

如果您是航空公司柜台客户服务人员，则将需要尽可能少地触摸鼠标。 实际上，每次击键都很重要，这就是我见过的每个航空公司柜台系统要么是终端本身，要么是终端中的浏览器窗口的原因之一。 航空公司工作人员应用程序的交互模型必须简洁明了且基于键盘，因为他们整天都在使用它。

When Web Sites start to become Web Applications that are used every day they have to have keyboard shortcuts. More and more if you app doesn't have them you're going to limit your audience.

当网站开始成为每天使用的Web应用程序时，它们必须具有键盘快捷键。 如果您的应用程序没有它们，那么将会越来越多，这将限制您的听众。

All my favorite web applications use keyboard shortcuts, and you'll notice that they are coalescing around a few common patterns:

我最喜欢的所有Web应用程序都使用键盘快捷键，您会注意到它们正在围绕几种常见模式进行合并：

• J, K to move up and down
  J，K上下移动
• Enter to select or expand
  输入以选择或扩展
• G + some letter to Navigate (Goto)
  G +导航信(转到)
• / for Search
  /用于搜索
• ? for keyboard help
  ？ 获得键盘帮助

There are two kinds of hotkeys on the web, though. There are "accesskeys" which have been in HTML since forever, then there's "hotkeys" that are application specific and often done with JavaScript bindings or jQuery plugins like jquery.hotkeys. Implementing these takes virutally no effort and can pay off hugely with your most discerning customers. Logical hotkeys can also turn beginners into enthusiasts.

但是，网络上有两种热键。 还有“accesskeys”永远以来已在HTML，再有就是“热键”是应用特定的并且经常用JavaScript绑定或做类似jquery.hotkeys jQuery插件。 实际上，实施这些方法无需花费任何精力，并且可以为最挑剔的客户带来巨大的回报。 逻辑热键也可以将初学者变成爱好者。

<gratuitous bold="true">There is literally no reason to not implement keyboard hot-keys in your web application other than you've likely forgotten it's important.</gratuitous>

<gratuitous bold =“ true”>实际上，没有理由在您的Web应用程序中不实现键盘热键，除非您可能已经忘记了它的重要性。 </ gratuitous>

存取键 (Access Keys)

Implementing accesskey requires only the will and some thought.

实施accesskey只需要意愿和一些思想。

<label for="homePhone">Home phone:</label>
<input name="HomePhone" type="text" maxlength="20" id="homePhone" accesskey="H" title="Home phone" class="text-box" />

Here we've made "ALT-H" go to the Home text box. Do you want awesome and automatic "KeyTips" to appear when the user presses ALT? Use the lovely KeyTips jQuery plugin (on NuGet also).

在这里，我们已将“ ALT-H”转到“主页”文本框。 你想真棒和自动“快捷键提示”出现在用户按下ALT是什么时候？ 使用可爱的KeyTips jQuery插件(也在NuGet上)。

Access Keys are very easy to setup and now give your 8-hours-a-day data entry user a huge gift and keeps their hands off the mouse. Make sure you do some user experience testing - even if only with yourself - and do some standard tasks with your web application and count both keystrokes and mouse touches.

访问键非常易于设置，现在可以为您每天8小时的数据输入用户提供丰厚的礼物，并使他们的手脱离鼠标。 确保您进行了一些用户体验测试-即使仅是您自己-并使用Web应用程序执行了一些标准任务，并计算了击键次数和鼠标触摸次数。

热键 (Hot Keys)

Slightly more complicated is adding Hot Keys via JavaScript but only slightly. John Resig's jQuery.Hotkeys is a simple plugin that lets you add and remove keyboard handlers for events in any browser supported combination.

稍微复杂一点的是通过JavaScript添加热键，但只是略有增加。 John Resig的jQuery.Hotkeys是一个简单的插件，可让您添加和删除任何受浏览器支持的组合中事件的键盘处理程序。

// e.g. replace '$' sign with 'EUR'
$('input.foo').bind('keyup', '$', function(){
  this.value = this.value.replace('$', 'EUR');
});

You can bind with selectors so that keys are captured on specific inputs, like the replace/expand example above, or you can bind (and unbind to the document with optional modifiers:

您可以与选择器绑定，以便在特定的输入上捕获键，例如上面的替换/扩展示例，或者您可以绑定(并使用可选的修饰符取消绑定到文档：

$(document).bind('keydown', 'ctrl+g', myfunc);

Sushant Bhatia has a great blog post (coincidentally written within minutes of mine, great minds think alike!) that talks about the importance of keyboard UX and how hotkeys are always preferable over tab, tab, tab.

Sushant Bhatia有一篇很棒的博客文章(恰好在我的几分钟内写的，很多人都这么想！)谈论了键盘UX的重要性以及热键总是比tab，tab，tab更可取的。

具有出色键盘支持的示例Web应用程序 (Example Web Applications with Awesome Keyboard support)

Here's some of the best examples I (and you, thanks Dear Reader for helping!) could find of great Keyboard support in Web Applications.

这是我(和您，感谢亲爱的读者的帮助！)可以在Web应用程序中提供出色的键盘支持的一些最佳示例。

推特 (Twitter)

I use these Twitter keyboard shortcuts all the time. You don't need to learn them all. Just use . for refresh, / for search and G-R for replies and you're already ahead of the pack.

我一直在使用这些Twitter键盘快捷键。 您不需要全部学习。 只需使用。 刷新，/搜索和GR进行回复，您已经超前了。

邮箱 (Gmail)

Gmail really gets credit for proving, in my opinion, that hotkeys on the web can be done elegantly and "just work." It may take a day or two but once you learn how to triage your email with just your keyboard you'll be surprised how fast you can get in and out and back to work.

在我看来，Gmail确实值得赞扬，因为它证明可以轻松完成Web上的热键并且“可以正常使用”。 可能需要花费一两天的时间，但是一旦您学会了如何仅用键盘对电子邮件进行分类，您会惊讶地发现，进出后可以多快地恢复工作。

I use J and K to navigate, X to select then # to delete or E to archive. Bam, bam, bam.

我使用J和K进行导航，使用X选择然后删除＃或选择E进行存档。 am，ba，ba。

邮件 (Hotmail)

Hotmail? Yes, while Hotmail drops the box by not including a help popup for the ? button, Hotmail not only supports their own keyboard shortcuts, but also familiar shortcuts from Gmail and Yahoo.

Hotmail？ 是的，而Hotmail通过不包括帮助弹出框来删除该框。 按钮， Hotmail不仅支持自己的键盘快捷键，还支持Gmail和Yahoo熟悉的快捷键。

的GitHub (GitHub)

Another example of a site you may be on for hours if it's part of your work. Github also supports ? for help and gives lots of shortcuts. Theirs are also J and K (which have meant up and down for folks familiar with vi and *nix editors) for moving up and down as well as X for toggling selection like Gmail, C for great, and / for search. You see how a pattern is developing on its own?

如果这是您工作的一部分，则您可能要花几个小时才能浏览该网站。 Github还支持吗？ 寻求帮助，并提供许多快捷方式。 他们也是J和K(对于熟悉vi和* nix编辑器的人来说意味着上下)，用于向上和向下移动，以及X用于切换选择(例如Gmail)，C(表示出色)和/用于搜索。 您看到模式是如何自行发展的吗？

There doesn't appear to be a Help page with the list of Github keyboard shortcuts so for now, go over there, login and press ? to explore the complete list.

似乎没有包含Github键盘快捷键列表的“帮助”页面，所以现在，转到那里，登录并按？。 探索完整列表。

吉拉Bug追踪器 (Jira Bug Tracker)

Jira from Atlassian is a popular bug tracker with this same keyboard model. Every web application needs to include a web popup like this when ? is pressed.

来自Atlassian的Jira是具有相同键盘型号的流行的错误跟踪器。 每个Web应用程序何时需要包含这样的Web弹出窗口？ 被按下。

记住牛奶 (Remember The Milk)

Remember The Milk is a web-based todo application with lots of mobile versions as well. However, they are best known by their web application which was very innovative when it first came out.

记住，Milk是一个基于Web的Todo应用程序，也具有许多移动版本。 但是，他们最出名的是Web应用程序，该应用程序在首次发布时就非常具有创新性。

In fact, they were the first web application I ever used that actively marketed their application as being keyboard friendly. I love that we're at a time in the web where that is possible.

实际上，它们是我使用的第一个Web应用程序，以键盘友好的形式积极地销售其应用程序。 我喜欢我们一次在网络上实现这一目标。

朝体 (Asana)

Asana is a team-focused shared todo list for projects and project management. They are super-focused on keyboard support and use it in all their promotional video AND think it is so important that they keep on the screen all the time! Classy.

Asana是针对团队和项目管理的共享待办事项清单。 他们非常专注于键盘支持，并在所有促销视频中都使用了它，并认为这非常重要，因此他们必须一直在屏幕上显示！ 优雅

And they have LOTS, very logical and organized.

他们有很多东西，非常合乎逻辑和有条理。

特雷洛 (Trello)

Trello's up and coming project management board software also leans heavily on hotkeys.

Trello即将推出的项目管理板软件也非常依赖于热键。

YouTrack

YouTrack

YouTrack from JetBrains says this about itself: "YouTrack is a keyboard-centric application and provides enough keyboard support to let you forget about using the mouse in most cases." Sassy!

来自JetBrains的YouTrack对自己说：“ YouTrack是一个以键盘为中心的应用程序，并提供足够的键盘支持，使您在大多数情况下无需使用鼠标。” 野蛮！

Personally, I'm moving away from the Ctrl-Alt-This and That and prefer simpler hotkeys like these for YouTrack.

就个人而言，我不再使用Ctrl-Alt-This和That，而是喜欢像YouTube这样的更简单的热键。

And as this isn't an exhaustive list but rather a long list to make a point, how about DuckDuckGo.

由于这不是一个详尽的清单，而是一长串的观点， DuckDuckGo怎么样。

鸭鸭去 (DuckDuckGo)

The little search engine that could, DuckDuckGo includes keyboard shortcuts not just to move around search results but also another unusual keyboard-centric feature they called !Bang.

DuckDuckGo是可能的小型搜索引擎，它不仅包含键盘快捷键，它不仅可以在搜索结果中移动，而且还包含另一个不寻常的以键盘为中心的功能，它们称为！Bang 。

I keep DuckDuckGo.com as my home page. If I want to search them, I search. If I want to search Bing I type "hanselman b!" or Google with "hanselman g!" or hundreds of other sites like "hanselman image!" or even super specific site searches like "hanselman csharp!"

我保留DuckDuckGo.com作为我的主页。 如果要搜索它们，则进行搜索。 如果我想搜索必应，请输入“ hanselman b！ ”或带有“ hanselman g！ ”的Google或其他数百个网站(如“ hanselman image！ ”)，甚至是超级特定的网站，如“ hanselman csharp！ ”。

Now THAT'S keyboard friendly.

现在，它对键盘友好。

结论 (Conclusion)

Like it or not, there's a standard brewing on the web. Not only should you have accesskey support (should have done this years ago) but also extensive keyboard shortcuts if you expect your users to spend serious time with your application.

不管喜欢与否，网络上有一个标准的酝酿过程。 如果您希望用户花费大量时间在应用程序上，那么不仅要有访问键支持(应该在几年前就应该这样做)，还要有广泛的键盘快捷键。

At the very least, I think it's fair to say that these are de facto standard shortcuts now on the web and you should think about what that means for your application:

至少，我认为可以公平地说，这些实际上是现在网络上的标准快捷方式，您应该考虑这对您的应用程序意味着什么：

• J, K to move up and down
  J，K上下移动
• Enter to select or expand
  输入以选择或扩展
• G + some letter to Navigate (Goto)
  G +一些要导航的字母(转到)
• / for Search
  /用于搜索
• ? for keyboard help
  ？ 获得键盘帮助

Good shortcuts mean happy and engaged users.

良好的捷径意味着开心和参与的用户。

翻译自: https://www.hanselman.com/blog/the-web-is-the-new-terminal-are-you-using-the-webs-keyboard-shortcuts-and-hotkeys