html5效果,html5界面设计

　　12个不为人知的HTML5设计技巧，如下：1、交互上，慎用向右滑动的操作方式。

　　比如刮擦效果，左右滑动翻页等。

　　原因：在苹果手机上，向右滑动很容易触发返回上一页的效果。

　　2、交互上，慎用横屏展示效果。

　　原因：在体验上，用户设备需要开启屏幕旋转功能才能正常观看，用户运营成本高。不同屏幕的手机，长宽比不一样，很难呈现出最佳的视觉效果。

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

　　原因：各种屏幕的手机更好的装备，避免按键被堵。

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

　　比如在图层中加入柔光、滤色、色相等等，除非这个视觉元素可以融合。

　　原因：挖坑重建导致镂空不良，视觉效果无法恢复。

　　5、视觉上，矢量图？想做简单的动画？导出SVG格式试试！

　　理由：为什么拒绝可以缩小体积的东西.

　　6、动画上，尽量避免全屏动画，优先考虑局部动画的方式。

　　如：各种飘过全屏的粒子效果等。

　　原因：如果呈现的视觉效果无法用代码实现，就意味着要用全屏大小序列帧处理，体积会飙升，影响加载体验。

　　7、动画上，序列帧压缩小技巧，静态的画面，保存较高质量。中间运动的模糊状态，大胆的压低画面质量吧。

　　原因：即使有锯齿，压缩的体积和运动状态也不明显。

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

　　理由：嗯，这个还需要说理由？嗯，偷偷的，这个网站不仅可以压缩png，还可以压缩jpg，更重要的是支持批量下载！

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

　　提示：如果没有特殊要求，可以考虑制作一个比特率为48或更低的单声道音频文件。

　　10、重构上，安卓机不支持多个音频同时播放……意味着无法背景音乐跟音效同时播放！（苹果机则没问题）

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

　　(视频是什么格式？建议使用mp4格式和H.264编码器)

　　12、重构上，测试请多留意“魅族”手机和华为P6/P7等，屏幕底部采用虚拟按钮的手机。设备容易出问题。

　　说了这么多，然后几个小知识片段：

　　微信到底在用什么浏览器内核？嗯，这个问题真的不好说清楚。

　　安卓系统：

　　微信5.4-6.1版本，如果你安装了QQ浏览器，就用QQ浏览器的内核。不然就用手机系统本身。

　　微信6.1版以后，嵌入了QQ浏览器的内核。

　　QQ浏览器：6.2版及以后使用blink内核。在使用webkit内核之前。

　　苹果公司：

　　一直都是系统自带的.

　　对于向上滑动和翻页的操作，视觉引导的箭头应该向上，而不是向下；除非您单击翻页效果，否则请使用向下箭头。

　　指纹扫描？亲屏触发互动？呼吸检测气体成分？

　　这些都是伪技术。被人玩的开心就好，哈哈。

　　但是，比如多屏互动，音频分析等。通过各种接口做技术支持，实现一些交互操作，这些都是未来的趋势！

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。