Google web 用户体验部分总结

本文是Google web Fundamentals用户体验部分的总结哦，非原创，只是方便复习和查阅。

开撸！

使用 RAIL 模型评估性能

RAIL 是一种以用户为中心的性能模型。每个网络应用均具有与其生命周期有关的四个不同方面，且这些方面以不同的方式影响着性能

• 以用户为中心；最终目标不是让您的网站在任何特定设备上都能运行很快，而是使用户满意。
• 立即响应用户；在 100 毫秒以内确认用户输入。
• 设置动画或滚动时，在 10 毫秒以内生成帧。
• 最大程度增加主线程的空闲时间。
• 持续吸引用户；在 1000 毫秒以内呈现交互内容。

用户体验

焦点管理

一些用户几乎全靠键盘或其他输入设备来操作计算机。 对这些用户而言，焦点至关重要，因为这是他们到达所有屏幕元素的主要途径。 因此，Web AIM 检查清单才会在其第 2.1.1 节中指出，所有页面功能应该都能使用键盘来执行，除非是手绘图这种无法使用键盘执行的操作。

作为用户，您可以使用 Tab、Shift+Tab 或箭头键来控制当前聚焦的元素。 在 Mac OSX 上，控制方式略有不同：尽管 Chrome 始终允许您使用 Tab 进行导航，但在 Safari 等其他浏览器中更改焦点时，您需要按 Option+Tab。（您可以在 System Preferences 的 Keyboard 部分更改此设置。）

只使用键盘与表单进行交互非常方便，因为不需要切换到鼠标再切换回键盘就能完成任务。 由于表单中使用的所有元素都是具有隐式焦点的原生 HTML 标记，因此表单能够与键盘进行顺畅的交互，您不必编写任何代码来添加或管理聚焦行为。

使用原生元素对了解焦点行为极有帮助，因为是根据这些元素在 DOM 中的位置自动将它们插入跳格顺序的。
不过，必须注意的是，如果使用 CSS，可能会出现 DOM 中存在的顺序与屏幕上出现的顺序不同的情况。 例如，如果使用 float 之类的 CSS 属性将一个按钮右移，按钮却是以不同顺序出现在屏幕上。但由于它们在 DOM 中的顺序保持不变，因此跳格顺序同样保持不变。 当用户在页面中循环跳格时，按钮并不是按直观顺序获得焦点。

利用 CSS 更改元素在屏幕上的视觉位置时要小心。这可能使跳格顺序看似随机般地四处乱跳，令依赖键盘的用户感到困惑。因此，Web AIM 检查清单在第 1.3.2 节规定，由代码顺序决定的读取和导航顺序应直观并合乎逻辑。

一般来说，应时常试着在页面中循环跳格，这完全是为了确保您没有无意中弄乱了跳格顺序。 这是个值得养成的好习惯，并且也不会增加多少工作量。

有时，您需要做点侦探工作才能搞清楚焦点的下落。 可以利用控制台中的 document.activeElement 来了解当前获得焦点的元素。

使用tabindex

原生元素 DOM 位置提供的默认 Tab 键顺序虽然方便，但有时您需要修改 Tab 键顺序，而在 HTML 中对元素进行物理移动并不总是最优解决方案，甚至缺乏可行性。在此类情况下，您可以利用 tabindex HTML 属性来显式设置元素的 Tab 键位置。

tabindex 可应用于任何元素并接受某一范围的整型值，但不一定在每个元素上都有用。 您可以利用 tabindex 为可聚焦页面元素指定显式顺序、在 Tab 键顺序中插入原本不可聚焦的元素以及从 Tab 键顺序中移除元素。

例如：tabindex="0"：在自然 Tab 键顺序中插入一个元素。可通过按 Tab 键聚焦该元素，也可通过调用其 focus() 方法聚焦该元素

<custom-button tabindex="0">Press Tab to Focus Me!</custom-button>

tabindex="-1"：从自然 Tab 键顺序中移除某个元素，但仍可通过调用其 focus() 方法聚焦该元素

tabindex="5"：只要 tabindex 大于 0，就会将该元素跳至自然 Tab 键顺序的最前面。 如果有多个元素的 tabindex 均大于 0，Tab 键顺序将以大于 0 的最小值为起点，从小到大排序。使用大于 0 的 tabindex 被视为反面模式。