04 / CASE STUDY
小茗同学 解忧之旅
XIAOMING WORRY-FREE JOURNEY / WECHAT H5 GAME
用一场可选择、可定制、可分享的微信互动，把年轻人的小烦恼变成品牌内容
XIAOMING WORRY-FREE JOURNEY / WECHAT H5 GAME
「小茗同学解忧之旅」是一款面向年轻用户的微信互动 H5。用户从学习、爱情与工作三种日常烦恼中选择自己的状态，再完成形象定制，最终生成一张可保存、可分享的个人化解忧海报。
我负责互动内容的视觉方向与页面体验，将小茗同学的明亮黄绿品牌识别、复古游戏感插画与用户选择路径统一在同一套叙事里，让品牌露出融入“替用户解忧”的过程。
3烦恼主题学习、爱情、工作三条体验路径
5互动步骤欢迎、选择、定制、形象、海报
1:1个性化结果每条路径对应专属形象与分享海报
WECHAT使用场景微信内打开、参与并分享
Visual World｜解忧杂货铺
手绘的「解忧杂货铺」是 H5 的空间原点：零食、旧报摊、日用品与冰柜共同构成一处可以停下来聊烦恼的街角。用充满细节的插画场景承接品牌与人物，让进入 H5 的第一眼便拥有可探索的世界观。
Interactive H5｜微信互动游戏
WECHAT H5 GAME / 2022
小茗同学
解忧之旅
从“学习、爱情、工作”三种烦恼出发，完成选择、形象定制与海报生成， 将互动结果转化为一张可分享的个人化内容。
01 / 05 · 欢迎来到解忧杂货铺
INTERACTION IDEA
不把品牌内容停留在“看一张海报”，而是用一次选择和定制，让用户把自己的状态带入其中；最终生成的内容既是游戏结果，也是自然的社交分享入口。
Celebrity Campaign｜明星传播海报
明星海报将「小茗同学」的明亮色彩和手绘元素延展到社交传播中：张弛与蒋龙分别进入不同的角色与场景，与抽奖、产品和小程序入口一起构成可快速理解的活动信息。
520 Collaboration｜明星异业合作
在 520 节点，将范丞丞和刘雨昕的个人气质融入同一套校园感视觉：黄与蓝形成互补的传播画面，明星、产品与节日情绪被快速组织成可读、可参与的社交内容。
Experience Flow｜体验路径
01进入解忧杂货铺
02选择烦恼主题
03定制专属形象
04获得解忧海报
05保存并分享
- 学习特优生
- 围绕学习压力与成长烦恼，生成有角色感的个人结果。
- 爱情恋习生
- 以关系中的困惑为入口，让用户获得轻松、有趣的互动反馈。
- 职场砖家
- 把工作中的日常烦恼转化为可参与、可分享的情绪出口。
- 分享海报
- 将用户的选择收束成一张个人化视觉结果，承接社交传播。
My Role｜我的职责
互动视觉方向
- 建立亮黄、草绿与高对比线条的 H5 视觉基调
- 统筹首页、选择、人物定制与结果海报的画面节奏
- 让小茗同学角色贯穿用户旅程，增强品牌陪伴感
页面体验设计
- 组织从烦恼选择到结果生成的五步移动端路径
- 用清晰的主题分支降低参与门槛
- 将定制结果设计为适合保存和分享的内容资产
内容传播延展
- 把互动机制与社交传播内容整合为同一套体验
- 确保品牌角色、语气与视觉识别在各页面持续一致
- 为后续明星、产品与渠道内容预留统一的延展语言