微信小程序-牌聚

背景

闲暇时间会与朋友们一起娱乐玩桌游，避免不了有时候需要使用计分，但是线下计分太麻烦，所以会经常使用微信小程序计分工具，例如：打牌记账。

使用久了，就会发现其实挺多痛点，所以我决定从0到1开发一款用户体验更好的的计分工具。

痛点

这里以“打牌记账”的计分工具为例。

痛点一：加入房间不够便捷

这款微信小程序需要由创建人创建房间后，弹出加入房间的二维码，进入房间的有两种，要么直接扫码加入，要么由创建人转发出去。这里其实就存在痛点了，其一二维码：大家不在很近的距离，需要走到创建人的旁边去扫这个二维码，这时有人会说了，那可以转发呀。这就是其二：确实可以转发，如果一起玩游戏的朋友不是一个群聊的，那么需要一个个转发，稍显麻烦。

我并不觉得这两个是不好的功能，反而我觉得可以扩展的更方便。所以我在这基础上扩充了两个新功能，更加方便快速的加入房间。

1. 功能一：房间号加入房间，发起人创建房间后，可以告诉其他人房间号，其他人填入房间号快速加入房间，这里一开始我设计了6位数，后面感觉太长了，所以我缩减为四位数，增加回收机制，增加用户体验。
2. 功能二：邀请好友加入，那么这个功能其实我是参考一些游戏app里的邀请好友机制。一起玩过游戏的朋友，彼此会成为好友，当发起人创建房间后，可以快速邀请好友。好友打开微信小程序就会出现弹窗邀请的动态，点击加入就能快速加入房间。

痛点二：分数转换不够全面。

1. 分数无法撤回：有时候在转分给朋友的时候，发现有时候会转错，这时手机已经放下了，又要重新拿起来操作一遍，简单来说没有撤回挽回的功能。
2. 房费无法直接参与：与朋友们玩桌游除了在家玩，也会出去玩。出去玩避免不了AA房费的情况，那么就需要一个东西来承接这笔费用，那么就是虚拟席位：”茶水“。目前的小程序的茶水只支持了手动转入和百分比扣除。

针对这两个问题：

1. 撤回功能：参考微信的发消息撤回，直接让转错分数的用户能够直接点撤回。
2. 茶水席新增固定分数： 房主开房时或者快要结束时，计算每人需要支持的AA的费用，设置茶水费用，直接从每人的分数里自动扣除并且新加入的成员自动扣除。

以上的痛点优化之后可以极大的提升用户体验。

UI设计

这期间我用了很多AI去画原型，给我的效果都不理想或者说都是不好看的，设计出来的基本都是紫色或者渐变效果的UI图。其中有两个设计的效果出奇的不错：

• Codex Image2：一开始我是让codex以html的形式制作UI图，输出的简直还不如我自己做的。后面改用image2去制作UI图片，出来的效果只能说 符合我的要求。缺点就是无法直接使用。
• Figma AI：figma是专门用来制作UI设计图的，所以我尝试使用它们的AI去制作UI图，出来的效果也很不错，基本能看，布局排版都合理。

最后我是让Codex先制作UI的草图，也就是基本的排版布局的html的草图，排版布局我觉得没问题就使用Image2去按照这个排版布局不动的情况下按照iphone6的尺寸比例去设计UI，并且将UI其中的背景、icon等拆出来，颜色色号标记出来。出来的效果能达到我90%的要求，但还需要进一步的优化提示词，后续能完全输出的时候，我会制作成Skill分享出来。

首页（figma基础功能生成）：

首页-优化（codex基于figma生成的首页进一步优化）：

详情页-草图（codex基本线条框架）：

详情页-高保真（codex提示词调整后）：

技术栈

• 前端：Taro4 + Typescript + Webpack +Taroify。 本来打算使用tailwindcss，足够方便、快捷，单一职责。懒得封装组件了就采用taroify UI库，taroify的库也挺小的。
• 后端： Nest.js。学习使用新的框架，但多半都是让AI协助写的，还没完全熟悉，后续会自己单独写一些demo熟悉这个框架。
• 数据库：Mongodb。
• 数据缓存： Redis。
• 数据交互：Websock。

总结

这个小程序我是采用speck-kit和open-spec协同开发，让我从“一句话编程”到”规范流程编程“，体验上给我的感觉又回到了熟悉的开发步骤，虽然可能比“一句话编程”慢了一些，但是能让整个项目的代码更加规范规整，不会变成一坨屎上，并且AI不会魔改。

小程序扫码体验：