102 lines
4.8 KiB
Markdown
102 lines
4.8 KiB
Markdown
|
# “食话食说”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. **我的**：进入个人中心，管理健康档案、查看红黑榜、进行设置等。
|