这套运动社群App设计用黑色卡片与黄色动作建立鲜明层次。入门页把帮助留在心率输入附近,团队页分开创建和加入,活动详情又把积分与原始记录分组。页面不只追求轻快,也在关键选择旁保留了文字解释。
核心结论
- 输入帮助紧邻字段,创建和加入拥有明确的不同起点。
- 活动详情将计分与原始记录分组,共享范围仍应在加入前说明。
第一次输入时,帮助就在数值下面
Resting Heart Rate页采用黑底,大标题与短说明居中,下方输入带BPM单位,再往下是几条帮助入口。最后说明以后可在个人资料修改,黄色Continue单独放在底部。读者先看当前字段,再了解如何找到数值,最后继续,次序很完整。
帮助没有全部摊成一大篇说明,而是按问题收成条目。对首次填写而言,能看见方法入口和可修改提示,比只剩一个数值框更从容。界达设计更看重这组文字与字段的距离:说明应在需要它的地方出现。
这里讨论的是输入界面,不对数值作健康判断。图中的范围提示和心率示例只属于设计稿内容;真实产品还需根据专业内容要求核对,并检查空值、格式错误和修改后的反馈。

创建与加入,用两张卡交代不同起点
Choose your path把Start a Nest和Join a Nest分别做成卡,加入项采用白底和黄色小标记。已有团队页展示封面、名称、成员与邀请,发现页则用彩色封面卡和Join提供入口,三个阶段各有自己的结构。
这种团队加入界面很适合有邀请关系的社群。已经有组织的人可以找加入,想发起的人可以创建,不必先猜一个共同按钮会带到哪儿。发现卡的成员数量还为选择补充背景,但满员、申请中与已加入应有不同状态。
Private标签出现在团队封面上,却没有完整说明哪些内容可见。界达设计建议在加入之前简短列出共享范围,再提供调整位置。标签能提示性质,不能独自解释心率、活动详情或积分向谁开放。截图未展示确认过程。

积分和记录分区,是容易借鉴的细节
Yoga详情先放日期、活动名与时间,再列Progress,Exercise Points与Level Score并排;Statistic下面才出现等级、时长、强度与Heart Rate。背景同样很深,小黄图标只在分组附近点亮。
分区让计算表达与原始记录不至于挤成同一种“大数字”。读者既能看到产品给出的积分,也能继续找活动本身。百分比和积分还应有短解释或规则入口,不能因为字号相同就被当作同一类型结果。
进一步走查时,可修改一条活动记录,再检查哪些结果随之变化、可见范围是否保持一致。界达设计认为,这套黑黄视觉已经有清楚的动作重点,后续精力更适合放在加入确认与计分说明,截图无法证明它们的实际行为。

常见问题
Private标签足以说明团队共享吗?
不够。它还应说明哪些记录向哪些成员可见,以及之后在哪里调整。
设计检查清单
- 在加入前列出具体共享字段。
- 给积分与百分比提供短解释或规则入口。
把运动记录和团队选择讲明白
如果你的运动、习惯或社群App需要整理入门帮助、加入团队和活动详情,可以从字段与共享关系开始讨论。
界达设计工作室(JVDS)提供UI/UX设计与网站设计、开发服务,可一起梳理页面内容、界面结构与实现需求。