H5设计：谈一谈H5设计上的一些需要注意的问题

一、Native APP和H5的区别

如下图所示，当加载H5过多的时候，我们多多商服及唯品花取现、京东实名认证等页面左上角有关闭按钮，容易误点。

那为什么不能将这个关闭按钮去掉呢？请教开发同事得到的答案是：如果Native那里可以给H5接口去修改导航栏，肯定是可以去掉的。但如果Native在写基础框架的时候用的是开源代码，代码中的Native bar这里都是有关闭按钮的，且没有接口可以去掉，那就没办法了。这属于基础架构问题，牵一发而动全身。

因此大家在设计交互流程时，如果需要去掉关闭按钮，需要和开发进行确认，看是否有合适的解决办法。

3、蒙层无法遮盖的Native bar

常见的弹窗操作是：当出现弹窗时，为了让用户专注弹窗操作，底层会出现蒙层且不可操作。

但如下图所示，H5页面中的蒙层无法覆盖Native bar，因此Native bar和弹窗一样高亮且可操作，打扰用户操作，容易转移用户注意力。

4、无法拓展功能的Native bar

Native APP的Native bar往往承载着拓展当前页面多种功能场景的，可以丰富页面的可操作性。

但如下图所示，我们多多商服、唯品花取现、京东实名认证等H5页面顶部的Native bar无法根据当前页面功能场景拓展功能，只能如我们房多多M站这样，想办法在Native bar下方或页面底部及页面左右侧悬浮去拓展功能。

四、总结一下

以上是我在做H5页面时遇到的一些问题，可能还有其他问题是我没有遇到的，欢迎大家与我一起讨论。

H5的优势是显而易见的，随着微信小程序的推出，H5的应用将更加广泛。但H5的天然缺陷也是无法避免的，我们可以运用交互、UI的设计技巧来弱化这些缺点，为用户带来更好的产品体验。

关于我们：

Infocode蓝畅信息技术有限公司成功为多家世界财富500强企业以及其他著名品牌提供优质服务，是您靠谱的互联网开发供应商。

服务客户遍及北京、上海、杭州、深圳、广州、天津、青岛、南京、宁波、苏州、无锡、厦门、重庆、西安等大中型城市及地区    为您提供：H5开发，小程序开发，H5外包，微信开发，H5商城开发，小程序商城开发，网站开发外包，H5游戏开发，小程序开发外包，小程序设计、APP开发外包，UI设计，SEO优化，SEO外包，视频后期制作等优质服务