兔展H5设计方法

写了一篇关于H5的应用的帖子，后来想深入写写兔展，但发现操作十足简单，创意我一时也没有，想起之前听过兔展的培训，培训资料，送给大家。——非原创

——————分割线————————

兔展H5设计

一、用户行为数据分析

我们做一个作品出来，终极目标是为了让它传播的更广，用户爱的不行，阅读量转化量爆表，除了我需要文案准确的表达品牌内容以外，我们更应该知道一些用户体验和浏览习惯的东西。

1、加载时间
当5秒内打不开作品，就会有70%以上的用户流失。就是你选择一个H5平台或者H5开发制作方，你要给它一个限定的加载时间。根据一个国外的数据调查，用户在使用手机时，如果遇到加载超过5秒的手机网站，74%的用户会选择离开。所以五秒是一个加载速度的标准门槛。

2、访问高峰期
10点到14点、20点到24点，所以发布H5的时间点，最好是在早上九点前，或者在这些访问高峰期前发布。

3、层级问题
层级越深流失越大，就是说H5作品平均下来50%的人翻不到第五页，所以一个H5体量不要太大。一般建议七页以内即可。

4、流失问题
交互越复杂流失越严重。现在很多H5制作方习惯各种炫技各种交互，这不是好与不好的问题，主要还是要考虑品牌传递的是内容本身，包装适当就好，网上很多碉堡的 H5浏览量不高的原因就是把主次混淆了，不是每个人都有很高的审美和耐心。尤其是需要输入信息的H5，流失率更高。

5、分享率问题
平均分享率平均为12%左右，最高能到65%左右，如果分享率低于这个数值，那么你要考虑你做的东西是不是出了问题，是内容还是设计，或者是推广方式。现在的 H5平台都有后台的数据提供，大家可以去参考，查看自己的H5作品后台状态。

6、访问热度
一般情况下，手机页面访问热度持续2-3天。手机页面上线推广第一天是访问顶峰，第二三天后的数据趋于平稳。平均数据显示，头三天的阅读量是后续阅读量的1.5倍以上。

7、操作习惯
页面切换以手势滑动占93%，点击却换是9%，所以制作H5的设计师建议不要去做按钮却换或以导航形式却换页面，这个和网页是不一样的。如果要用按钮却换，位置也不要放左边，数据显示左边的点击率只有10.1%，右边区域点击率有41.3%，手势滑动占48.6%。

---

H5版面设计原则其实讲到版式设计，网上一大波的教程，H5的版面设计原则也是基于此延伸出来的，只是我们的范围缩小的一些，是针对一个固定的尺寸的图文动画结合的交流。

考虑到大部分是基础用户，我们就讲些简单易懂的排版技巧。

1、分割排版

分割排版分为上下分割和左右分割，整个版面分成上下或左右两部分，在上半部或下半部配
置图片(可以是单幅或多幅)，另一部分则配置文字与简单的形状元素。切割的方式是现在普
遍流行且应用较多的排版方式，它使得图片部分感性而有活力，而文字则理性而静止。在手
机端更适用于上下分割，也是常规的布局方式。
常见上下分割布局方式

上下分割排版效果

2、中轴排版

将图形作水平方向或垂直方向排列，文字配置在上下或左右。水平排列的版面，给人稳定、安静、平和与含蓄的感觉。垂直排列的版面，给人强烈的动感。

中轴排版效果

3、满版排版

满版型排版，版面以图像充满整版，主要以图像为诉示，视觉传达直观而强烈。文字配置在上下、左右或中部（边部和中心）的图像上。满版型，给人大方、舒展的感觉。是商品广告H5常用的形式。

满版排版效果

4、倾斜型

倾斜性的版面主体形象或多幅图像作倾斜编排，造成版面强烈的动感和不稳定因素，引人注目。

5 、重心型

重心型版式容易让人产生视觉焦点，使其更加突出。有 3种类型：1.直接以独立而轮廓分明的形象占据版面中心；2.向心：视觉元素向版面中心聚拢的运动；3.离心：犹如石子投入水中，产生一圈一圈向外扩散的弧线的运动。

6、自由型

自由型的排版方式，主要取决与个人的设计能力和审美标准，无规律的、随意的编排构成。有活泼、轻快的感觉。

微信封杀淘宝给了第三方插件服务平台很多选择

赞一个

非常不错的建议，尤其是5秒定律

写得不错！

不错，很详细

楼主好理论好专业的感觉。
不过还有有很多模板可以选的。

ＰＳ：你说的兔展是这个吗？ 　http://www.rabbitpre.com/

5秒定律不错啊

有些名词用得过于专业，部分受众可能听不懂的。

有赞的H5打开速度严重超过5秒

非常不错，不试不知道。