H5移动端页面设计心得

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

　　字体

排版

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

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

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

　　动效

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

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