有赞新零售社区

发帖
运营杂谈»第218期:五秒定律┃ 手把手教你设计出炫酷H5页面!

第218期:五秒定律┃ 手把手教你设计出炫酷H5页面!

有赞•一发 2015-11-25 20918 浏览 50 评论 | 只看楼主 [打印]    
小报编辑部的日常


有赞小报:剖析实战案例,玩转微电商


兔展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、自由型
自由型的排版方式,主要取决与个人的设计能力和审美标准,无规律的、随意的编排构成。有活泼、轻快的感觉。




| 有 | 赞 | 小 | 报 |
剖析实战案例,玩转微电商

| 有料 | 有趣 |
有赞小报文章和教程均由作者授权发布
版权一律归原作者所有
转载授权、商务合作、加入有赞小报编辑部
联系邮箱:yifa@youzan.com
用手机打开
收藏 206 ··· 回复
    有赞•一发 发表于 2015-11-25 11:59
    写了一篇关于H5的应用的帖子,后来想深入写写兔展,但发现操作十足简单,创意我一时也没有,想起之前听过 ...


    给新开始的团队很有用

      爱尚吃   青铜   2015-11-26 | 只看该作者
      女王瑞,这是众星捧月呀,好有福气。不过确实漂亮

        蒋兴庆   黄金   2015-11-26 | 只看该作者
        有学习了,还有瑞女神很漂亮

          大熊001   白银   2015-11-26 | 只看该作者
          女王瑞就是漂亮

            奥博科技   青铜   2015-11-26 | 只看该作者
            天情|为思礼 发表于 2015-11-25 20:24
            女王瑞就是女王瑞~好漂漂~~~~~~~~


            没错。    确实漂亮

              微微视界   游客   2015-11-26 | 只看该作者
              瑞王漂亮。~~

                芦苇拍档   游客   2015-11-26 | 只看该作者
                小妖精确实漂亮
                运营优势:美妆、食品、餐饮、旅游解决方案
                有赞官方服务商-芦苇网络(苏州)
                给您提供您想象不到的运营服务
                个人微信:Misterccc
                个人手机:15700179031

                  潮树   游客   2015-11-26 | 只看该作者
                  哇,大趴体的赶脚
                  有赞认证拍档http://fuwu.youzan.com/detail?id ... ?电子有限公司,一起交流分享微电商,微信号:cwsc54,+我暗号:有赞社区

                    商桥科技   青铜   2015-11-27 | 只看该作者
                    超乎的漂亮!

                      百厨千肴   青铜   2015-11-28 | 只看该作者
                      老沈 发表于 2015-11-25 18:23
                      瑞瑞好漂亮


                      你好,我能加您微信吗,?

                        12345跳至
                        您需要登录后才可以回帖 登录 | 立即注册

                        本版积分规则

                        复制链接
                        新浪微博
                        QQ空间
                        微信扫码
                        • 回复

                        • 评分

                        客服工作时间是9:00-18:00,客服妹子当前不在线,若不能及时回复请谅解。试试右上角的搜索吧,论坛有丰富的经验贴、公告贴,相信一定能够帮到您~

                        复制成功