Ruceriji v1.1.0 UI 界面优化重构,多处体验优化升级

2026-10-29 19:50:55    产品更新   

这次没有新增大模块,改的都是你每天要滑的那几屏。

如厕日记是一款记一次十几秒的肠道健康小工具,跑在 H5、微信小程序和 App 上,同一份数据。v1.1.0 把记录、日历、数据分析、我的页重新排了一遍,主包也从 2.4MB 减到 1.8MB。

「重构」在这里不是换皮:页面之间的结构理顺了,公共组件收拢了,以后加功能不容易碰坏老页面。你能直接感觉到的,是下面这些。工具少一点存在感,习惯才多一点活下来的机会。

如厕日记首页:一键开始计时,首屏带累计次数与使用天数

日历直接写次数

以前日历格子里是 2~3 个灰点。早上迷迷糊糊的时候,2 个点和 3 个点很难分清,想知道那天记了几次,还得点进去看。

现在日期下面直接写数字。今天用描边圈,选中的那天是实心黑圆,两种状态不会混。日期格固定成 36、44、46px 三档,宽屏上不会把圆点拉成竖椭圆。

能一眼看懂的记录,才有人愿意一直记。

日历页:日期下方直接显示当天记录次数

记录页顶部瘦身

原来标题、年份、月份各占一行,现在压成「‹ 2026年10月 ›」,下面一行「本月 12 次 · 有记录 9 天」。没有记录时只剩一句轻提示,不再撑出一块空白。

右下角的「+」改成了固定定位,列表再长也停在同一个位置。之前它跟着内容走,一天有记录和没记录时高度不一样,单手够起来也费劲。头两天你可能会习惯性往老位置点,抱歉。

AI 分析拆成评分卡

AI 分析结果以前是一整段 HTML 正文,读完才知道重点在哪。现在拆成三层:0–100 的评分卡、按形态、颜色、分量等维度列出的要点,最后一栏是「今日建议」。

分数按 90、75、60 分档,对应优秀、良好、一般、需关注。它看的是这份记录本身是否规律,不是医学诊断,别拿它替代医生。

以前存下的分析记录也能正常打开:新数据读结构化字段,老数据从正文里解析,两条路都不通才回退到原始内容,不会变成空白页。

AI 分析结果:评分卡、维度要点与今日建议

宽屏时图表 2×2

数据分析页在 900px 以上改成两列,四张图按 2×2 排开,不用一路往下滚。

环形图中心的总数从 canvas 移到了 DOM 叠层上。小程序里 canvas 文字居中和字号都不太稳,换个端就偏。图例也换成 DOM 渲染的「色点 + 名称 + 百分比」,320px 小屏不会被裁掉,百分比也不会再写成 60.00%。

数据分析页:环形图与图例

我的页、钱包和成就

以前余额和一堆指标挤在一起,看不出哪个是重点。现在余额最大,下面跟一排快捷金额,充多少一眼点完;余额不足时给空态,而不是冷冰冰一个 0。头像和指标数字也重新对了齐。

成就列表原来只靠灰度区分,浅色主题下几乎看不出解锁没有。现在每个徽章都直接标出状态,扫一眼就知道还差哪几个。

我的页:余额、快捷金额与指标

成就页:已解锁与未解锁分别标注

顺手补的细节

  • 锁屏密码:6 位数字,防别人拿到手机误触,不加密;忘了可以重置。
  • 时长读法:倒计时、时长、间隔改成「4分35秒」「15小时3分」,数字不再左右跳。
  • 空态:资讯、通知、优惠券、资金明细这些列表都补了,接口挂了不会停在骨架屏。
  • 记录表单:图片选项补了文字标签,不用靠 emoji 猜。
  • 搜索页:重写了搜索框,之前没有输入框,文字挤在左上角。
  • 登录:账号或密码为空,按钮会变灰;找回密码不再被渠道开关挡住。

给开发者的几句

主包之前 2.4MB,卡在微信 2MB 上传线上。现在把会员、分销、充值卡、签到这些低频页拆进 brick/module 分包,数据分析放进 pages_data,主包只剩计时、日历、详情、我的这些主路径页面。

分包写在 pages.json 的 subPackages 里,地址由 root 加 path 拼出来。路由没变,原来的跳转链接和小程序码都不用改。

H5 根字号固定在 clamp(13.65px, 4.267vw, 16px)。折叠屏展开和平板不再被放大一两倍,宽度过了 960px 也不会突然缩回 16px。

想在本地看效果,make seed 会灌入演示数据,demo / 123456 登录后有近 60 天记录、成就和一份 AI 分析。

v1.0.0 就有的功能,现在还在用

  • 一键计时:点开始,结束后自动带出耗时,不用先选分类再填表。
  • 多维记录:形状、颜色、分量、气味分开记,AI 分析才有依据。
  • 成就系统:连续记录解锁徽章,用来对抗「记两天就忘」。

版本历史

近期版本回顾

  • v1.0.0 — 如厕日记首个正式版本,跨平台(H5 / 微信小程序 / App)

微信里搜「如厕日记」就能用,App 和 H5 是同一份数据;想先看看效果,用 demo / 123456 登录。你平时更常翻日历看趋势,还是点开某一天看详情?一次改版值不值,不看改了多少屏,看你还愿不愿意打开它。

QQ
微信
客服