9:41 signal_cellular_4_bar wifi battery_full
运动圈 32.6万成员
fitness_center
健身圈
sports_tennis
羽毛球圈 +
self_improvement
瑜伽圈 +
directions_run
跑步圈 +
downhill_skiing
滑雪圈 +
event_available 签到
local_offer 今日低价
notifications_active 降价提醒
smart_toy AI问答
推荐
好物
器材
讨论
AI 输入身体参数，生成专属计划
减脂塑形 增肌增重 体能提升
inventory_2装备补货提醒基于购买记录
blender
乳清蛋白粉 2.27kg
已用 28 天 · 建议补货
fitness_center
健身手套
已用 85 天 · 即将到期
loop
阻力带 中强度
已用 45 天 · 状态正常
充足
local_fire_department 今日低价 限时chevron_right
健身装备今日优惠最大的商品，每日10点更新
fitness_center-35%
可调哑铃 24kg 静音款
HK$258398
straighten-40%
弹力带5档 乳胶加厚
HK$3559
self_improvement-30%
TPE瑜伽垫 15mm 防滑
HK$6289
accessibility_new-25%
加压护膝 深蹲保护
HK$5168
trending_up 圈友都在买 更多chevron_right
fitness_center
可调哑铃 24kg 静音款
HK$398
vibration
筋膜枪 深层肌肉放松
HK$168
straighten
弹力带5档 居家训练
HK$59
forum 热门分享
person
增肌阿Ken 2h前
入手可调哑铃一个月，居家增肌终于有阻力了！24kg对男生来说上半身够用
photo
photo
favorite328 chat_bubble_outline46 share
eco 圈友种草 更多chevron_right
看看圈友最近都在买什么
person
增肌阿Ken 刚刚下单
入手了这个可调哑铃，终于不用整组哑铃架了！
fitness_center
可调哑铃 24kg 静音款
HK$398
去看看
favorite128 chat_bubble_outline23 shopping_bag我也买了
person
Eric打卡 昨天
这个心率手环性价比太高了，50m防水游泳也能戴
watch
运动心率手环 50m防水
HK$199
去看看
favorite234 chat_bubble_outline45 shopping_bag我也买了
emoji_events 好物排行 完整榜单chevron_right
monitor_weight
智能体脂秤 8电极 WiFi+蓝牙
TOP1月销1,890
HK$158
watch
运动心率手环 14天续航 50m防水
TOP2月销920
HK$199
fitness_center新手器材选购指南 问AI助手 →
不知道买什么？点击咨询AI助手，输入预算和目标，智能推荐最适合你的器材组合。
全部 力量 有氧 防护 监测
fitness_center 力量器材
fitness_center
可调节哑铃 5-24kg 一秒换重
AI推荐居家首选
HK$398
directions_run 有氧器材
loop
钢丝跳绳 轴承计数
HK$38
rowing
水阻划船机 折叠
HK$2,380
pedal_bike
动感单车 磁控
HK$1,680
全部 经验分享 好物测评 求助提问 打卡
person
增肌阿Ken 2h前
3个月减脂记录！从78kg到70kg。关键：训练4天/周 + 热量缺口 + 蛋白充足 + 早睡。
photo
photo
photo
favorite1,203 chat_bubble_outline186 share
person
新手阿May 8h前
女生想做力量训练，哑铃买几kg好？之前买5kg嫌轻了，10kg又觉得重…
favorite89 chat_bubble_outline34 share
image send
arrow_back_ios

AI 健身助手

帮我生成健身计划：
身高170cm / 体重70kg / 体脂22%
目标：减脂塑形
每周训练4天
psychologyAI 健身助手
arrow_back_ios

每日签到

arrow_back_ios

今日低价

schedule每日10:00更新
fitness_center-35%
可调哑铃 24kg 静音款
原价 HK$398
HK$258
straighten-40%
弹力带5档 乳胶加厚
原价 HK$59
HK$35
arrow_back_ios

降价提醒

visibility我关注的商品
fitness_center
可调哑铃 24kg
当前 HK$398 · 目标价 HK$300
监控中
vibration
筋膜枪 30档
已降至目标价！HK$121
添加新商品
add_circle_outline

点击添加商品

arrow_back_ios

AI 运动问答

