现今H5页面设计已经得到大家非常多的关注,在实践中大家也积累了一些经验和教训,今天结合实战案例,从字体,排版,动效,音效,适配性,想法这几个方面好好聊一聊关于H5的设计,希望对大家有帮助。
字体
排版
在有限的手机屏幕空间内,我们积累的经验告诉我们最好的效果是简单集中,最好有一个核心元素,中心元素不宜过多,突出重点为最优。
以可口可乐的这个“我们在这我们在乎”为例,相较而言,越左边的排版会越容易引起关注。这是因为我们懒惰的大脑里最初看到这种简洁排版会立刻出现“嗯我可以马上看完不费劲”的潜意识信息而带着轻松的态度去阅读。
动效
例如一些元素的位移,旋转,翻转,缩放,逐桢,淡入淡出,粒子效果,照片处理等等,还有3D展示效果。
比如这个“京东HR招聘”里面就用了位移,缩放,淡入淡出的效果。
背景动效比较推荐缓动效果,如“京东管培生招聘”的例子里星空中一闪而过的流星,间歇性出现不抢主角风头再好不过了。
音效
考虑到用户使用场景的多样性,介绍类的背景音乐尽量不要太粗暴。有一点循序渐进最好,给用户留时间在骚扰别人之前可以关闭。
或者可以在开始时是关闭状态。但做游戏h5页面的时候,音乐可以没有关闭开启按钮,因为用户对接下来发生的事是有预知的。
考虑每一页音乐按钮放置的明显性。如果能用其他页面元素去替代音乐符号作为按钮也是极好的。
为了加载速度,文件大小尽量控制在100k以内。作为无限循环的背景音乐,截取时一定要注意头尾得连接得上。
交互
展示型:有很多种不同的交互方式,最常见的是翻页,这种方式制作起来相对简单,多用于展示一些新的产品,功能,或者活动介绍等。
游戏型:像是起初朋友圈红过的围住神经猫这类需要计算逻辑,得出分数或者结论的小游戏。
产品型:有一些H5是作为一个长期运营的产品存在的,用户的访问可能会更固定,比如微信里的购物页面等。
手机端之间:一般我们先用640X1136进行设计,参考线会标在960高的地方,主要元素最好不要过高以适配各种机型。其他安卓机器前端切图时可以适当拉伸,变化不会太大就不用每个进行适配。
响应式设计:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSSmediaquery的使用等。
想法
被大众主流乐于分享的信息大概有这么几种:
最直接的利益驱动,分享有奖或者需要众筹等,
对自己有用并且也对周围人也会有新鲜感的信息,
自己参与游戏或者测试得到的结果。
不管是分享给朋友或朋友圈还是QQ对话,让用户主动去分享你的带有很大性质的广告意味的信息在自己的社交群体中,此条信息与自己相关并且别人也能参与进来当然是最理想的。
可口可乐北极熊求合影的例子就是一个很好的宣传方式,借由简单的合成照片技术让人们有意愿去分享自己努力创作的照片。还有UJEANS的设计延续了品牌的调性就是实用,在选择你的牛仔裤喜好时也同时穿插了商品的说明,显得不那么生硬。
H5和app比起来优势在于开发周期时间短,传播起来有效率,并且在更新迭代的成本上要小很多。特别在游戏上,未来H5会有更多的可能性。