企业官网建设流程全解析

openGym卡片视图与列表视图之争：训练界面设计演进

【免费下载链接】openGymSelf-hosted gym & body-weight tracker — plan routines, log workouts (supersets, warm-ups, cardio), see which muscles are trained, fatigued or detrained, import from FitNotes/Strong/Hevy, passkey login. Your data, your server.项目地址: https://gitcode.com/GitHub_Trending/op/openGym

openGym 是一款自托管的健身与体重追踪应用（gym & body-weight tracker），可以规划训练计划、记录组次、查看肌肉负荷，而数据完全存放在你自己的服务器上。它的训练界面围绕一场"视图之争"不断演进：一次一个动作的卡片视图，还是整场训练铺开的列表视图？本文带你看懂三种训练界面设计的来龙去脉，以及该如何为不同的训练场景做出选择。

为什么"训练界面设计"值得单独讨论

健身房里的应用，屏幕设计比什么都重要——你的手指上沾着镁粉，注意力应该在杠铃上，而不是跟按钮较劲。openGym 的训练页（源码位于 frontend/src/views/Workout.jsx）经历了从"按钮越堆越多"到"界面越来越安静"的完整过程，最终演进出三种布局：

卡片视图：一次只做一件事

卡片视图是 openGym 最原始的交互流程，也是默认视图：屏幕中央只放当前这一个动作，完成最后一组后自动进入下一个，也可以点 Prev / Next 或滑动手指切换。

它的核心逻辑是"当前标记（current marker）"——同一份会话数据（s.active），无论哪种视图，标记始终指向你现在正在练的动作，完成组次后自动推进并触发休息计时。这意味着从列表视图点一下"Set current"就能立刻回到卡片流，两种模式随时互不丢失状态（相关实现在 frontend/src/views/Workout.jsx）。

适合场景：

• 🏋️ 训练动作不多（4–6 个）、每组都要认真打勾计时
• 手机单手操作，不想来回滚动找位置
• 第一次用 openGym、想先熟悉流程的新手

列表视图：整场训练一眼到底

列表视图在 v1.3.2 版本加入：整个会话的所有动作堆叠成一页可滚动内容，当前动作带描边高亮，其他动作的头部会多出一枚Set current（设为当前）按钮，点一下就把"当前标记"移过去。超级组（superset）会被归成一组，还带独立的取消配对操作。

此后列表视图持续打磨，几个关键演进值得记住：

1. 头部固定（v1.3.3）——训练名、计时器、组数计数、完成按钮钉在顶部，滚动内容不遮挡
2. 滚动位置记忆——重新打开训练时直接定位到你正在练的动作，而不是回到顶部
3. 切换不影响进行中的训练——设置里改的是"默认视图"，会话创建时会把当时的默认值快照下来（s.active.workoutView），所以训练中途改设置不会打乱眼前界面

这个机制的详细说明见开发文档 docs/dev/LIST_VIEW.md。

适合场景：

• 📋 动作多的长训练（如全身日 8+ 个动作），需要随时预览"接下来是什么"
• 需要边练边微调顺序、临时跳着练的用户

Compact 紧凑视图：把噪音降到最低

Compact 是 v1.3.5 加入的第三种视图，本质是"更狠的列表"：每个动作块以密集模式渲染——不显示媒体动画、标签（有氧/单侧/目标重量/器械）、笔记行、"上次……"回顾、杠铃配重芯片、渐进指导行。剩下的只有：动作名、⋯ 菜单、组次行。被藏起来的功能并没有消失，全部收进每个动作的 ⋯ 菜单里（详情、历史、渐进设置等），想看随时可查。

一个贴心细节：旧资料里没有这个字段时会自动按 cards 处理，所以升级后你的设置不会被意外改变。

三种视图怎么切换：两个入口

1. 改默认视图（全局）

进入设置 → During a workout（训练中）→ Workout view，一个三段选择器（Cards / List / Compact），对之后开启的所有训练生效。设置项源码在 frontend/src/views/Settings.jsx。

2. 改当前这次训练（会话级）

训练进行中的页面头部有一个⋮ 按钮，弹出菜单里直接三选一。它只改写当前会话，不动你的默认值——这正是"进行中的训练不被打扰"的保证（快照逻辑见 frontend/src/sheets.jsx）。

与视图选择正交的还有Workout controls（训练控制项）开关：默认是"精简模式"，移动/交换/删除、步进器都收在各动作的 ⋯ 菜单里；开启exerciseButtons后才会把 Move / Swap / Remove 等按钮排回界面。换句话说，视图管"看什么"，控件开关管"露出哪些按钮"，两者可以独立搭配。

设计演进：从"按钮战争"到安静的训练屏

把 CHANGELOG.md 按时间轴摊开，能清楚看到这场设计之争的脉络：

• v1.3.2🚀 列表视图首次登场（社区贡献），与卡片视图并列可选
• v1.3.3🧹 大改版：每个动作只留一个 ⋯ 菜单，组次数字本身就是该组的菜单（删组、drop-set、rest-pause 都从组号进去）；列表视图头部固定；新增Workout controls四个开关找回旧按钮
• v1.3.5✂️ Compact 布局加入，⋮ 会话级三视图切换器就位
• 其后🔧 细节打磨：列表视图记忆滚动位置、"Set current"一键回到卡片流、滑动时预览下一张卡片

这条演进路径背后是一个清晰的设计立场：默认把界面做安静，把选择权交还用户。旧样式没有被删掉，而是被收纳成可开关的选项——这正是开源健身工具该有的克制。

数据归你：视图只是表皮，数据才是根本

无论你怎么切换视图，底层始终是同一份纯数据：计划、训练记录、体重和设置都作为 JSON 存在你自己机器上的./data目录里（state-<user>.json），备份整个目录就等于备份一切。多设备之间通过带修订号（revision）的同步机制合并，而不是互相覆盖：

也就是说，卡片党还是列表党并不重要——换设备、换视图、甚至从 FitNotes / Strong / Hevy 导入旧数据，你的训练历史都完整保留。更多自托管细节可参考 docs/SELF_HOSTING.md。

如何选择：给新手的快速建议

• 🟢刚开始用→ 保持默认卡片视图，先建立"完成一组→自动推进→休息计时"的肌肉记忆
• 🟡动作多、爱跳练→ 切列表视图，用 Set current 自由跳转
• 🔵只想快速记数字→ 上Compact，界面只剩名字和组次，干扰最小
• ⏱️同一天想换手感→ 直接用训练头部的 ⋮ 切换，不动全局默认

界面之争没有输家：openGym 的三种视图共享同一份会话数据与完成逻辑，差异只在"渲染什么"。选最合手的一种，然后放心去练——毕竟，好的训练界面最好的状态，就是你几乎感觉不到它的存在。

【免费下载链接】openGymSelf-hosted gym & body-weight tracker — plan routines, log workouts (supersets, warm-ups, cardio), see which muscles are trained, fatigued or detrained, import from FitNotes/Strong/Hevy, passkey login. Your data, your server.项目地址: https://gitcode.com/GitHub_Trending/op/openGym