msh-system/docs/用户界面交互设计.md

慢生活智能营养专家小程序 - 产品功能说明

用户界面交互设计文档

---

📋 文档信息

项目	内容
产品名称	慢生活智能营养专家
版本号	v2.0
文档类型	产品功能说明（着重UI交互）
创建日期	2025-01-20
设计来源	Figma设计稿 + PRD文档

---

一、产品概述

1.1 产品定位

为肾病患者打造的智能营养管理小程序，通过科学计算、AI辅助和社区互动，帮助用户实现精准营养管理。

1.2 核心功能模块

• 🧮 食谱计算器 - 个性化营养方案计算
• 💬 AI营养师 - 24小时智能问答
• 📸 饮食打卡 - 每日饮食记录与激励
• 👥 打卡社区 - UGC内容分享与互动
• 🔍 食物百科 - 营养成分查询
• 💡 营养知识 - 专业营养指导

---

二、整体界面架构

2.1 导航结构

底部标签栏（TabBar）

采用5个标签页的底部导航设计：

标签	图标	功能	交互说明
首页	🏠	功能入口与内容推荐	点击切换至首页，显示用户卡片、功能入口、推荐内容
食谱	🍱	食谱浏览与管理	显示收藏和历史食谱，支持搜索和筛选
咨询	💬	AI营养师对话	进入对话界面，支持文字、语音、图片输入
营养	📚	营养知识库	分类浏览营养知识、科普文章
我的	👤	个人中心	用户信息、健康档案、设置等

交互细节：

• 未选中状态：灰色图标（#666666）
• 选中状态：绿色图标（#4CAF50）
• 点击标签：平滑切换页面，无页面跳转动画
• 标签栏固定在屏幕底部，滚动时保持可见

---

三、核心页面交互设计

3.1 首页（Index）

3.1.1 页面结构

┌─────────────────────────────────┐
│  Header: 慢生活智能营养专家      │
│  [标题]              [更多菜单]   │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【用户卡片】                     │
│  👤 头像 | 昵称 | 状态           │
│  [打卡按钮]                      │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【功能入口】（2x2网格）          │
│  📊 食谱计算器  💬 AI营养师      │
│  🔍 食物百科    💡 营养知识      │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【食谱推荐】                     │
│  标题 | 查看更多 →               │
│  [卡片列表：图片+标题+描述]       │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【欢迎横幅】                     │
│  🤝 慢生活营养专家               │
│  [免费领取按钮]                  │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【健康知识】                     │
│  标题 | 查看更多 →               │
│  [列表：图标+标题+描述+阅读量]    │
└─────────────────────────────────┘

3.1.2 交互说明

用户卡片区域：

• 点击头像：跳转至个人中心
• 点击"打卡"按钮：
  • 如果未完成健康档案 → 提示"请先完成健康档案"
  • 如果已完成 → 跳转至每日打卡页面
• 状态显示：
  • 已完成：显示"已完成健康档案"（绿色文字）
  • 未完成：显示"尚未完成健康档案"（灰色文字）

功能入口卡片：

• 布局：2x2网格，每个卡片包含：
  • 左侧：圆形图标背景（不同颜色）
  • 右侧：标题 + 描述文字
• 点击交互：
  • 点击卡片 → 跳转至对应功能页面
  • 点击反馈：轻微缩放动画（scale: 0.95）
• 卡片颜色：
  • 食谱计算器：橙色渐变
  • AI营养师：蓝色渐变
  • 食物百科：绿色渐变
  • 营养知识：紫色渐变

食谱推荐区域：

• 滚动方式：横向滚动（scroll-view horizontal）
• 卡片交互：
  • 点击卡片 → 跳转至食谱详情页
  • 卡片显示：封面图 + 餐次标签 + 标题 + 描述 + 标签 + 元数据（时间、浏览量）
• "查看更多"：点击跳转至食谱列表页

欢迎横幅：

• 背景：渐变背景 + 装饰性圆形元素
• 按钮交互：
  • 点击"免费领取" → 跳转至营养方案领取页
  • 按钮样式：白色文字 + 箭头图标

健康知识列表：

• 列表项交互：
  • 点击列表项 → 跳转至知识详情页
  • 显示：图标 + 标题 + 描述 + 阅读时间 + 浏览量

页面滚动：

• 使用 scroll-view 组件，支持下拉刷新
• 滚动时底部标签栏保持固定

---

3.2 食谱计算器（Calculator）

3.2.1 输入表单页

页面结构：

