H5三个设计方向的自我定位

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

如今,移动端H5如雨后春笋般迅速发展花样繁多,无论是宣传产品、内容介绍、新闻推广都会想方设法搞套H5出来。那么如何在众多H5中脱颖而出?如何使手上的资源发挥最大化?如何扬长避短,做出吸睛的H5?都是摆在我们面前的问题。

在我看来移动端H5可以向三个方向进行设计定位:内容方向、交互方向和视觉方向。

  • 1、内容方向是指介绍内容为主的H5,从用户情感出发,基于大众所熟知和想了解的方面入手。如节日类、信息广告类、电视影片类等。
  • 2、交互方向是指注重与用户建立丰富的互动体验,以用户操作为主要卖点。如游戏类、广告类。
  • 3、视觉方向是指以画面为主的H5,这里指的不单单是好看,而是把重点放在画面执行上,画面更有丰富的动效,做到非常强力视觉冲击力。
  • 设计策划占到以上3方向的一种为“优”,具备两种为“精”,有三种为“神”。但是,重要的是每个方向需要做到极致。我认为目前能占两种的H5还是有一些的,不过具备三种的几乎是不可能。因为想要在这三方向都顾及到的话,最致命缺陷就是文件量太大,目前的带宽和设备的限制对过大的H5传播有着很大影响。

一、内容方向的H5

首先介绍下内容方向的优秀H5。重点放在内容方面要引人入胜,能够吸引特定用户,把H5有目标、有目的的去投放。

腾讯网《活着》项目组策划的《活在此时》,充分透析了北漂一天的忙碌生活,直击为了生活而奋斗着的年轻人内心,主题震撼,内容充实,闻者心动,见者伤感。

e45ee7ce7e88149af8dd32b27f9512ce

为抗战胜利70周年举行盛大阅兵仪式而策划的《阅兵手册》,内容上充分展示了各个方阵的信息,在看阅兵直播的同时,手持这款H5,既长见识还能在人前卖弄。

7d0665438e81d8eceb98c1e31fca80c1

腾讯新闻发布的系列H5《传统节气》。随着人们开始越来越关注传统文化的传承,二十四节气的由来、习俗等知识,越来越多的人想深入了解。实时推出《传统节气》,既满足了此类人群的需求,又弘扬了传统文化知识。

edd73ced2021173eda815a1d32b6d7b7

二、交互方向的H5

交互方向的H5,重点放在和用户的交互体验方面,让用户有很强的参与感。这就需要在互动过程中要做到完美的体验,吸引用户一步一步按照设计师思路看完H5。

交互方向H5一大类是小游戏,早期的围住神经猫、虐心的小鸟等都是火遍朋友圈。腾讯新闻出品《俄罗斯阅兵—抢答1分钟》参与互动答题,再配上风格独特的手绘图案,可以说是H5中的精品。

a2b1e6813eec96052c81d40ba16e8c59

一夜爆火的《吴亦凡即将入伍》游戏推送广告,创新的交互方式让人眼前一亮。整个H5都会让观众惊奇的看到最后。

d72d187df41e10ea7d9fcdc7f5909205

《万能时装屋》和《哆啦A梦道具专卖店》,都是可以选择不同的元素,自由组合,最终达到不错的广告效果。

《万能时装屋》是用户在不同的部位选择自己喜欢的装饰,最后把选择的装饰生成一个完整的形象,电商就可以推荐用户一些喜欢的产品,而且可以拼出搞笑、无厘头的形象,增加H5应用趣味。

《哆啦A梦道具专卖店》借用哆啦A梦神奇道具的组合,也是生成实际存在的产品,推送给用户,不免让大家觉得非常有趣神奇。

fad6f4e614a212e80c67249a666d2b09

三、视觉方向的H5

视觉方向的H5拥有着炫酷的画面、华丽的动效以及特点鲜明的手绘,让人印象深刻,过目不忘。

说到视觉表现力,不得不提的是大众点评出过一系列H5,无论是画面效果还是夸张的动效,都能给人留下深刻的印象,但是对于内容和交互上就没有那么深入人心了。

0a8005f5594bd67041f88c6196192646

《AKQA Winterlands》借势圣诞节,让用户进入水晶球,环视3D场景,让用户有身在其中的感觉,在视觉和互动上达到双赢。

38b3eff8baf56627478ec76a704e9b52

96a3be3cf272e017046d1b2674a52bd3

 

a2ef406e2c2351e0b9e80029c909242d

了解策划H5的三个方向,不管是编辑、设计师或是开发工程师都可以根据自身的特点去策划H5,编辑如果觉得自己能把内容做的引人入胜,就可以在内容方向下功夫。设计师自然需要在交互上视觉上发挥最大的能力。

尽量在某一方向上做到最优的同时,兼顾其他两方向。定会做出精品H5。

来源:腾讯网UED

您的赞赏,是对我创作的最大鼓励。

评论( 0

登录后参与评论
加载中