外卖 APP 商品浏览案例

# 外卖 APP 商品浏览案例 — design.md

内容版本：sha256:cc96d256dbf522840439db8c083a8b08db535e80bd8477435ec98f09d3bc53e4

本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明；未提供的数值不作推断。实现建议须在后续开发中选择和验收。

## 元数据记录

- 资产：pages/food-ordering-page；语义类型：page-case。
- 分类：整页效果。
- 标签：外卖APP、美食、移动端。
- 场景：外卖首页、餐品浏览、移动端点餐设计参考。
- 平台：未提供。
- 风格：未提供。

### 亮点声明

- 浏览层级：左侧界面依次呈现问候、搜索、主标题、分类标签和纵向商品卡片。
- 轻量导航：底部黑色圆角导航与浅色内容区形成对照，商品照片承载主要视觉信息。

### 实际文件与参考资源

- `demo.html`（sha256:9aaffc6f7fd1ebbc555e133966d3c308d3435762f3cc0b1b7f2a30648c531f43）
- `meta.yml`
- `refs/01.png`（sha256:6e93a85eecf4780d5cabbbf0b59524b4c5ed55b9ef06429210634c3c42100f64）
- 参考图：`refs/01.png`；外卖 APP 双屏案例：商品浏览与配送追踪。
- 实现摘要：sha256:9aaffc6f7fd1ebbc555e133966d3c308d3435762f3cc0b1b7f2a30648c531f43。

## 未提供

- 未结构化记录的完整页面流程、路由、业务数据、信息层级参数及跨页面组件规范不作推断；亮点描述属于元数据声明，截图或静态 demo 不能证明业务流程可用。

## 实现建议

- 梳理信息层级、核心任务、导航与内容区，再把重复区域提炼成可复用组件。
- 定义首屏、加载、空数据、错误与完成状态，确认主要行动按钮对应的真实业务行为。
- 在桌面与窄屏验证阅读顺序、表单反馈和导航，逐条验收核心用户路径。