移动应用 · 设计概念
食品自提应用
食品购物应用设计研究,连接商品浏览、四只装苹果及自提核对,并提供数量与库存提示。
以下是概念设计,并非客户项目。展示内容为静态效果图,名称和数据均为虚构。
设计出发点
让购物者从选品到自提核对都能看清计价单位。四只装苹果用于说明包装数量与单件数量的区别。
- 面向谁
- 选购食品并准备到店自提的顾客。
- 需要考虑的限制
- 四只装 HKD 24 是虚构价格示例。不连接实时库存,也不下单、支付或预留自提名额。
建议的操作流程
- 01
浏览商品
浏览页介绍可选食品。
- 02
检查包装规格
苹果详情展示四只装及示例价格 HKD 24。
- 03
核对自提安排
核对页汇总拟选订单内容,不会提交订单。
为什么这样设计?
明确每份价格对应什么
价格旁需标注规格,选择一包不能被误解为一个苹果。
区分选购与预留库存
自提核对不代表库存已锁定,实际服务需要缺货和替代商品规则。
细看视觉设计
以下为建议的设计样式,均为静态示例,不是可操作功能或正式开发规范。
配色用途
购物背景
#F7F8EE
商品操作
#437748
价格与标签
#2E382C
字体与间距
信息清楚,下一步明确。
价格文字保持清晰,币种、包装规格和购买数量同时可读。
规格与数量控件集中排列,自提信息与购物车商品分区显示。
正常流程之外的状态
购物车为空
购物车还没有商品,请先浏览并添加。
已添加一包
已添加一包四只装苹果,示例价格为 HKD 24。
当前规格缺货
该包装暂时缺货,请移除或选择其他商品后继续。
核对时为什么还要显示包装规格?
数量可能指包数、个数或重量。把单位和已选数量一起展示,顾客就不必仅凭图片判断订单内容。