┌─────────────────────────────────┐
│  < 返回    食谱计算器            │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【性别选择】                     │
│  ○ 男  ○ 女                     │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【年龄】                         │
│  [输入框] 岁                     │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【身高】                         │
│  [输入框] cm                     │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【是否透析】                     │
│  ○ 是  ○ 否                     │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【透析类型】（条件显示）          │
│  ○ 血液透析  ○ 腹膜透析          │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【干体重】                       │
│  [输入框] kg                     │
│  💡 提示：透析患者请输入透析后    │
│     的干体重                     │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【血肌酐】                       │
│  [输入框] μmol/L                 │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  [开始计算]（固定在底部）         │
└─────────────────────────────────┘

交互说明：

单选按钮：

• 样式：自定义圆形选择器
• 未选中：灰色边框圆圈
• 选中：橙色边框 + 橙色填充圆点
• 点击反馈：立即切换选中状态，带动画效果

输入框：

• 样式：
  • 背景色：浅灰色（#f5f5f5）
  • 圆角：12rpx
  • 内边距：24rpx
  • 右侧显示单位（灰色文字）
• 输入限制：
  • 年龄：整数，范围 1-120
  • 身高：支持小数，范围 50-250
  • 干体重：支持小数，范围 20-200
  • 血肌酐：支持小数，范围 10-2000
• 输入反馈：
  • 获得焦点：边框高亮（橙色）
  • 输入错误：显示红色提示文字
  • 失去焦点：自动验证格式

条件显示逻辑：

• 当"是否透析"选择"是"时，显示"透析类型"选项
• 当选择"否"时，隐藏"透析类型"选项
• 显示/隐藏使用动画过渡（fade + slide）

底部按钮：

• 样式：橙色渐变背景，圆角按钮，固定在底部
• 状态管理：
  • 未完成必填项：按钮灰色，不可点击
  • 完成所有必填项：按钮橙色，可点击
• 点击交互：
  • 点击后显示加载动画
  • 计算完成后跳转至结果页
  • 如果计算失败，显示错误提示

---

3.2.2 计算结果页

页面结构：

┌─────────────────────────────────┐
│  < 返回    营养计算结果          │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【健康数据卡片】（2x2网格）       │
│  ┌──────┐  ┌──────┐            │
│  │ eGFR │  │ 标准体重│          │
│  │ XX.XX│  │ XX.X  │            │
│  └──────┘  └──────┘            │
│  ┌──────┐  ┌──────┐            │
│  │ BMI  │  │ CKD分期│          │
│  │ XX.X │  │ CKD X期│          │
│  └──────┘  └──────┘            │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【每日营养目标】（1x2网格）       │
│  ┌──────────┐  ┌──────────┐    │
│  │ 蛋白质    │  │ 能量      │    │
│  │ XX.X 克/天│  │ XXXX 千卡│    │
│  └──────────┘  └──────────┘    │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【食物份数建议】                 │
│  1. 谷薯50g      [5.7份] 详情  │
│  2. 淀粉100g     [0.77份] 详情  │
│  3. 绿叶蔬菜200g [1份] 详情     │
│  ...                            │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【每日营养配餐】⭐⭐⭐            │
│  ┌──────────────────────────┐   │
│  │ 🌅 早餐 (7:00-8:00)      │   │
│  │ ┌────────────────────┐   │   │
│  │ │ 🥛 牛奶            │   │   │
│  │ │   牛奶 120g        │   │   │
│  │ └────────────────────┘   │   │
│  │ ┌────────────────────┐   │   │
│  │ │ 🍜 鸡蛋拌面         │   │   │
│  │ │   面条 90g          │   │   │
│  │ │   鸡蛋 120g        │   │   │
│  │ └────────────────────┘   │   │
│  └──────────────────────────┘   │
│  ┌──────────────────────────┐   │
│  │ ☀️ 午餐 (12:00-13:00)   │   │
│  │ [菜品卡片...]            │   │
│  └──────────────────────────┘   │
│  ┌──────────────────────────┐   │
│  │ 🌙 晚餐 (18:00-19:00)   │   │
│  │ [菜品卡片...]            │   │
│  └──────────────────────────┘   │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  ⚠️ 重要提示                     │
│  • 透析患者需严格控制水分摄入    │
│  • 建议低盐饮食（每日少于5g）    │
│  ...                            │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  [✨ 生成AI智能食谱]             │
│  [联系专业营养师]                │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  💡 温馨提示                     │
│  以上计算结果仅供参考...         │
└─────────────────────────────────┘

