设计语言：为什么棋盘长这样

好的棋类界面设计，标准是让人忘了界面。棋盘上不该有任何东西需要你先理解才能下棋：线是线，子是子，上一手在哪一眼看得到。下面这些取舍看起来都是小事，加起来决定了你第一局是不是顺畅。

先画线，别的都往后放

棋盘的第一要素是网格本身。线的粗细决定了棋子的可读性：线太粗会和黑子抢注意力，太细在小屏上会消失。我们取的值是让格子和棋子之间留出可见的空隙，棋子压在交叉点上时，四边都还能看到线。

• 线宽固定，不随棋盘尺寸缩放：19 路和 15 路用同一套视觉重量
• 星位只保留真正有规则含义的那几个，装饰性的点全部去掉
• 棋盘边缘的留白按棋子直径的一半算，最外一圈落子不会贴边

棋子对比度与上一手标记

黑白子的对比是棋盘上唯一必须一眼分得清的信息。我们不用纯黑和纯白，纯白在亮屏上会刺眼，纯黑会压过网格。实际用的是略偏暖的白和略偏冷的深灰，长时间看不累。

• 上一手用细标记，不盖住棋子本身，随时能看出对手走了哪里
• 禁手和胜负连线用同一套颜色语言，不引入第三种强调色
• 悬停预览是半透明的，落子之前你能看到结果，但不能误以为已经落了

间距是个手指问题，不是审美问题

触屏上最小的可靠点击区域比很多设计稿里的格子大得多。我们把间距按手指而不是按眼睛来定：相邻交叉点的中心距要保证拇指点中间时不会误触旁边。代价是 19 路棋盘在小屏上会偏挤，这种情况我们建议横屏。

我们砍掉了什么

• 拟物木纹：第一版有，看起来有质感，但木纹的纹理会和网格线打架，深色棋子在木纹背景上边界变模糊
• 落子音效的多种变体：只保留一种，多种音效反而让人分心
• 棋子阴影：投影让棋子更立体，也让相邻棋子的边界更难判断
• 坐标标注：默认关闭，需要复盘的人可以打开，日常对局它是噪音

每次想加东西，先问一句：它让下一手更容易看清，还是更难。多数加不进去的回答都是后者。

键盘和读屏是同一个问题

键盘操作逼我们把落子顺序做得可预测，屏幕阅读器需要同样的顺序信息。这两件事最后收敛到一套焦点逻辑上，做完之后键盘玩家和读屏用户走的是同一条路径。细节在 /blog/keyboard-friendly-board-games。

如果你只想看效果，对战页 直接开一局最快，上手时间参考 /blog/one-minute-to-play。棋类界面在浏览器里复兴的背景在 /blog/board-games-browser-revival，团队想法见 关于页。

FAQ

在 YiBoard 免费下一局

YiBoard (yiboardgame.com) — 中华棋类，浏览器即玩，免费无注册。 去下一局 · 更多博客 · 玩法指南