超赞的刷屏级H5排版以及动效
如果细心地观察那些阅读转发破万的H5,它们除了本身极具特色的创意之外,排版与动效功能的应用也是恰到好处。所以今天我们就分别从【排版】、【动效】两方面来给大家阐释,如何让自己创作的H5更具传播性。
Part 1 排版篇
生长在移动端的H5广告相较于其他广告,充分地暴露了屏幕小、层级深、较难在保持内容统一性的前提下包含众多且交互复杂东西等缺点,也因此可能会影响用户在阅览H5时对有效信息的获取能力。所以,利用设计在最短的时间内引导用户接收到有效信息变得更加重要。
那么,怎样才能更有效地引导用户接受到那些有效信息呢? 通过排版!
版面是基础,先确定版面的布局框架,再考虑配色,字体…
优秀的版面设计,不仅在视觉上能起到正确引导用户的作用,同时也能明确信息主次,使有效信息达到最优的传播。
版面在H5设计中的作用:
1、不同图文信息的有序展示,在视觉上起到一定引导作用,通过版面大小和前后复叠关系明确展示信息的主次,视觉表达更加合理。
2、交互性是移动端H5设计中必须考虑的因素,好的版面分割可以增强引导性、增加点击感,在视觉上辅助交互。
我们常见的版面类型包括:直线型版面、斜线型版面、三角型版面、圆型版面。
1、直线型版面
由直线进行切分,面积大小会根据内容相对调整。
直线型版面示意图
此版面类型操作起来最为简单,画面中规中矩,易给人严肃而具有理性的感觉。反过来说,直线版面也容易显得呆板生硬,不够活泼。
不过可以通过不同的设计风格进行弥补,具体可见下例:
根据内容的不同,清晰地进行分割。居中的板式和文案,表现出品牌的正式、专业、高端,适合高端消费领域的品牌。
直线型版面是最常见的板式,简单的直线分割容易打造沉稳而具有品质感的页面基调。同时在视觉上对不同内容起到明确的区分,从而正确引导用户进行相应的交互。
优秀直线型案例赏析
2、斜线型版面
类型比直线更活泼,视觉上更具冲击力,整体版面更加动感,并有一定的引导性。斜线版面配合适当的动效能够在第一时间给用户带来画面冲击,倾斜的角度越呆冲击感越强,适合在活动、促销、推荐等场景下使用。
斜线型版面示意图
斜线容易给人以平面延续的感觉,可以在页面切换时打造连续的画面,增强页面的引导性,适合用于长页面和多页面同级并列的H5场景。
3、三角型版面
三角形是一个具有稳定性的图形,在页面上容易给用户带来视觉引导。稳定的三角形,同时也是尖锐的形状,比较容易传达快速、时尚、暴力刺激等感受。
三角型版面示意图
在视觉上,三角形给人以指向性。在多屏滑动页面时,可用于交互上的页面引导。
4、圆型版面
圆形在手机屏幕上的'表现天然具有视线聚焦的吸引力,适合主标题、主图和其他关键信息的展示。圆形在视觉表现上更加光滑饱满,给人亲近感,适合手绘风格、卡通风格的页面设计。
圆型版面示意图
利用圆形巧妙灵动的将画面内容进行分割,相比较直线版面更加流畅,视觉上更具亲和力,不生硬。
回顾总结
1、优秀的版面设计,不仅在视觉上能起到正确引导用户的作用,同时也能明确信息主次;
2、不同的版面会有不同的视觉效果,选择版面时要根据自己的需求进行设计。
Part 2 动效篇
如今的消费者几乎手机不离身,手机移动端H5对公司宣传的影响愈加明显,可移动端相对于PC端与纸媒等其他渠道而言,具有以下几点特性:
为了大大降低这些特征对H5内容阅读吸引力的影响,针对不同的问题,我们可以在H5内容中添加相对应的动效,以达到优化的作用:
问题一:屏幕小,信息含量多
解决思路:对重点宣传信息加以突出让关键信息在最短的时间内被获取
问题二:页面多,要保持统一性
解决思路:通过固定的动效交互,在体验上保证整个内容展示的完整性
问题三:层级深,用户易流失
解决思路:有趣的动效加上适当的交互,提高用户参与度、趣味性、更有效地留住用户
以下从几个方面谈谈动效的制作和应用:
1、动效的作用
总结而言,动效对H5页面的作用主要体现在两个方面,分别为功能性以及趣味性。
(1)功能性:
引导用户进行点击、翻页等动作
吸引用户并让其做长时间的视觉停留;
(2)趣味性:
通过一些充满趣味的特效,让用户的体验变得真正愉快以及难忘。
2、动效的类型
在H5内容展示中常见的动效有:移位、旋转、翻转、缩放、逐桢、淡入淡出、粒子效果、3D等,而我们能大致地将这些动效分为基础特效、招牌特效以及高难度特效三种类别。
其中,基础动效分为指向性动效和空间展示动效,具体表现在:
指向性动效——H5元素的出现、滑动、弹出等
空间展示动效——页面的切换、翻动和放大。
基础动效最重要的目的是要让用户感到毫无负担,顺应自然规律,此类动效无需做到夺人眼球,而是要让动效舒服流畅。为了能让大家更直观地理解基础特效的效果,不妨来看看下面这些关于动效设计中的物理关系。
首先,我们要理解“颜色是有重量的”,如下图所示,随着明度和饱和度的升高,颜色的重量在下降:
此外,物理规律也是动效考虑的关键因素。看起来舒服的动效,一定是符合真实物理运动规律的,比如小球从上往下掉,加速运动要比匀速运动更符合人眼的认知。
招牌动效是基于基本动作有选择性的差异化展现,就像一个个有个性的Pose,让用户眼前一亮,建立对界面的独特印象。
这类动效目的是主要为了加深用户印象,但需要注意夸张个性化的表现,以及对于动效节奏的把控。
高难度动效主要的目的是为了加深用户印象。如果运用在H5中会很酷很炫,可以让用户做长时间的视觉停留,但是也是起到锦上添花、画龙点睛的作用,需要根据切实需要来进行设计。
有时候大家会觉得这些酷炫的动效很难实现,其实如果你仔细分析,会发现他们都是基础动效的排列组合。比如上面这两个动效,只要拆分成不同的层,就能发现其中只是不同层之间平移和缩放的组合。
-
jQuery中的read和JavaScript中的onload函数的区别在哪
在JavaScript中,onload函数是最经常使用的,几乎涉及到JavaScript的童鞋都少不了要接触它。这个函数的作用就是等待网页完全装载完了以后再去执行代码块内的语句,因为按照文档流的执行顺序,通常用于头部加载JavaScript的`时候需要用到。复制代码代码如下:ad=functio...
-
javascript中setInterval的用法总结
javascript中的setInterval的函数主要是在制作动画或其他间隔性渲染(操作)效果时,对操作方法按照一定时间间隔进行调用的函数。setInterval的表达式格式主要有:setInterval(fnname,time,par1,par2,);setInterval(obj,fnname,time,par1,par2,);第一种是最常见的表达...
-
网站设计首页要注意的事项
网站设计首页的时候要注意些什么?哪些是必须要注意的?下面就来和小编一起看看网站设计首页要注意的事项吧。1.用户友好性:提高首页的用户友好性,能够大大增加留住用户的可能性,更进一步的`话则是能提高用户的黏着度,取得良好的用户转化效益。而用户的友好性主要体...
-
HTML5教程:画布Canvas基础知识讲解
Canvas是HTML5最让人期待的特性之一,目前已获得大部分Web浏览器支持Canvas可以帮助创建游戏、增强图形用户界面。下面YJBYS小编为大家带来画布Canvas基础知识,希望对大家学习有所帮助!HTML5规范引进了很多新特性,其中最令人期待的之一就是Canvas元素。HTML5Canvas...