10步让你轻松搞定H5网页设计性能！

                   　　H5已经成为时代的潮流，移动端的便捷让很多企业都从H5网页设计性能开始入手。更可能的展现出自己的特色，让广大用户更容易的了解企业、产品等等。为了让你轻松搞懂H5网页设计，避免多走弯路。今天，上海网站设计小编就来介绍一下，10步让你轻松搞定H5网页设计性能！让你轻松进入H5移动互联网的时代。

10步让你轻松搞定H5网页设计性能！

　　H5网页是移动端的一种展现，图片制作不仅要保持高质量，也要保持图片大小问题，避免过大加载不出来，会影响用户体验度。

　　建议：将图片压缩，不仅不影响图片效果，还能缩小图片大小，避免加载不出来的情况。

　　如果图片色彩数量很多（尤其是含有渐变色的），使用PS的“存储为Web所用格式”时，输出格式最好选JPG，因为这种格式可以调整压缩率，去掉一些肉眼难以识别的中间颜色。

　　建议：根据不同图片特征，尽量降低体积。

　　H5网页图片通常只在手机屏幕上被看到的在线广告。所以，图片应该按照移动设备的尺寸输出，包括单独的导航、按钮等等。

　　如果H5页面需要素材量较大，为避免体积过大，尽量使用单色。单色还不是说你用颜色相近的渐变色就行了，而是让颜色表中的颜色数量越少越好。

　　建议：最好重复利用素材，避免素材二次上传导致的多次加载情况的出现。

　　音频大小相信很多人都知道，一般上传上限是5M的MP3。可能有执着的人上传过10多M的无损歌曲，等了半天才发现太大或格式不对…

　　建议：在上传音频时，用格式工厂把音频比特率转换为64kbps，能节省50%以上的体积哦。

　　如果你的H5网页最多停留1分钟，那么，音乐部分最好也在1分钟，为了节约空间，最好进行裁剪。

　　建议：音频最好设置为循环播放，保持听觉上的享受和氛围。

　　想要音频小但质量又不能下降。首选需要你找到比较好的乐感，如低于10秒的音效素材，设置同时或连续播放，形成长音频的效果。

　　建议：简单的音效，可以确保加载速度。

　　和音频原理相似，视频格式也可以进行压缩。先将视频尺寸要和移动页面所需尺寸匹配，在通过降低视频和音频的比特率，来降低视频的体积。

　　注意：视频比特率越低，画质也越差……

　　视频小，但质量高，就需要视频不要太长，把不重要的画面剪掉——和预告片的道理一样，用最少的时间打动用户。

　　注意：根据上面的思路（播放前加载时长），你可以判断你的视频到底要多短。

　　你也可以利用设计思维，尽量在色彩数量较小的设计外观，依次降低视频体积。和图片颜色越简单、体积越小一样，在利用二次元画风最为视频，会让你H5网页看起来时尚又有创意。

上海网站设计小编温馨提示：对于H5网页设计广告而言，由于依赖于网络的加载，对网页性能的要求非常高。所以，学会以上素材优化技巧是很重要的。希望以上的介绍能够给你带来帮助。如果你也需要H5网页设计，可以联系垒越科技小编，小编的设计团队将会为您设计出不一样的网站页面。

• 上一篇：网站SEO优化新思路
• 下一篇：场景营销设计中，不可忽视的环境暗示