移动端专项优化：为单手而做的棋盘
我们的流量大半来自手机，而棋盘最初是照着鼠标画的。这篇是移动端专项优化清单：触摸热区怎么放大、棋盘在竖屏下怎么缩放、来电话时那一局怎么保住，以及我们决定不做的几件事。
我们的流量大半来自手机，棋盘最初却是照着鼠标画的。移动端专项优化现在是工程清单上最大的一项：触摸热区（touch interface board game）怎么放大到手指按得准、棋盘在竖屏下怎么缩、来电话时那一局棋怎么保住。这篇把这些改动摊开讲，包括我们决定不做的部分。先在 yiboardgame.com 的对战页用手机开一局，再看下去会更具体。
手机上，棋盘哪里会崩
十五路棋盘在桌面浏览器上是舒服的 640 像素见方。放到 6.1 英寸的屏幕上，每格只剩约 21 像素，手指压根分不清自己按在哪条线的交点上。双指缩放能救回来一半，代价是看不到全局，而五子棋恰恰是需要看全局的游戏。这是这次移动端专项优化里最难取舍的一处。
触摸热区（touch interface board game）
我们要做到的是 44 像素的有效热区，比格子本身还宽。手指落在两个交点之间时，取距离更近的那一个，而不是判这手无效。落子后留一个 300 毫秒的撤销窗口，专门给误触。
- 有效热区 44 像素，比线间距更宽
- 靠近两条线时取最近交点，手指不会白按
- 落子后 300 毫秒内可撤销，专治误触
- 长按预览落子点，手指不再挡住要看的位置
响应式布局（responsive game）
竖屏是棋盘的默认形态：棋盘在上，信息与操作在下。转横屏时棋盘左移，右侧让给计时和提示。刘海和底部手势条用安全区避开，不让系统手势吃掉你的一步棋。
手机上的象棋与 mobile chess usability
象棋比五子棋难处理。棋子上带字，缩小之后笔画糊成一团；炮和车的走法要在小屏上画出来，又没有地方写解释。我们的做法是高亮可落子的点，把文字说明收进二级面板。这部分仍在开发中，也是 mobile chess usability 里最花时间的一段。
我们不做的几件事
- 不做强制横屏。单手用手机是常态，横屏需要两只手
- 不做震动反馈之外的动效。棋盘上乱动的东西会干扰你判断棋形
- 不做手机专属付费项。手机和桌面是同一个免费游戏
- 不为排行榜在后台轮询。切走即暂停，电量留给玩家
FAQ
手机上玩五子棋会小到看不清吗？
不会。竖屏下棋盘占满宽度，双指可以放大看局部，松手回到全局视图。放大状态下落子依然判定到最近的那个交点。
来电话时那一局棋怎么办？
对局在服务器端保留。只要不在同一账号下开新局，回到页面就能接着下。
需要下载 App 吗？
不需要。浏览器打开就能玩，不用装任何东西，也不用注册。
象棋和围棋什么时候能在手机上玩？
五子棋现在就能玩。象棋正在开发，手机上的走法提示是其中一部分；围棋排在开发顺序的最后。
Related
- 性能优化：让棋盘更丝滑
2026-10-19
- 围棋路线图：为什么最后做
2026-10-15
- 从 1200 到 1800：升级路线
2026-10-13