小程序 UI / UX
标注 MP-1.0 · 与门头/官网同一套标准微信小程序「参山谷·跑山鸡」：核心闭环是 挑鸡 → 预留 → 到店亮码取鸡。 视觉沿用门头标准——招牌绿做导航与主按钮、招牌黄只花在「行动」上、红色施工标注用于状态与说明。共 6 屏 + 1 个可点击原型。
标注 F-01 · 用户流程
四步闭环
街坊买鸡不看详情页，快进快出：两屏内完成预约。
STEP.01逛 · 首页
今日价目、剩余只数、两家门店距离，一眼看完。
屏 1 首页
STEP.02挑 · 价目
时价直给，规格点选（整只/半只），不用问店员。
屏 2 价目 · 屏 3 详情
STEP.03约 · 预留
选门店 + 明天时段，免订金，一步提交。
屏 4 预约
STEP.04取 · 亮码
到店出示取鸡码，对应门店「取鸡处」窗口，现抓现宰。
屏 5 取鸡码
标注 F-02 · 可交互原型
点一点试试
右侧手机可以真的点：底部 tab 切换、黄按钮跳预约、提交后生成取鸡码。
参山谷·跑山鸡
•••⊖
今日价目
•••⊖
全部跑山鸡鸡蛋汤料
跑山公鸡 · 整只
28.8/斤＋
跑山母鸡 · 炖汤
32.8/斤＋
跑山鸡蛋 · 30枚
68/箱＋
老鸡汤料包
12/份＋
‹跑山公鸡28.8/斤
养足天数 · 山林散养 · 粮食喂养 · 现抓现宰
整只约3.5斤半只约1.8斤剁块免费
怎么做都好吃
预约取鸡
•••⊖
① 选门店
参山谷店1.2km · 发光字门头
桂园店3.8km
② 选鸡
跑山公鸡 · 整只（约3.5斤）›
③ 取鸡时间 当日现宰，请提前一天
周四9/25
周五9/26
周六9/27
08:3009:3010:3011:3016:00
提交预约 · 免订金
提交后生成取鸡码，到店「取鸡处」窗口出示
取鸡码 · 明天 09:30
跑山公鸡 × 1
取号码 A-07
参山谷店 · 到「取鸡处」窗口出示此码
已预留今天 09:41 · 微信自动通知
待到店亮码明天 09:30 前 · 过号顺延三只
现抓现宰 · 取鸡现场称重，按斤结算
谷
山谷常客 · 阿谷
已买 12 只 · 老饕
已买 12 只 · 老饕
鸡票 · 次卡（买十送一）
剩 3 只可兑
去使用
怎么玩这个原型
- 点 「立即预约 →」 或底部 价目 tab；
- 在价目页点 「＋」 看商品详情；
- 详情页点 「立即预约」 填预约单；
- 提交后生成 取鸡码 A-07——闭环完成。
UX 决策：① 黄色只给「可点」——所有黄色都是行动点；
② 时价用红色等宽字，和门店挂牌同一逻辑；
③ 免订金 + 提前一天，降低街坊预约门槛；
④ 取鸡码对位线下「取鸡处」窗口，线上线下同一个词。
② 时价用红色等宽字，和门店挂牌同一逻辑；
③ 免订金 + 提前一天，降低街坊预约门槛；
④ 取鸡码对位线下「取鸡处」窗口，线上线下同一个词。
标注 F-03 · 全部界面
六屏总览
可左右滑动。每屏下方标注该屏的 UI/UX 要点。
标注 F-04 · 组件与令牌
组件规范
与门头、官网共用同一套色板与字体分层。
按钮 — 黄=行动 / 绿=导航 / 灰=次要
立即预约
看今日价目
再想想
全圆角 999px，高 44px（触控最低标准）；黄色按钮全屏同时最多 1 个。
标签 — 三种语义
养足天数粮食喂养
今日可约
时价 · 以门店挂牌为准
绿=品质说明，黄=促销状态，红虚线=价格规则（施工标注体）。
色板 — 同门头
#0C533A 导航/主按钮
#156648 辅助绿
#FDD000 行动/强调
#D8261C 时价/状态
#F7F4EC 背景
字体 — 小屏三层
参山谷品牌书法 · 导航栏Ma Shan Zheng
给点盐就行营销标语ZCOOL 黄油体
正文与商品名正文Noto Sans SC
¥28.8/斤价格/编号Mono