首页只展示"今天需要做的5件事"而非全部习惯列表。行为 = 动机 × 能力 × 触发,减少选择过载就是提升"能力"因子。用"3/5已完成"制造近在咫尺效应(Goal Gradient Effect)。
打卡后触发三重反馈:①涟漪扩散+勾号弹跳(400ms) ②进度环渐变填充 ③全部完成时全屏彩纸。300ms是经过测试的动画甜点——太快无感,太慢影响效率。
"已连续7天"比"获得7天成就"更有驱动力——Kahneman & Tversky的损失厌恶理论。断签后数字归零,用户产生"不想让7天白费"的心理。热力图参考 GitHub 贡献图,让坚持可视化。
画布色 #faf8f5 是米白(像纸张般自然),主色 #e07a5f 是陶土橙(传递"接地/健康"),成功色 #81b29a 是鼠尾草绿(放松而非刺眼)。避免纯红/纯绿——约8%男性有红绿色盲。
所有触控目标 ≥ 44px(Apple HIG 最小尺寸)。底部 Tab Bar 4个入口符合移动端导航心智模型。毛玻璃导航栏使用 backdrop-filter:blur(20px) 保持层次感同时不遮挡内容。
热力图 Hover 显示日期+打卡状态,降低认知成本。底部统计摘要(24天/80%/7连续)提供即时数据洞察,无需切换到统计页。渐变进度环比纯色更有层次感和高级感。