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

相关推荐

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

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

　　Part 1 排版篇

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

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

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

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

　　版面在H5设计中的作用：

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

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

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

　　1、直线型版面

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

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

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

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

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

　　2、斜线型版面

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

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

　　3、三角型版面

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

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

　　4、圆型版面

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

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

　　回顾总结

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

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

　　Part 2 动效篇

　　如今的消费者几乎手机不离身，手机移动端H5对公司宣传的影响愈加明显，可移动端相对于PC端与纸媒等其他渠道而言，具有以下几点特性：

　　为了大大降低这些特征对H5内容阅读吸引力的影响，针对不同的问题，我们可以在H5内容中添加相对应的动效，以达到优化的作用：

　　问题一：屏幕小，信息含量多

　　解决思路：对重点宣传信息加以突出让关键信息在最短的时间内被获取

　　问题二：页面多，要保持统一性

　　解决思路：通过固定的动效交互，在体验上保证整个内容展示的完整性

　　问题三：层级深，用户易流失

　　解决思路：有趣的动效加上适当的交互，提高用户参与度、趣味性、更有效地留住用户。

　　H5的设计

　　一、H5页面设计

　　1. 确定设计目标

　　在开始设计H5页面之前，首先需要明确设计目标。这包括确定页面的主题、风格、功能和交互方式等。同时，还需要了解目标用户的需求和特点，以便更好地满足他们的需求。

　　2. 设计页面布局

　　根据设计目标，开始设计页面的布局。这包括确定页面的主要元素、颜色、字体和图片等。在设计过程中，需要注意页面的整体美观度和易用性。

　　3. 设计交互效果

　　H5页面的交互效果是吸引用户的重要因素之一。在设计交互效果时，需要根据页面的功能和目标用户的需求，选择合适的交互方式和效果。例如，可以使用动画、音效、视频等来增强页面的交互效果。

　　二、H5页面开发

　　1. 前端开发

　　前端开发是H5页面制作的核心环节之一。在这个环节中，需要根据设计稿和交互效果图，使用HTML、CSS和JavaScript等技术，实现页面的布局和交互效果。在开发过程中，需要注意页面的兼容性和性能优化。

　　2. 后端开发

　　如果H5页面需要与后端数据交互，还需要进行后端开发。后端开发可以使用各种编程语言和技术框架来实现。在这个环节中，需要根据业务需求和数据结构，编写相应的后端代码，实现数据的存储、处理和交互等功能。

　　三、H5页面测试

　　1. 单元测试

　　在完成前端和后端开发后，需要进行单元测试。单元测试是对每个功能模块进行单独测试的过程，以确保每个模块的功能正常、逻辑正确。在单元测试中，需要使用各种测试工具和方法，如黑盒测试、白盒测试等。

　　2. 集成测试

　　集成测试是在单元测试完成后进行的测试环节。在这个环节中，需要将各个模块进行集成测试，以确保模块之间的协调性和稳定性。在集成测试中，需要注意模块之间的依赖关系和数据传递等。

　　3. 性能测试

　　性能测试是检查H5页面在不同设备和网络环境下的性能表现的过程。在这个环节中，需要使用各种性能测试工具和方法，如压力测试、负载测试等。通过性能测试，可以发现页面在各种情况下的性能瓶颈和问题，并进行相应的优化和改进。

　　四、H5页面发布和维护

　　1. 发布H5页面

　　在完成测试后，就可以将H5页面发布到相应的平台或服务器上。在发布过程中，需要注意页面的安全性、稳定性和可访问性等问题。同时，还需要根据实际情况调整页面的大小、格式和加载速度等参数。

　　2. 维护和更新H5页面

　　在H5页面发布后，还需要进行维护和更新工作。这包括定期检查页面的性能、安全性和用户体验等方面的问题，并及时进行修复和改进。同时，还需要根据业务需求和用户反馈等情况，对页面进行更新和优化工作。在维护和更新过程中，需要注意保持页面的兼容性和稳定性等问题。

　　总之，H5页面制作是一个复杂而细致的过程。从设计到开发再到测试和发布都需要认真对待每一个环节的工作才能制作出高质量的H5页面来吸引用户的关注和使用。

【解读刷屏级H5排版以及动效】相关文章：

十个值得前端收藏的CSS3动效库03-30

如何用photoshop排版简单版面11-28

word文件标准的排版格式要求07-03

家长必看-小升初简历内容如何排版03-21