# 运动社群App设计：输入、加入和计分各有说明

原网页：https://www.jvds.cn/share/ui-design/nestegg-workout-team-u057
语言：zh-CN
发布：2026-10-14
作者：界达设计工作室（JVDS）

这套运动社群App设计用黑色卡片与黄色动作建立鲜明层次。入门页把帮助留在心率输入附近，团队页分开创建和加入，活动详情又把积分与原始记录分组。页面不只追求轻快，也在关键选择旁保留了文字解释。

## 核心结论

- 输入帮助紧邻字段，创建和加入拥有明确的不同起点。
- 活动详情将计分与原始记录分组，共享范围仍应在加入前说明。

## 第一次输入时，帮助就在数值下面

Resting Heart Rate页采用黑底，大标题与短说明居中，下方输入带BPM单位，再往下是几条帮助入口。最后说明以后可在个人资料修改，黄色Continue单独放在底部。读者先看当前字段，再了解如何找到数值，最后继续，次序很完整。

帮助没有全部摊成一大篇说明，而是按问题收成条目。对首次填写而言，能看见[方法入口](https://www.jvds.cn/share/ui-design/consistent-help-wcag-ux)和可修改提示，比只剩一个数值框更从容。界达设计更看重这组文字与字段的距离：说明应在需要它的地方出现。

这里讨论的是输入界面，不对数值作健康判断。图中的范围提示和心率示例只属于设计稿内容；真实产品还需根据专业内容要求核对，并检查空值、格式错误和修改后的反馈。

![NestEgg黑色入门页的Resting Heart Rate输入、BPM单位、三条帮助入口和黄色Continue](https://www.jvds.cn/upload/2026/1008/d187-tp/u057-i1.webp)

入门手机中部与底部｜填写方法和后续修改提示围绕同一个输入，不把解释丢到别页。

## 创建与加入，用两张卡交代不同起点

Choose your path把Start a Nest和Join a Nest分别做成卡，加入项采用白底和黄色小标记。已有团队页展示封面、名称、成员与邀请，发现页则用彩色封面卡和Join提供入口，三个阶段各有自己的结构。

这种团队加入界面很适合有邀请关系的社群。已经有组织的人可以找加入，想发起的人可以创建，不必先猜一个共同按钮会带到哪儿。发现卡的成员数量还为选择补充背景，但满员、申请中与已加入应有不同状态。

Private标签出现在团队封面上，却没有完整说明哪些内容可见。界达设计建议在加入之前简短列出[共享范围](https://www.jvds.cn/share/ui-design/app-privacy-design)，再提供调整位置。标签能提示性质，不能独自解释心率、活动详情或积分向谁开放。截图未展示确认过程。

![NestEgg创建或加入选择、Private团队成员页与带人数和Join的发现卡片](https://www.jvds.cn/upload/2026/1008/d187-tp/u057-i2.webp)

团队流程三屏并排｜创建、已有团队和发现分别呈现，下一步不由一个通用按钮包办。

## 积分和记录分区，是容易借鉴的细节

Yoga详情先放日期、活动名与时间，再列Progress，Exercise Points与Level Score并排；Statistic下面才出现等级、时长、强度与Heart Rate。背景同样很深，小黄图标只在分组附近点亮。

分区让计算表达与原始记录不至于挤成同一种“大数字”。读者既能看到产品给出的积分，也能继续找活动本身。百分比和积分还应有短解释或规则入口，不能因为字号相同就被当作同一类型结果。

进一步走查时，可修改一条活动记录，再检查哪些结果随之变化、可见范围是否保持一致。界达设计认为，这套黑黄视觉已经有清楚的动作重点，后续精力更适合放在加入确认与计分说明，截图无法证明它们的实际行为。

![NestEgg Yoga活动详情的日期起止时间、Exercise Points、Level Score与心率统计](https://www.jvds.cn/upload/2026/1008/d187-tp/u057-i3.webp)

运动详情自上而下｜先确认是哪次活动，再区分计分区和记录字段。

## 常见问题

### Private标签足以说明团队共享吗？

不够。它还应说明哪些记录向哪些成员可见，以及之后在哪里调整。

## 设计检查清单

- 在加入前列出具体共享字段。
- 给积分与百分比提供短解释或规则入口。

## 把运动记录和团队选择讲明白

如果你的运动、习惯或社群App需要整理入门帮助、加入团队和活动详情，可以从字段与共享关系开始讨论。

界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可一起梳理页面内容、界面结构与实现需求。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)