1311 lines
52 KiB
Markdown
1311 lines
52 KiB
Markdown
|
# 慢生活智能营养专家小程序 - 产品功能说明
|
|||
|
|
## 用户界面交互设计文档
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 📋 文档信息
|
|||
|
|
|
|||
|
|
| 项目 | 内容 |
|
|||
|
|
|------|------|
|
|||
|
|
| 产品名称 | 慢生活智能营养专家 |
|
|||
|
|
| 版本号 | 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文档
|
|||
|
|
|