12个鲜为人知的HTML 5设计小技巧

向右滑动，横屏显示效果，页面底部按钮原理，矢量图采用SVG格式.. 以上提到的所有技巧都来自今天的好文章，简单小巧，但实用性很强。作为一名设计师，我们也应该尽量避免这些坑。

1、在交互中，小心向右滑动。

例如：刮刮器涂抹效果，左右滑动翻页等。

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

2、在交互中，谨慎使用横屏显示效果。

原因：在体验方面，用户设备需要打开屏幕旋转功能才能正常观看，用户操作成本高。对于不同屏幕的手机，长度和宽度比例不同，很难显示出最佳的视觉效果。

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

原因：更好地设备各种屏幕的手机，避免按钮堵塞。

4、在视觉上，谨慎使用PS中的“光叠加效果”或“图层样式”效果。

例如，在图层中添加“柔光”、“滤色”、除非这种视觉元素能合并为一体，否则“色相”等效果。

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

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

原因:为什么拒绝能减少体积的事情...

6、在动画中，尽量避免全屏动画，优先考虑局部动画。

例如：各种粒子效果全屏漂浮等。

原因：如果不能用代码实现视觉效果，则意味着需要用全屏尺寸的序列帧来处理，体积会飙升，影响加载体验。

7、在动画中，序列帧压缩技巧，静态图片，保持高质量。中间运动的模糊状态，大胆降低图片质量。

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

8、在重构方面，请将图片放在上面“tinypng.com在压缩下，有效减少体积。

原因:嗯，这也是原因吗？嗯，我偷偷告诉你，现在这个网站不仅可以压缩png，还可以压缩jpg，更重要的是...支持批量下载！

9、在重构中，请压缩音乐，可以大大降低整体体积。

上一篇：超实用的动效设计入门小手册

下一篇：设计师读书笔记系列之《DON’T MAKE ME THINK