openGym卡片视图与列表视图之争：训练界面设计演进-北京尧图网络

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/openGymopenGym 是一款自托管的健身与体重追踪应用gym body-weight tracker可以规划训练计划、记录组次、查看肌肉负荷而数据完全存放在你自己的服务器上。它的训练界面围绕一场视图之争不断演进一次一个动作的卡片视图还是整场训练铺开的列表视图本文带你看懂三种训练界面设计的来龙去脉以及该如何为不同的训练场景做出选择。为什么训练界面设计值得单独讨论健身房里的应用屏幕设计比什么都重要——你的手指上沾着镁粉注意力应该在杠铃上而不是跟按钮较劲。openGym 的训练页源码位于 frontend/src/views/Workout.jsx经历了从按钮越堆越多到界面越来越安静的完整过程最终演进出三种布局视图你看到的适合谁卡片视图cards默认一次只显示一个动作用 Prev / Next 或左右滑动切换喜欢专注、不想被干扰的训练者列表视图list整个训练会话所有动作纵向堆叠、可滚动当前动作高亮描边想随时扫一眼还剩什么的人紧凑视图compact列表的极简版只留动作名和组次行隐藏媒体、标签、历史回顾等信息追求最低视觉噪音、快速记数的人卡片视图一次只做一件事卡片视图是 openGym 最原始的交互流程也是默认视图屏幕中央只放当前这一个动作完成最后一组后自动进入下一个也可以点 Prev / Next 或滑动手指切换。它的核心逻辑是当前标记current marker——同一份会话数据s.active无论哪种视图标记始终指向你现在正在练的动作完成组次后自动推进并触发休息计时。这意味着从列表视图点一下Set current就能立刻回到卡片流两种模式随时互不丢失状态相关实现在 frontend/src/views/Workout.jsx。适合场景️ 训练动作不多4–6 个、每组都要认真打勾计时手机单手操作不想来回滚动找位置第一次用 openGym、想先熟悉流程的新手列表视图整场训练一眼到底列表视图在 v1.3.2 版本加入整个会话的所有动作堆叠成一页可滚动内容当前动作带描边高亮其他动作的头部会多出一枚Set current设为当前按钮点一下就把当前标记移过去。超级组superset会被归成一组还带独立的取消配对操作。此后列表视图持续打磨几个关键演进值得记住头部固定v1.3.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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

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

相关推荐

marketingskills：用AI agents编排SEO与CRO的营销技能库

GTX 1660Ti 6GB老卡本地部署Qwen-Image-2.1：量化+Ollama实战全记录

text-to-cad工程落地实战：从语义解析到URDF/DXF生成

更多资讯

Midway Koa Web 框架演进全解析：从 CHANGELOG 到 @midwayjs/koa 源码实现

TIL 实战：PostgreSQL TRUNCATE 清空表后如何让自增序列自动归零（RESTART IDENTITY）

Calibre 格式转换实操指南：EPUB 转 MOBI 装进 Kindle

MMagic 中的 Stable Diffusion 文生图与图像修复实战：配置解析、推理调用与 ToMe 加速指南

掌握 systemd：从入门到生产级配置

Hyperf devtool 开发者工具指南：gen 代码生成器与 vendor:publish 配置发布实战

今日更新

Agent Skills 完全指南：原理、写法、安装与实战避坑

Agent Skills 实战：从 Genkit 定义到 GKE 部署与排查

Agent Skills 实战：从设计到调试的完整指南

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？