解读刷屏级H5排版以及动效

如果细心地观察那些阅读转发破万的H5，它们除了本身极具特色的创意之外，排版与动效功能的应用也是恰到好处。所以今天我们就分别从【排版】、【动效】两方面来给大家阐释，如何让自己创作的H5更具传播性。

　　Part 1 排版篇

生长在移动端的H5广告相较于其他广告，充分地暴露了屏幕小、层级深、较难在保持内容统一性的前提下包含众多且交互复杂东西等缺点，也因此可能会影响用户在阅览H5时对有效信息的获取能力。所以，利用设计在最短的时间内引导用户接收到有效信息变得更加重要。

那么，怎样才能更有效地引导用户接受到那些有效信息呢? 通过排版!

版面是基础，先确定版面的布局框架，再考虑配色，字体…

优秀的版面设计，不仅在视觉上能起到正确引导用户的作用，同时也能明确信息主次，使有效信息达到最优的传播。

版面在H5设计中的作用：

1、不同图文信息的有序展示，在视觉上起到一定引导作用，通过版面大小和前后复叠关系明确展示信息的主次，视觉表达更加合理。

2、交互性是移动端H5设计中必须考虑的因素，好的版面分割可以增强引导性、增加点击感，在视觉上辅助交互。

我们常见的版面类型包括：直线型版面、斜线型版面、三角型版面、圆型版面。

1、直线型版面

由直线进行切分，面积大小会根据内容相对调整。

直线型版面示意图

此版面类型操作起来最为简单，画面中规中矩，易给人严肃而具有理性的感觉。反过来说，直线版面也容易显得呆板生硬，不够活泼。

不过可以通过不同的设计风格进行弥补，具体可见下例：

根据内容的不同，清晰地进行分割。居中的板式和文案，表现出品牌的正式、专业、高端，适合高端消费领域的品牌。

直线型版面是最常见的板式，简单的直线分割容易打造沉稳而具有品质感的页面基调。同时在视觉上对不同内容起到明确的区分，从而正确引导用户进行相应的交互。

优秀直线型案例赏析

2、斜线型版面

类型比直线更活泼，视觉上更具冲击力，整体版面更加动感，并有一定的引导性。斜线版面配合适当的动效能够在第一时间给用户带来画面冲击，倾斜的角度越呆冲击感越强，适合在活动、促销、推荐等场景下使用。

斜线型版面示意图

斜线容易给人以平面延续的感觉，可以在页面切换时打造连续的画面，增强页面的引导性，适合用于长页面和多页面同级并列的H5场景。