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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
H5实战3 | 洞悉爆款H5的刷屏秘密
0.0°
2017-02-15 原创文章 经验/观点 举报 15142 245 223 24

这不仅是一篇经验,更是今年H5行业爆款H5刷屏秘密的浓缩精华,希望这份年终总结能给你更多权威的H5设计认知。

Image title


虽然我们都以刷屏为目标,但是一味瞎搞是无济于事的。

有没有什么可借鉴的干货,力争以最高效的方法打造最有效的品牌传播H5?

 

有!这份年终干货,为你解剖爆款H5背后三点可借鉴的价值:


  • 以目标用户为基准,给H5做详细定位的攻略
  • 常见的H5表现形式归纳,卖点设置的诀窍
  • 交互的择优取舍


落实好以下三步,你的H5也能呈现刷屏之势——


第一步:忌急躁,拟好目标定位,自然事到功倍

 

这跟平面设计需要提前画草图商榷预计效果一样,如果没拟好H5的目标定位,用户可能压根不感兴趣,品牌价值完全被掩盖,即便里面设计多么精妙,交互多么新颖。

Image title


这是今年四月份宝马发布的《该新闻已被BMW快速删除》H5,当时仅发布一小时,PV已经超过10万,在微信朋友圈掀起一夜刷屏狂潮。

 

为什么它能刷屏?细扒这个案例,不难发现跟有效的目标定位有密切联系,以产品、用户、价值三个维度分析:

 

  • 产品切入足够吸睛——H5主角定位在宝马新款M2上
  • 用户定位明确——瞄准年轻一代消费群体,以汽车轮胎冒烟、漂移、撞碎玻璃等新鲜形式增加吸引力
  • 明确展示出H5的价值——这个H5目的在于发布宝马的预售信息,预售“抢”的动作恰到好处地对应宝马在H5里狂飙

 

意思就是说,我们需要站在目标用户的基础上,以他们的口味去结合品牌价值,拟定整个H5。


最基本需要明确的定位是——


Image title


第二步:选择合适的H5表现形式和传播卖点


现在H5表现形式实在太多了,比如利用iH5的底层交互组件,实现出的交互形式就有上百种,在选择的分岔路口,我们该怎样拿捏住合适的表现形式呢?

 

根据传播目的确定H5的表现形式,这是最直观也是最有效的方法。


下面以淘宝、腾讯、杜蕾斯等品牌案例为例,根据传播目的整合出6种推荐的H5表现形式:


Image title

Image title

Image title

Image title

Image title

Image title


传播卖点可以说成是H5的魂,每个刷屏级的H5都有自己独特的卖点——


比如卖点可以是视觉冲击,如淘宝的《造物节ZAO》、《穿越宇宙的邀请函》


Image title


亦或是魔性、烧脑的内容,如最近刚刷完屏的《薛之谦史上最疯狂的广告》、《活口》


Image title


也可以是病毒式测试,如《柏拉图性格测试》(切忌诱导分享,有封杀的风险)


Image title

只要拿捏准传播卖点,用户就很很容易产生社交货币的谈资,促成规模式的传播。


总的来说,要么注重技术创意,以技术创意实现视觉冲击;要么以利益驱动或者结果具有炫耀性的游戏或者测试。


这些手段都能有效地为H5带来更大流量。


第三步:择优取舍交互方式

 

假如你有关注iH5官方网站最近更新的案例,你会惊讶地发现两个案例即使同样用了全景功能,表现出来的形式却截然不同:


Image title


这都得益于它完整的底层交互组件,即使是同一个交互功能也能分化出好几种不同的交互方式。


现在常见的交互功能归纳如下:


Image title


以交互视频功能为例,现在常用的交互方式,大致分为三类:基础交互、简单交互、复杂交互。


(1)基础交互


Image title


以腾讯发布的《Next Idea x 故宫》为楷模,里面包含的交互只是点击和滑动,但依然是依靠内容引起了刷屏的狂欢。


在这个H5火了后,相继出现了很多类似的热门案例,比如百度的《出来种太阳,迟早要还的》和华为的《老佛爷圆明园直播》。


Image title


这类方式是行得通的,有目的性地弱化了交互,强化内容,以内容代替大部分想要表达的东西。


(2)简单交互


Image title


前几天微信又被刷屏了,腾讯动漫发布的《薛之谦史上最疯狂的广告》H5,仿佛又看到了《吴亦凡入伍》H5的影子。进入页面,是模拟的薛之谦微博界面,有文字有配图,滑动屏幕看文字内容时,就开始进入富含搞笑成分的视频。

 

这类交互方式辨别度很高,通常会有一套固定的模式——


  • 模拟打电话
  • 模拟新闻页面
  • 模拟微信朋友圈
  • 模拟微博 

(3)复杂交互



Image title


这里推荐大家看看《Burberry互动购物体验》(点击看效果)H5,熟悉AE的朋友看到这个可能会有所顿悟,这不就是在视频基础上加上数秒的追踪帧数吗?原理是一样的,可能这种形式才真正意义上的交互视频。

 

这类复杂交互要求会相对高很多,除了解决技术层面的复杂交互操作,还需要实现交互的流畅,而流畅度有很大程度关乎于特效。


这就意味着我们还得对H5特效有一定的拿捏,最有效的方法就是利用好基础动效。

Image title

交互方式只有被运用恰当,才能发挥出其应有的效果,这需要取舍,选择出最能展示品牌价值、最能吸引住用户眼球的交互方式,切忌盲目跟风。不契合实际,一味追求交互的高大上可能会让你的H5胎死腹中。

 

我们不仅要模仿爆款H5的表面,更需要看本质。揣摩其背后蕴含的套路,理性地摸透H5策划到落地的全过程,按照自己的思路去执行,想必这会更有戏。

 

H5是国内广告的未来,相信明年会有越来越多创意H5在微信刷屏,这份年终干货总结出的三个步骤,希望能给你指明创作道路,早日做出属于自己的爆款H5。


2016.11.28

尼姑拉丝赵四


更新:2017-02-15

收藏

245人已收藏

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者。

  • 27

    作品

  • 2292

    粉丝

  • 8

    关注

  • 震惊!这个H5居然是在线聊天室!(内附完整教程)
  • 网易的爆款H5,手把手教你做!
  • 3个小时150万UV!网易的童年 H5刷屏了!
  • 视觉逼格指南:几何抽象风格神器

    猜你喜欢

      2017-02-15 原创文章 经验/观点 举报 15142 245 223 24

      H5实战3 | 洞悉爆款H5的刷屏秘密

      0.0°

      你确定要举报H5实战3 | 洞悉爆款H5的刷屏秘密

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2016年11月28日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      223
      245
      24

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

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

      登录

      手机号

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

      登录
      第三方账号登录