米棕、木色、金色和阴影叠加，长时间点餐容易疲劳。
XIONGDAYE MINI PROGRAM · CASE STUDY · V6.1
熊大爷点餐小程序
视觉升级
面粉白、暖墨、雅金、绛红，构建“现包可信 + 高效点餐”的品牌体验。
23:18 熊大爷点餐
今日现包
一饺包四季
附近门店 1.2km · 营业至 21:00
Hi，亲爱的邻居
亲邻会员
亲邻会员
36.6余额
366积分
4卡券
▦会员码
亲邻券包
6.6元开通 · 总价值40元正餐折扣小食优惠积分加速自动抵扣
消费存积分，积分兑好礼
熊大爷锦城店 · 1.2km
今日现包
切换门店 ›今日现包
白菜鲜肉水饺
今日第4批 · 10:30现包¥15
全家福饺子云吞套餐
任选饺子 + 云吞¥20
醇香豆浆
会员实付 ¥5.0¥6
亲邻会员
我的会员码
我的会员码
▦
会员码结算自动选择最优券
本月已节省 ¥26.8
订单 A27
预计 11:06 出锅
预计 11:06 出锅
白菜鲜肉水饺 × 1
熊大爷锦城店 · 堂食取餐
接单
擀皮
现包
煮制
待取
Hi，亲爱的邻居
我的熊大爷
我的熊大爷
亲邻会员 · 已开通
余额 36.6 积分 366 卡券 4
储值有礼
积分商城
地址管理
联系客服
01Before Problems
问题诊断
为什么旧体验不够高级
问题不是功能缺失，而是品牌、交易和运营没有被同一套视觉层级组织起来。
价格、加购、徽章同时强调，页面缺少唯一视觉中心。
会员活动与点餐主入口同级，首屏任务不清楚。
品牌说“现包”，用户却看不到批次、时间和制作进度。
02Brand Evidence
品牌推导
从官网纪律推导小程序比例
不重新发明颜色，把官网“纸、墨、金、印、青”转换成高频交易界面的面积与职责。
官网母体系
60 / 20 / 13 / 5 / 2
纸60、墨20、金13、印5、青2。金不铺底，绛红一屏一实体，竹青只做食材点缀。
小程序应用比例
78 / 16 / 4 / 2
白场/面粉白78%、暖墨16%、雅金4%、绛红2%，清爽来自面积而不是换主色。
UI 禁区
不绿化、不铺金、不滥红
Logo亮红只属于Logo；竹青不进入基础UI；价格不红；加购不做金色实心圆。
03Competitor Learning
竞品吸收
只吸收方法，不借用品牌色
将38张参考图收敛为三条可执行逻辑：会员产品化、套餐建构、大图留白。
肯德基 · 会员产品化
吸收周期、价格、权益、固定购买栏
不吸收强运营压迫与红色铺满
熊大爷转化亲邻券包白卡化，首屏降级
袁记 · 套餐建构
吸收2/3件套、必选分组、大图选项
不吸收绿色交易主色与品牌肌理
熊大爷转化白底大图、细金选中边、直给省钱
茶饮 · 大图留白
吸收单产品、单标题、单行动
不吸收粉色/绿色季节主色
熊大爷转化真实饺子大图 + 面粉白呼吸
04Information Architecture
信息架构与用户路径
从打开小程序到取餐
所有设计决策最终回到一条主路径：门店确认、快速点餐、自动优惠、现包可见、到店取餐。
01 首页定位门店
查看会员资产
一次进入点餐
查看会员资产
一次进入点餐
→
02 点餐左分类右商品
大图浏览
一次加购
大图浏览
一次加购
→
03 套餐/规格默认推荐
已选/必选
规则可见
已选/必选
规则可见
→
04 购物车最优券自动匹配
显示已省金额
显示已省金额
→
05 订单接单/擀皮/现包
煮制/待取
煮制/待取
首页
轮播会员资产点餐主入口快捷权益点餐
门店条分类/二级菜单商品卡购物车会员
亲邻券包储值积分兑换会员码订单
制作进度取餐码再来一单售后我的
余额/积分/券地址客服加盟05Visual Language
05 · Visual Language
面粉白、暖墨、雅金、绛红
白场与面粉白承担约78%界面，暖墨负责全部交易信息；雅金只做线、图标和会员数字；绛红是唯一主行动。竹青不进入基础 UI，只在食材与真实摄影中自然出现。
瓷白表面
#FFFFFF面粉白
#FAF7F1暖墨
#241E1B雅金签名
#C4993F绛红落印
#9F3B3B品牌标题 · Noto Serif SC
一饺包四季
现包吃不腻
现包吃不腻
界面文字 · Noto Sans SC
白菜鲜肉水饺
今日第4批 · 10:30现包
¥15.0
点餐
默认 / 激活
7周年用券
默认 / 激活
储值有礼
默认 / 激活
入群有礼
默认 / 激活
积分兑换
默认 / 激活
Primary
每屏唯一绛红实体
Secondary
白底暖墨描边
Disabled
中性暖灰，不降低可读性
Error
红只表达问题，不铺底
06Component System
06 · Component Lab
可交互核心组件
点击切换，查看四个核心组件的关键状态与实现规则。
组件应用预览
7周年亲邻券包
6.6元 / 30天 · 总价值40元正餐2元券小食4元券品类6元券积分加速
适用门店：全国参与门店
有效期：开通后30天 · 每单限用1张
白菜鲜肉水饺
开通后本单省¥2¥15
MemberPassHero
价格、周期、权益和规则同屏可读。
正餐折扣小食优惠积分加速自动抵扣
BundleBuilder
全家福二件套
已选 1 / 必选 2 · 还差1项
白菜鲜肉水饺
今日第4批 · 10:30现包
支持即食 / 生饺带走
¥15
预计 11:06 出锅
正在手工现包。
接单
擀皮
现包
煮制
待取
07Key Screens
核心页面
按用户路径展示设计结果
每个页面只解释三个关键决策，避免案例页重新变成规范堆砌。
首页
今日现包
一饺包四季![熊大爷熟饺子]()
一饺包四季
立即点餐锦城店 · 1.2km
余额 36.6 积分 366 卡券 4 会员码
首页
- 产品大图是唯一视觉中心
- 点餐是唯一红色主 CTA
- 亲邻券包降级到下半区
点餐
白菜鲜肉水饺¥15+
白菜鲜肉水饺¥15+
白菜鲜肉水饺¥15+
点餐
- 商品图占卡片40%–46%
- 价格暖墨，加购白底描边
- 滚动120px后轮播收起
套餐选择
全家福二件套
已选1 / 必选2
套餐选择
- 必选分组与完成进度
- 默认推荐，可自由替换
- 选中态仅用细金边
商品详情
白菜鲜肉水饺 ¥15
今日第4批 · 10:30现包
10只 / 15只 / 20只 白灼 / 干拌
加入购物车
商品详情
- 真实大图承担食欲
- 每组有默认推荐项
- 加购固定底部不跳页
购物车
白菜鲜肉水饺 × 1
已自动选择最优券
已省 ¥4
实付 ¥15
去结算
购物车
- 优惠自动匹配
- 节省金额可见
- 结算是唯一强行动
订单进度
白菜鲜肉水饺 × 1
预计 11:06 出锅
接单 擀皮 现包 煮制 待取
订单进度
- 五段手工过程可见
- 当前步骤唯一绛红
- 支持出锅提醒
我的
亲邻会员
余额 积分 卡券
会员码
储值 / 积分 / 地址 / 客服
我的
- 资产与服务分层
- 会员码用途明确
- 不重复堆活动广告
08Interaction Polish
交互细节
每个动效都服务状态理解
动效不是装饰，而是帮助用户确认加购、减少遮挡、理解规则和等待制作。
+
加购反馈
按下140ms短暂金色，不在静止状态铺满金点。
轮播收起
下滑120px后缩短，释放商品浏览空间。
有效期 / 门店 / 门槛⌄
规则展开
关键规则首屏可见，完整条款按需展开。
现包推进
当前步骤移动，预计出锅时间同步更新。
09Acceptance
交付标准
实现与验收
规范不是装饰稿。每项规则都对应一个交易效率、品牌信任或门店营运目标。
交易效率
- 首页到点餐不超过1次点击
- 无规格商品一次加购
- 滚动120px后点餐轮播收起
- 购物车常驻且不遮挡内容
会员清晰
- 会员码下方必须标注“会员码”
- 券包首屏展示门店/有效期/门槛
- 结算自动匹配最优券
- 红色实体每屏只保留一个
现包可信
- 商品卡显示批次和现包时间
- 制作中订单显示五段进度
- 摄影暖色真实、不发青
- 食物大图占卡片40%–46%
Design Outcome
让用户看见“现包”，也更快完成点餐
品牌高级感不是装饰性的金红，而是清晰的主次、真实的产品、克制的颜色和可见的制作过程。
1 次首页到点餐
1 个每屏红实体
40–46%商品图占比
5 段现包进度