WUZIQI — Gomoku
好看,本身就是理由
← 返回博客

无障碍与棋盘设计

让落子安静下来:棋盘反馈的减动设计

一颗棋子落下时,动画可以让动作更清楚,也可能带来不适。怎样保留落子信息,同时减少不必要的移动?

概念水墨插画:黑棋子停在交点,周围淡墨弧线表示正在退去的装饰性运动;并非产品截图。
概念水墨插画:黑棋子停在交点,周围淡墨弧线表示正在退去的装饰性运动;并非产品截图。

你在天元旁落下一子,正准备看对手能否接住这条活三。棋子先放大、缩小,再弹到交点;整张棋盘跟着轻轻一晃。等画面停稳,你得重新找刚才落下的位置,也得确认现在轮到谁。若关闭这些动作,落子该怎样被看见?

先把落子和落子的动画分开

点下一个空交点后,界面要处理的是一次落子状态变化:确认这一手有效,在选定位置显示棋子,并更新下一回合。棋子从大到小的缩放、到位后的弹跳、棋盘随之移动,都是呈现这次变化的方法。设计减动反馈时,可以先把这两层分别写出来,再决定哪些画面动作值得保留。

设想你在一条横向棋形的末端补上一子。减动模式下,新棋子可以直接出现在那个交点,周围网格保持原位;落子一经确认,它就留在那里,供你沿线检查两端。若这一手无效,界面也应保持原有棋局,不用一次弹回原处的动画来解释未落子。这样,每次触碰之后都有可核对的结果。

这也提醒设计者留意动作发生的时刻。手指尚未离开棋盘时,交点上的临时预览可以帮助瞄准;确认之后,正式棋子的位置必须清楚。关闭缩放和弹跳,不能顺手删去正式落子的显示,更不能让回合停在上一手。减动改变的是过渡过程,棋局仍按已确认的着手继续。

WCAG 2.3.3 说的是哪一类运动

WCAG 2.3.3「交互引发的动画」是一项 Level AAA 成功准则:由交互触发的运动动画应能关闭,除非该动画对功能或所传达的信息不可或缺。落子后棋子放大再缩回、棋盘晃动,都适合按这一条件审视。这里说的是一项特定级别的准则,不能据此宣称所有产品都必须采用同一种减动模式。

该解释文件把运动动画描述为在不同状态之间加入步骤,造成移动或平滑过渡的感觉;元素出现时改变大小或移动位置,属于例子,直接出现则不属于这种动画。对五子棋来说,新棋子出现在已落子的交点,是信息本身的呈现;让它从别处飞入,或让整张棋盘为它让位,才是需要另外评估的过渡。

「不可或缺」也不宜凭习惯判定。如果去掉某段运动,落点、棋形和回合仍能通过静止状态表达,就有理由尝试关闭它。反过来,减动并不要求把棋盘定格在上一回合:对手落子后,棋盘上仍要出现对手的新棋子,你才有当前局面可看。应用到棋盘的这些取舍,是本文的设计提案,并非准则列出的五子棋规则。

让最后一手留下可查的痕迹

动画有时承担一个实际任务:告诉你刚才改变了哪里。取消落子时的缩放后,可以让最后一手保留一个细小、稳定的圆环标记;它贴着棋子,不沿棋盘游走,也不在数秒后突然消失。你从对手的防守点把视线移回自己的活三时,仍能定位刚才那一手。标记应保持克制,避免盖住相邻交点。

概念水墨插画:手指指向交点上的黑棋子,棋子表面留有空心圆环标记。
概念水墨插画:静止的小圆环提示最后一手;画面并非产品截图,也不表示具体棋局规则。

最后一手的标记只回答「刚才落在何处」。当前轮到谁,应在回合区域明确更新;双方已经下出的棋子,则持续留在棋盘上。三种信息各有位置,测试时也能分别检查。假如圆环因下一手到来而移到新棋子旁,旧棋子仍留在原交点;变化的是最后一手的指向,棋局没有被撤销。

棋子停在交点,回合继续向前。

还要考虑你隔了片刻才回来看棋盘的情形。短促的落子效果早已结束,持续的棋面和回合文字却仍可供核对。小圆环只是这个方案中的一种做法:如果布局过密,它可以改用靠近棋盘、保持静止的末手提示。选择哪一种,都应拿真实棋局的拥挤位置试读,确认它没有遮住你要看的交点。

系统偏好需要界面主动响应

系统里的「减少动态效果」是一项偏好信号,打开它不会自动替每个网站或应用删掉动画。界面需要主动读取并响应,使用者的选择才会反映到落子反馈中。对网页的 CSS 运动,W3C 的C39 技术说明给出了利用 prefers-reduced-motion 查询抑制运动的例子;C39 是说明性技术,属于满足准则的可行方法之一,并非规范要求的唯一实现。

把这一方法用于数字棋盘,可以先从明确的一组效果入手:减动偏好开启时,落子不缩放、不弹跳,棋盘不因落子平移或摇晃。静止的棋子、末手位置与回合更新照常呈现。若界面还提供自己的运动选项,选项名称也要让人看出它控制的是附加动效;具体如何与系统偏好配合,应在该界面中说明并验证。

C39 还给出一种检查思路:找出每个由交互触发运动的元素,开启系统减动设置,再确认运动是否确属必要,或已被抑制。对棋盘,检查范围不应只到新棋子为止。点击落点、对手着手、回合交接以及重新查看棋局,都可能露出遗漏的棋盘位移;逐项操作比只盯着一次漂亮的落子更容易发现问题。

逐个问清动画承担了什么工作

设计稿里的一次落子,可能叠着几段动作:棋子从指尖附近滑向交点,抵达时放大回弹,棋盘轻微缩放,回合提示再滑入。逐段询问它提供了哪项信息,会比笼统地说「动画很有反馈」更有用。落点可以由棋子最终所在的交点说明;下一手属于谁,可以由更新后的回合文字说明。若仍想保留某段运动,就需要解释静止状态为何无法完成同一件事。

也要看这些动作连在一起的效果。单看一颗棋子的轻微缩放,可能很难察觉负担;连续几手都伴随棋盘位移,视线便要反复找回原来的网格。为减动模式做检查时,可以连续走几手,再停在一处双三附近回看。棋盘坐标是否稳定、每颗棋子是否留在已确认的交点、回合是否按顺序变化,都比动作看起来是否精致更具体。

用下一手检验这套反馈

可以拿一局进行小测试。先开启系统减少动态效果,并确认所测试的棋盘界面确实响应该偏好;选择一个你能记住的空交点,放下一颗棋子。观察棋子是否直接留在所选位置,棋盘是否保持稳定,末手提示是否可查,再看回合显示有没有交给对方。若界面另有运动选项,也分别试一次,记录实际被关闭的效果。

随后看对方落子,再回头检查自己的上一手,想好接下来要守住哪一端。最后核对棋盘上的最终位置和当前回合:两手棋应各在确认过的交点,轮次应与已走的步数相符。若某颗棋子只能靠回忆弹跳方向才能找到,或关闭动画后回合提示没有更新,这套减动反馈还需要修改。


读完了?打开 WUZIQI 试一局。