你是否有過因鼠標沒電而只能用鍵盤來使用電腦的經歷嗎？這種交互方式就是鍵盤導航（keyboard navigation）。鍵盤導航讓用戶能在不使用鼠標或觸控板的情況下使用計算機，而無需從鍵盤上抬起手。也就是說，物理鍵盤可以成為輸入文本、導航、執行操作的基本輸入設備。

鍵盤導航的重要性主要體現在以下 2 個方面：

①提高效率

對于那些經常需要使用鍵盤的超級用戶（power user），例如程序員、數據錄入員等等，鍵盤導航可以大大提高他們的工作效率和生產力。

②確保可訪問性

某些殘疾的用戶別無選擇，只能使用鍵盤。例如，有運動障礙（motor impairment）的人因震顫而難以進行使用鼠標所需的精細運動；盲人用戶依賴屏幕閱讀器等輔助技術，看不到在哪里點擊鼠標。

可見，鍵盤導航體驗是不可或缺的。所以我們建議將鍵盤導航體系引入到 PC、Pad、TV 等領域的設計中。

更多鍵盤設計分析：

一、基礎概念

1. Focus Indicators（焦點指示器）

指的是用于標識當前焦點所在元素的視覺提示，可以幫助用戶在頁面中快速定位當前焦點所在的位置，提高鍵盤導航的可用性和可訪問性。

其有 2 種常見的視覺效果：

①The Halo Focus Effect（光環效果）

當元素獲焦時，周圍會出現一圈光暈狀的視覺效果（也被稱為「focus ring」）。

②The Highlighted Appearance（突出效果）

當元素獲焦時，該元素的背景色或前景色會變為應用的 accent color（主題色）。

2. Tab Stop（Tab 鍵導航停靠點）

指的是在鍵盤導航中，通過按 tab 鍵，焦點可以停靠的 UI 元素。當用戶使用 tab 鍵進行導航時，焦點會依次移動到不同的 tab stop 上，直到到達目標 UI 元素。

3. Tab Order（Tab 鍵導航順序）

指的是在鍵盤導航中，焦點移動的默認順序。當用戶使用 tab 鍵進行導航時，焦點會按照 tab order 的順序移動。

4. Initial Focus（初始焦點）

指的是在鍵盤導航中，焦點默認停靠的 UI 元素，即 tab order 的起點。

5. Focus Group（焦點組）

也被稱為「control group」，指的是一組相關的元素，它們在鍵盤導航中被視為一個整體。也就是說，當用戶使用 Tab 鍵進行鍵盤導航時，焦點只會停靠在 focus group 這一整體上，而不是將組內的所有元素挨個過一遍。

二、基礎交互

1. Tab Key Navigation（Tab 鍵導航）

按 tab 鍵，可將焦點按 tab order 的順序進行移動；同時按 tab 鍵和 shift 鍵，可將焦點按 tab order 的逆序進行移動。

2. Arrow Key Navigation（方向鍵導航）

在 focus group 內部，使用方向鍵進行導航。如：

1. 若將一個 list 視圖視為一個 focus group，則可通過上和下鍵來進行組內導航；
2. 若將一個 gallery 視圖視為一個 focus group，則可通過上、下、左、右鍵來進行組內導航。

3. 觸發操作

按 space 鍵，等效于在屏幕上用手指輕觸或用鼠標點擊。

一般來說，按 space 鍵和按 enter 鍵的效果是一致的。它們的區別在于，若 UI 元素有附加操作，則按 space 鍵執行選擇操作，按 enter 鍵執行附加操作。如：

1. 在日期選取器中，在某一日期上按 space 鍵，表達的是「選中此日期」；但若按 enter 鍵，表達的則是「提交」。
2. 在文件管理器中，在某一文件上按 space 鍵，表達的是「選擇此文件」；但若按 enter 鍵，表達的則是「重命名此文件」。

4. 退出臨時 UI

按 esc 鍵，可關閉臨時 UI（并且暫停此 UI 中所有正在進行的操作）。如：

1. 在 popover 中，按 esc 鍵將收起 popover；
2. 在 alert 中，按 esc 鍵等效于點擊最為安全的操作（如一般場景下的「取消」）；
3. 在 combo box 中，按 esc 鍵將關閉 combo box，并將所選值重置為原始值。

值得注意的是，esc 鍵僅影響臨時 UI，它不能用來實現「關閉窗口」或「返回上一頁」等操作。

5. 快速前往

按 home 鍵，可將焦點直接移動到 UI 的開頭；按 end 鍵，可將焦點直接移動到 UI 的末尾。如：

1. 在 list 視圖中，按 home 鍵可將焦點移動移動到第一個元素上，并滾動視圖以保證此元素于可視范圍內；
2. 在 scroll 視圖中，按 end 鍵可直接滾動到底部（焦點不移動）。

6. 滾動

按 page up 和 page down 鍵，可以實現滾動頁面的效果。

三、設計步驟

1. 確定可訪問 UI 元素

確定所有需要通過鍵盤導航訪問的可交互元素。原則上，所有可交互元素都應該能通過鍵盤導航訪問。

2. 劃分 Focus Group

通過相關性將可訪問的 UI 元素進行分組。

合理地劃分 focus group，可以有效縮短通過 tab 鍵循著 tab order 走焦的路徑，也可以借此清晰表達頁面信息的結構。

3. 設計 Tab Key Navigation

①設計 Tab Order

與使用鼠標進行導航不同，鍵盤導航是線性的（sequential）。所以合乎邏輯和可預測的 tab order 對鍵盤導航的體驗尤為重要。

將 tab order 與 visual order（視線流）相契合，是讓 tab order 更符合預期的主要設計手法。

②設計 Initial Focus

建議將 initial focus 設置為進入頁面時最有可能首先操作的 UI 元素，例如相冊中的最新照片、音樂播放器中的播放按鈕等。

4. 為 Focus Group 設計 Arrow Key Navigation

即為 focus group 設計「組內導航」。一般來說，簡單使用方向鍵即可滿足組內導航。

5. 設計 Focus Indicator

出于品牌傳達的考量，可以考慮自定義其樣式。此外，還應考慮到不同用戶（包括視障群體）的需求，嘗試提供高對比度的 focus indicator 樣式。

四、與其他交互的關系

1. 與文本輸入的關系

用于輸入文本的控件會優先響應鍵盤輸入而不是鍵盤導航指令。如：在 text field 中，space 鍵輸入不會被識別為選擇指令。

2. 與無障礙讀屏的關系

設計優良的鍵盤導航能為無障礙讀屏打下堅實的基礎，但讀屏工具（如 Apple 的 VoiceOver 和 Microsoft 的 Narrator）的功能遠比鍵盤導航豐富。

鍵盤導航與讀屏的區別有：

1. 無障礙讀屏能導航到 disabled 態的 UI 元素，而鍵盤導航通常會直接跳過不可用的 UI 元素；
2. 無障礙讀屏能通過不同的顆粒度或維度進行快速導航（如在 VoiceOver 中通過轉子進行操作），而鍵盤導航則只能按順序導航。

結語

隨著設備和平臺的多樣化，鍵盤導航體系需要適應不同的設備和平臺；而功能和需求的增加，也會讓鍵盤導航體系變得越來越復雜。因此，設計師需不斷地改進和創新，以提供更加合理且靈活的導航方式。

我們希望能有更多設計師能參與到設計鍵盤導航體系的工作中來，從而讓便捷與效率浮現于用戶的彈指間。

歡迎關注作者微信公眾號：「We-Design」