交互说明：

健康数据卡片：

• 布局：2x2网格，橙色渐变背景
• 数据展示：
  • 每个卡片显示：标签 + 数值 + 单位
  • 数值使用大号字体突出显示
• 点击交互：点击卡片可查看详细说明（弹窗或跳转）

营养目标卡片：

• 布局：1x2横向排列
• 颜色区分：
  • 蛋白质：橙色渐变
  • 能量：红色渐变
• 数据展示：大号数字 + 单位

食物份数列表：

• 列表项交互：
  • 点击"详情"按钮 → 显示该食物类别的详细说明
  • 列表项支持展开/收起（可选功能）

每日营养配餐：

• 餐次卡片：
  • 顶部Header：渐变色背景 + Emoji图标 + 餐次名称 + 时间范围
  • 早餐：橙粉色渐变
  • 午餐：黄橙色渐变
  • 晚餐：橙红色渐变
• 菜品卡片：
  • 左侧：菜品图片（80x80，圆角）
  • 右侧：菜品名称 + 食材列表
  • 食材以Badge形式展示（小标签）
• 交互：
  • 点击菜品卡片 → 查看菜品详情（食材、营养、做法）
  • 支持左右滑动查看所有菜品（可选）

操作按钮：

• 主按钮："✨ 生成AI智能食谱"
  • 点击 → 跳转至AI营养师页面，自动带入营养数据
• 次按钮："联系专业营养师"
  • 点击 → 打开客服对话或拨打电话

页面滚动：

• 支持长页面滚动
• 重要按钮可固定在底部（可选）

---

3.3 AI营养师（Chat）

3.3.1 页面结构

┌─────────────────────────────────┐
│  < 返回    AI营养师              │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【消息区域】（可滚动）           │
│                                  │
│  ┌──────────────────────────┐   │
│  │ 👋 您好！我是您的AI营养师  │   │
│  │ 助手。                   │   │
│  │                          │   │
│  │ 我可以帮您：             │   │
│  │ • 解答饮食疑问           │   │
│  │ • 评估食物适宜性         │   │
│  │ ...                      │   │
│  └──────────────────────────┘   │
│                                  │
│  ┌──────────────────────────┐   │
│  │ [常见问题快捷按钮]        │   │
│  │ [我今天想吃香蕉，可以吗？] │   │
│  │ [如何降低蔬菜中的钾含量？] │   │
│  │ ...                      │   │
│  └──────────────────────────┘   │
│                                  │
│                    ┌──────────┐ │
│                    │ 用户消息 │ │
│                    │ 气泡     │ │
│                    └──────────┘ │
│                                  │
│  ┌──────────┐                   │
│  │ AI消息    │                   │
│  │ 气泡      │                   │
│  └──────────┘                   │
│                                  │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【输入栏】（固定在底部）          │
│  [图片] [语音] [输入框] [发送]   │
└─────────────────────────────────┘

3.3.2 交互说明

欢迎消息：

• 显示时机：首次进入页面时显示
• 样式：白色气泡，左对齐
• 内容：AI能力介绍 + 常见问题快捷按钮

常见问题快捷按钮：

• 布局：4个按钮，垂直排列
• 样式：浅灰色背景，圆角按钮
• 交互：
  • 点击按钮 → 自动发送该问题
  • 按钮文字显示在用户消息气泡中

消息气泡：

用户消息：

• 样式：
  • 橙色渐变背景（from-orange-500 to-orange-600）
  • 白色文字
  • 右对齐
  • 圆角气泡
• 显示内容：消息文字 + 发送时间（小字，灰色）

AI消息：

• 样式：
  • 白色背景 + 灰色边框
  • 黑色文字
  • 左对齐
  • 圆角气泡
• 显示内容：
  • 顶部：AI头像 + "AI 营养师助手"标签
  • 消息文字
  • 底部：发送时间（小字，灰色）

打字动画：

• 触发时机：用户发送消息后1-2秒
• 动画效果：3个灰色小圆点跳动（...）
• 持续时间：直到AI回复完成

输入栏：

• 布局：固定在屏幕底部
• 功能按钮：
  • 图片按钮：点击选择图片 → 发送图片消息
  • 语音按钮：长按录音 → 松开发送语音
• 输入框：
  • 支持多行输入
  • 获得焦点时，输入栏上移，键盘弹出
• 发送按钮：
  • 有内容时：显示发送按钮（橙色）
  • 无内容时：隐藏发送按钮
  • 点击发送 → 消息显示在消息区域

