器与食 · 数字化点单体验

项目背景

器与食原有小程序点单流程共有 7 级页面，顾客从扫码到支付平均需要 4 分 12 秒，高峰期店员仍需人工协助近六成订单。店内反馈集中于三点：找不到茶类分类、不知道怎么选规格、会员权益看不明白。

我们在 4 家门店做了共 42 人次的现场观察与访谈，发现真正的阻塞点不在页面数量，而在「决策信息没有按顺序出现」——顾客需要先看到茶汤与焙火描述，才愿意比较规格与价格。

设计策略

一 · 把 7 级流程压到 3 级

首页直接呈现按焙火度排序的茶单，点击进入商品页即完成规格与甜度选择，第三级直接支付。原本分散在三级页面里的信息被合并成一张可滑动卡片，减少了 4 次页面跳转。

二 · 用实物而非图标表达风味

风味描述不再使用抽象图标，而是采用统一的茶汤摄影与烘焙度计（1–5 格），顾客可以凭视觉直接判断。这也让品牌的大地色视觉体系自然延续到了数字界面。

三 · 会员权益放进结算路径

把原本藏在个人中心的会员权益，提取为结算页的一行「本单可用权益」，顾客在支付前即可看到可抵扣金额。这一步让会员绑定量在两个月内增长 2.7 倍。

数字界面同样需要动线。屏幕里的三十秒和空间里的三十秒，感受是一致的。

设计规范与交付

• 色彩：沿用品牌大地赭石与赤陶橙，仅增加一套中性灰用于信息层级。
• 组件：58 个可复用组件，含茶单卡片、规格选择器、权益提示条等。
• 字号：正文 15px、说明 12px，行高统一 1.5，保证柜台前单手操作的识别距离。
• 交付：Figma 组件库 + 前端页面实现 + 一份 26 页的设计说明。

落地成果

• 桌均决策时间从 4 分 12 秒缩短至 2 分 36 秒（-38%）。
• 线上预订占全部订单比例从 24% 提升至 45%。
• 需要店员人工协助的订单比例从 58% 下降至 19%。
• 会员绑定量两个月增长 2.7 倍，复购客单价提升 13%。