文档介绍:精选优质文档-----倾情为你奉上
精选优质文档-----倾情为你奉上
专心---专注---专业
专心---专注---专业
精选优质文档-----倾情为你奉上
专心---专注---专业
H5页面排版以及动效
随着H5的火热精选优质文档-----倾情为你奉上
精选优质文档-----倾情为你奉上
专心---专注---专业
专心---专注---专业
精选优质文档-----倾情为你奉上
专心---专注---专业
H5页面排版以及动效
随着H5的火热,越来越多的社交平台。开始应用到H5页面,一些平台的设计又有什么样的风格,各种不一的H5页面充斥着我们的朋友圈,你又知道有那一些常见的H5设计吗?
Part 1 排版篇
生长在移动端的H5广告相较于其他广告,充分地暴露了屏幕小、层级深、较难在保持内容统一性的前提下包含众多且交互复杂东西等缺点,也因此可能会影响用户在阅览H5时对有效信息的获取能力。所以,利用设计在最短的时间内引导用户接收到有效信息变得更加重要。
那么,怎样才能更有效地引导用户接受到那些有效信息呢? 通过排版!
版面是基础,先确定版面的布局框架,再考虑配色,字体…
优秀的版面设计,不仅在视觉上能起到正确引导用户的作用,同时也能明确信息主次,使有效信息达到最优的传播。
版面在H5设计中的作用:
1、不同图文信息的有序展示,在视觉上起到一定引导作用,通过版面大小和前后复叠关系明确展示信息的主次,视觉表达更加合理。
2、交互性是移动端H5设计中必须考虑的因素,好的版面分割可以增强引导性、增加点击感,在视觉上辅助交互。
我们常见的版面类型包括:直线型版面、斜线型版面、三角型版面、圆型版面。
1、直线型版面
由直线进行切分,面积大小会根据内容相对调整。
此版面类型操作起来最为简单,画面中规中矩,易给人严肃而具有理性的感觉。反过来说,直线版面也容易显得呆板生硬,不够活泼。
不过可以通过不同的设计风格进行弥补,根据内容的不同,清晰地进行分割。居中的板式和文案,表现出品牌的正式、专业、高端,适合高端消费领域的品牌。
直线型版面是最常见的板式,简单的直线分割容易打造沉稳而具有品质感的页面基调。同时在视觉上对不同内容起到明确的区分,从而正确引导用户进行相应的交互。
2、斜线型版面
精选优质文档-----倾情为你奉上
精选优质文档-----倾情为你奉上
专心---专注---专业
专心---专注---专业
精选优质文档-----倾情为你奉上
专心---专注---专业
类型比直线更活泼,视觉上更具冲击力,整体版面更加动感,并有一定的引导性。斜线版面配合适当的动效能够在第一时间给用户带来画面冲击,倾斜的角度越呆冲击感越强,适合在活动、促销、推荐等场景下使用。
斜线容易给人以平面延续的感觉,可以在页面切换时打造连续的画面,增强页面的引导性,适合用于长页面和多页面同级并列的H5场景。
3、三角型版面
三角形是一个具有稳定性的图形,在页面上容易给用户带来视觉引导。稳定的三角形,同时也是尖锐的形状,比较容易传达快速、时尚、暴力刺激等感受。
三角型版面示意图
在视觉上,三角形给人以指向性。在多屏滑动