搜索

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

Html5从入门到精通 1分钟深度掌握H5动效!

跳转楼层 0 702
MIN酱
x0

发表于 2016-10-21 13:29:45 | 显示全部楼层 |阅读模式
如今的消费者,不管老少几乎都是手机不离手,H5也成了各大公司重要的营销工具。那么接下来,MIN酱将从动效的作用、类型,来为大家介绍H5动效,让大家Html5从入门到精通,学好H5营销设计!
H5相对于普通的纸媒工具来说,传播上存在一定的短板,问题如下:

Html5从入门到精通1.png


针对以上3个问题短板,MIN酱给大家提供了解决思路的方向:


Html5从入门到精通2.png


H5设计营销需要对动效有一定的要求。


一、动效的作用

1.引导用户进行点击、翻页等动作

Html5从入门到精通3.gif

Html5从入门到精通4.png

2.吸引用户并让其做长时间的视觉停留

Html5从入门到精通5.gif

Html5从入门到精通6.gif

3.通过一些充满趣味的特效,让用户的体验变得真正愉快以及难忘
Html5从入门到精通7.gif
二、动态的类型

在H5内容展示中常见的动效有:淡入淡出、翻转、旋转、缩放等。主要分为基础特效、招牌特效、高难度动效。

1.基础特效

基础特效主要分为:
指向性动效——H5元素的出现、滑动、弹出等
空间展示动效——页面的切换、翻动和放大。

Html5从入门到精通8.png

PS:以上提到的特效在MAKA编辑器中都可以体验到哦~另MAKA编辑器最近新上线了翻页动态效果功能,为你打造更炫酷的H5作品。
基础动效最重要的目的是要让用户感到毫无负担,顺应自然规律,此类动效无需做到夺人眼球,而是要让动效舒服流畅。


2.招牌特效

招牌动效是基于基本动作有选择性的差异化展现,就像一个个有个性的Pose,让用户眼前一亮,建立对界面的独特印象。

Html5从入门到精通9.gif

这类动效目的是主要为了加深用户印象,但需要注意夸张个性化的表现,以及对于动效节奏的把控。

3.高难度动效

高难度动效主要的目的是为了加深用户印象。如果运用在H5中会很酷很炫,可以让用户做长时间的视觉停留,但是也是起到锦上添花、画龙点睛的作用,需要根据切实需要来进行设计。


Html5从入门到精通10.gif

以上是MIN酱今天给大家分享的,关于H5动效的一些基本认识,希望可以为大家学习Html5从入门到精通时提供一些帮助。好辣,今天的干货就到这啦,下期债见!