菜谱详情页设计文档

📖 概述

基于现有的菜谱列表页和创建菜谱页的设计风格，重新设计了菜谱详情页的用户界面。新设计保持了家庭版的温馨风格，同时提供了丰富的功能和良好的用户体验。

🎨 设计理念

核心原则

视觉层次清晰：通过头图、卡片布局等方式突出重点信息
操作便捷：提供多种交互模式，适应不同使用场景
信息完整：全面展示菜谱的各个方面信息
家庭友好：符合家庭使用习惯的设计语言

设计目标

让用户快速了解菜谱的核心信息
提供清晰的制作指导
支持制作过程中的辅助功能
增强家庭成员间的分享体验

🏗️ 页面结构

1. 头图区域 (Hero Section)

功能：展示菜谱的主要视觉信息

图片轮播：支持多张菜谱图片展示
渐变遮罩：确保文字内容的可读性
导航栏：返回、分享、收藏功能
核心信息：菜谱名称、描述、关键制作信息

设计特点：

高度：560rpx，占据屏幕上半部分
使用渐变遮罩提升文字对比度
导航按钮使用毛玻璃效果
底部信息卡片式排列

2. 内容卡片区域 (Content Card)

功能：详细展示菜谱的各项信息

圆角设计：顶部圆角40rpx，营造卡片感
分段式布局：每个功能区域独立成段
滚动体验：支持平滑滚动浏览

📋 功能模块详解

1. 标签区域

展示内容：

场景分类标签（蓝色渐变）
食材分类标签（绿色渐变）
可选标签（黄色/粉色背景）

交互特性：

标签点击可查看相关菜谱
颜色区分不同类型的标签

2. 制作信息模块

展示方式：3列网格布局

制作时间：分钟数 + 单位
难度等级：简单/中等/困难
适合人数：人份数 + 单位

交互效果：

点击卡片有缩放反馈
灰色背景突出数值信息

3. 食材清单模块

核心功能：

普通模式：仅展示食材和用量
勾选模式：支持制作时勾选已准备的食材

交互设计：

右上角模式切换按钮
勾选状态有视觉反馈（边框变色）
支持触觉反馈（震动）

视觉设计：

食材项使用卡片式布局
左侧食材名称，右侧用量
勾选状态下显示勾选图标

4. 制作步骤模块

核心功能：

普通模式：展示制作步骤和图片
勾选模式：支持制作时勾选已完成的步骤

布局设计：

左侧步骤编号（圆形，渐变背景）
右侧步骤内容和图片
完成状态下编号变绿色，显示对勾

交互特性：

步骤图片可点击预览
完成所有步骤时显示庆祝弹窗
完成状态下文字有删除线效果

5. 营养信息模块（可选）

展示方式：4列网格布局

热量、蛋白质、脂肪、碳水化合物
数值 + 单位的组合显示
灰色背景的信息卡片

6. 评价区域

功能组件：

星级显示：5星评分系统
评价统计：平均分 + 评价人数
评价按钮：快速评价入口

交互流程：

点击评价按钮弹出评价弹窗
支持快速五星好评
提交后显示感谢提示

7. 创建者信息

展示内容：

创建者头像（支持图片或文字头像）
创建者名称和创建时间
查看更多菜谱的入口

设计特点：

头像使用渐变背景
右侧箭头表示可点击
整体布局简洁明了

8. 相关推荐（可选）

展示方式：横向滚动列表

推荐菜谱的缩略图
菜谱名称和基本信息
支持点击跳转到详情页

🎯 底部操作区域

按钮布局

采用1:1:2的网格布局：

收藏按钮：切换收藏状态
分享按钮：分享给家人朋友
开始制作：进入制作指导模式

视觉设计

次要按钮：灰色背景，深色文字
主要按钮：蓝色渐变背景，白色文字
安全区域：适配不同设备的底部安全区

交互效果

按钮点击有缩放反馈
主按钮有阴影效果
收藏状态切换有动画

🎨 视觉规范

色彩系统