smart_toy
有什么运动问题都可以问我
健身计划 · 动作要领 · 装备推荐 · 饮食搭配
帮我制定减脂计划 深蹲膝盖疼怎么办 新手买什么哑铃 蛋白粉怎么选
history最近提问
体脂20%怎么降到15%？
跑步机和椭圆机哪个减脂效果好？
淘宝海外香港 · 运动圈 - 健身圈
兴趣圈层功能说明文档 v2.0
calendar_today2026.07.12 devicesiOS / Android language淘宝海外香港站
layers
页面结构概览 核心框架
运动圈采用「大圈 → 子圈 → 内容Tab」两级层级结构。用户进入运动圈后，通过顶部子圈导航切换到具体兴趣圈（健身/羽毛球/瑜伽等），每个子圈有独立的内容Tab展示。
层级模块功能说明
L0运动圈标识展示圈子名称与成员数（32.6万），建立用户归属感
L1子圈导航横向滚动chip列表，已加入的子圈可直接切换，未加入的显示「+」按钮
L2工具栏4个方形卡片快捷入口（签到/今日低价/降价提醒/AI问答）
L3Tab + 分享4个内容Tab（推荐/好物/器材/讨论）+ 右侧社媒分享按钮
L4内容面板各Tab下的具体内容模块，点击Tab切换真实内容
explore
子圈导航
用户可浏览并加入不同运动子圈。已加入的圈子显示为选中态（橙色边框），未加入的右上角显示「+」角标。点击「+」即加入该子圈，加入后角标消失。当前demo聚焦健身圈，其余子圈显示「开发中」提示。
子圈状态操作
fitness_center健身圈已加入（默认选中）点击查看内容
sports_tennis羽毛球圈未加入点「+」加入 / 点击预览
self_improvement瑜伽圈未加入点「+」加入 / 点击预览
directions_run跑步圈未加入点「+」加入 / 点击预览
downhill_skiing滑雪圈未加入点「+」加入 / 点击预览
touch_app左侧demo可操作：点击子圈切换，点「+」加入
build
工具栏（4个快捷入口） 电商转化
工具栏设计原则：每个工具同时满足「用户留存」（让用户有理由每天来）和「电商转化」（让用户有理由下单）。工具以方形卡片呈现，点击进入独立子页面。
工具留存机制转化机制子页面
event_available签到连续签到奖励 + 徽章成就签到积分可换优惠券签到日历 + 徽章进度
local_offer今日低价每日10点刷新，制造紧迫感圈内装备最低折扣折扣商品列表 + 抢购按钮
notifications_active降价提醒被动触达，无需主动打开app到达目标价即推送关注商品监控 + 添加新商品
smart_toyAI问答个性化内容不可替代回答关联装备推荐自由提问 → AI回复 + 商品推荐
touch_app左侧demo可操作：点击4个工具分别进入子页面
thumb_up
推荐Tab AI驱动
推荐Tab是用户进入健身圈的首屏默认视图，核心目标是在一屏内同时覆盖「AI个性化服务」「价格心智」「社交内容」三重价值，快速建立圈子吸引力。
模块功能说明价值定位
AI问答输入任何运动问题 → AI回答 + 关联商品推荐个性化 + 差异化留存钩子
今日低价4张横滑商品卡，展示折扣比例+划线原价，每日10:00更新限时促销 + 日活驱动
圈友都在买圈内热销商品横滑展示社交证明 + 从众消费
热门分享圈友UGC帖子（图文+互动数据）内容粘性 + 社区氛围
psychology
AI助手对话承接页 AI核心
用户在推荐Tab点击「生成我的健身计划」后，系统自动将用户输入的参数作为消息发送给AI助手，跳转至对话界面。AI回复包含完整计划、装备推荐，以及可继续对话的操作入口。
输入参数 → 点击生成 → Toast提示 → 跳转对话页 → 自动发送参数 → AI typing动画 → AI回复计划
元素说明
用户气泡（右对齐橙色）自动展示已填参数：身高/体重/体脂/目标/频率
AI思考态（typing动画）3个圆点闪烁动画，持续1.8秒后消失
AI回复气泡（左对齐白底）包含：分日计划详情 + 装备推荐 + 操作chip
操作chip「查看推荐装备」跳转商品列表；「调整参数」返回修改
底部输入框支持继续自由对话，如"帮我调整为5天计划"
touch_app左侧demo可操作：在推荐Tab点击「生成我的健身计划」体验完整流程
shopping_bag
好物Tab 社交电商
好物Tab以「圈友真实购买行为」驱动商品发现，核心是「圈友种草」模块——展示圈友的真实购买记录（"刚刚下单""今天下单"）和使用心得，内嵌商品卡片一键跳转。
模块功能说明设计意图
圈友种草真实购买帖（用户头像+购买时间+心得+商品卡+「我也买了」互动）社交证明降低决策成本
好物排行TOP1-3商品卡列表，含月销数据+购买按钮销量背书 + 快捷转化
精选合集主题化横滑卡片（居家健身全套/训练恢复神器）场景化推荐降低选择门槛
更多好物双列瀑布流商品展示无限浏览 + 长尾覆盖
touch_app左侧demo可操作：切换到「好物」Tab查看
fitness_center
器材Tab 工具型电商
器材Tab面向有明确购买意图的用户，提供分类筛选和AI导购两条路径。顶部的「新手器材选购指南」卡片点击后直接跳转AI助手，适合不知道买什么的新手用户。
模块功能说明
新手选购指南（知识卡）点击跳转AI助手子页面，通过对话式交互推荐器材组合
分类筛选chip全部/力量/有氧/防护/监测，筛选下方商品
力量器材列表详情卡片：图+标题+标签(AI推荐/月销)+价格+购买按钮
有氧器材横滑跳绳/划船机/动感单车/弹力带等
防护&监测横滑护膝/腰带/心率手环/手套等
touch_app左侧demo可操作：切换到「器材」Tab，点击知识卡进入AI助手
forum
讨论Tab
讨论Tab是圈子的UGC内容核心，用户可浏览经验分享、好物测评、求助提问、打卡等不同类型话题。底部固定「发表评论」入口，降低用户发言门槛。
元素功能说明
话题筛选chip全部/经验分享/好物测评/求助提问/打卡 — 快速定位内容类型
讨论帖卡片用户头像+昵称+发布时间+正文+图片+互动数据(赞/评论/分享)
图片展示最多3张图片横排（点击可放大）
发表评论栏（底部固定）输入框(placeholder"说点什么...") + 图片按钮 + 发送按钮
touch_app左侧demo可操作：切换到「讨论」Tab，查看底部评论入口
share
社媒分享
Tab栏最右侧的分享按钮，支持将当前圈子分享至社交媒体，覆盖香港用户主要社交平台。分享形式为圈子邀请卡片（含圈子名/成员数/精选内容预览），受邀用户点击可直接进入圈子。
  • WhatsApp —— 香港渗透率最高的即时通讯工具
  • Instagram —— 年轻运动用户活跃平台
  • 小红书 —— 港区运动生活内容生态