消息滚动：

• 新消息发送后，自动滚动到底部
• 支持手动滚动查看历史消息

图片消息：

• 显示方式：缩略图 + 点击查看大图
• 上传方式：从相册选择或拍照

语音消息：

• 录制方式：长按录音按钮
• 播放方式：点击语音气泡播放
• 显示：语音时长 + 波形图（可选）

---

3.4 饮食打卡（Check-in）

3.4.1 打卡页面结构

┌─────────────────────────────────┐
│  < 返回    每日打卡              │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【餐次选择】                     │
│  [早餐] [午餐] [晚餐] [加餐]     │
│  （Tab切换，选中高亮）            │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【推荐菜品】（可选）              │
│  ☑️ 牛奶                        │
│  ☑️ 鸡蛋拌面                    │
│  ☐ 凉拌黄瓜                     │
│  （从营养计划中获取）             │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【实际食用】                     │
│  [输入框：描述今天吃了什么]       │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【上传照片】（最多9张）          │
│  ┌──┐ ┌──┐ ┌──┐ [+添加]       │
│  │图│ │图│ │图│               │
│  └──┘ └──┘ └──┘               │
│  （支持删除、预览）               │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【语音备注】（可选）              │
│  [🎤 点击录音]                   │
│  （显示录音时长，支持播放）       │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【AI智能分析】                   │
│  ☑️ 开启AI识别食物               │
│  （自动识别照片中的食物）         │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【AI视频生成】                   │
│  ☑️ 生成AI视频分享               │
│  （生成打卡视频，+20积分）        │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  [提交打卡]（固定在底部）         │
└─────────────────────────────────┘

3.4.2 交互说明

餐次选择：

• 样式：Tab切换样式，选中状态高亮（橙色背景）
• 交互：
  • 点击切换餐次 → 清空当前输入内容
  • 切换时有滑动动画

推荐菜品：

• 显示条件：如果用户已采纳营养计划，显示推荐菜品
• 交互：
  • 复选框：点击勾选/取消
  • 勾选的菜品自动添加到"实际食用"输入框

实际食用输入框：

• 样式：多行文本输入框
• 功能：支持手动输入或从推荐菜品选择

照片上传：

• 上传方式：
  • 点击"+"按钮 → 选择相册或拍照
  • 最多上传9张
• 照片展示：
  • 网格布局（3列）
  • 每张照片显示删除按钮（右上角X）
• 交互：
  • 点击照片 → 预览大图（支持左右滑动）
  • 长按照片 → 删除确认（可选）

语音备注：

• 录制：
  • 点击录音按钮 → 开始录音
  • 显示录音时长（实时更新）
  • 再次点击 → 停止录音
• 播放：
  • 录制完成后显示播放按钮
  • 点击播放 → 播放录音
• 删除：支持删除已录制的语音

AI智能分析开关：

• 功能：开启后，上传照片时自动识别食物
• 显示：识别结果以标签形式显示在照片下方

AI视频生成开关：

• 功能：开启后，提交打卡时自动生成视频
• 奖励：生成视频可获得+20积分

提交按钮：

• 状态管理：
  • 未填写内容：按钮灰色，不可点击
  • 已填写内容：按钮橙色，可点击
• 提交流程：
  1. 点击提交 → 显示加载动画
  2. 上传数据 → 显示进度
  3. 提交成功 → 跳转至打卡成功页
  4. 显示获得的积分奖励

---

3.5 打卡社区（Community）

3.5.1 社区广场

页面结构：

┌─────────────────────────────────┐
│  🏠 社区广场        [发布+]      │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【筛选Tab】                      │
│  [推荐] [最新] [关注] [热门]     │
│  （选中状态：橙色下划线）         │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【瀑布流内容】（2列布局）         │
│  ┌──────┐  ┌──────┐            │
│  │ 封面图│  │ 封面图│            │
│  │      │  │      │            │
│  ├──────┤  ├──────┤            │
│  │ 标题 │  │ 标题 │            │
│  │ 用户 │  │ 用户 │            │
│  │ ❤️ 128│  │ ❤️ 256│            │
│  └──────┘  └──────┘            │
│  ┌──────┐  ┌──────┐            │
│  │ ...  │  │ ...  │            │
│  └──────┘  └──────┘            │
└─────────────────────────────────┘

交互说明：

筛选Tab：

• 切换交互：
  • 点击Tab → 切换内容列表
  • 选中状态：橙色文字 + 下划线
  • 切换时有滑动动画
