恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
一窥到底,霸屏的H5怎么设计?
0.0°
2020-06-19 原创文章 教程 举报 1399 4 2 0

现在能引起大家共鸣的形式莫过于H5,H5可以承载的内容相当丰富,可以是带音乐视频的动画、好玩的小游戏、答题知识类竞赛等等

现在能引起大家共鸣,促动分享的活动形式莫过于H5、小程序、海报等。H5应该又是分享最多的形式,为什么会趋向于H5呢?其实也好理解,H5可以承载的内容相当丰富,可以是带音乐视频的动画、好玩的小游戏、答题知识类竞赛等等。相比小程序的好处就是没有任何门槛,分享方便不受任何平台限制。相比单图的海报来说,H5的形式可以丰富很多,好处也是显而易见。所以H5成为备受欢迎的设计开发形式,这也是为什么会做H5的原因。


设计背景

选定了孩子们喜欢的儿童节,那么大人们为啥都喜欢呢?因为这个节日特别容易勾起大人童年的回忆,谁都喜欢童年的感觉,想想都能变得年轻一点。还有这毕竟是大人的世界吗?大人玩才能玩转分享起来吗?之所以想设计这样一个活动,主要还是想带一波用户回流,完善节日情感化设计的形式,扩大品牌传播的声浪。



设计过程

抓取娃娃机给人带来的那种乐趣好像早已超越了年龄的界限,谁都觉得自己的是幸运儿,总能玩的乐此不疲。所以选用抓娃娃机作为渲染节日气氛的开头,很容易触发用户的代入感,引导用户转动遥感抓取自己的幸运球。如下图开始游戏的设计。




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

车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(南瓜车):贫穷限制了我的想象




实现方法

H5的设计可以天马行空,但最后都要落到实现层面,设计的再好,实现不了也是全白搭。团队的前端开发没有用我们传统的DIV+CSS结构来写,这样写太复杂了,而且嵌套的层级比较多。而是采用PixiJS框架来绘制整个页面,包括画面里面的动效都是一帧帧动效都是绘制出来,这样可以保证动画质量和运行效率。比如下面每个人物的动效,当然你会说没有动效不行吗?肯定是可以的,但就会显得单调很多,层次不够丰富。


腼腆有书生气的眼镜哥



一身运动天赋的肌肉男



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



收房租时尚包租婆



抛媚眼的后宫娘娘



暗送香波的美女



敞开心扉的女生



事无巨细的管家



天天宅在家里的女作家



酷的一笔的潮男



写在最后

做个简单的海报略显浅显,承载不了那么内容;策划个大型活动,动用的人力和财力太高;不妨尝试设计个霸屏的H5可以给用户传递不一样的视角。落地的品牌价值丝毫不逊色于其它形式, 这也是情感化设计的范畴,设计的声浪触发用户的心智模型,才能产生互动分享的行为,变相地要求设计师做出创新的层级。


文章由公众号  VV体验  原创

Powered by Froala Editor

更新:2020-06-19

收藏

4人已收藏

  • 19

    作品

  • 5

    粉丝

  • 6

    关注

  • 年终总结,畅想2021年的设计钱途
  • 面对甲方的修改,设计师如何管理好自己在工作中的情绪
  • 设计好产品的引爆点,就能集聚了一半的先发优势吗?
  • 漂亮小姐姐养成记,谁会关心设计背后都经历的故事呢?

    猜你喜欢

      2020-06-19 原创文章 教程 举报 1399 4 2 0

      一窥到底,霸屏的H5怎么设计?

      0.0°

      你确定要举报一窥到底,霸屏的H5怎么设计?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年06月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录