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 被視爲反面模式。