外卖 App 原型模板
外卖 App 一般需要 5 个核心页面：首页、商家详情、购物车、确认订单、订单详情。主流程是「首页选商家 → 商家详情加购 → 购物车确认 → 确认订单并支付 → 订单详情看配送进度」。下面列出每页的模块和交互、评审时常被问到的异常状态和 PRD 要点；点按钮可以直接在啪啪画里生成这套原型，每个元素都能手动修改。
做一个外卖 App，包括首页、商家详情、购物车和下单流程用这个模板生成原型打开即用 · 注册送 125 万 tokens
适合谁
做本地生活、外卖、点餐类产品的产品经理，或者在准备产品经理作品集、面试作业的同学。
页面清单
| 页面 | 主要模块 | 关键交互 |
|---|---|---|
| 首页 | 定位地址、搜索框、品类入口、活动横幅、附近商家列表（评分、月售、配送时间、起送价） | 点商家进入详情；点品类筛选列表 |
| 商家详情 | 店铺头图和公告、优惠券、左侧分类 + 右侧菜品列表、规格选择 | 加减菜品数量；底部购物车栏实时更新金额 |
| 购物车 | 已选菜品、规格、数量、打包费、配送费、满减优惠 | 修改数量、清空购物车、去结算 |
| 确认订单 | 收货地址、送达时间、餐具数量、备注、优惠券、支付方式、实付金额 | 提交订单后显示支付结果 |
| 订单详情 | 订单状态进度、骑手信息、联系商家 / 骑手、再来一单 | 状态从「商家接单」到「已送达」 |
生成效果
下面是啪啪画根据上面这句需求一次生成的线框原型，没有手动修改；每个元素都可以点选修改，也可以一键润色成高保真。
主流程
- 首页选商家
- 商家详情加购
- 购物车确认
- 确认订单并支付
- 订单详情看配送进度
容易漏掉的状态
评审会上最常被问到的就是这些。啪啪画的「原型体检」会自动检查空状态、异常和溢出，帮你补齐。
- 附近没有商家 / 不在配送范围
- 商家休息中、菜品售罄
- 未满起送价时结算按钮不可点
- 优惠券不可用的原因说明
- 支付失败、超时未支付
- 地址为空时的引导
PRD 里要写清楚的规则
- 起送价、配送费、打包费的计算规则
- 满减和优惠券能否叠加
- 购物车跨店铺是否保留
- 订单各状态的定义和可执行操作
用啪啪画生成这套原型
- 点下面的按钮，需求「做一个外卖 App，包括首页、商家详情、购物车和下单流程」会自动填好并开始生成。
- 十几秒后得到多页原型，页面跳转和演示效果已经连好。
- 点选任意按钮、文字、颜色直接修改，或者在指令条里说想怎么改。
- 用「原型体检」和「角色走查」查漏，导出 HTML、图片或 PRD。
常见问题
能改成奶茶店、超市配送吗？
可以。把需求改成「奶茶点单小程序，包括选规格（甜度、冰量）和自取 / 外送」，AI 会按新场景生成；生成后每个元素都能手动改。
能生成小程序尺寸吗？
可以，在需求里写「微信小程序」，页面会按手机尺寸和小程序样式生成。
生成要花钱吗？
内测期间免费，注册送 125 万 tokens。具体用量取决于页面数量和复杂度，手动修改不消耗额度。