如何做一个优秀的HTML5页面

这个时代是一个属于互联网的时代。每次看到朋友圈中分享的各种各样的H5页面，作为UI工程师的你，有没有跃跃欲试，也想做出如此酷炫动画和带感声效的H5呢？让天津app开发-文率科技的小编带你带你总结设计动效、具体实现方法，绕过H5设计的那些坑吧！全文高能干货，强烈建议学习！

一、利用纹理效果，提高页面触感

哪些效果可以称之为纹理呢？简单来说，通过布料、木纹或者有分割线形式的图形效果都可以称之为纹理效果。使用纹理的强调效果非常明显，在H5页面的背景加入纹理效果，具有强烈的存在感，能营造一种真实的氛围。

二、巧妙分割H5页面

如果需要在版面中展现大量的信息时，通过色块划分版面区域、利用色相对版面中的素材进行分类、利用文字颜色整理信息是在制作H5页面时较常用的方法。只要巧妙利用色块、文字、图片在空白H5页面各个位置框出区域，就可以避免散乱且不稳重，制作出协调而又易读的版面。

三、使文字突出而不突兀

图片和文字融合得好，就能发挥出较大的效果，让H5页面更加显眼。由于图片本身就含有较多的色彩，如果文字的颜色也过于复杂，一定会影响图片的显示效果，显得杂乱无章；如果图片本身比较素净，则需要艳丽文字的衬托。较好是从图片上吸取颜色，使文字突出而不突兀。这就要求设计者有较高的审美要求，能随机应变，设计出均衡美观的H5页面。

四、通过群组的方式放置素材

为了突出H5页面中不同的主题，可以设置不同的关键色，以此突出不同的主题。然后以这两种关键颜色来设计主轴，以此创造出群组，同时又简明易懂地创造出对比性，凸显出两个主题内容之间的差异。

避免踩到H5设计中的坑：

一、杀鸡不用牛刀，能又快又好解决问题较重要

不知道你有没有过执着用一种技术完成一件事情的经历，反而忘记其实完成那件事情才是真正的目的。却因为执着于某种技术而耽误了进程，这样就有点进入了炫技的误区。放弃这种想法，条条大路通罗马，能又快又好解决问题的方法才是较合适的。

二、不要在伪元素上做动画

伪元素真的是神一样的存在，一个标签自带两个儿子，不知道为什么就有种金闪闪的感觉。但是伪元素上的动画真的很坑，页面都写完了，你会发现在 iOS上美如画的动画效果，到了小米和魅族上就显示不出来了。

三、请写好注释

与UI工程师对接的前端同学需要看注释才知道什么时候要加什么class。你可以有自己的注释风格，和前端约定好，中心思想表达出“在哪添加什么class”就可以了。

在移动互联网时代，好的页面或作品应该是能够吸引用户的，这就不光是代码能够实现，也需要制作者的交互和设计水平，对于内容的把控，能够切合用户的痛点。以上便是天津app开发-文率科技http://www.wenshuai.cc/小编帮大家整理的笔记了，你学会了吗？期待你们的设计~