H5制作需要注意哪些细节

传统媒体一般是都通过文字和图片传播，而新媒体的到来则是让营销推广发生了翻天覆地的变化。H5作为新型营销广告的产物，它的各种互动玩法代替了原本静态枯燥的广告。很多品牌都会用这种形式和用户产生互动，促进产品的销量。那么在H5制作的过程中，我们需要注意哪些细节呢？

1. 特殊机型的适配

H5在不同的机型适配，虽然每个开发者都有一套自己的完整方案，但一定要注意小屏机（虽说现在大屏机已是主流，尤其是iPhone4s）和带有虚拟按键的机型适配（如魅蓝note）。

2. 勿轻易用右滑的交互方式

在H5中尽量不要设计使用向右滑动的交互方式。无论是Android，还是 iPhone ，向右滑动容易误触发返回上一级页面。

3. 多个音乐同时播放

由于系统的限制，Android 在同一时间，只允许播放一段背景音乐。在 IOS 下并没有限制，例如 iPhone 的机型在播放背景音乐的同时可以做到播放各种交互音效。所以一般在 Android 上 H5 只播放背景音乐。如有特殊场景的话，可以先暂停背景音乐，再播交互音效，音效播放完毕后再播背景音乐。

4. 图片、背景音乐请压缩

图片是网页的重要资源，除了常见的PS来压缩图片外，推荐大家去 Tinypng，在这里可以压缩网页中常见图片，如 .png 和 .jpg ，而且可以拖拽一组图，压缩完后还可以一键下载，效果也是杠杠滴~。背景音乐当然是越清晰越好，为了让 H5 本身更流畅，通常我们会对背景音乐做压缩，一般情况下我们会降低音频的比特率（控制在32kbps，这个在格式工厂中属于低质量音频），时间尽量控制在1min之内，保持最终的文件大小在600kb以内。

5. 勿轻易用横屏的交互方式

不要轻易使用横屏。在微信 for Android 中，H5以横屏的方式展现的前提是：其一，开启系统的屏幕旋转；其二，开启微信的横屏模式。操作成本较高，而且顶部的导航栏和状态栏还占据了一定的宽度（屏幕本身就比较窄）。如果场景需要，一定要引导用户如何开启横屏模式。

6. 输入框

在微信H5页面中，除宣传类外，大部分都是以收集信息为目的的。除了使用麦客表单、金数据、问卷星等第三方表单收集工具外，各个H5工具内置的输入框功能也不失为一个很好的选择。