# 1.1.1 通用基础页面 - 原型初设计 (线框图)

本文档使用 Mermaid 语法绘制 APP 的核心页面线框图，旨在快速对齐页面布局、核心元素和功能逻辑，为后续高保真设计和功能说明提供基础。

---

## 1. 首页 (Home)

**核心设计思路**：突出核心扫码功能，并结合个性化提醒与内容推荐，引导用户探索。

```mermaid
graph TB
    subgraph "手机屏幕"
        direction TB
        
        subgraph "顶部状态栏"
            A["时间 / 信号 / 电池"]
        end

        subgraph "主内容区"
            B["搜索框<br>“搜索食品、成分、文章”"]
            C{"<br><br>核心扫码/拍照入口<br>（大尺寸、醒目）"}
            D["个性化动态卡片<br>“您关注的宝宝辅食有新的评测”"]
            E["“健康知食”信息流<br>- 文章卡片1<br>- 文章卡片2<br>- ..."]
        end

        subgraph "底部导航栏"
            Nav1["首页"] -- "1. 当前页" --> C
            Nav2["发现"]
            Nav3["健康厨房"]
            Nav4["我的"]
        end
        
        B -- "2. 点击跳转" --> SearchPage["搜索页"]
        C -- "3. 点击调起" --> ScanPage["扫码/拍照页"]
    end
```

---

## 2. 智能食鉴 - 扫码/拍照页

**核心设计思路**：界面极简，聚焦于快速、准确地完成扫描或拍照动作。

```mermaid
graph TB
    subgraph "手机屏幕"
        direction TB
        
        subgraph "顶部状态栏"
            A["时间 / 信号 / 电池"]
        end

        subgraph "相机视图"
            B["<br><br><br>相机实时画面<br><br>中心有对齐框引导用户<br><br><br><br>"]
        end
        
        subgraph "底部控制栏"
            C["手电筒开关"]
            D["“相册”<br>从相册选择图片"]
            E["“输入”<br>手动输入条形码"]
        end
        
        B -- "1. 成功识别" --> ResultPage["分析结果页"]
    end
```

---

## 3. 智能食鉴 - 分析结果页

**核心设计思路**：信息层级清晰，第一时间给出核心结论，次要信息可展开查看。

```mermaid
graph TB
    subgraph "手机屏幕"
        direction TB
        
        subgraph "顶部导航"
            A["< 返回"]
            B["分享"]
        end

        subgraph "核心结论区"
            C["产品图片"]
            D["产品名称"]
            E["品类“照妖镜”<br>“它其实是含乳饮料，不是牛奶”"]
            F["**安全评级: A (优秀)**<br>(绿色背景)"]
            G["**营养评级: 中**"]
            H["**一句话总结**<br>“配料表很干净，可放心给宝宝食用。”"]
        end
        
        subgraph "详情解读区"
            I["个性化风险高亮<br>(如触发过敏原则强提醒)"]
            J["**健康替代品推荐**<br>- 替代品A卡片<br>- 替代品B卡片"]
            K["**完整成分列表 (可展开)**<br>点击后显示详细成分及解读"]
            L["“SHI健康指数”得分: 92分<br><u>点击查看评分模型说明</u>"]
        end
        
        L -- "2. 点击跳转" --> SHI_Page["SHI评分模型说明页"]
        A -- "3. 点击返回" --> HomePage["首页"]
    end
```

---

## 4. SHI评分模型说明页

**核心设计思路**：作为静态内容页，清晰、透明地解释评分规则，建立用户信任。

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

        subgraph "内容区"
            B["<h1>“食话食说健康指数 (SHI)”</h1>"]
            C["<h2>SHI指数如何计算?</h2><br>SHI = 100 + 加分项 - 减分项"]
            D["<h2>核心减分项 (安全风险)</h2><br>- 争议性添加剂<br>- 超加工程度<br>- 警示成分"]
            E["<h2>核心加分项 (额外价值)</h2><br>- 权威认证<br>- 清洁配料表<br>- 富含特定有益成分"]
        end
        
        A -- "1. 点击返回" --> ResultPage["分析结果页"]
    end
```

---

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

**核心设计思路**：提供清晰的搜索路径和分类明确的结果展示。

```mermaid
graph TB
    subgraph "流程: 搜索页 -> 搜索结果页"
        direction LR
        
        subgraph "搜索页"
            A["搜索框 (自动聚焦)"]
            B["取消"]
            C["<h3>历史记录</h3><br>- 关键词1<br>- 关键词2"]
            D["<h3>热门搜索</h3><br>- 热搜词1<br>- 热搜词2"]
        end
        
        subgraph "搜索结果页"
            E["搜索框 (含用户输入内容)"]
            F["Tab: 全部"]
            G["Tab: 食品"]
            H["Tab: 文章"]
            I["**结果列表**<br>根据Tab筛选后的结果<br>- 结果1<br>- 结果2<br>- ..."]
        end
        
        A -- "1. 输入关键词并搜索" --> E
    end