【生活娱乐】
E练——极简·专属·灵活，你的智能运动管家
一、Demo 简介
E练是一款基于状态感知的智能运动引导 Web App，纯前端单 HTML 文件实现，零依赖零安装，打开即用。
核心用户是 18-35 岁的城市年轻人群——久坐办公、时间碎片化、运动意愿波动大，常因"太累了不想动"“不知道练什么”"刚睡醒不想起来"而放弃运动的人群。
主要功能：
- 状态感知引导系统——“懂你此刻状态的运动管家”
用户点击开始后，不是直接选课程，而是先选择自己当前的身体/心理状态：元气满满随时开练、刚睡醒需要唤醒、坐久了想活动、有点累想放松、压力大想释放、想练但不知道练什么。每种状态对应 3 套差异化引导方案（共 18 套），步骤严格遵循身体物理逻辑——例如"刚睡醒"的引导顺序为：平躺深呼吸 → 伸懒腰 → 侧身坐起 → 站起来活动关节 → 喝水 → 换装 → 选歌 → 准备开始。每一步配合呼吸圆环动画和背景色渐变，让用户在 30 秒内从"不想动"平滑过渡到"开始练"。引导完成后自动匹配 5 种训练模式（有氧燃脂/力量训练/HIIT/瑜伽拉伸/核心训练）和 8 套预设训练计划，组数可调（1-5 组），训练中有倒计时圆环、组间休息计时、完成庆祝统计等完整流程。
产品首页：
点击“开始”后的状态选项：
引导文字：
- 身体数据追踪 + 疲劳度监测——“不止记录练了多少，更追踪身体发生了什么变化”
数据页提供三合一身体数据记录：体重（kg）、体脂率（%）、腰围（cm），输入后自动生成 SVG 趋势折线图，支持三指标切换，自动标注与上次记录的变化值（绿色下降/红色上升），保留最近 15 条记录历史。同时配备疲劳度评估系统：每次训练前用户拖动滑块评估 1-10 分疲劳度（渐变色从绿到红，描述文字动态变化如"精力充沛，可以挑战高强度"到"极度疲劳，强烈建议今天休息"），训练完成后自动记录，数据页展示近 7 日疲劳度彩色柱状图（绿/橙/红三色区分）和均值统计，长期可视化"训练-恢复"平衡。
数据曲线图：
- 匿名排行榜 + 成就系统——“良性竞争，零社交压力”
成就页新增同城市/同年龄段用户的周消耗匿名排行榜，只显示匿名昵称（如"极速蜗牛"“晨跑达人”），无关注、无点赞、无私信。支持"本周/本月"切换，当前用户绿色高亮标注。配合 16 个成就卡片，覆盖坚持打卡（初次打卡/连续3-100天）、训练达人（首公里/运动50次/万卡消耗）、强度挑战（热身达人/暴汗战士/极限突破）、特殊成就（早起鸟儿/夜行者/全勤月度）四个维度，每个成就均配备专属 SVG 矢量图标。
排行榜：
其他亮点功能： 首页动态背景系统（6 层光晕漂移 + 8 粒子上升 + 3 波浪曲线，呼吸感视觉氛围）；时间感知问候语（早/中/下午/晚上好 + 用户名）；用户头像/名称可编辑；月历热力图训练记录；金句每 5 秒自动轮播；日程管理（添加/删除训练安排）。
二、Demo 创作思路
灵感来源：
因为各种不可抗因素打破运动计划，我经常遇到这样的场景：完成任务或者学业后想运动，但身体已经瘫在椅子上动不了；周末早上醒来想跑步，但躺在床上就是不想起；压力大时明明知道运动能减压，但就是迈不开腿。我观察了身边大量同事和朋友，发现大家不是因为"不知道怎么练"而放弃，而是因为从当前状态到开始运动之间的过渡缺失——没有一个渐进的引导过程帮他们"启动"。市面上的 Keep、FitTime 等运动 App 都在解决"练什么"的问题，内容越来越丰富，但用户打开后依然滑来滑去不知道选哪个。真正的痛点不是缺内容，而是启动阻力太高。
想解决的问题：
第一，启动阻力——“太累了不想动”。用户需要的是一个"懂我现在状态"的引导者，根据他此刻是刚睡醒、坐久了还是压力大，生成一套从当前姿态到运动准备的渐进引导，而不是冷冰冰地丢给他一堆课程列表。
第二，选择困难——“不知道练什么”。海量动作库反而导致决策瘫痪。E练的做法是让用户先描述状态，系统自动推荐合适的训练模式，用"状态选择"替代"课程浏览"，在最短路径内完成决策。
第三，数据断层——大多数运动 App 只记录"练了多少"（时长、千卡、次数），但不追踪"身体发生了什么变化"。用户坚持运动 30 天后最想看到的是"我的体重降了、体脂减了、腰围细了"，而不是"我累计消耗了 5000 千卡"。E练 增加了体重/体脂/腰围趋势曲线和疲劳度监测，让用户看到运动对身体产生的真实改变。
为什么做这个方向：
我的核心判断是：运动 App 的下半场不在于内容堆积，而在于个性化和启动门槛。不追求内容多（例如Keep有上千个课程），但追求在最短路径内把用户从"不想动"带到"开始练"。做了几个关键取舍：
不做动作百科，做状态引导。用户不选"练什么"，而是选"我现在什么感觉"，系统替他做决策。
引导步骤顺序不可随机。最初版本中引导步骤是随机打乱的，但"侧身坐起来"出现在"慢慢站起来"之后违反物理常识。后来改为每种状态 3 套预设方案、顺序严格固定，每次随机选择方案而非打乱步骤。随机性带来新鲜感，但逻辑性才能建立用户信任。
匿名排行榜而非社交排行榜。运动 App 普遍在推社交化（好友、点赞、动态），但很多用户恰恰因为不想被看到才选择独自运动。匿名排行榜只展示排名和匿名昵称，提供良性竞争动力但不施加社交压力。
单 HTML 文件零依赖。不引入任何框架和构建工具，一个文件双击即可运行，极致可移植性。虽然随着功能增长（5000+ 行）维护成本上升，但对于 Demo 阶段的快速验证，单文件的迭代速度是不可替代的。
**
三、技术实现与开发心得**
demo技术：HTML5 + CSS3 Animation + Vanilla JavaScript + SVG，纯前端实现。
整个项目拆解为 6 个阶段：基础框架搭建（页面结构、导航、样式变量）→核心流程开发（状态选择、引导系统、训练模式、运动计时）→数据与成就系统（日历热力图、趋势曲线、成就卡片、排行榜）→个性化功能（时间问候、用户编辑、疲劳评估）→视觉效果优化（光球粒子波浪、背景图、级联动画）→Bug 修复与测试（div 平衡检查、变量引用验证、退出逻辑修复）。
全程使用 TRAE 的代码编辑能力，核心操作包括：SearchReplace 精准定位修改（如 CSS 属性调整、JS 逻辑修复）、Grep 跨文件搜索引用关系（排查变量重命名遗漏）、Read 逐行审查代码结构（定位 div 嵌套错误）、RunCommand 执行 Python 自动化检查脚本（每次修改后验证括号/div 平衡）、GenerateImage 生成专业背景图和 UI 配图、Task 启动子代理并行处理多个独立模块（排行榜、身体数据、疲劳监测三个功能同时实现，大幅提升效率）。
踩过的关键坑：（1）flex 布局中混用 position: absolute 导致点击区域与视觉错位，最终回归纯 flex 方案解决；（2）5000+ 行单文件中变量重命名遗漏引用导致白屏，靠自动化括号检查脚本预防；（3）HTML 新增模块遗漏关闭 </div> 导致整个页面层叠崩塌，改用注释标记（<!-- end section -->）快速定位；（4）随机打乱引导步骤违反物理逻辑，改为"方案级随机"而非"步骤级随机"。这些经验总结为一句话：长文件中每次修改后立即运行自动化验证，逻辑类内容在粗粒度做随机、细粒度保持确定性。
动画是体验的灵魂。 整个 Demo 中有超过 20 种动画效果：首页 4 层呼吸光环按钮、6 层光晕漂移、8 个粒子从底部缓缓上升、3 条波浪曲线水平偏移、状态选项级联入场（每个延迟 0.08s）、引导步骤背景色渐变 + 呼吸圆环、训练倒计时 SVG 圆环实时更新、涟漪点击效果等。这些不是炫技，而是降低用户的感知等待时间——当点击"开始"后看到光晕淡出、选项依次滑入，2 秒的加载变成了 2 秒的视觉享受。运动 App 最忌讳的就是"冷冰冰的工具感"，动画让产品有了温度。
数据可视化的克制。 身体趋势曲线用纯 SVG path 手绘，没有引入 ECharts 等图表库。原因是运动数据的图表应该简洁到一眼能看懂——一条折线 + 渐变填充 + 数据点 + 趋势变化标签，足够了。过度复杂的图表反而让普通用户产生"看不懂数据"的挫败感。
单文件架构的利与弊。 利是零部署成本、完美可移植、迭代极快。弊是随着功能增长（从最初 3 个页面到现在的 16 个界面/模块），文件已超过 5000 行，代码组织和调试成本急剧上升。生产环境会拆分为 Vue/React 组件化项目，但对于 Demo 验证阶段，单文件的效率优势远大于维护劣势。
四、未来规划
完善为手机应用app，并接入 LLM 做 AI 教练（训练建议 + 饮食推荐 + 语音陪练），当前 AI 面板为 UI 占位，这是最大的功能空白。
健康生态联动（Apple Health/微信运动同步、智能手表心率监测、女性生理周期适配训练强度等等）。
五、demo体验地址
项目压缩包：
E-lian-demo.zip (2.2 MB)
社区报名帖： 【生活娱乐赛道】E练——极简·专属·灵活，你的智能运动管家
关键任务对话的 Session ID：
4302848129768792:76359e3537e95cceaaee45f7ad5a78f3_6a48af2f2a1701c26ace5e75.6a4b277fd1c026a3af97f2eb.6a4b277fd1c026a3af97f2e9:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/6 11:56:47)
4302848129768792:ca9cc494bc778dfbad4b7bb7cd0b0cf3_6a48af2f2a1701c26ace5e75.6a4f64279cc5471ee69e9f8e.6a4f64279cc5471ee69e9f8c:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/9 17:04:39)
4302848129768792:91c9abb21efe3bafe2d4c8d208211b08_6a48af2f2a1701c26ace5e75.6a4f753a9cc5471ee69ea141.6a4f753a9cc5471ee69ea13f:TRAE Work CN.0.1.32.no_sid.no_ppe.T(2026/7/9 18:17:30)