• Tab说明：
  • 推荐：算法推荐内容
  • 最新：按时间排序
  • 关注：仅显示关注用户的内容
  • 热门：按点赞数排序

瀑布流布局：

• 布局方式：2列网格，左右交替
• 卡片内容：
  • 封面图：自动取打卡照片第一张
  • 标题：打卡标题（截断显示）
  • 用户信息：头像 + 昵称
  • 互动数据：点赞数
• 卡片交互：
  • 点击卡片 → 跳转至内容详情页
  • 点击反馈：轻微缩放动画

发布按钮：

• 位置：右上角
• 交互：点击 → 跳转至发布页面

下拉刷新：

• 触发方式：下拉页面
• 反馈：显示刷新动画
• 刷新后：重新加载最新内容

上拉加载：

• 触发方式：滚动到底部
• 反馈：显示加载动画
• 加载后：追加更多内容

---

3.5.2 内容详情页

页面结构：

┌─────────────────────────────────┐
│  < 返回              [更多菜单]  │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【用户信息】                     │
│  👤 头像 昵称（透析3年）         │
│  📅 2025-11-20 12:30            │
│  [+ 关注]                       │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【图片轮播】1/3                  │
│  [滑动查看更多照片]              │
│  （支持左右滑动，显示页码）       │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【内容文字】                     │
│  🥗 早餐打卡第7天！              │
│  #早餐 #低钾饮食 #透析期         │
│  （话题标签可点击）               │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【营养数据卡片】                 │
│  蛋白质：18.8g (达标94%)         │
│  能量：452kcal (达标90%)         │
│  🎯 整体营养达标率：92%          │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【互动栏】（固定在底部）          │
│  ❤️ 128  💬 23  ⭐ 45  ➤ 分享  │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【评论区】                       │
│  ┌──────────────────────────┐   │
│  │ 👤 用户A                 │   │
│  │ 太棒了！我也要学习这样吃  │   │
│  │ ❤️ 5  [回复]            │   │
│  └──────────────────────────┘   │
│  ┌──────────────────────────┐   │
│  │ 👤 用户B                 │   │
│  │ 坚持得很好，营养搭配合理👍 │   │
│  │ ❤️ 3  [回复]            │   │
│  └──────────────────────────┘   │
└─────────────────────────────────┘

交互说明：

用户信息区域：

• 关注按钮：
  • 未关注：显示"+ 关注"（橙色按钮）
  • 已关注：显示"已关注"（灰色按钮）
  • 点击切换关注状态

图片轮播：

• 滑动方式：左右滑动切换图片
• 显示：页码指示器（1/3）
• 交互：
  • 点击图片 → 全屏预览（支持缩放）
  • 支持多张图片（1-3张）

话题标签：

• 样式：蓝色文字，带#号
• 交互：点击标签 → 跳转至话题页

营养数据卡片：

• 数据来源：自动从打卡记录获取
• 展示方式：卡片式布局，数据可视化

互动栏：

• 点赞按钮：
  • 未点赞：空心❤️
  • 已点赞：实心❤️（红色）
  • 点击切换点赞状态，数字实时更新
• 评论按钮：
  • 点击 → 滚动至评论区，聚焦输入框
• 收藏按钮：
  • 未收藏：空心⭐
  • 已收藏：实心⭐（黄色）
  • 点击切换收藏状态
• 分享按钮：
  • 点击 → 显示分享菜单（微信好友、朋友圈等）

评论区：

• 评论列表：
  • 显示：用户头像 + 昵称 + 评论内容 + 点赞数
  • 支持回复评论（二级评论）
• 评论输入：
  • 固定在底部（可选）
  • 或点击评论按钮后弹出输入框
• 评论交互：
  • 点击评论 → 回复该评论
  • 长按评论 → 显示删除选项（仅自己的评论）

页面滚动：

• 支持长页面滚动
• 互动栏可固定在底部（可选）

---

3.6 食物百科（Food Search）

3.6.1 页面结构

┌─────────────────────────────────┐
│  < 返回    食物百科              │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【搜索栏】                       │
│  🔍 [搜索食物名称...]            │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【分类横向滚动】                 │
│  🌾 谷薯类  🥬 蔬菜类  🍎 水果类 │
│  🍖 肉蛋类  🐟 水产类  ...      │
│  （选中状态：橙色背景）           │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【食物列表】                     │
│  ┌──────────────────────────┐   │
│  │ [图片] 香蕉              │   │
│  │        水果类            │   │
│  │        🟡 钾:中  🔴 磷:高│   │
│  │        ⚠️ 慎用          │   │
│  └──────────────────────────┘   │
│  ┌──────────────────────────┐   │
│  │ [图片] 苹果              │   │
│  │        水果类            │   │
│  │        🟢 钾:低  🟢 磷:低│   │
│  └──────────────────────────┘   │
│  ...                            │
└─────────────────────────────────┘

