超多硬货的HTML5网站实战案例经验总结

来源:网络整理  作者:未知  浏览:
相关专题: HTML5网站
导读: 去年JDC出了不少优秀的武媚娘…不H5呢,大家都很拼,同时当然也积累了一些经验和教训,今天结合咱们的实战案例,从字体,排版,动效,音效,适配性,想法这几个方面好好聊一聊关于H5的设计,希 ...

去年JDC出了不少优秀的武媚娘…不H5呢,大家都很拼,同时当然也积累了一些经验和教训,今天结合咱们的实战案例,从字体,排版,动效,音效,适配性,想法这几个方面好好聊一聊关于H5的设计,希望对同学们有帮助。

字体

超多硬货的HTML5实战案例经验总结,PS教程,思缘教程网

排版

超多硬货的HTML5实战案例经验总结,PS教程,思缘教程网

在有限的手机屏幕空间内,我们积累的经验告诉我们最好的效果是简单集中,最好有一个核心元素,中心元素不宜过多,突出重点为最优。

超多硬货的HTML5实战案例经验总结,PS教程,思缘教程网

比如JDC的“拍拍十二星座实用手册”的项目,只用了最简单的图形和文字居中摆放。

超多硬货的HTML5实战案例经验总结,PS教程,思缘教程网

以可口可乐的这个“我们在这 我们在乎”为例,相较而言,越左边的排版会越容易引起关注。这是因为我们懒惰的大脑里最初看到这种简洁排版会立刻出现“嗯 我可以马上看完不费劲”的潜意识信息而带着轻松的态度去阅读。

动效

超多硬货的HTML5实战案例经验总结,PS教程,思缘教程网

1 / 前期跟前端设计师进行沟通,讨论页面中元素的动效呈现。例如一些元素的位移,旋转,翻转,缩放,逐桢,淡入淡出,粒子效果,照片处理等等,还有3D展示效果。 (http://fffNaNiscm.com 这个网站里有h5所能实现的效果)

超多硬货的HTML5实战案例经验总结,PS教程,思缘教程网

比如JDC出品的“京东HR招聘”里面就用了位移,缩放,淡入淡出的效果。而“京东微店七宗罪”的最慷慨这一屏则是用到了粒子效果,每个钱币翻转下落的速度不一样显得画面更真实。今年在朋友圈疯转的维多利亚和特斯拉的H5用的是擦除的效果,模糊的遮罩足够挑起人们的好奇心。

以上两款,包括今年最火的H5案例都在这了 >>>《如此风骚!2014年刷爆朋友圈的十大 HTML5 技术案例》

超多硬货的HTML5实战案例经验总结,PS教程,思缘教程网

2 / 背景动效其实比较推荐缓动效果,如“京东管培生招聘”的例子里星空中一闪而过的流星,间歇性出现不抢主角风头再好不过了.