现在做H5开发的企业越来越多,而所呈现的效果也是各不相同,那么对于一个H5制作公司而言,在制作H5的时候,又需要注意哪些细节呢?
1、操作按钮需远离页面底部
现在主流的H5设计尺寸是参照 iPhone5s 的屏幕来设计的(640px * 1136px),所以一般H5的尺寸规范为640 px * 1008 px(导航栏和状态栏共占据128px)。一般按钮放在距离底部128px 以上,这样不仅能在不同机型上做良好地适配,而且对于单手操作的人来说较为舒适。
2、尽量不使用右滑的交互方式
在H5中尽量不要设计使用向右滑动的交互方式。因为 不论是在 Android 上,还是 iPhone 中,向右滑动容易误触发返回上一级页面。
3、特殊机型的适配
H5在不同的机型适配,虽然每个开发者都有一套自己的完整方案,但一定要注意小屏机(虽说现在大屏机已是主流,尤其是iPhone4s)和带有虚拟按键的机型适配。
4、不要多个音乐同时播放
由于系统的限制,Android 在同一时间,只允许播放一段背景音乐。在 IOS 下并没有限制,例如 iPhone 的机型在播放背景音乐的同时可以做到播放各种交互音效。所以一般在 Android上H5只播放背景音乐。如有特殊场景的话,可以先暂停背景音乐,再播交互音效,音效播放完毕后再播背景音乐。
5、不要用横屏的交互方式
不要轻易使用横屏。在微信 for Android 中,H5以横屏的方式展现的前提是:其一,开启系统的屏幕旋转;其二,开启微信的横屏模式。操作成本较高,而且顶部的导航栏和状态栏还占据了一定的宽度(屏幕本身就比较窄)。如果场景需要,一定要引导用户如何开启横屏模式。
6、使用 SVG 格式图片
就像矢量图形一样,SVG也是一种图片类型,不过它是基于 一系列有序地代码构成的,所以以SVG格式存储的图片资源文件比较小,相比较JPG而言,几乎是近百倍的差距。所以用 AI等矢量工具制作的页面,优先考虑将图片存储为SVG格式。
综上所述,我们在进行H5制作的时候,需要注意多方面的问题,这样才能让H5页面所呈现的效果越好。蓝橙互动是一家专业的H5开发公司,能够为你提供有效可行的H5定制开发方案!