设计开发H5的要点

成功的H5营销对H5页面本身就有极高的要求，只是简单的设计难以打动用户的心。如果H5页面不够吸引人，哪怕有再好的内容质量，用户也会因为看到页面的第一眼就转身离开。下面，长沙H5定制公司的小编就从字体，排版，音效，动效，适配性几个方面来聊聊关于H5的设计。

1、字体

一般来说，字体选择上没必要弄得花里胡哨，毕竟不同人有不同的审美风格，你喜欢的不一定别人也喜欢。所以，字体选择上使用默认字体就行，对于字体有想法的用户基本上会对自己手机进行设置，没必要做多余的更改。我们只需注意字号的选择，建议最小不要超过18，使用双数字号，同类别下统一字号。

2、排版

在有限的手机屏幕空间内，最好的效果是简单集中，最好有一个核心元素，中心元素不宜过多，突出重点为最优。越左边的排版会越容易引起关注。这是因为我们懒惰的大脑里最初看到这种简洁排版会立刻出现“嗯 我可以马上看完不费劲”的潜意识信息而带着轻松的态度去阅读。

3、音效

考虑到用户使用场景的多样性，那种介绍类的如果要加背景音乐，尽量不要太粗暴。有一点循序渐进最好，给用户留时间在骚扰别人之前可以关闭。或者可以在开始时是关闭状态。但做游戏h5页面的时候，音乐可以没有关闭开启按钮，因为用户对接下来发生的事是有预知的。

4、动效

页面中元素可以采用动效呈现。例如一些元素的位移，旋转，翻转，缩放，逐桢，淡入淡出，粒子效果，照片处理等等，还有3D展示效果。只得注意的是，在H5开发中复杂多变的动效不一定是好的，要考虑到加载速度等用户体验问题。

5、适配性

手机端之间：一般我们先用640X1136进行设计，参考线会标在960高的地方，主要元素最好不要过高以适配各种机型。其他安卓机器前端切图时可以适当拉伸，变化不会太大就不用每个进行适配。

响应式设计：页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。

在保证了内容质量的前提下，就要多注意这些页面设计的要素，两者相结合才能打造一个成功的H5案例。