technine.io

移动应用 · 设计概念

食品自提应用

食品购物应用设计研究,连接商品浏览、四只装苹果及自提核对,并提供数量与库存提示。

以下是概念设计,并非客户项目。展示内容为静态效果图,名称和数据均为虚构。

食品自提应用

设计概念

食品自提应用: 清新的移动商店 · 食品选购与自提
查看设计 ↗
清新的移动商店 · 食品选购与自提

设计出发点

让购物者从选品到自提核对都能看清计价单位。四只装苹果用于说明包装数量与单件数量的区别。

面向谁
选购食品并准备到店自提的顾客。
需要考虑的限制
四只装 HKD 24 是虚构价格示例。不连接实时库存,也不下单、支付或预留自提名额。

建议的操作流程

  1. 01

    浏览商品

    浏览页介绍可选食品。

  2. 02

    检查包装规格

    苹果详情展示四只装及示例价格 HKD 24。

  3. 03

    核对自提安排

    核对页汇总拟选订单内容,不会提交订单。

为什么这样设计?

明确每份价格对应什么

价格旁需标注规格,选择一包不能被误解为一个苹果。

区分选购与预留库存

自提核对不代表库存已锁定,实际服务需要缺货和替代商品规则。

细看视觉设计

以下为建议的设计样式,均为静态示例,不是可操作功能或正式开发规范。

配色用途

  • 购物背景

    #F7F8EE

  • 商品操作

    #437748

  • 价格与标签

    #2E382C

字体与间距

信息清楚,下一步明确。

价格文字保持清晰,币种、包装规格和购买数量同时可读。

规格与数量控件集中排列,自提信息与购物车商品分区显示。

正常流程之外的状态

购物车为空

购物车还没有商品,请先浏览并添加。

已添加一包

已添加一包四只装苹果,示例价格为 HKD 24。

当前规格缺货

该包装暂时缺货,请移除或选择其他商品后继续。

核对时为什么还要显示包装规格?

数量可能指包数、个数或重量。把单位和已选数量一起展示,顾客就不必仅凭图片判断订单内容。