搜索

论坛版块 MAKA教程 H5制作技巧

产品推广零效果?因为你的H5页面设计有误区!

跳转楼层 0 243
MIN酱
x0

发表于 2016-12-8 16:48:56 | 显示全部楼层 |阅读模式
为了方便想参与H5制作的普通用户,越来越多的制作平台雨后春笋般成长起来。虽然这些制作工具标榜说代码小白设计菜鸟都可以使用,但我们都知道视觉和创意是一个作品能够产生高传播的重要标准,为了达到这个标准,相信大家都会有详细学习H5页面设计的欲望,这里MIN酱就给大家分析一下H5页面的设计思路。

首先我们要明确制作H5页面的目的是什么?

从设计目的来看, H5页主要有四大类型:活动运营、品牌宣传、产品介绍、总结报告

一、活动运营型

为活动运营做推广而打造的H5页面是最常见的讲究时效性推广页面第一大追求就是高传播,因此我们内容的设计需要注重高质量、强互动、还要有从H5到转化落地的引流路线设计

案例:电影《狂怒》的推广页
高质量:富有质感的旧票根、忽闪的霓虹灯,幽默的动画与音效,复古拟物风格的视觉设计让人眼前一亮。
强互动:围绕“选择”这个品牌关键词,用引人入胜的测试题让用户把人生当作大片来选择引流:最后一道选择题引出“大众点评选座看电影”,一键直达App购票页面。

1.png

二、品牌宣传型

品牌宣传型H5页面更倾向于品牌形象塑造在设计上需要运用符合品牌调性的视觉语言,让用户对品牌留下深刻印象。

案例:《首草先生的情书》
设计上采用黑白色调,简洁的版面设计,配以动画和舒缓的钢琴曲渲染出唯美优雅的气氛以一位男士的口吻娓娓道来对妻子的爱与愧疚,最后引出“首草——滋阴圣品,爱妻首选”的宣传语。首草”这个全新的高端养生草药品牌,打出一手感情牌,塑造产品是向爱人表达爱的最好礼物的品牌形象。

图片1.png

三、产品介绍型

这一类的H5多采用H5的互动技术优势尽情展示产品特性,刺激用户购买欲望

案例:LEXUS NX刻划锋芒
充满质感的建模配上细致对的光效营造出高端酷炫的视觉风格。手指跟随光的指引切割画面揭开这个H5主体的神秘面纱,通过合理的交互引导带领用户一起感受产品的7大特性很好地将产品特色植入到用户心中。

图片2.png

四、总结报告型

总结报告本来是一个很枯燥无味的东西,但是自从运用了H5技术,多彩的视觉、活泼的音乐、简单的交互令原本乏味的总结报告有趣生动了起来也更好地扩大了目标读者的范围。

案例:《京东的十大任性》
使用时下流行的扁平风插画横屏页面多彩素材的拼贴,概括地讲述了京东在2014年的十大成就不同页面间通过手指滑动实现流畅的视差滚动效果一口气看完后大概就了解2014年京东有哪些新成绩再次塑造了品牌的形象口碑。

图片3.png

在明确了这个H5的功能是什么之后,就需要考虑到具体的应用场景和目标传播对象,从用户角度出发去思考什么样的页面是用户想要的。我们的一切视觉形式设计都要服务于这个功能目的。以下列举几种常见的H5页面表现形式:

一、简单图文

简单图文是最典型而又最普通设计形式。“图”可以是照片、插画、动态图等。这种形式基本没有复杂的交互操作,只有类似于精美幻灯片一样的图文排版,高传播依赖的是图文内容本身的高质量

案例1:《滴滴打车》
这个案例采用黑白照片做背景,配合简单的文字故事,突出滴滴的品牌橙色。文字呈现渐隐浮现的动效除了翻页没有其他互动,能够让观众聚焦于内容上的真情故事,塑造品牌的正能量形象。

图片4.png

案例2:《从此看尽中国人的名与利》
当然也有在图片信息上做文章的H5。微信的这个专题页,每页都是人民币风景局部放大图,足够吸引眼球。在熟悉的人民币图案上加入微动态进行细腻刻画,配合发人深省的文案,在推广微信红包的浓厚金钱意味中,同时呼吁人们重新审视人情与名利的奥义。

图片5.png

二、礼物贺卡类

每个人都喜欢收到礼物,所以礼物形态的H5是非常能提升用户好感度潜移默化地达到品牌宣传目的的设计。既然是礼物,创意和心意都是重要的加分项。

案例1:《AKQA Winterlands》
移动手机,镜头从水晶球外不断推进直至走进水晶球的微观世界。通过手机环顾四周,可以360度欣赏水晶球全景,摇一摇雪花便漫天飘洒。这个H5页面使用了重力感应、3D等技术,给用户带来了完美的互动体验如果配合上祝福文字并分享给朋友,相信一定会惊艳到对方

图片6.png

案例2《我的印象笔记》
印象笔记通过公众号引导用户对其发送语音消息,然后把这条祝福语音结合中国风动画产出一张独一无二的新年语音贺卡这个H5的整体色调也是以印象笔记的品牌色为主,可以达到良好的品牌植入效果。

图片7.png

三、测试评分类

利用用户好奇心的测试评分类H5也是屡见不鲜了只要问题有点让人捉摸不透的意味,辅以出彩的视觉和文案,最后来一个貌似合理的答案,一个足够刺激用户分享的H5就完成了。

案例:电影《一步之遥》
视觉设计依旧出彩,开脑洞的创意和动画设计令人叫绝。延续了怀旧大字报风格,字体、文案、装饰元素等细节处理也十分用心。问答形式的H5页面能做到这个份上也是蛮拼的。

图片8.png

明确设计目的、针对目标用户完成设计表现形式的选择定向之后,我们就可以着手完成自己的H5了!

如果你对H5页面设计还存在疑问,欢迎聆听MAKA的H5页面设计课程!
课程直播间直达链接:
http://m.qlchat.com/live/290000097038048.htm


图片9.png