h5页面设计规范

h5页面设计规范

1、把重要内容布局在安全线之上。

目前包含android和ios最小分辨率均在640*960之上。计算Android和ios安全区域，以android的导航栏和标签栏最大值（48+100）为准:960-148=812，从状态栏开始812设计即是安全区域。

2、可点击部件尽量和屏幕四边保持20-30PX的距离。

3、设计的时候尽量以一个使用者的角度去设计，判断哪个页面需要状态栏，哪个页面只需要一个返回按钮。

4、iPhone输入法自带搜索按钮，没有必要再在页面上进行显示。

5、尽可能的对页面部件大小边距等元素进行大小的标注。

6、中文字体:黑体-简或者华文黑体。英文字体:helvetica neue lt。

7、字号选择:建议最小不超过18像素，其他字号双数，同种类别下用一样字号。

8、排版

集中:简单集中，中心元素不易过多，突出重点为最优。

9、给开发提供图片素材要控制在100k以内。这样不仅能提高加载速度，还能节省用户带宽。

10、在小小的手机屏幕里，碎片时间中，我们必须先抓人眼球，再抓住人心。

11、有时候构思的时间比做的时间还要长。

12、H5和app比起来优势在于开发周期时间短，传播起来有效率，并且在更新迭代的成本上要小很多。特别在游戏上，未来H5会有更多的可能性。

13、从页面布局上减少跳转：使用交互技巧隐藏文字