转自：小红书DER（ID：red_ued）

作者： 小红书:DER

1

背景

四月份开始，小红书用户通过诸如点赞、评论、收藏等社区行为，会随机触发「惊喜盒子」，打开即可获得购物券或现金红包。盒子以及弹窗的样式会根据不同的节日和活动来更换，带给用户不一样的惊喜。

需要特殊考虑的是「 6.6大促 」（小红书每年最大的站内活动），怎么在活动期间赋予「惊喜盒子」独特的、进阶的玩法，是一个待解的难题。

2

玩法制定

接到需求的时候，产品侧对于6.6盒子已有初步的想法，总结为以下三个要点👇

紧接着抛来一张这样的「草图」🤭

草图的基本思路是：一个人要将头顶的盒子顶到虚线框区域里，根据盒子停留的位置与框的重合度得到对应分值，共分为四个等级。

在此基础上，我们补充制定出了最初的玩法规则：每位用户有三次顶盒子的机会，每次根据重合度给出对应等级的券作为奖励，最终三选一领取。

经过讨论、评审之后我们再次做出两点修改：

1. 减少所有不必要的流程，让用户以更少的步骤达成目标；

2. 使用简洁易懂、较常见的方式来展示分数、级别等结果信息。

于是有了最终的玩法规则 👇

游戏流程概括：进入游戏 - 长按顶盒子 - 得分 - 领券。并引入刷榜模式，增强活动的游戏性。在刷榜模式中设定频次门槛，用户每小时可以获得限定次数的游戏机会。

3

游戏人物形象制定

进入视觉设计后的第一个问题是，顶盒子的人物形象应该满足什么特点？

针对这个问题，我们讨论制定出了三个规则：

1. 简洁的人物形象；

2. 具有跳动的属性；

3. 能够表达一定的情绪。

初稿的三版方案分别通过腿、弹簧、球来体现弹跳属性，五官只保留了眼睛，配合用力时通红的小脸+ 努力闭眼来表达情绪和长按力度。

球形的方案能够最大化放大表情，强调游戏的代入感，同时通过形变也有不错的弹跳表达，成为后续深化的基础。

接下来要考虑赋予形象小红书特性，「薯队长」是小红书的专属IP，但对于顶盒子游戏来说，细节需要简化。首先取了「薯队长」的头部，适当放大强调五官，迎合初期方案里需要传递情绪和力度的属性；其次，将形体圆润化，增加Q弹感。

4

动效

动效设计对于游戏来说是重中之重，它直接决定了游戏质感和体验。在这个简单的顶盒子小游戏中，我们试图通过一些人物表情+动效的细节，去强化游戏情绪，增加代入感。

薯队长在顶盒子过程中的情绪变化是设计过程中最重要的部分。蓄力过程小红薯的身体体现出受到挤压而形变，同时眉头紧锁、嘴角下沉、面部通红。跳动的时候瞬间释放压力，眉头舒展，眼睛放大，有种排出毒素一身轻松的感觉😂。等待分数及出分反馈的时候，展现期待感/小骄傲。

还有一些小细节的处理，烘托整个游戏的趣味性：分数出现时参考了旧电视机开机的效果；当得分高于90分时，会弹出「WOW」字样来增强用户的成就感，同时薯队长也会得意大笑。

以下是完整动效展示 👇

5

定制皮肤

大多游戏在不同的活动期间，会以不同的场景装扮来营造活动的氛围、带来一些新鲜的体验。我们希望「惊喜盒子」同样具备这样的拓展性。

6.6年度大促期间，「惊喜盒子」相关页面承接了大促主视觉以及主色调红粉色，来营造大促期间APP 内喜庆的氛围感。

今年八月，小红书与TFBOYS演唱会合作发起了一场「顶盒子，赢门票」的活动。在这个活动中加入了偏男性化的元素，承接演唱会宣传主海报的黑橙两色来作为榜单页与游戏页的主色。

对于游戏页来说，需要让视觉重心聚焦到盒子与薯队长身上，同时又希望能营造出演唱会的舞台效果。于是便出现了本次活动页的的个性化视觉点，背景层一束追光灯👇。

6

活动设计小TIPS💡

🤖️「傻瓜」操作：促传播/活动类小游戏，操作需要足够简单，链路足够短，并传递出一定的游戏感、趣味性。

活动类游戏和常规手游的出发点和目标有本质的区别。且活动本身存在的时间比较短，简单即意味着用户能无门槛参与、快速完成、即刻获得反馈。

🎮 游戏化：游戏相比非游戏，发券的店铺跳转率/打开率较高，推测用户努力赢得的成果会更珍惜。

这是数据复盘时得到的一个比较有趣的结论，所有用户体验的根源都是对人基本心理需求的分析。

🏆 榜单效应：好友比拼增加了游戏的可玩性和打开率，并会带来新关系链的建立。

人总有攀比心理，且攀比更多地发生在我们的关系链中。这种基于私域的攀比为游戏提供了更多无形的互动性、粘性和讨论度。意外的惊喜是，我们很开心看到用户主动用发笔记、评论等社区行为，扩充社区内关系链，增加上榜PK的趣味。

推荐阅读

（点击标题可跳转阅读）

如何巧用图形提高设计感

设计师总结怎么写，方法过于实用

微信黑暗模式来啦！这些UI细节需要注意~

关注『UI设计达人』

看更多精选UI设计文章

↓↓↓

好文章，我在看❤️

特别声明：本文为转载/投稿，仅代表该原作者观点。NESTIA仅提供信息发布平台。