TalkofFood_Design/0-产品需求文档/设计文档-Home页面.md

“食话食说”APP 设计文档 - V1.0：首页 (Home)

---

1. 首页设计目标

首页作为用户进入APP的第一个触点，承载着三大核心目标：

1. 高效转化：让用户以最快路径使用核心的“智能食鉴”功能。
2. 价值感知：让用户直观感受到APP为他个人带来的健康价值。
3. 兴趣引导：激发用户探索“发现”、“健康厨房”等其他模块的兴趣。

2. 首页结构布局 (Mermaid图)

graph TD
    subgraph "首页 (Home Screen)"
        direction TB
        
        A["顶部状态栏"]
        B["核心功能区 (Hero Section)"]
        C["个性化动态"]
        D["内容信息流 (Feed)"]
        
        A --> B --> C --> D
    end

    subgraph "A: 顶部状态栏"
        A1["问候语 & 用户名"]
        A2["全局搜索入口"]
    end
    
    subgraph "B: 核心功能区"
        B1["醒目的主Slogan"]
        B2["[ 扫码/拍照，解读食品真相 ]<br>巨大、唯一的行为召唤(CTA)按钮"]
    end

    subgraph "C: 个性化动态"
        C1["健康成就卡片<br>“本周已分析5种食品，避开3个高风险成分”"]
    end

    subgraph "D: 内容信息流 (Card-based)"
        D1["卡片1: 发现<br>“警惕！这5种'儿童酱油'其实是钠含量炸弹”"]
        D2["卡片2: 为你推荐的菜谱<br>“适合减脂期的你：牛油果鸡胸肉沙拉”"]
        D3["卡片3: 社区热议<br>“用户'宝妈小红'分享了她发现的宝藏0添加酸奶”"]
    end

    subgraph "底部导航栏 (Bottom Navigation)"
        Nav1["首页"]
        Nav2["发现"]
        Nav3["[扫一扫]"]
        Nav4["厨房"]
        Nav5["我的"]
    end

    D --> Nav1

3. 页面模块详解

3.1. 顶部状态栏

• 内容：
  • 左侧显示亲切的问候语，如“晚上好，王女士”。
  • 右侧放置一个“搜索”图标，允许用户不通过扫码，直接通过关键词搜索食品或成分。
• 设计目的：营造个性化氛围，并提供一个备用的高效查询入口。

3.2. 核心功能区 (Hero Section)

这是整个页面的视觉中心，占据屏幕最显要的位置。

• 内容：
  • 上方是一句简短有力的Slogan，如“食品真相，实话实说”。
  • 下方是一个巨大、圆形的按钮，设计上可以模拟相机的镜头光圈，按钮内有清晰的图标（相机+二维码）和文字：“扫码/拍照，解读食品真相”。
• 设计目的：将用户的注意力完全聚焦在核心功能上，实现“零思考”操作。这是整个APP转化率最高的地方。

3.3. 个性化动态

紧跟在核心功能区下方，用数据向用户证明APP的价值。

• 内容：以小卡片形式展示，文案根据用户行为动态生成。
  • 示例1 (新用户)：“从扫描第一件食品开始，守护家人健康。”
  • 示例2 (老用户)：“本周您已分析 8 种食品，成功为家人避开 4 个高风险成分！”
• 设计目的：通过量化的数据给予用户正向反馈，强化其使用行为，提升用户粘性。

3.4. 内容信息流 (Feed)

这是首页的主要内容区域，采用上下滑动浏览的卡片式布局，保持界面的清爽和内容的丰富性。

• 内容：信息流由不同类型的内容卡片混合组成，算法会根据用户的健康标签和浏览偏好进行个性化推荐。
  • “发现”卡：展示一篇来自“发现”模块的精选文章标题和摘要，如“《深度评测：10款热门酸奶，哪款才是真正的无糖优选？》”。
  • “健康厨房”卡：展示一道来自“健康厨房”模块的推荐菜谱，包含菜品图片、名称和简短描述，如“为高血压的您推荐：清蒸鲈鱼”。
  • “社区精选”卡：展示一条来自“互动社区”模块的热门用户分享，如“用户 @爱生活的喵 分享了她的自制健康油醋汁配方，快来看看吧！”
• 设计目的：
  1. 让首页“活”起来，每次打开都有新内容。
  2. 作为其他模块的“橱窗”，自然地向用户展示APP的丰富功能，引导用户深入探索。
  3. 通过个性化推荐，持续为用户提供有价值的信息，将其留在APP内。

3.5. 底部导航栏

采用行业通用的“标签式导航栏”设计，固定在页面底部，包含5个入口：

1. 首页：当前页面。
2. 发现：进入“发现”内容中心页面。
3. 扫一扫 (中心按钮)：设计为突出的、可能是异形的中心按钮，点击后直接拉起相机/扫码界面，是核心功能的第二个快捷入口。
4. 厨房：进入“健康厨房”菜谱页面。
5. 我的：进入个人中心，管理健康档案、查看红黑榜、进行设置等。