[极致用户体验] 我做的《联机五子棋》是如何追求极致用户体验的？（上）

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。1. 《联机五子棋》简介

游戏地址在这篇《我做了个《联机桌游合集: UNO+斗地主+五子棋》无需下载，点开即玩！叫上朋友，即刻开局！不看广告，不做任务，享受「纯粹」的游戏！》文章的开头，你可以去体验一下。

不知道你玩起来感觉怎么样，反正我在开发的时候，处处为极致用户体验着想。绞尽脑汁也要把用户体验做到最好！

这篇文章，带你分析一下，我在这方面，做了哪些努力。

2. 移动端适配

它的所有页面，我都做了移动端适配。因为我知道，大部分用户，都会用手机访问我的网页。

2.1 棋盘宽度尽可能大

在移动端，棋盘宽度刚好撑满手机屏幕的宽度，这是最大程度上，给用户下棋的便利，避免误操作。

其中移动端适配，我已经分享了一点经验，见：《2行代码，让你的UI适配移动端、PC端，快来收藏》。我五子棋游戏移动端适配的方法，就采用了文中介绍的方法，只用了2行代码。

2.2 网页允许双指放大

此外，如果部分用户手机还是太小，导致经常点错棋子，我也允许用户双指放大棋盘，如图：

3. PC端适配

除了移动端，PC端体验也是非常好的，如图：

这主要得益于我设置了棋盘的max-width属性，使得在屏幕特别宽的时候，它能保持一个合理的棋盘大小，争取在大部分PC上，一页能展示完整棋盘。

当然，如果屏幕宽度小于棋盘的max-width，那么宽度就会使用默认值100%，使之撑满屏幕宽度。

4. 点击一次下棋 VS 点击两次下棋

我调研过，很多移动端五子棋，为了避免用户点错棋子，是做了二次确认的：即第一次点击空位，会先用红圈标记它，再次点击红圈标记，才会真正下棋。

优点缺点点击一次下棋相对后者，降低了50%用户下棋的交互次数容易点错位置点击两次下棋点错位置几率大大降低交互繁琐

我认为：本来在小屏幕上找准一个位置就不容易，还要连续2次找准点击，才能下棋成功，太累了！

所以我坚持：点击一次就下棋。降低了50%用户下棋的交互次数。

此外，我这个点击一次下棋，是有办法应对“容易点错位置”这个缺点的！

应对方式一：允许屏幕双指放大后，再下棋，点错概率降低。应对方式二：提供悔棋功能，即使点错了，跟朋友求求情，他会同意你悔棋的～

而其它五子棋APP，因为不支持双指放大棋盘、且是在线匹配玩法（导致悔棋成功率下降，因为陌生人看到你下错了，老开心了，就等着赢你挣分升段位了），所以不能忍受“容易点错位置”的缺点。最终他们使用“点击两次下棋”的方案，我也能理解其原因。

5. 棋子的Hover态

在PC端，你鼠标移动到棋盘上，只要该你下棋了，它就会半透明展示棋子，表明：如果你点击，那么你就在这里下棋了。如图：

但是在移动端，是没有Hover态的，因为移动端没有鼠标。需要把移动端的Hover态取消掉，否则会有奇怪的现象：

移动端其实有光标，你点击哪里，光标就停留在那里了。如果你点击了某个地方下棋了，然后又悔棋了。那么那个地方会半透明展示棋子，给用户很大的困惑。

我在这篇文章分享了，如何实现PC端有Hover态、移动端无Hover态，见：《用户体验好的 Button，在手机上不应该有 Hover 态》

当然，还有更多小细节噢，请期待下篇～

6. 写在最后

如果你只是为了完成别人的需求，挣点工资，还是直接用组件库堆积功能吧，就没这么多要操心的了