北京H5设计外包：设计H5时有哪些局限性

1、键盘

如下图所示，支付宝Native的键盘和浮层可以做成一体的，而我们多多商服H5页面的浮层和系统键盘是分离的，这并不是开发能力的问题，而是H5页面调的是浏览器的键盘，本身就存在局限性。如果H5页面想获得更好的体验，需要自己开发键盘，但开发键盘并不容易且不是短期能够完成的。

2、容易误操作的关闭按钮
如下图所示，当加载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的设计技巧来弱化这些缺点，为用户带来更好的产品体验。