关于H5页面设计

准备做一个H5页面，关于招聘的，之前有做过H5网站，并没有做过相关的H5运营类的设计的东西，对于H5有一点了解，但是并不深，所以就想在这里总结下关于H5的一些东西

1.怎么实现的？
HTML、CSS、JS技术实现，适配多种分辨率

2.页面分类？
H5网站页和H5活动页

3.它的特点
开发周期短，更新迭代快，传播快，通过各种浏览器和微信入口等方式

4.什么是H5活动页设计
H5活动页是用于宣传，推广，游戏，招聘，公司介绍等设计出来的，通过各种动效，趣味性，幽默性等吸引用户去关注和分享。常见的动效有位移、翻转、缩放、逐帧、淡入淡出、粒子效果，擦除，摇一摇等，或者加入音频。

5.规范和切图
H5活动页是用于宣传，推广，游戏，招聘，公司介绍等设计出来的，通过各种动效，趣味性，幽默性等吸引用户去关注和分享。常见的动效有位移、翻转、缩放、逐帧、淡入淡出、粒子效果，擦除，摇一摇等，或者加入音频。

若以640*1136的设计稿，直接切图，对应xhdpi时，大屏用户看到的页面图标是虚的，中小屏用户则清晰，加载速度比较快

若以1080*1920的设计稿，直接切图，对应为xxhdpi时，几乎大中小屏的用户看到都是清晰的，但是中小屏用户则需要加载大图片，优化上来说又不划算，加载速度比较慢

字体

PC设计用华文细黑（浑厚），Mac设计用黑体-简（锐利）

尺寸

设计稿以640*1136为准，切图3套，分别为hdpi,xhdpi,xxhdpi,适配三种分辨率，图标写入在前端，这样可以让不同的用户根据自己的手机屏幕大小，系统自动加载对应的图标

注：图标等资源大小适当减少，否则加载速度很慢，用户等太久体验差。

推荐使用“智图”压缩图片，能实时对比不同质量的图片效果；

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

如果颜色不复杂，使用无损的PNG-8格式，这样既可能确保图片质量，又能保证体积小--但会损失渐变色

这里放一些做的比较好的H5设计，希望能够启迪些灵感

招聘案例

http://w.liveapp.cn/dazzle/index/69315

http://www.epub360.com/manage/book/b4pdgb/

http://www.epub360.com/manage/book/ytlh4t/

http://imgcache.qq.com/ac/www_tencent/join/ext/calendar/calendar.html

http://act.qzone.qq.com/2015/sngzp/index.html

http://special.dajie.com/html/vsite/xisi/index.html

https://ucan2017.aliyun.com/h5?from=groupmessage&isappinstalled=0