WUZIQI — Gomoku
好看,本身就是理由
← 返回部落格

棋盤設計 · 鍵盤

不用滑鼠,怎樣走完一盤五子棋

手離開滑鼠以後,棋盤仍該能進入、能行走,也能順利退出。本文借用 W3C 的鍵盤與網格互動指引,討論五子棋如何區分查看位置與確認落子,以及焦點走到邊緣後該停在哪裡。

棋盤與無字鍵盤的水墨構想圖;本文討論的是互動建議,不代表現有產品功能。
棋盤與無字鍵盤的水墨構想圖;本文討論的是互動建議,不代表現有產品功能。

手離開滑鼠後,你按下 Tab,卻不知道鍵盤焦點是否進了棋盤;再按幾次,又擔心自己會被困在縱橫線裡。五子棋的鍵盤體驗需要涵蓋一條完整路徑:進入、查看、確認落子、經歷回合變化,再離開。這是一份運用通用指引的設計提案,不代表 WUZIQI 已實作這些功能,也不構成合規稽核。

Tab 負責進入,也負責離開棋盤

提案將棋盤視為一個複合的空間區域:按 Tab 從上一項進入,落在棋盤內一個明確位置;方向鍵接手區域內的移動;再次按 Tab 前往棋盤後方的控制項,Shift+Tab 則向前退出。這個思路借鑑 W3C APG 的網格模式,讓頁面的循序導覽維持簡短而可預期。

WCAG 的鍵盤說明關注的是功能能否透過鍵盤完成,並未規定五子棋必須使用哪一組按鍵。因此,Tab 進出與方向鍵漫遊屬於受 APG 啟發的互動選擇,不應寫成 WCAG 強制要求的鍵位。W3C 文件提供的是通用網頁指引,也不是五子棋標準。

入口也要容易理解。棋盤附近可以提供簡短提示,說明「方向鍵查看,Enter 或空白鍵確認,Tab 離開」;提示應在操作前即可閱讀,也應能由輔助科技取得。若焦點再次進入,可以回到剛才查看的位置;若棋局已經重設,則選擇一個穩定、容易解釋的起點。

方向鍵只移動查看位置,不提交落子

上、下、左、右應沿著棋盤的空間關係移動,每次跨過一個交叉點。按鍵造成的結果只是改變目前查看位置,棋盤狀態仍維持原樣。焦點絕不能在未經確認時悄悄變成棋子,長按方向鍵也不能連續落子。

這份方案建議使用 Enter 或空白鍵提交目前位置,兩者都是設計選擇,需要在說明中明確交代。確認發生時,系統先檢查目前回合與所選規則,再決定能否落子。一個沒有棋子的交叉點仍可能無法使用,例如棋局已經結束、尚未輪到己方,或所選規則判定該點不合法。

成功落子後,回饋應說明位置與棋局變化,同時保留清楚的焦點去向。可以讓焦點停在剛落下的位置,等待下一次方向鍵輸入;對手落子或回合切換時,也不應突然把焦點拖到別處。若提交失敗,焦點留在原位,並說明具體原因。

水墨棋盤一角,空心焦點環停在外緣交叉點,淡墨方向痕跡抵達邊界
這是一幅關於焦點與邊界的水墨構想圖,沒有呈現開局、攻防或落子順序。

可見焦點要與上一手清楚區分

棋盤上至少有兩種容易混淆的視覺資訊:此刻鍵盤會作用在哪裡,以及最近一枚棋子落在哪裡。WCAG 對可見焦點的說明要求鍵盤操作者能辨認焦點所在。轉化到棋盤時,焦點宜採用持續可見的空心輪廓,上一手則使用另一種形狀或位置標記,不能只依賴相近的色差。

當焦點與上一手落在同一個交叉點時,兩層資訊仍要同時成立。例如,焦點環可以位於棋子外側,上一手標記留在棋子內部或旁邊,彼此不遮擋。搭配的狀態說明還可讀出座標、占用情況,以及是否為上一手,避免由視覺樣式承擔全部含義。

焦點提示應持續保留,直到它確實移走,不能閃一下便消失。滑鼠懸停、最近落子動畫與鍵盤焦點也要有不同的持續時間:懸停隨游標離開,動畫可以結束,焦點仍然可見。如此一來,即使視線短暫轉向局面資訊,回來後仍能找到目前位置。

焦點表示查看,落子需要確認。

已有棋子的交叉點仍可檢查

方向鍵經過已有棋子的交叉點時,焦點應照常落在上面。該位置可以接受檢查,並讀出行列、棋子歸屬,以及是否帶有上一手標記。此時按 Enter 或空白鍵不會再次放置棋子;回饋應簡短說明「該位置已被占用」,同時維持焦點穩定,方便繼續查看相鄰位置。

跳過占用點會破壞棋盤的空間尺度。向右按一次,有時跨一格,有時卻跨過整段棋形,操作者便難以依靠按鍵次數建立位置感。讓每個交叉點都能抵達,也方便在復盤時逐點檢查連接、空隙與邊緣,只將提交權限留給符合目前規則的位置。

走到邊界就停下,不從另一側出現

焦點位於最右側時,再按右方向鍵應留在原處;其餘三條邊也是如此。APG 對資料網格的方向導覽也採用這種邊緣行為。五子棋棋盤具有固定的二維方位,若從右側跳到下一列左端,鍵盤路徑會突然改變距離與方向,空間記憶也隨之中斷。

停住並不等於失去回饋。焦點輪廓繼續顯示,位置說明維持不變;若需要額外提示,可以在第一次碰到邊界時提供克制的狀態訊息,避免每次重複按鍵都打斷閱讀。頁面也不應趁機捲動,因為此時方向鍵仍用於棋盤導覽。

用一盤完整流程檢驗鍵盤設計

只測試「能否落下一手」遠遠不夠。完整檢查要從棋盤外開始,經過 Tab 進入、方向鍵瀏覽、不合法位置回饋、合法提交、對手行動與回合交替,再一路走到終局。每次狀態變化時,都要確認焦點是否仍然可見、位置是否合理,以及方向鍵是否被新的提示或面板攔截。

終局之後同樣需要明確的去向。若出現結果資訊,鍵盤應能閱讀並關閉;關閉後,焦點回到觸發流程的合理位置。開始新一局時,舊棋子的狀態會被清除,焦點起點也應重新說明。選擇離開棋盤後,Tab 必須順利到達後續控制項,Shift+Tab 則能回到前一項。

讀者或開發者現在可以進行一次純鍵盤試驗:先把游標移開,只用 Tab 進入棋盤;用四個方向鍵走到各條邊,確認沒有換行或環繞;經過已有棋子並讀取其狀態;在空點按 Enter 或空白鍵,分別觀察合法與不合法的結果;等待回合改變,完成終局與新一局流程;最後用 Tab 和 Shift+Tab 從兩個方向離開。途中只要發生未經確認便落子、焦點消失或無法退出,就把當時的按鍵與位置記錄下來。


讀完了?打開 WUZIQI 試一局。