零食有鸣DESIGN STUDY / 2026体验原型 ↗

快乐有鸣，零食有搭子。

让日常的每一次分享，
都有好吃的。

探索新版小程序 设计思路
零食有鸣 · 小程序视觉提案2026
完整宽屏零食分享场景一起
开吃！SHARE THE JOY
01

设计思路

让权益更好找，让零食更想买。

品牌调性

先确定，
快乐的样子。

实惠优惠清楚
丰富选择丰富
亲近日常分享
活力轻快明亮
首页策略

把品牌，
变成好用的首页。

服务前置

福利一眼可见

积分、领券、签到放在前面。

视觉统一

选择多，也清楚

用共同的色彩、图标与光影组织商品。

行动连续

受阻也有下一步

差额 → 赚积分 → 返回兑换。

假期主题

和谁一起吃？

中秋团圆，国庆相聚。
从地点分类，转向分享场景。

09.25—10.07 / 假期快乐补给

这个假期，
和谁一起吃？

一个人尽兴追剧放松 → 薯片与气泡饮
和朋友开吃聚会聊天 → 饮料与分享零食
和家人分享团圆围坐 → 坚果与软糯小食

以中秋、国庆为时令，将“宅家 / 出行”转为“与谁分享”。

09.25—09.27中秋 / 团圆10.01—10.07国庆 / 相聚时令依据 ↗

基于参考截图的设计假设；品牌关键词为设计解读，未经过用户验证。

02

功能架构

一个首页，连接三类任务。

一个入口，按用户意图分流

A

会员权益

领取与兑现
→→→

领取福利，查看记录

B

活动发现

从场景到商品
→

了解商品，选择行动

C

消费准备

从清单到门店
→

整理清单，确认门店

范围：九个页面与本地演示状态。支付、真实库存、定位、配送及会员接口未接入。

04

页面线框

聚合、决策、参与，三种页面结构。

9:41 ••• ◉

首页

品牌与会员状态
积分 / 优惠券 / 积分任务
主活动视觉 + 行动入口
领券 / 积分 / 新人 / 会员
场景切换与选品
积分商品卡片
首页　领券　扫码　购物车　我的

聚合：首页

高频权益先出现，营销内容有节制。

9:41 ••• ◉

商品详情

原创商品图 / 角标
标题 / 积分 / 商品说明
当前余额 / 差额 / 兑换条件
主要按钮：兑换或去赚积分
加入购物车 / 查看门店
首页　领券　扫码　购物车　我的

决策：商品详情

先理解价值与成本，再选择行动。

9:41 ••• ◉

积分任务

当前积分 / 简短引导
签到日历与今日奖励
主要按钮：签到领积分
其他任务与入口
返回新人好礼
首页　领券　扫码　购物车　我的

参与：积分任务

完成任务后回到原先想兑换的好礼。

06

设计系统

基础、控件、状态与模式。

Snack UI0.3.0 / 小程序概念设计系统

共享规则已接入九个原型页面
品牌官方 VI、真实业务接口待确认

查看使用文档 ↗
FOUNDATIONS / 01

语义色彩

点击色卡复制变量名。亮橙承担品牌视觉，深橙承担小字号价格，紫色用于场景底色。

--snack-orange-700→--color-price→9 积分

原始色值 → 语义用途 → 组件呈现

TYPE / 字体层级

字体层级

快乐有鸣Display / 30px / 600
积分换点小快乐Title / 18px / 600
找到适合你的零食搭子Body / 14px / 400
领券中心Label / 12px / 600

阿里巴巴普惠体 3.0：Regular 正文、Medium 标题、SemiBold 强调、Bold 数字。

SPACE & SHAPE / 间距与形状

间距与圆角

4space-1
8space-2
12space-3
16space-4
24space-6
32space-8
10控件
16卡片
24弹层
∞标签
07

AI 工作流

从命题到可交互提案，AI 参与制作，设计判断贯穿全程。

AI 协助推进，
设计判断贯穿始终。

本项目用 Codex 协助分析、编写界面与验证，用 ImageGen 协助视觉素材制作；以设计反馈持续校准结果。

01

输入

AI 协助

设计判断

阶段产出

不合适，就回到上一层。 结构问题回到方案，视觉问题回到制作，交互问题回到验证。

本次迭代中的具体判断

布局

固定画布 → 连续页面
小屏换列 → 整体等比缩放

表达

长段文字 → 图解与短句
装饰元素 → 现代、克制的首屏

体系

组件平铺 → 四组切换
截图参考 → 可操作 HTML 原型

关键提示词思路 展开查看 +

以下为本次协作指令的归纳示例，便于复用；并非逐字聊天记录。

验证范围
已检查页面渲染、等比缩放与演示交互。真实用户效果、品牌官方规范及交易接口仍待验证。


LIVE PROTOTYPE
首页