最美H5 酷站欣赏 UI素材 专题 设计导航

【幕后】如何打造一个《奇妙的健身房》?

关联项目

南方+:奇妙健身房

为了迎接全民健身日,南方+新媒体实验室推出H5《奇妙的健身房》。这是一款互动丰富、画风清奇、全程高能、附有彩蛋收尾的小游戏产品。

如何做一个让用户有分享欲的H5?

最开始就是想做一款强互动、能激发用户分享欲的小游戏,强互动的小游戏其实还是比较容易想的,但激发用户分享真的难,因为同类产品层出不穷,至今大众已经审美疲劳,所以初始脚本就提出“是否能实现转发标题个性化”,期望让用户感受到“唯一性”,以此达到我们的产品目标。

初稿用户体验逻辑规划

H5通过选择姓氏、三关挑战、最后分享的紧密流程,力求做到全程和用户保持强粘度和高吸引力,让用户“玩得下去”。该小游戏的用户完成度较高,互动之强让人直呼“啥都好,就是有点费屏幕”。

如何突出喜剧效果?画风很重要

产品画风一改过去新媒体实验室制作精美、细节到位的惯性操作,用鬼畜搞笑的日和漫画风格描述健身房老头的经历。

参考日和漫画人物形象草图设计

在字体配色上,产品内个别文案采用七色渐变配色,炫目又略带土味的颜色既突出重点,又与整体的清奇画风呼应。

失败结果页面设计

除此之外,在配音上我们一开始就瞄准《奇妙的约会》,后面纠结过是否用DJ版的《卡路里》,但最后还是选择前者,因其演唱者是中年人,符合我们的人设感觉,歌词里有“哈哈哈哈哈”的魔性旋律,鬼畜画风搭配搞笑bgm,产品显得更加年轻、更加新奇,喜剧效果突出,两者结合的清奇画风符合社会人轻松一刻的需求。

让用户“玩得下去”,不是那么容易

有互动=增加用户停留的时间,但其实互动也不是留住用户的保障,在互动中要讲究节奏策略。

在三关挑战里,这个小游戏分别用快速点击、保持平衡、快速画圈的游戏互动帮主角通关,节奏上采用“快—慢—快”,是用户较舒适的推进方式。

游戏第二关互动页面设计

每一关卡通关与否都有对应的效果页面,“杠铃砸脚”“快到废手”“平衡王”“画圈圈”“动感超人”的页面根据每关胜负结果相应出现,相当于每个小节给用户“抛包袱”,减轻强互动体验的疲劳感。若是取得关卡胜利也能为用户带来获得感与成就感,推动游戏继续。在每个关卡进行的过程中,背景的路人会接连冒出“别偷懒”“挺住”等气泡对话,持续激励用户完成游戏,营造“真实地在健身房锻炼有人督促”的氛围,增强沉浸感,同时有利于提升用户游戏完成度。

“不烂尾”是我们最后的倔强

这个H5的点睛一笔是首尾呼应,彩蛋结局。

所谓“酒香也怕巷子深”,“好产品如何被看见”其实也是南方+一直以来不断实践的课题。该产品内容效果强大,但我们在如何把它推出去这一点下的功夫不比制作本身少。

这一次初版脚本就已经提出是否能根据用户姓氏个性化定制标题的想法,每位用户在游戏开始前填的姓氏,在通关后都能生成一个与姓氏押韵的分享标题。

个性化选择转发页面

此举一是让用户觉得“这个产品就是做给我的”,增加“与我有关”的陪伴感;

二来让用户通过获得陪伴感而愿意自发帮助推广传播,减少运营时间成本;

三则让更多人自发体验这个游戏,为了满足好奇心而实现高完成度的游戏体验,形成良性循环。

很多人最后来向制作人员询问“你们该不会是把百家姓全弄了一遍吧”,实不相瞒,是的。

但其实细节操作并没有大家想的那么细致,我们是如何操作最后的分享标题的呢?

首先在公安部公布的2019年“百家姓”拿出常用姓,再酌情增加生活中常见的姓氏,在此基础上,用韵尾分类(比如“ian”和“uan”,其实“uan”的发音顺序是“yu-i-an”,所以它们韵尾相同,分在一组),相对笼统的操作后共分出17个类别,作出17个押韵后缀(再次以“ian”和“uan”举例,“老__老__,完美曲线”,该类别的姓氏填入,都可以实现相对押韵)。

总的来说,这个H5表面轻松取巧,但其实下的功夫全面又扎实。下了全面功夫,满足所有用户各自的一个需求,这不是赔本买卖,而是大小通吃,因为谁都可以在这里娱乐之余找到与自己有关的信息,才能引发真正的“刷屏效应”。