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

---

## 1. 首页设计目标

首页作为用户进入APP的第一个触点，承载着三大核心目标：
1.  **高效转化**：让用户以最快路径使用核心的“智能食鉴”功能。
2.  **价值感知**：让用户直观感受到APP为他个人带来的健康价值。
3.  **兴趣引导**：激发用户探索“发现”、“健康厨房”等其他模块的兴趣。

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

```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.  **我的**：进入个人中心，管理健康档案、查看红黑榜、进行设置等。