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