3.6.2 交互说明

搜索栏：

• 交互：
  • 点击搜索栏 → 聚焦，弹出键盘
  • 输入关键词 → 实时搜索（防抖处理）
  • 显示搜索结果列表
• 清空：输入框右侧显示"X"按钮，点击清空

分类滚动：

• 布局：横向滚动（scroll-view horizontal）
• 选中状态：橙色背景 + 白色文字
• 交互：
  • 点击分类 → 切换食物列表
  • 切换时有滑动动画

食物列表：

• 列表项内容：
  • 左侧：食物图片（80x80，圆角）
  • 右侧：食物名称 + 分类标签 + 营养成分标签 + 警告标志
• 营养成分标签：
  • 🟢 绿色：低（适宜）
  • 🟡 黄色：中（适量）
  • 🔴 红色：高（慎用）
• 警告标志：
  • ⚠️ 显示在慎用食物上
• 列表项交互：
  • 点击列表项 → 跳转至食物详情页

---

3.6.2 食物详情页

页面结构：

┌─────────────────────────────────┐
│  < 返回    食物详情              │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【食物大图】                     │
│  [食物图片，全宽显示]             │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  香蕉                            │
│  分类：水果类                    │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【营养成分表】                   │
│  ┌──────────────────────────┐   │
│  │ 每100g含量               │   │
│  ├──────────────────────────┤   │
│  │ 能量：93 kcal            │   │
│  │ 蛋白质：1.2 g            │   │
│  │ 钾：330 mg  🟡 中        │   │
│  │ 磷：20 mg   🟢 低        │   │
│  │ 钠：1 mg    🟢 低        │   │
│  └──────────────────────────┘   │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【适宜性判断】                   │
│  ⚠️ 慎用                         │
│  香蕉含钾量较高，透析患者需谨慎   │
│  食用。                          │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【食用建议】                     │
│  • 如果血钾控制良好，可少量食用  │
│  • 建议透析后食用更安全          │
│  • 建议咨询主治医生确认          │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  [咨询AI营养师]                  │
└─────────────────────────────────┘

交互说明：

营养成分表：

• 展示方式：表格形式，清晰易读
• 颜色标识：与列表页一致（绿/黄/红）

适宜性判断：

• 显示：警告图标 + 判断结果 + 说明文字
• 样式：根据适宜性显示不同颜色（绿色/黄色/红色背景）

食用建议：

• 内容：针对该食物的具体建议
• 格式：列表形式，每项一条建议

咨询按钮：

• 交互：点击 → 跳转至AI营养师页面，自动带入食物名称

---

3.7 营养知识（Knowledge）

3.7.1 页面结构

┌─────────────────────────────────┐
│  < 返回    营养知识              │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【Tab切换】                      │
│  [营养素百科] [饮食指南] [科普文章]│
│  （选中状态：橙色下划线）         │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【内容列表】（根据Tab切换）       │
│                                  │
│  【营养素百科】                   │
│  ┌──────────────────────────┐   │
│  │ 💊 蛋白质                │   │
│  │ 优质蛋白质的来源和作用    │   │
│  │ 📖 阅读 5分钟            │   │
│  └──────────────────────────┘   │
│  ...                            │
│                                  │
│  【饮食指南】                   │
│  ┌──────────────────────────┐   │
│  │ 📋 CKD 1-2期饮食指南      │   │
│  │ 早期肾病的饮食原则        │   │
│  │ 📖 阅读 8分钟            │   │
│  └──────────────────────────┘   │
│  ...                            │
│                                  │
│  【科普文章】                   │
│  ┌──────────────────────────┐   │
│  │ [封面图] 文章标题        │   │
│  │ 文章摘要...              │   │
│  │ 📖 阅读 10分钟           │   │
│  └──────────────────────────┘   │
│  ...                            │
└─────────────────────────────────┘

3.7.2 交互说明

Tab切换：

• 交互：点击Tab → 切换内容列表
• 选中状态：橙色文字 + 下划线
• 切换动画：滑动过渡

内容列表：

• 营养素百科：
  • 列表项：图标 + 标题 + 描述 + 阅读时间
  • 点击 → 跳转至营养素详情页
