写点什么

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

作者:HullQin
  • 2022 年 8 月 14 日
    广东
  • 本文字数:1559 字

    阅读完需:约 5 分钟

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

我是 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 点击两次下棋

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



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


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


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


  • 应对方式一:允许屏幕双指放大后,再下棋,点错概率降低。

  • 应对方式二:提供悔棋功能,即使点错了,跟朋友求求情,他会同意你悔棋的~


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

5. 棋子的 Hover 态

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



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


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


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


当然,还有更多小细节噢,请期待下篇~

6. 写在最后

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


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

发布于: 刚刚阅读数: 4
用户头像

HullQin

关注

公众号【线下聚会游戏】 2020.10.07 加入

game.hullqin.cn 我做了一些联机桌游网页:支持2-10人联机的UNO、2-4人联机的斗地主、2人联机的五子棋。无需下载,点开即玩!叫上朋友,即刻开局!不看广告,不做任务,享受「纯粹」的游戏!

评论

发布
暂无评论
[极致用户体验] 我做的《联机五子棋》是如何追求极致用户体验的?(上)_CSS_HullQin_InfoQ写作社区