TalkofFood_Design/1-原型设计及功能说明/2.1.1核心体验页-原型初设计.md

# “食话食说”APP 核心体验模块 - 原型初稿及功能说明

**版本:** 1.0
**日期:** 2025-07-22
**设计者:** Roo (产品经理)

---

## 0. 前言

本文档旨在通过低保真原型图（使用Mermaid绘制）的形式，清晰地展示“食话食说”APP核心体验模块的关键页面设计与功能逻辑。设计严格遵循PRD V1.0和页面结构清单V1.0的要求。

---

## 1. 首页 (Home)

**功能逻辑:** 作为用户进入APP后的主界面，首页承担着核心功能引导、个性化内容展示和信息流聚合的职责。

```mermaid
graph TD
    subgraph "手机屏幕"
        direction TB
        subgraph "顶部状态栏"
            A["运营商 | 时间 | 电池"]
        end

        subgraph "页面主体"
            direction TB
            B("<strong>食话食说</strong>")
            C["搜索框: '搜索食品、成分、文章...'"]
            
            subgraph "核心功能区"
                direction LR
                D["<center>📷<br><strong>扫码/拍照</strong></center>"]
                E["<center>📖<br>我的红黑榜</center>"]
                F["<center>🍲<br>健康厨房</center>"]
            end

            subgraph "个性化动态"
                G["Hi, [用户名]！<br>今天已为你守护 1 次饮食健康<br>宝宝的过敏原：牛奶、鸡蛋"]
            end

            subgraph "内容信息流 ('健康知食')"
                H["<strong>专题：如何挑选“零添加”酱油？</strong><br><img src='...' width='80' /><br>专家团队横向评测15款热门酱油..."]
                I["<strong>科普：你真的了解“反式脂肪”吗？</strong><br><img src='...' width='80' /><br>反式脂肪的危害远超你的想象..."]
                J["...更多内容..."]
            end
        end

        subgraph "底部导航栏 (Tab Bar)"
            direction LR
            K["<strong>首页</strong>"]
            L["发现"]
            M["社区"]
            N["我的"]
        end
    end

    C --> SearchPage["搜索页"]
    D --> ScanPage["扫码/拍照页"]
```

---

## 2. 扫码/拍照页

**功能逻辑:** 这是“智能食鉴”功能的入口，提供一个无干扰的、直观的界面，引导用户完成扫码或拍照的操作。

```mermaid
graph TD
    subgraph "手机屏幕"
        direction TB
        subgraph "顶部导航"
            A["< 返回"]
            B[" "]
            C["相册"]
        end

        subgraph "视图区域"
            D["(摄像头实时画面)"]
            E["[   扫描框   ]"]
            F["请将食品条形码或配料表放入框内"]
        end

        subgraph "底部操作区"
            G["打开手电筒"]
            H["<strong>拍照/扫描按钮</strong>"]
            I["手动输入"]
        end
    end
    H -- "识别成功" --> ResultPage["分析结果页"]
    A -- "点击" --> HomePage["首页"]
```

---

## 3. 分析结果页

**功能逻辑:** 这是产品的核心价值展示页。页面设计需要清晰、直观、有冲击力，让用户在3秒内获取关键信息并建立信任感。

```mermaid
graph TD
    subgraph "手机屏幕"
        direction TB
        subgraph "顶部导航"
            A["< 返回"]
            B["<strong>分析结果</strong>"]
            C["分享"]
        end

        subgraph "页面主体 (可滚动)"
            direction TB
            
            subgraph "1. 产品概要"
                D["<img src='产品图片' width='100' /><br><strong>[产品名称]</strong><br>[品牌]"]
            end

            subgraph "2. 核心评级"
                E["<strong>安全评级: <font color=red>D</font></strong>"]
                F["<strong>营养评级 (同类中): 中</strong>"]
                G["<center><strong>一句话总结:</strong><br><font color=red><strong>警告：</strong>含有XX防腐剂和3种人工甜味剂，不建议给婴幼儿食用。</font></center>"]
            end

            subgraph "3. 个性化提醒"
                H["! <strong>高风险提醒</strong><br>触发您宝宝的过敏原: <strong>牛奶</strong>"]
            end

            subgraph "4. 适用阶段提示"
                I_tip["<strong>适用阶段:</strong><br>不建议3岁以下婴幼儿食用"]
            end

            subgraph "5. 品类“照妖镜”"
                I["营销名称: 儿童成长牛奶<br><strong>法定品类: 含乳饮料</strong>"]
            end

            subgraph "6. 健康替代品推荐"
                J["<h4>为你推荐更好的选择</h4>"]
                subgraph "替代品A"
                    K["<img src='...' width='60' /><br><strong>[替代品A名称]</strong><br>安全评级: A"]
                end
                subgraph "替代品B"
                    L["<img src='...' width='60' /><br><strong>[替代品B名称]</strong><br>安全评级: A"]
                end
            end

            subgraph "7. 完整成分解读"
                M["<h4>完整成分列表</h4>"]
                N["- 水<br>- 生牛乳 (过敏原)<br>- 白砂糖<br>- <font color=orange>阿斯巴甜 (人工甜味剂)</font><br>- <font color=red>山梨酸钾 (防腐剂)</font><br>..."]
                O["[点击查看SHI评分模型说明]"]
            end
        end
    end
    O --> SHIInfoPage["SHI评分模型说明页"]
    A -- "点击" --> PreviousPage["返回上一页"]
```

---

## 4. 搜索页 & 搜索结果页

**功能逻辑:** 提供全局搜索功能，允许用户主动查找信息。搜索页力求简洁，结果页则需要清晰地分类展示不同类型的结果。

### 4.1 搜索页

```mermaid
graph TD
    subgraph "手机屏幕 - 搜索页"
        direction TB
        subgraph "顶部"
            A["< 返回"]
            B["<input type='text' placeholder='搜索食品、成分、文章...' />"]
            C["搜索"]
        end
        subgraph "中部"
            D["<h4>历史记录</h4>"]
            E["[牛奶] [酱油] [益生菌]"]
            F["<h4>热门搜索</h4>"]
            G["[酸奶评测] [无麸质] [宝宝辅食]"]
        end
    end
    C -- "点击" --> SearchResultPage["搜索结果页"]
```

### 4.2 搜索结果页

```mermaid
graph TD
    subgraph "手机屏幕 - 搜索结果页"
        direction TB
        subgraph "顶部"
            A["< 返回"]
            B["<input type='text' value='牛奶' />"]
            C["搜索"]
        end
        subgraph "结果分类Tab"
            direction LR
            D["<strong>全部</strong>"]
            E["产品"]
            F["文章"]
            G["成分"]
        end
        subgraph "结果列表"
            H["<h4>产品</h4>"]
            I["<strong>[某品牌纯牛奶]</strong><br>安全评级: A | 营养评级: 高"]
            J["<strong>[某品牌儿童牛奶]</strong><br>安全评级: C | 营养评级: 中"]
            K["<h4>文章</h4>"]
            L["<strong>牛奶过敏的宝宝应该怎么办？</strong><br>..."]
            M["...更多结果..."]
        end
    end
    I -- "点击" --> ResultPage["分析结果页"]
    L -- "点击" --> ArticlePage["文章详情页"]
```