• 饮食指南：
  • 列表项：图标 + 标题 + 描述 + 阅读时间
  • 点击 → 跳转至指南详情页
• 科普文章：
  • 列表项：封面图 + 标题 + 摘要 + 阅读时间
  • 点击 → 跳转至文章详情页

详情页交互：

• 页面结构：标题 + 正文内容 + 相关推荐
• 阅读体验：
  • 支持长页面滚动
  • 字体大小适中，易于阅读
  • 支持收藏、分享功能

---

3.8 个人中心（Mine）

3.8.1 页面结构

┌─────────────────────────────────┐
│  【用户信息卡片】                 │
│  ┌──────────────────────────┐   │
│  │ 👤 头像                  │   │
│  │    昵称                  │   │
│  │    积分：525分           │   │
│  │    [编辑资料]            │   │
│  └──────────────────────────┘   │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【我的健康】                     │
│  ┌──────┐ ┌──────┐ ┌──────┐    │
│  │健康档案│ │营养计划│ │数据报告│    │
│  └──────┘ └──────┘ └──────┘    │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【我的打卡】                     │
│  ┌──────────────────────────┐   │
│  │ 📅 打卡日历              │   │
│  │    连续打卡：7天          │   │
│  │    [查看详情]            │   │
│  └──────────────────────────┘   │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【我的食谱】                     │
│  ┌──────────────────────────┐   │
│  │ ❤️ 收藏的食谱            │   │
│  │ 📜 历史食谱              │   │
│  └──────────────────────────┘   │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【工具与服务】                   │
│  ┌──────────────────────────┐   │
│  │ 🔍 食物搜索              │   │
│  │ 📚 知识库                │   │
│  │ ⏰ 提醒设置              │   │
│  └──────────────────────────┘   │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│  【设置】                         │
│  ┌──────────────────────────┐   │
│  │ ℹ️ 关于我们              │   │
│  │ 💬 意见反馈              │   │
│  │ 📞 客服中心              │   │
│  └──────────────────────────┘   │
└─────────────────────────────────┘

3.8.2 交互说明

用户信息卡片：

• 头像：点击 → 更换头像（选择图片或拍照）
• 积分显示：点击 → 跳转至积分中心
• 编辑资料：点击 → 跳转至资料编辑页

我的健康：

• 健康档案：点击 → 查看/编辑健康档案
• 营养计划：点击 → 查看当前营养计划
• 数据报告：点击 → 查看健康数据报告

我的打卡：

• 打卡日历：显示打卡记录（日历形式）
• 连续打卡：显示连续打卡天数
• 查看详情：点击 → 跳转至打卡历史页

我的食谱：

• 收藏的食谱：点击 → 查看收藏列表
• 历史食谱：点击 → 查看历史记录

工具与服务：

• 食物搜索：点击 → 跳转至食物百科
• 知识库：点击 → 跳转至营养知识
• 提醒设置：点击 → 设置打卡提醒

设置：

• 关于我们：点击 → 显示产品信息
• 意见反馈：点击 → 跳转至反馈页面
• 客服中心：点击 → 打开客服对话

---

四、通用交互规范

4.1 页面跳转

跳转方式：

• navigateTo：普通页面跳转（保留当前页面）
• redirectTo：重定向跳转（关闭当前页面）
• switchTab：切换底部标签页

跳转动画：

• 默认使用微信小程序原生动画
• 支持自定义动画（可选）

4.2 加载状态

加载提示：

• 页面加载：显示加载动画（loading）
• 数据加载：显示"加载中..."文字
• 下拉刷新：显示刷新动画
• 上拉加载：显示"加载更多..."文字

加载反馈：

• 所有异步操作都需要显示加载状态
• 加载失败时显示错误提示

4.3 错误处理

错误提示：

• 网络错误：显示"网络连接失败，请重试"
• 数据错误：显示"数据加载失败"
• 操作错误：显示具体错误原因

错误交互：

• 显示错误提示后，提供"重试"按钮
• 错误提示自动消失（3秒后）

4.4 表单验证

实时验证：

• 输入时实时验证格式
• 错误时显示红色提示文字

提交验证：

• 提交前验证所有必填项
• 验证失败时，高亮错误项并显示提示

4.5 反馈机制

操作反馈：

• 点击反馈：按钮点击时有缩放动画（scale: 0.95）
• 切换反馈：Tab切换时有滑动动画
• 成功反馈：操作成功时显示Toast提示

视觉反馈：

