如何设计刷屏级H5?活动聚H5模板5招让你成为大牛!

一款火爆的H5,他的设计流程非常重要,所以一个H5设计要点有哪些呢?

鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


又到了

涨知识的时间啦


前几天

一条H5广告

犹如龙卷风般

刮入了小花的朋友圈

没看过的朋友

↓↓↓

鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


反正做人呢

最重要的是想开点啦

对自己好一点~


这周还有另外一个H5刷屏朋友圈


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


点开观看以后

每一步的发展方向小花都心里有数

直到最后

才深觉满满的套路


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


上面两个本周火爆H5

都是传播性比较明显的

能吸引发用户的

好奇、窥探等心理来传播

不管是形式上的还是内容上

还是风格上的都是很有创意的

同样,还有一个互动性的H5


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


人民日报结合当时的《战狼2》的热点

推出了一款互动性H5

通过上传照片更换军装的形式

勾起了人们窥探自己穿军装照片的欲望

然后大家纷纷转发朋友圈

紧跟爱国主题背景下的风潮


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


一个火爆的H5

它的设计流程非常重要

那么今天我们告诉大家

设计一个H5需要的

设计要点是哪些?


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


目前H5在设计方法上

可以笼统地划分为三大类型

互动广告派

互联网设计派

工具执行派

H5的设计部分

只是整个流程中的其中一环

作为设计师的我们

需要了解整个流程,贯穿始终


作为一个好的H5会告诉你

它都经历了哪些环节?

涉及到哪些因素?



一、了解需求,选好方向


每一个H5的设计都是建立在具体需求之上的,当你拿到需求是,需要先搞清楚做这个网站的目的是什么?每个项目追求的目的都不同。


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


腾讯通过“穿越故宫来看你”这个主题,出品了一支带有调侃和穿越特征的古装说唱类H5。最初的项目诉求才是最后决定作品面貌的关键因素。


二、确定表现形式


H5的表现形式目前已经非常多了,并且还在不断创新,我们究竟选什么样的表现形式好呢?

讲故事卖情怀?

强调功能陈述内容?

游戏


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


这是之前刷爆过朋友圈的吴亦凡系列H5作品,当预算充足时,项目有需要借助明星效应,我们可以采用拍摄视频并且制作特效合成的方式来执行项目。


三、设计风格、表现形式


比如,你选择了伪装朋友圈的形式的话,那么你就要去研究怎么做出更像朋友圈的页面,去研究微信内部的UI细节,特别强调临摹和还原。


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


从原型绘制、内容表达、版式设计、文字设计、到最后的动效声效设计,一个完整的H5不是单纯的视觉表现,还结合了听觉、交互这两大类。需要我们跳出传统式固有的设计框架,理解全新的媒介和方法。


四、开发实现效果图


很多人对H5制作望而却步,大多数都是因为卡在这一步,不清楚H5怎么生成的。其实,主要的方法有两种:

1、有代码实现:设计文件打包-->前端工程师开发-->作品上传服务-上线。

2、无代码实现:设计文件打包-->上传-H5设计工具网站-->作品同步在工具服务器的上线。


不管是上面哪一种,都需要设计师清楚,想要做出的页面效果,前段工程师才能确定是否能够实现出来。因此,这一步,沟通最重要。


五、数据成绩单反映设计效果


你设计的创意和作品的表现形式好不好,推广到不到位,时间点掌握得恰当不恰当...数据的成绩单很快就能够引导你接下来应该怎么调整战略和打法。


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,

鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,

上面是腾讯出品的H5移动页面用户报告,案例中详细归纳了目前H5网站在数据方面的特征。


鸟哥笔记,<a title='广告营销' target='_blank' href='/home/tag.html?id=616'>广告营销</a>,小花,

以上就是做好一个H5的5招,希望你可以做出爆款H5(手动微笑)


作者:小花

来源:你丫才美工(ID:Ymeigong)



————————————————————


活动聚(http://www.huodongju.com/),一款助您大幅降低开发与运营成本,实现场景化、精细化、数据化、自动化的专业H5游戏活动营销工具,助力中小微企业快速创建符合自身特点的互动营销游戏,实现快速拉新、留存、促活,提升用户转化的活动营销工具。应用场景支持:APP应用+H5+小程序+微信公众号。立即去体验:http://www.huodongju.com/Index/login

情人模板推荐

微信咨询

请扫码添加客服

微信公众号

请扫码关注公众号

帮助中心
返回顶部