主色调：蓝色系 (#3b82f6, #2563eb)
辅助色：绿色 (#10b981)、橙色 (#f59e0b)、紫色 (#8b5cf6)
中性色：灰色系 (#f8fafc, #e2e8f0, #64748b)
功能色：红色 (#ef4444, 收藏)、金色 (#fbbf24, Stars)

字体规范

大标题：48rpx，加粗
小标题：32rpx，中等粗细
正文：28rpx，常规
小字：24rpx，常规
标签：24rpx，中等粗细

间距系统

页面边距：48rpx
组件间距：32rpx
元素间距：16rpx、24rpx
内边距：24rpx、32rpx

圆角规范

卡片圆角：24rpx
按钮圆角：24rpx（小按钮）、40rpx（大按钮）
图片圆角：16rpx、24rpx
标签圆角：32rpx（胶囊型）

🔧 技术实现

页面结构

pages/recipe-detail/
├── recipe-detail.wxml    # 页面结构
├── recipe-detail.wxss    # 样式文件  
├── recipe-detail.js      # 逻辑文件
└── recipe-detail.json    # 配置文件

核心功能

数据加载：云函数获取菜谱详情
图片预览：支持多图预览和轮播
收藏功能：本地存储 + 云端同步
分享功能：支持分享到微信好友和朋友圈
勾选模式：食材和步骤的制作辅助功能

性能优化

图片懒加载和压缩
滚动性能优化
动画使用CSS3硬件加速
数据缓存策略

📱 响应式设计

适配策略

使用rpx单位确保不同屏幕适配
网格布局自动调整列数
字体大小根据屏幕尺寸调整

小屏适配

头图高度调整为480rpx
标题字体缩小为40rpx
网格布局调整列数
营养信息改为2列布局

🎭 动画效果

页面进入动画

头图区域：无动画（静态展示）
内容卡片：从底部滑入 (slide-up)
步骤项目：依次淡入 (fade-in)

交互动画

按钮点击：缩放反馈 (scale)
收藏切换：心形图标颜色变化
勾选状态：勾选图标出现动画
图片预览：缩放过渡效果

性能考虑

使用CSS3 transform避免重排
动画时长控制在300ms内
减少同时进行的动画数量

🔍 用户体验优化

加载体验

骨架屏或加载动画
图片渐进式加载
错误状态处理

操作反馈

触觉反馈（震动）
视觉反馈（颜色、动画）
声音反馈（可选）

无障碍设计

合理的颜色对比度
足够大的点击区域
语义化的HTML结构

📊 数据结构

菜谱详情数据

{
  _id: "recipe_id",
  name: "菜谱名称",
  description: "菜谱描述", 
  images: ["图片URL数组"],
  preparationTime: 30,
  difficulty: "easy|medium|hard",
  servingSize: "2-3",
  rating: 4.8,
  reviewCount: 126,
  sceneCategory: "场景分类ID",
  ingredientCategory: "食材分类ID", 
  optionalTags: ["可选标签ID数组"],
  ingredients: [
    {
      id: "ingredient_id",
      name: "食材名称",
      amount: "用量",
      checked: false
    }
  ],
  steps: [
    {
      id: "step_id", 
      content: "步骤内容",
      image: "步骤图片URL",
      completed: false
    }
  ],
  nutrition: [
    {
      name: "营养成分名称",
      value: "数值", 
      unit: "单位"
    }
  ],
  creator: {
    id: "创建者ID",
    name: "创建者名称",
    avatar: "头像URL"
  },
  createTime: "创建时间",
  updateTime: "更新时间"
}

🚀 部署和测试

部署清单

测试场景

基础功能测试
- 页面加载和数据显示
- 图片预览功能
- 收藏和分享功能
交互功能测试
- 勾选模式切换
- 食材和步骤勾选
- 评价功能
边界情况测试
- 网络异常处理
- 数据为空的显示
- 长文本的显示效果
性能测试
- 页面加载速度
- 滚动流畅度
- 内存使用情况

🔮 未来扩展

功能扩展

制作指导模式：语音播报、计时器
营养分析：详细的营养成分分析
个性化推荐：基于用户偏好推荐
社交功能：评论、点赞、分享心得

技术优化

离线缓存：支持离线查看收藏的菜谱
智能搜索：基于AI的菜谱推荐
语音交互：语音控制制作过程
AR功能：增强现实的制作指导

📝 总结

新设计的菜谱详情页在保持家庭版温馨风格的基础上，提供了丰富的功能和良好的用户体验：

主要亮点

视觉冲击力强：大图头图设计吸引用户注意
信息层次清晰：通过卡片布局合理组织信息
交互功能丰富：勾选模式等实用功能
适配性良好：支持不同设备和屏幕尺寸

设计价值

提升了用户查看菜谱的体验
增强了制作过程中的辅助功能
保持了与其他页面的设计一致性
为后续功能扩展预留了空间

这个设计既满足了当前的功能需求，又为未来的产品发展奠定了良好的基础。

FilesExpand file tree

菜谱详情页设计文档.md

Latest commit

History