158 lines
4.8 KiB
Markdown
158 lines
4.8 KiB
Markdown
# 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 |