慢慢

应用与界面 · 2026-06-05

燃日的十二轮 UI 迭代,同一个首页为什么改了这么多次

pass1 到 pass12 不是十二次换皮。每一轮截图都会暴露新的层级、遮挡或交互证据问题,改完一处,下一处才看得见。

燃日一开始已经能显示目标和任务,但“能显示”离产品文档里的暖色能量仪表盘还很远。首页、目标、详情、新建和选择器互相牵连,只改一张首页,很快会让其他页面显得像另一个 App。

我最初容易把一次大改当作收口。配色、圆环和卡片全部换掉,截图看起来就会明显接近参考。实际跑真实路径时,新的遮挡、滚动和状态问题又会冒出来。

前几轮先把基本页面和数据接通。pass1 已经有首页、目标、详情、新建和天数选择器,但视觉层级仍像普通卡片列表,能量环没有成为首页主角。pass4 和 pass5 开始靠近参考板,调整暖白背景、目标筛选、底部导航和选择器。也正是在这个阶段,评审发现目标卡会被浮动底栏遮住;提醒选择器那张图一度截成了倒计时天数选择器,截图本身不能作为通过证据。

后面保留了数据底座。DataStore、Repository、ViewModel 和 WorkManager 继续沿用,只重写 Compose UI 层。这个决定减少了数据迁移风险,也让视觉返工不会顺手破坏打卡和提醒。pass11、pass12 记录的变化已经从整页换风格,转到列表底部留白、浮动导航、图标选择、能量环卡片和小目标入口这些真实路径里的卡点。

十二个 pass 目录保留了每轮画面;当前工程另外用单元测试检查进度与筛选,用 Compose UI 测试描述两个选择器的打开路径,再通过 debug 与 release 构建确认代码可以打包。没有执行的设备测试不会写成已经通过。

现在我会把参考图、当前截图、交互证据和构建结果分开保存。尤其是选择器这类界面,截到一张像样的图不算完,先确认截的是正确弹层。这个错误很小,却比一堆“视觉已还原”的总结更有用。