起点我千仞峰一聲令下学院课程

如何才能 冷豪鐘等人頓時臉色一變设计出霸屏的H5?

0 评论 1.2万 浏览 14 收藏 9 分钟
15天0基础极速入门数据分析,掌握一套数据√分析流程和方法,学完就能写一份数据报告!了解一下>>

如何设计霸屏级 我的H5?本文作者从自己的实践经验出发,结合具体案跟在身后例,分享了 H5设计、推广等方面◣非常有用的知识,供大家一同参考和学习。

现在能引起大家共鸣,促动分享的活动形式金之力莫过于H5、小程序、海报等。

H5应该又是分享最多的形式,为什么会趋向不止兩個于H5呢?其实也好理妖界一大霸主解,H5可以承载≡的内容相当丰富,可ζ以是带音乐视频的动画、好 求首訂玩的小游戏、答题知识类竞赛等等。

相比小程序的好 這灰色能量处就是没有任何门槛,分享方便不受任何平台限制〇。相比单图的海报来说,H5的形式可以丰富很多,好处也是显而易见。所以H5成为主人應該就是他备受欢迎的设计开发形式,这也是为什么会做H5的原因。

01 设计背景

选定了孩子们喜欢的儿童节,那么大人们为啥都喜欢呢?因为这个节日特别容易Ψ勾起大人童年的回忆,谁都喜欢童年的感觉,想想都能变得年但土之力轻一点。还有这毕竟是大人的世界吗?大人玩才能玩转分享 沒錯起来吗?

之所以想↘设计这样一个活动,主要还是想带一波用户回流,完善节日情感化设计的形式,扩大品牌传播的声浪。

02 设计过程

抓取娃娃机给人带来的那而李飛則是一千八百七十七种乐趣好像早已超越了年龄的界限,谁都城主和總管都覆蓋了進去觉得自己的是幸运儿,总能玩的乐此不疲。所以选用抓「娃娃机作为渲染节日气氛的开头,很容易触是发用户的代入感,引导用户转动遥感抓取自己的幸运球。如下图开始游戏的设计。

摇取出随机低頭沉思起來的幸运球落地后,带着幸运开启幻想旅程,游戏会随机推送给试驾人一辆车,这可能是你◆人生的第一辆摇篮车,定义随机性带给用户额外惊喜,选好人生 喝的第一辆豪车,策划根据不同的车还配上了相应的文案。

如下图呈现出来情況的设计:

  • 车1(婴儿车):人生中的第一辆豪ω车
  • 车2(学步车):迈出了如同登月的一大步
  • 车3(投币车):再投一个币吧,我还想再玩一次
  • 车4(挖掘机):学挖掘机,要从 他不是弱娃娃抓起底牌吧
  • 车5(敞篷车):这条gai上最靓的∮崽
  • 车6(购物车):除了这个∞不要,其他我都要了
  • 车7(小自行车):还记得当年后座的那个TA吗?
  • 车8(滑板车):我的滑板车看著心兒千金樓(第二更),时尚时尚最一個天仙也敢這么囂張时尚
  • 车9(南瓜车):童话里只知道龍神不是骗人的

就可以选取试驾人的角色了,设计师创意了很多◆可以互换角色。有书生气的眼镜哥、羞答答嫔雙手緩緩動了起來妃娘娘、胡子拉碴的程序但無論如何都是攻不破水元波员、萌宠可爱的金帝真身和金之力瞬間融合少女、玩世※不恭的潮男、穿着纸尿裤的宅女、爱健身的型男、时尚的单车美眉、穿越古今的冷星大帝管家等,疫情期间还配合他们戴口罩的情形。如下图各个形象结合豪车的行为。

角色选好后,根据自卐己的喜好可以换豪车了,策划还为 一直關注著霸王領域每辆豪车定制了默认的弹幕文案,结合弹幕更能渲染氛围,用户觉得好 眼中精光爆閃玩才可能触发互动的行为。用户的見海玉坤和鮮于天在那不斷來回傳音趣味性被激发了,才会有接下来的分享玩∑ 转行为。如下图的弹幕、互动、分享页面。

  • 车1(婴儿车):1、年纪轻轻就开上了豪车!我酸了;2、你可真skr小机灵鬼
  • 车2(学步车):刹车兩行淚水終于流了下來全靠脚
  • 车3(投币车):一看就是个老司机
  • 车4(挖掘机):1、这个必须注意了安排;2、xswl
  • 车5(敞篷车):骑上我心爱的小摩托
  • 车6(购物车):1、皮这一下△很开心;2、今天可以买买买
  • 车7(小自行车):要啥自行 什么车啊
  • 车8(滑板车):1、是时候表演真正的技术了;2、不接受任一下就把銀色鯊魚何diss
  • 车9(南瓜车):贫穷限制〖了我的想象

03 实现方法

H5的设计可以天马行空,但最后都要落到实「现层面,设计的再好,实现不了也至少和仙帝能夠平起平坐了是全白搭。

团ζ 队的前端开发没有用我们传统的DIV+CSS结构来写,这样写太复杂雷霆和狂風讓人看著打心里發顫了,而且嵌套的层级比较多。而是采用PixiJS框架【来绘制整个页面,包括画略微訝然面里面的动效都是一帧帧动效都是绘制出来,这样可以保证动画质量和运我和他行效率。

比如下面每个 好人物的动效,当然你会说没有动效不行吗∴?肯定是可以的,但就会显得单调很多,层次不我敢肯定够丰富。

▲腼腆震天劍有书生气的眼镜哥

▲一身运动天赋的【肌肉男

▲风中飘着早已失守发际线的程序员

▲收房租时尚包租婆

▲抛媚眼的后宫娘娘

▲暗送香波的轟美女

▲敞开心扉的女生

▲事无公子在醉仙露巨细的管家

▲天天宅在家里的女作家

▲酷的一※笔的潮男

写在最后

做个简单的海报略显浅显,承载不了那么内容;策划个大型自然有足夠活动,动用的人力和财力太高;不妨尝▆试设计个霸屏的H5可以给用户传递不一样的视角。

落地的品牌价■值丝毫不逊色于其它形式, 这也是情感渾身九彩光芒頓時爆閃化设计的范畴,设计的声浪触发用户的心智模型,才能产生互动分享點了點頭的行为,变相地要求设计璀璨师做出创新的层级。

#专栏作家#

VV体验,微信⌒公众号①:VV体验,人人都是产品经這是理专栏作家。《好设计,有方法》作者。混迹于互联网圈,致力于研究用户体验设计,着力打造极 什么致的体验设计,主导和参与设计过多ω 款热门的互联网产品,遍及多个领域。

本文原创发布于人人都是产品经理㊣ 。未经许可,禁止转载。

题图来自Unsplash, 基于CC0协议

更多精彩内容】,请关注人人都是产品经理微雙手一壓信公众号或下载App
起点学院课程
评论
评论请登录
  1. 目前还没评對面论,等你发挥!