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

無障礙與棋盤設計

讓落子安靜下來:棋盤回饋的減動設計

一顆棋子落下時,動畫可以讓動作更清楚,也可能帶來不適。如何保留落子資訊,同時減少不必要的移動?

概念水墨插畫:黑棋子停在交點,周圍的淡墨弧線表示逐漸消退的裝飾性動態;並非產品截圖。
概念水墨插畫:黑棋子停在交點,周圍的淡墨弧線表示逐漸消退的裝飾性動態;並非產品截圖。

你在天元旁落下一子,正準備看對手能否接住這條活三。棋子先放大、縮小,再彈到交點;整張棋盤也跟著輕輕一晃。等畫面停穩,你得重新找剛才落子的位置,還得確認現在輪到誰。若關閉這些動態,落子該如何讓人看見?

先把落子與落子的動畫分開

點下一個空交點後,介面要處理的是一次落子狀態變化:確認這一手有效,在選定位置顯示棋子,並更新下一回合。棋子由大縮小、到位後彈跳、棋盤跟著移動,都是呈現這次變化的方法。設計減動回饋時,可以先把這兩個層次分別寫下來,再決定哪些畫面動態值得保留。

想像你在一條橫向棋形的末端補上一子。減動模式下,新棋子可以直接出現在那個交點,周圍格線保持原位;落子一經確認,它就留在那裡,讓你沿線檢查兩端。若這一手無效,介面也應維持原有棋局,不必用彈回原處的動畫來解釋棋子並未落下。這樣,每次觸碰後都有可以核對的結果。

這也提醒設計者留意動態發生的時刻。手指尚未離開棋盤時,交點上的暫時預覽可以幫助瞄準;確認之後,正式棋子的位置必須清楚。關閉縮放與彈跳,不能連正式落子的顯示也一併刪去,更不能讓回合停在上一手。減動改變的是過渡過程,棋局仍依照已確認的著手繼續。

WCAG 2.3.3 談的是哪一類動態

WCAG 2.3.3「互動引發的動畫」是一項 Level AAA 成功準則:由互動觸發的動態動畫應能關閉,除非該動畫對功能或所傳達的資訊不可或缺。落子後棋子放大再縮回、棋盤晃動,都適合依這項條件檢視。這裡談的是特定等級的準則,不能據此宣稱所有產品都必須採用同一種減動模式。

該解釋文件將動態動畫描述為在不同狀態之間加入步驟,造成移動或平滑過渡的感覺;元素出現時改變大小或移動位置是其中的例子,直接出現則不屬於這類動畫。對五子棋而言,新棋子出現在已落子的交點,是資訊本身的呈現;讓它從別處飛入,或讓整張棋盤為它讓位,才是需要另外評估的過渡效果。

「不可或缺」也不宜只憑習慣判定。如果去掉某段動態,落點、棋形與回合仍能透過靜止狀態表達,就有理由嘗試關閉它。反過來說,減動並不要求棋盤停格在上一回合:對手落子後,棋盤上仍要出現對手的新棋子,你才能看見當前局面。這些應用於棋盤的取捨,是本文的設計提案,並非準則列出的五子棋規則。

讓最後一手留下可查的痕跡

動畫有時承擔一項實際任務:告訴你剛才哪裡改變了。取消落子時的縮放後,可以讓最後一手保留一個細小、穩定的圓環標記;它貼著棋子,不沿棋盤移動,也不在幾秒後突然消失。當你從對手的防守點把視線移回自己的活三時,仍能找到剛才那一手。標記應保持克制,避免蓋住相鄰交點。

概念水墨插畫:手指指向交點上的黑棋子,棋子表面留有空心圓環標記。
概念水墨插畫:靜止的小圓環提示最後一手;畫面並非產品截圖,也不代表具體棋局規則。

最後一手的標記只回答「剛才落在哪裡」。目前輪到誰,應在回合區域明確更新;雙方已下出的棋子,則持續留在棋盤上。三種資訊各有位置,測試時也能分別檢查。假如圓環隨下一手移到新棋子旁,舊棋子仍留在原本的交點;改變的是最後一手的指向,棋局並未被撤銷。

棋子停在交點,回合繼續向前。

還要考慮你過了一會兒才回來看棋盤的情形。短暫的落子效果早已結束,持續顯示的棋面與回合文字卻仍可供核對。小圓環只是這個方案中的一種做法:如果棋盤過於擁擠,也可以改用靠近棋盤、保持靜止的末手提示。無論選擇哪一種,都應拿真實棋局中擁擠的位置試讀,確認它沒有遮住你要看的交點。

介面需要主動回應系統偏好

系統中的「減少動態效果」是一項偏好訊號,開啟後不會自動替每個網站或 App 移除動畫。介面需要主動讀取並回應,使用者的選擇才會反映在落子回饋中。對網頁的 CSS 動態,W3C 的C39 技術說明提供了利用 prefers-reduced-motion 查詢來抑制動態的例子;C39 是說明性技術,屬於符合準則的可行方法之一,並非規範要求的唯一實作方式。

將這個方法用於數位棋盤,可以先從明確的一組效果著手:開啟減動偏好時,落子不縮放、不彈跳,棋盤也不因落子而平移或搖晃。靜止的棋子、末手位置與回合更新仍照常呈現。若介面另外提供動態選項,選項名稱也要讓人明白它控制的是附加動效;具體如何與系統偏好配合,應在該介面中說明並驗證。

C39 還提供一種檢查思路:找出每個由互動觸發動態的元素,開啟系統減動設定,再確認動態是否確實必要,或已受到抑制。對棋盤而言,檢查範圍不該只到新棋子為止。點擊落點、對手著手、回合交接,以及重新查看棋局,都可能顯露遺漏的棋盤位移;逐項操作,比只盯著一次漂亮的落子更容易發現問題。

逐一問清動畫承擔了什麼工作

設計稿中的一次落子,可能疊著好幾段動態:棋子從指尖附近滑向交點,抵達時放大回彈,棋盤輕微縮放,回合提示再滑入。逐段詢問它提供了哪項資訊,比籠統地說「動畫很有回饋感」更有用。落點可以由棋子最終所在的交點說明;下一手輪到誰,可以由更新後的回合文字說明。若仍想保留某段動態,就需要解釋為何靜止狀態無法完成同一件事。

也要看這些動態接連出現的效果。單看一顆棋子的輕微縮放,可能很難察覺負擔;連續幾手都伴隨棋盤位移,視線就得反覆找回原來的格線。檢查減動模式時,可以連走幾手,再停在一處雙三附近回看。棋盤座標是否穩定、每顆棋子是否留在已確認的交點、回合是否依序變化,都比動態看起來是否精緻更具體。

用下一手檢驗這套回饋

可以拿一局棋做個小測試。先開啟系統的減少動態效果,並確認受測棋盤介面確實會回應這項偏好;選一個你記得住的空交點,放下一顆棋子。觀察棋子是否直接留在所選位置、棋盤是否保持穩定、末手提示是否可查,再看回合顯示是否已交給對方。若介面另有動態選項,也分別試一次,記錄實際關閉了哪些效果。

接著看對方落子,再回頭檢查自己的上一手,想想接下來要守住哪一端。最後核對棋盤上的最終位置與目前回合:兩手棋應各自留在已確認的交點,輪次也應與已走的步數相符。若某顆棋子只能靠回想彈跳方向才能找到,或關閉動畫後回合提示沒有更新,這套減動回饋就還需要修改。


讀完了?打開 WUZIQI 試一局。