• 选中状态：使用颜色高亮（橙色）
• 禁用状态：使用灰色，降低透明度
• 加载状态：显示加载动画

---

五、视觉设计规范

5.1 颜色系统

主色调：

• 主色：#4CAF50（绿色）
• 辅助色：#FF9800（橙色）
• 背景色：#F5F5F5（浅灰）

功能色：

• 成功：#4CAF50（绿色）
• 警告：#FF9800（橙色）
• 错误：#F44336（红色）
• 信息：#2196F3（蓝色）

文字颜色：

• 主文字：#333333（深灰）
• 次要文字：#666666（中灰）
• 辅助文字：#999999（浅灰）

5.2 字体规范

字号：

• 标题：36rpx（18px）
• 副标题：32rpx（16px）
• 正文：28rpx（14px）
• 辅助文字：24rpx（12px）

字重：

• 标题：Bold（700）
• 正文：Regular（400）

5.3 间距规范

页面边距：20rpx（10px） 卡片内边距：24rpx（12px） 元素间距：16-32rpx（8-16px）

5.4 圆角规范

按钮圆角：12rpx（6px） 卡片圆角：16rpx（8px） 输入框圆角：12rpx（6px）

---

六、特殊功能交互

6.1 一键复制打卡

功能说明：从历史打卡记录中快速复制，生成新的打卡记录。

交互流程：

1. 在打卡历史页点击"一键复制"按钮
2. 跳转至复制确认页（预览内容）
3. 确认后跳转至打卡页（内容已填充）
4. 用户可修改内容后提交
5. 提交成功获得+5积分

数据填充：

• 自动填充：照片、备注、餐次
• 用户可修改所有内容

6.2 AI视频生成

功能说明：根据打卡内容自动生成分享视频。

交互流程：

1. 在打卡页开启"AI视频生成"开关
2. 提交打卡后自动生成视频
3. 生成完成后显示视频预览
4. 用户可选择分享到社区或保存到相册
5. 获得+20积分奖励

视频内容：

• 包含：打卡照片、营养数据、文字描述
• 自动添加背景音乐和动画效果

6.3 积分系统

积分显示：

• 在个人中心显示总积分
• 在操作后显示获得的积分（Toast提示）

积分获得：

• 完成打卡：+5分
• 上传照片：+10分
• AI智能分析：+10分
• 生成AI视频：+20分
• 一键复制打卡：+5分
• 连续打卡：+50/100/500分（3/7/30天）

积分兑换：

• 在积分中心查看可兑换项目
• 点击兑换 → 确认兑换 → 扣除积分

---

七、响应式设计

7.1 屏幕适配

设计尺寸：

• 设计稿：375px（iPhone 6/7/8）
• 使用rpx单位，自动适配不同屏幕

适配方案：

• 使用微信小程序rpx单位
• 关键元素使用flex布局
• 图片使用mode="aspectFill"保持比例

7.2 横竖屏

默认：竖屏显示 横屏：保持竖屏布局（不强制横屏）

---

八、性能优化

8.1 图片优化

图片格式：优先使用WebP格式 图片大小：单张图片不超过1MB 图片加载：使用懒加载（lazy-load）

8.2 数据加载

分页加载：列表数据使用分页加载 数据缓存：使用本地存储缓存数据 请求优化：合并请求，减少网络请求次数

8.3 动画优化

动画性能：使用CSS动画，避免JS动画 动画时长：控制在300ms以内 减少重绘：使用transform代替position

---

九、无障碍设计

9.1 文字可读性

对比度：文字与背景对比度≥4.5:1 字号：最小字号≥24rpx（12px）

9.2 操作便捷性

点击区域：最小点击区域44x44px 操作反馈：所有操作都有明确的视觉反馈

---

十、总结

本文档详细说明了"慢生活智能营养专家"小程序的所有核心功能的用户界面交互设计。重点包括：

1. 整体架构：5个底部标签页的导航结构
2. 核心页面：首页、计算器、AI营养师、打卡、社区等8个主要页面的详细交互说明
3. 通用规范：页面跳转、加载状态、错误处理、表单验证等通用交互规范
4. 视觉设计：颜色、字体、间距、圆角等视觉设计规范
5. 特殊功能：一键复制打卡、AI视频生成、积分系统等特殊功能的交互流程

所有交互设计都遵循微信小程序的设计规范，确保用户体验的一致性和流畅性。

---

文档版本：v1.0
最后更新：2025-01-20
设计来源：Figma设计稿 + PRD文档