UI/UE 产品体验日记.03 —— 趣味功能、活动、小测试和游戏的设计

本次主要收集的是，各APP的趣味功能、活动、小游戏和测试的设计，因为收集时间跨度比较久可能有些活动已经下线了，就分享出来拓展下设计灵感。

体验目录：

01.【QQ音乐】M-PETS功能

02.【LOFTER】LOFTER星球居民卡

03.【LOFTER】CP宇宙触发器

04.【LOFTER】幻想学院返校日

05.【淘宝】小游戏火爆连连消

06.【吃货笔记】免费奶茶活动

07.【网易云音乐】音乐罐子功能

08.【网易云音乐】测一测人格深处哲学观

09.【支付宝】语言技能挑战赛

10.【支付宝】支付宝地下室

01.【QQ音乐】M-PETS功能

QQ音乐有个功能可以云养宠物，在“我的”右上方的帐篷图标点击进入领取专属宠物，系统会随机选一只动物作为用户的宠物，用户也可重选自己喜欢的动物。领取宠物后，它会根据用户的歌单与用户聊天或者推荐歌曲，用户听歌的时长将转换为音符，可兑换道具、食物、装扮、装修小窝。使用道具可让宠物去看演出，激活旅行日记图片。宠物会在底部播放器、播放页、个人主页出现，在旁边陪用户一起听歌，在“我的”右上方的帐篷图标也会变成宠物图标。当宠物出门看演出，宠物不会出现在底部播放器、播放页，宠物图标也变回帐篷图标。

02.【LOFTER】LOFTER星球居民卡

LOFTER APP是一个分享创作、生活、兴趣等内容的社区分享平台。搜索"居民卡"、点击Banner、点击右下角弹窗 都可进入活动，注册过的用户都可以参与活动，用户进入星球后可以捏自己的形象，之后做测试题，做完五道测试题后系统就会派发专属的居民卡，结果不满意还可以再测一次。居民卡发放让用户更有归属感，提升留存度。设计上用了扁平几何插画又带点酸性，符合时下年轻人喜爱同时抓住眼球。

03.【LOFTER】CP宇宙触发器

搜索“CP宇宙触发器”或点击Banner进入活动，每次进去都会显示不同的穿梭道具。输入喜爱的CP名，左右滑动选择穿梭道具，抵达不同的宇宙，长按任意位置即可得到，抵达不同宇宙生成的CP人设，还有CP的对话模拟。

整体设计插画与弥散风结合，颜色搭配清新透气，“穿梭道具”以噪点肌理插画风格为主，根据不同道具名称进行设计绘制。

04.【LOFTER】幻想学院返校日

搜索“幻想学院返校日”或点击Banner进入活动，进入活动左右滑动选择不同学院，点击确定后填写名称和添加形象，设定角色属性，选择角色标签，填写角色个性，生成角色身份卡，获得学院日常查看。

整体设计根据三个学院的名称延展风格设计进行区分，“鎏金学院”偏魔幻风带有蒸汽、魔法等元素，颜色以暗金色与褐色为主。“梧桐学院”也是偏魔幻风，带有魔法、时间等元素，颜色以金色和深蓝色搭配。“太虚学院”翩新国潮风，带有祥云、古建筑等元素，颜色以浅蓝、粉紫、粉红搭配为主。三个学院虽然风格各异，通过界面布局、字体、按钮等元素，使整体观感保持一致。

05.【淘宝】小游戏火爆连连消

淘宝APP有很多小游戏可供用户游玩，闯关成功或完成以获得优惠奖励。其中火爆连连消与游戏名字不同的界面风格让人眼前一亮，游戏插画以渐变矢量风格为主同时带点肌理，道具则以描边风格进行，设计整体有清新治愈感，每个关卡地图都是一幅完整插画，动效与道具搭配设计都既可爱又丝滑，同时有很多任务可以让用户持续游玩。

06.【吃货笔记】免费奶茶活动

活动当时从首页和我的点击进入，进入后需要选择想领取的奶茶，因为我晚发现另外两个品牌都被领完了。领取到心仪的奶茶后，需要做任务增加ml数，当ml数到达指定数量后，即可领取优惠。通过任务，让用户浏览各板块产生兴趣和流量，同时分享邀请吸引更多用户注册。与APP整体风格统一的大圆角、粗线条、3D拟物图标搭配丰富的色彩，还有奶茶杯上不同的可爱表情与文案相结合，使整个活动变得更有趣新鲜。

07.【网易云音乐】音乐罐子功能

音乐罐子功能感觉有点像以前的漂流瓶，设计以极光风格为主，从我的音乐应用板块点击进入，一进去界面背景就是海面，每晚21:00更新三个陌生人的罐子都在海面上，给用户倾听。上滑查看我的罐子，背景为海底罐子都放在架子上。自己制作罐子进行分享，选择想分享的音乐，跳转输入想说的话，有四种显示效果供用户选择，点击做好了开始准备罐子。准备音乐罐子时的等待动效，让制作音乐罐子更有仪式感，准备完成后即可分享或匿名投递音乐罐子。

08.【网易云音乐】测一测人格深处哲学观

整体设计运用渐变矢量插画风格，我个人非常喜欢进入测试的过度动效，使用户更有代入感进行测试。每个画面都克制又简约不会抢走题目的关注度，又都跟题目意思贴合，同时都有过渡动效跟插画完美融合。大家可以在网易云搜索去体验下。

09.【支付宝】语言技能挑战赛

语言技能挑战赛活动当时是从banner里点击发现的，进入后发现是四种语言的挑战，左右滑动卡片选择挑战的语言。还按每种语言不同的风格感觉，设计了对应的3D人物，使整体页面看上去生动眼前一亮，选择卡片的设计背景绘制了，常用该语言的地区，也把该语言常用词也融入背景。

10.【支付宝】支付宝地下室

支付宝首页滑到底部上滑的地下室，可记录当天心情，一共七个心情可选，设计以可爱表情为主。点击 “日历” 可看自己当月和以往的心情变化。点击 “FM电台” 也可听电台入眠，选择音乐库每个主题配有插画，与音乐相搭配，使用户更加治愈。新增“星球”功能，可查看其他用户的每日心情，点击气泡可选择是否有共鸣。地下室比之前的设计与支付宝风格更接近了，板块的各功能整体风格也更为统一与简洁。