扫码体验
扫码打开丙狗 Bingo 小程序

微信扫一扫
打开小程序

开发故事

我为什么做了一个
奶茶健康记录小程序?

不是一个公司的 KPI,是一个普通人面对真实问题后,认真做出的选择。

第一章

一个真实问题

起点:你发现了吗?

很多人的日常是这样的:

  • ·下午一杯奶茶续命
  • ·加班再来杯咖啡提神
  • ·周末约朋友喝果茶

但是——没有人记录

你不知道今天喝了多少糖、多少热量、这周连续喝了几天。奶茶店的菜单越来越长,糖度选项越来越多——全糖、七分、五分、三分、无糖。但你真的知道自己选了什么吗?

一组令人意外的数字

一杯全糖珍珠奶茶可能含 45g 糖,接近世界卫生组织建议的每日添加糖上限(50g,最好控制在 25g 以内)。也就是说,两杯奶茶就可能超标。

问题不是"不该喝",
而是"喝得不知道"。

我的尝试与发现

我试过各种提醒 App——弹窗、红点、倒计时。它们都在说教:"你该喝水了"。但说教让人想关掉,不会让人主动回来。

我想要的是一个让人愿意回来的东西。不是一个工具,而是一个伙伴

第二章

从想法到小程序

产品设计:先做最小的能用到

我不会写完整的原生代码。我借助 AI 编程工具,从原型到能跑起来的第一版,一步步搭起来。

第一个版本只做了一件事:记录你喝了什么

没有社交排行榜,没有打卡分享到朋友圈,不强迫你邀请好友。因为那些东西和"帮你喝得更好"无关,只会增加使用负担。

AI 辅助开发全过程

整个开发过程大致是这样:

  • 用 ChatGPT 做需求分析与产品构思
  • 让 AI 辅助设计 UI 原型与交互方案
  • 用 Codex / AI 编程工具生成基础代码框架
  • 自己调整交互细节、视觉风格和数据结构
  • 反复迭代 UI,走完备案流程,正式上线

每加一个功能,都先问自己一个问题:这真的帮用户"喝得更好"吗?不是就砍掉。所以丙狗 Bingo 到现在也不大——但它做的每一件事,都是围绕"饮品记录"这一个核心。

UI 迭代:奶油色 + 柴犬 = 温暖健康感

界面设计上我选择了奶油暖色调搭配橙色强调,加上柴犬 IP 形象。不想让它看起来像医疗 App 或企业工具,而是像一个温暖的小角落——打开它就像去见一个老朋友。

第三章

为什么加入一只柴犬?

从"提醒"到"陪伴"

市面上已经有很多"提醒喝水"的 App 了。它们的方式几乎一样:弹通知、响铃声、显示倒计时。效果呢?大多数人会关掉通知,然后继续忘。

健康习惯不是靠提醒,
而是靠陪伴。

我想换一个思路。如果喝水这件事,不是为了"完成任务",而是为了陪一只小狗呢?如果你打开 App 是因为"想看看丙狗在干嘛"而不是"被逼着打卡",会不会更持久?

柴犬丙狗的诞生

"Bingo"这个名字本身就带着一种小确幸——像开盲盒时的惊喜。而柴犬这个品种,恰好符合我对丙狗的所有想象:

  • 🐕 看起来很友好,不凶不严肃
  • 🐕 有自己的性格(有点倔但又很可爱)
  • 🐕 橙黄色的毛色天然匹配品牌主色
  • 🐕 天然适合做成表情包和互动彩蛋

丙狗不只是吉祥物

丙狗有自己的一套状态体系:idle(日常等待)、wave(点击互动)、jump(打卡成功)、reward(连续奖励)、sleep(长期未记)。每一种状态都有对应的视觉反馈。它不是静态的装饰,而是一个活的伙伴

当你在忙碌的一天里打开丙狗 Bingo,看到丙狗歪着头等你的时候,那种"被等待"的感觉,比任何一条推送通知都有力。

认识丙狗 →
第四章

开发中遇到的三个真实问题

过程并不顺利。以下是我在开发过程中碰到的三个主要问题,以及当时的解决思路。

问题一:UI 资源过大

早期版本的丙狗使用了大量高清图片和复杂动效,导致小程序包体积偏大,首次加载缓慢。在低端机型上甚至出现卡顿。

解决方案:

  • 对所有图片进行 WebP 格式压缩与尺寸优化
  • 将大组件拆分为独立子组件,按需加载
  • 动效改用 CSS animation 替代图片序列帧

最终包体积减少了约 40%,加载速度明显提升。

问题二:AI 生成的 UI 不稳定

AI 工具生成的前端代码质量参差不齐。有时候生成的界面很精美,但换个 prompt 就完全变样了。没有一致性,就没有品牌感。

解决方案:

  • 建立《视觉规范文档》:固定配色(奶油底 #FFF8F0 + 橙 #E85D26)、字体层级、间距规则
  • 把规范写入每次 AI 交互的 system prompt 中
  • AI 产出后人工审核,只保留符合规范的版本

有了规范之后,AI 变成了"加速器"而非"随机数生成器"。

问题三:功能取舍的纠结

开发过程中不断冒出新想法:社交分享、社区讨论、饮品评分、附近门店推荐……每一个听起来都很合理。

但我意识到:一个人维护不了那么多功能,而且用户也不需要一个"什么都想做"的工具。

决策原则:

  • 先做打卡和健康数据展示(核心闭环)
  • 宠物系统作为差异化亮点加入(情感连接)
  • 社交功能暂缓——等核心用户反馈后再决定
AI 降低了开发门槛,
但产品判断依然重要。

故事讲完了,产品在这里

扫码打开丙狗 Bingo,让柴犬陪你开始第一次饮品记录。

立即体验小程序看核心功能 →
扫码打开丙狗 Bingo 小程序

微信扫一扫
打开小程序