h5页面制作技术和规范介绍

2019-11-18

 随着h5页面的诞生，越来越多的东西使用h5页面来显示。许多朋友可能不太了解制作h5页面的技术和规格。下面中企崛起小编给你一个详细的介绍。想知道的朋友可以和小编一起去看。
 
 1.互动:小心使用向右滑动的操作模式。
 
 例如:刮擦效果、左右滑动翻页等。
 
 原因:在苹果手机上，向右滑动很容易触发返回到“首页”效果。
 
 h5页面制作技术和规范介绍
 
 
 
 2.互动:小心使用水平屏幕显示。
 
 原因:实验上，用户设备需要打开屏幕旋转功能才能正常观看，用户操作成本高。对于具有不同屏幕的手机，长宽比是不同的，这使得很难显示最佳的视觉效果。
 
 3.视觉:功能按钮等。远离页面底部(大约128像素，这个大小不是固定值)。请确切查看重建使用了什么样的自适应方法(仅供参考:640*1136像素，从上到下计算，主要内容在1008像素以内)。
 
 原因:更好的手机屏幕设备，以避免按钮被堵塞。
 
 4.视觉:小心使用PS中的“灯光叠加效果”或“图层样式”效果。
 
 例如，向图层添加“柔光”、“滤色片”、“色调”和其他效果，除非视觉元素可以组合成一个整体。
 
 原因:挖洞重建，导致切割不良，无法恢复视觉效果。
 
 5.视觉:矢量图？想做简单的动画吗？尝试导出SVG格式！
 
 原因:为什么拒绝一些可以减少音量的东西？
 
 6.动画:尽量避免全屏动画，优先考虑本地动画。
 
 例如，各种粒子效果漂浮在整个屏幕上。
 
 原因:如果所呈现的视觉效果无法通过代码实现，则意味着全屏大小的序列帧将被用于处理，音量将飙升，影响加载体验。
 
 动画:序列帧压缩提示，静态图片，保存高质量。中间运动的模糊，大胆地降低了画面质量。
 
 原因:压缩量大，即使有锯齿，运动状态也不明显。
 
 8.重建:请将“tinypng.com”放在图片上，并在压缩下有效减小音量。
 
 原因:嗯，我为什么要这么说？嗯，私下告诉你，现在这个网站不仅可以压缩png，还可以压缩jpg，更重要的是...支持批量下载！
 
 9.重建:请压缩音乐，这样可以大大降低整体音量。
 
 提示:如果没有特殊要求，可以考虑制作比特率为48或更低的单声道音频文件。
 
 10.重建:安卓不支持同时播放多个音频...这意味着背景音乐和音效不能同时播放！(麦金塔很好)
 
 11.重建:视频不能自动播放，第一次播放需要用户点击并触发。
 
 (视频是什么格式的？建议使用mp4格式和H.264编码器)
 
 h5页面制作技术和规范介绍
 
 
 
 12.重建:测试时，请多关注“魅族”手机和华为P6/P7等。屏幕底部带有虚拟按钮的手机。设备容易出问题。
 
 说了这么多，让我们再提几个建议。
 
 ◆使用浏览器内核的微信到底是什么？这个问题真的很难回答。
 
 安卓:
 
 微信版本5.4-6.1，如果安装了QQ浏览器，则使用QQ浏览器的内核。否则，使用手机系统自己的。
 
 微信6.1版之后，嵌入了QQ浏览器的内核。
 
 QQ浏览器:闪烁内核，适用于6.2版及更高版本。以前，使用webkit内核。
 
 (不要晕倒，如有必要，请前往:http://x5.tencent.com/index了解更多关于QQ浏览器的信息)
 
 苹果:
 
 一直是系统自己的...
 
 ◆对于向上滑动和翻页的操作，视觉引导箭头应该向上，而不是向下。除非您单击翻页效果，否则请使用向下箭头。
 
 以上是中企崛起小编关于h5页面制作技巧和规范的介绍。你有知识吗？我们收集了很多关于H5网页的知识。请期待更多的内容，如果您愿意，请收集我们的网站！