如何通过排版、动效、音效、交互等方面去打造一个优秀的H5？

　　1.排版

　　手机屏幕上有一个视觉中心点，想要快速吸引注意力最好是有一个核心元素在手机屏幕的集中位置。元素不用太多，重要的是要突出重点，做到简洁明了。用户在看到简洁排版就能判断这个内容浏览不需要花费太多时间，便会带着轻松的态度去阅读。

　　2.动效

　　动效决定了内容元素的效果呈现，元素的位移，翻转，缩放，淡出等都要提前与前端设计师沟通。背景动效建议选择缓慢的动态效果，避免抢了核心元素的风头。例如“京东招聘”背景中缓缓移动的流星。

　　3.音效

　　音效设计一定要考虑到用户浏览时的场景多样性，不能过于粗暴，循序渐进为最佳，留一点在打扰打他人前关闭音效的过渡时间。关闭音效的按钮设计以页面元素去代替是最好的，但是也要足够醒目，以防被用户误以为无法关闭音效而直接退出浏览。

　　考虑到加载速度，音乐文件建议控制在30秒以内，大小控制在100k以内最佳。如果是无限循环的音乐，要做好头尾相连，不能在结尾处做的过于突兀，否则会影响浏览体验。

　　4.交互

　　常见的交互方式有翻页、点击、擦除、滑动等，这些交互方式相对简单，能够满足展示产品的基本需求。网络上有许多H5在线生成器可以制作这些简单交互的H5。

　　游戏型的交互方式比较受欢迎，传播度也高，例如经典的“围住神经猫”等。还有一些需要使用计算逻辑型得出结论的H5，例如“支付宝年度账单”、“测测你的隐藏属性”等测试类、统计类、总结类H5，得出结果海报也会增加传播率。

　　“好看的皮囊千篇一律，有趣的灵魂万里挑一。”这句话在H5设计上恰好要反过来说。如今太多内容形式上千篇一律的H5了，但是页面设计却百花齐放。H5页面设计是最直观的，它最直接影响了用户体验