H5设计运用小技巧

H5作为目前主要页面设计形式之一，已经被广泛运用了，大家对于它的运用也是有着自己的心得，所以蓝橙小编也是给大家总结了一些小技巧，希望可以帮助大家解决问题。我们一起来看一下。

1、页面操作方式，尽量不适用向右交互。

原因：苹果手机，向右滑动容易触发返回“上一级页面”效果。

2、尽量不适用横屏展示页面。

原因：用户需要转换横屏才能正常观看，操作复杂化。

3、视觉上，功能按钮等，远离页面底部(大概128px，这个尺寸不是固定值)，具体看重构采用什么适配方式(仅供参考：640*1136 px，从上往下计算，主要内容在1008px内)。

原因：更好的匹配各种屏幕的手机，避免按钮被挡住。

4、视觉上，慎用“光线叠加效果”或PS里面的“图层样式”效果。

原因：重构时不好切图，影响展示效果。

5、视觉上，矢量图与简单的动画可转化为SVG格式。

原因：能减少体积。

6、动画展现尽量使用局部展现。

原因：全屏展现的效果，如果无法用代码体现，使用序列帧会加大质量。

7、动画静态画面，保存高质量。动态图，大胆压缩质量。

原因：压缩体积，运动状态就算有锯齿也不明显。

8、重构图片可以加“tinypng.com”，压缩下，有效减少体积。

原因：现在这网站不止可以压缩png，还可以压缩jpg。

9、音乐请压缩下，能大大减少整体的体积。

技巧：如果没有特殊要求，可以考虑弄成单声道音频文件，比特率48或更低就行了。

10、有安卓机不支持多重音频同时播放。

11、重构上，视频无法自动播放，首次播放需要用户点击触发。

建议：用mp4格式，并用H.264编码器

再来几条干货。微信到底是什么用浏览器内核?。

安卓：

微信5.4-6.1版本，如果有安装QQ浏览器，则用QQ浏览器的内核。否则用手机系统自带的。

微信6.1版本后，内嵌了QQ浏览器的内核。QQ浏览器：6.2版本及以后使用blink内核。

苹果：

一直都是系统自带的……

那么这些小技巧也是蓝橙小编从事多年H5设计总结而出的，希望对于大家有所帮助。