关于H5页面设计

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


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

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

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

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

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

关于H5页面设计_第1张图片

若以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

你可能感兴趣的:(关于H5页面设计)