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

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

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

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

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

一、内容方向的H5

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

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

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

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

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

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

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

二、交互方向的H5

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

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

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

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

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

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

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

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

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

三、视觉方向的H5

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

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

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

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

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

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

 

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

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

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

来源:腾讯网UED

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30199/

(0)
CatherineCatherine
上一篇 2017-05-27 11:58
下一篇 2017-05-27 13:52

相关推荐

  • 58内部方法!一个更适合产品迭代的卡片创意法

    58UXD:交互设计 师常常需要进行迭代设计,在已有的产品框架上发现问题,优化体验,更好地达成产品目标。

    2017-08-25
  • 一个应届的交互设计毕业生应该具备哪些能力?

    作者:马力 @ 可能性与大设计   ( 上图来自Elizabeth Bacon ) 首先说,很多专业的同学都可以做交互设计(还有视觉设计,产品设计等等),既包括设计相关专业,如工业设计、建筑设计、园林设计等,也包括完全和设…

    交互专题 2017-08-07
  • H5时代的多行文本框

    说起输入框,大家都耳熟能详了,今天跟大家谈一谈H5时代的多行输入框!首先一起回顾下输入框在PC端的应用:

    2017-06-04
  • UE网国内首发:Axure APP:Axshare APP下载地址非google play

    很多童鞋反应googleplay下载不下来,我们发布在 UE社区 以后各种新的东东想第一时间知道欢迎安装我们的UE小组APP 请需要的同学尝鲜下载。 http://www.iamue.cn/read.php?tid=16&fid=2 不过阿西这里要提醒下,这…

    2015-05-25
  • 腾讯干货!从四个方面帮你做好移动页面性能优化

    随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情。

    2017-05-27
  • 交互设计前期分析(一)

    在以前还是交互设计师新手时,总会遇到这种情况,给出了一份方案,被产品经理驳回:“虽然能用,但是不够好,要不要参考其他竞品再想想。”接着再东看看西看看,接着给出第二版方案,仍然被说缺了点什么,于是一版接一版地改,最后勉强定了一个差不多的方案。为什么会导致这样的情况呢?今天我们来说第一个存在的原因。如果做交互设计,没有理解产品的业务需求,那么做出来的设计就算是美观、漂亮,也不能成为好的设计,因为没有实现业务诉求。而且,对业务诉求的分析,会影...

    2018-04-17
  • 2014年APP分类排行

    纵观全年,在APP应用领域有四大类发展最为迅速,分别是社交、支付、导航以及美化软件。此外,打车软件则是在2014年一新兴产品,该类软件的推出填补了APP领域的一项空白,同时也是用户的一大刚需,在很短时间内就被…

    2015-01-13
  • 这个是很多人找交互设计文档的写作方法和模板

    文章来源与腾讯CDC 作者是yoyo 前言:最近准备做一个交互设计文档的分享,但是一直没有时间整理好keynote,这里先分享一个设计文档模版,以及模版中每个元素的使用理由与方法。之后的设计文档分享中,会加入更多的…

    2015-08-11
  • 订单流程研究之提交订单

    在上一篇笔者有提到,平台不一定都提供货到付款服务,因此京东、唯品会和亚马逊在提交订单时需要选择支付方式,而淘宝天猫则是在提交订单之后才需要选择支付方式。提交订单之后,每种类型的订单可支持的操作也就不一样了。

    2017-05-31
  • 【用户体验】百度贴吧体验升级背后的故事,用户洞察与交互升级

    Alias工业设计点击关注 和工业设计做朋友关注作者:百度UXC随着产品的发展和用户群体的演变,用户对产品的认知也在发生变化,当用户认知和产品形象发生偏差时,体验升级就势在必行了。而用户对产品的认知大概体现在视觉感受(品牌形象)和使用感受(交互操作)上。对此我们从用户出发寻找设计上的突破口。洞察用户让设计有的放矢视觉感受对于大多数人是一种难以言说的东西,难以通过简单的方式得到答案。面对这个问题,我们选择迎难而上,通过精巧的实验、可视化的...

    2018-03-03