达永编程网

程序员技术分享与交流平台

转发破万的H5,创意的背后......

如果细心地观察那些阅读转发破万的H5,它们除了本身极具特色的创意之外,排版与动效功能的应用也是恰到好处。

所以今天我们就分别从【排版】来给大家阐释,如何让自己创作的H5更具传播性。

【注:本文案例均出自www.ih5.cn,国内HTML5云制作服务平台】

·

我们常见的版面类型包括:

直线型版面、斜线型版面、三角型版面、圆型版面。

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

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

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

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

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

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

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

三角型版面:三角形是一个具有稳定性的图形,在页面上容易给用户带来视觉引导。稳定的三角形,同时也是尖锐的形状,比较容易传达快速、时尚、暴力刺激等感受。

在视觉上,三角形给人以指向性。在多屏滑动页面时,可用于交互上的页面引导。

圆型版面:圆形在手机屏幕上的表现天然具有视线聚焦的吸引力,适合主标题、主图和其他关键信息的展示。圆形在视觉表现上更加光滑饱满,给人亲近感,适合手绘风格、卡通风格的页面设计。

利用圆形巧妙灵动的将画面内容进行分割,相比较直线版面更加流畅,视觉上更具亲和力,不生硬。

回顾总结

1、优秀的版面设计,不仅在视觉上能起到正确引导用户的作用,同时也能明确信息主次;

2、不同的版面会有不同的视觉效果,选择版面时要根据自己的需求进行设计。

·

【注:本文案例均出自www.ih5.cn,国内HTML5云制作服务平台】

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言