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 被视为反面模式。