棋盘上已有几颗子,你正沿着一条斜线数空位。若格线比棋子还醒目,目光会先被一排排方格截住,再回头寻找棋子之间的联系。线画得清楚,未必就让局面更容易看清。
线指向哪里
表格的线用来分隔单元,提醒你这边和那边属于不同的格子。棋盘的线承担另一件事:它组成坐标系,把视线引向交叉点。棋子落在线的相遇处,方格只是这些线围出的空白。
常用的五子棋棋盘有 15 路、225 个交叉点,棋子下在交叉点上;17 路和 19 路的棋盘也有人使用。路数改变了可落子的位置数量,却没有改变线的职责:帮助你找到位置,而非把棋面切成一格格容器。维基百科「五子棋」列出了这些棋盘用法。
坐标也依附于交叉点。15 路棋盘的纵路从 A 到 O、横路从 1 到 15,中央的星位「天元」是 H8;盘上共有五个星位,见台湾连珠协会五子棋术语。你报出 H8,指的是两条路相交的落点,不是 H 列里的一只方框。
方格太显眼时
想象横向三颗黑子,中间隔着一个空点,右边还有一颗。你需要顺着同一条路看过去,判断空点两侧能否接成一段;若每个方格都有浓重的边框,视线更容易停在空白方格的轮廓上。这种停顿很短,却会在每次寻找延伸方向时重复。格线加粗后,交叉点未必更明确。四条粗线围出的白地会变得像一个个独立格子,棋子则像摆在格子角上的标记。你仍能辨认落点,只是每看一眼,都要先越过格子的秩序,才能读到棋子的排列。
五子棋的形状沿横、竖、斜方向展开:相邻、间隔、两端是否留有空点,都会影响你对下一手的判断。线可以提示方向,但若它先占据视觉中心,正在变化的棋形反而退到后面。检查棋盘时,不妨先摆出几种有空点的局面,而非只看一张空盘。
木面上的细线
实体棋盘提供了另一种观看经验。日本碁盘有一种太刀盛り做法:工匠用日本刀的刀尖沿直尺在木面上拖出线,细到几乎只是一道痕;黒木碁石店介绍这种工艺时,也提到它能衬出木材的纹理与色泽。线因此落在木面里,没有把木面盖成一张表。
这里起作用的不只有线的粗细。木纹在格线之间继续延伸,颜色也有细小的起伏,于是画面里的结构并非全由黑线提供。你看得到路,也仍然看得到承托棋子的木面;两者不会争着成为唯一的图案。
屏幕无法照搬刀痕或木纹,也没有必要把材质照片铺在盘底。值得借鉴的是分工:线有足够的存在感,能带你找到交点;底面保留一点层次,不必让每条线独自承担整张棋盘的结构。装饰若妨碍读子,就应退开。
线负责指路,棋子负责呈现局面
纯色屏幕的诱惑
网页棋盘常从一块纯色底面开始,再叠上一组等距线条。空盘看起来整齐,但底色没有纹理可供眼睛停留,线便成了画面里最密集的结构。为了让空盘上的路更清楚,设计时很容易继续加深线色。
问题往往要等棋子落下才显现。黑白棋子本应是局面里最醒目的变化,深色格线却会穿过它们之间的空处,把许多细小的黑色片段铺满全盘。你从一颗子看向下一颗子时,眼睛会反复碰到这些片段。
因此,空盘不能独自决定线色。让一条直线快要连成五子,再摆一组斜向且留有间隔的棋形,看看你是否能一眼沿着棋子走完那条路。若线比未完成的棋形先被看见,就有理由把它往后放。
一像素的实际宽度
写下 CSS 的 1px,并不能保证每块屏幕都画出观感相同的线。设备像素比DPR为 2 时,这个宽度对应两个物理像素;在 DPR 为 1.25 或 1.5 的屏幕上,它对应的是非整数个物理像素。线的位置、浏览器的绘制方式,也会影响边缘如何分配。于是同一套样式在手机上可能边缘干净,到了笔记本上却像一条稍宽的灰带。抗锯齿会用相邻像素过渡边缘,浅线尤其可能显得发虚;简单把颜色加深,又可能让它重新压过棋子。宽度和明暗应放在实际设备上一起看。
测试时,留意直线与斜线经过的交点是否同样容易找到,也留意缩放后有无某些路忽深忽浅。截图能帮你并排比较,但最好仍在目标尺寸上看一局棋。像素的账算到最后,检验的还是眼睛能否稳定地读到落点。
把最强的对比留给棋子
画面需要明度层级:棋子最强,格线次之,星位更轻。棋子是每手都会改变的信息,必须从底面和线条中清楚地站出来;格线保持可循即可。星位帮助你认出方位,不必像额外落下的棋子那样显眼。
这并不等于一味调淡格线。如果你要靠凑近屏幕才能分辨交叉点,线就退得太远了;若远远看去先见到完整的网格,线又可能过重。调整时可以先固定棋子的样子,再逐步改变线与底面的差别。
可识别性还有明确的底线可参考。W3C WAI 对 WCAG 2.1 非文本对比度的说明指出,承担必要图形信息的部分与相邻颜色至少需要 3:1 的对比度。这是辨认信息的要求,不是让所有线条都达到同一种观感的配方;棋子的可见性也不能靠削弱格线来代替检查。
在一局棋里检验
开局时棋子稀疏,你会频繁找中心与附近的交点;中盘以后,目光更多沿着已有棋子判断延伸方向。同一张棋盘要照顾这两种时刻。只在开局看线够不够清楚,容易忽略中盘网格对棋形的干扰。可以给自己留一个简单的观察顺序:先找下一手可能落在哪里,再看一条尚未连完的斜线,最后扫一眼全盘。若第一步总要猜交点,就提高线的可辨度;若第二步总被方格截断,就减轻线的存在感。调整应针对碰到的问题,而非追求某个固定的线宽。
一张好用的棋盘,空着时能交代位置,落子后也肯让出视线。你最终记住的应是那几颗子如何相连、哪里还留着空点,而非格线画得多么整齐。线完成指引之后,注意力就可以回到这一手棋。
看清落点以后,把注意力还给棋形