palette
设计规范 视觉系统
统一使用CSS变量管理视觉token，确保跨页面一致性。图标统一使用Google Material Icons CDN，不依赖外部图片资源。商品图片使用渐变色块+居中icon的占位方式。
Token值用途
--theme#FF5000品牌主色（淘宝橙）
--theme-light#FFF4EE轻量选中态背景
--bg#F5F7FA全局页面背景
--card#FFFFFF卡片/模块背景
--radius-md12px标准卡片圆角
--shadow-card0 2px 8px rgba(0,0,0,0.04)卡片投影
图标系统Material Icons所有图标统一来源
字体栈SF Pro / PingFang SC系统字体，无需加载
swipe
交互说明 体验细节
所有可点击元素配有按压缩放反馈（:active scale 0.96-0.98），子页面采用从底部滑入的动画（translateY + cubic-bezier），Tab切换为即时内容替换。
交互触发反馈
子页面打开工具栏/知识卡点击从底部slideUp（0.3s缓动）
子页面关闭顶部返回箭头slideDown回退
Tab切换点击Tab文字下划线跟随 + 内容面板替换
Toast提示各操作反馈底部居中黑底白字，2s自动消失
加入子圈点击「+」角标角标消失 + Toast"已加入"
AI问答点击工具栏「AI问答」打开问答子页面，支持自由提问或点击预设问题
— 功能说明文档 END —