丝路旗下全国CG人才培养基地【股票代码:300556】

搜索课程
  • 24小时免费客服热线
  • 025-6965-8961

当前位置:首页>资讯中心>UI设计>Web UI设计>正文

【页面设计】在页面设计中,H5有哪些局限性?

2018-08-13 10:43 来源: 丝路培训学院 分类: Web UI设计
81 作者:丝路培训学院

[导读] 1、键盘 如下图所示,支付宝中Native的键盘和浮层可以做成一体的,而唯品会H5页面的浮层和系统键盘是分离的,这并不是开发能力的问题,而是H5页面调的是浏览器的键盘,局限性是本

1、键盘

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

2、容易误操作的关闭按钮
微信的公众号中可以嵌入第三方的H5页面,为了能让用户在层级较深的第三方页面可以快速返回微信主页面,导航栏会有返回和关闭两个选项。但这不一定适合所有H5页面,有些H5页面,比如京东的修改支付密码流程都是用H5写的,步骤比较多且每一步都很关键,如果用户误点击了关闭,整个修改密码的流程就前功尽弃了。

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

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

3、高亮的native bar

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

 

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

 

在这个问题上,白色Native bar尤其突出,而其他颜色的要好一些。如下图QQ的Native bar是蓝色,因此当QQ的H5页面出现弹窗时,Native bar并不是特别突出。

 

因此建议H5页面如果Native bar是白色的,则H5弹窗的颜色就不要再做白色了,颜色和设计都可以更加突出。如果Nativebar本身是蓝色、红色等比较亮的颜色,那么H5弹窗就可以做白色。

4、数据获取速度慢

进入H5页面时,如果需要获取的数据太多,而用户的网络情况又不佳,就会造成页面刷不出来或者接口返回结果滞后。比如唯品会H5页面的短信验证,如果在调出弹窗的同时自动发送验证码,给页面的压力是比较大的,因此这个页面需要点击“获取验证码”才能触发短信验证码发送。

更优的解决方法是:打开弹窗时,默认自动发送短信验证码,但是“获取验证码”button呈loading状态,给页面缓冲时间,也给用户加载预期。如下图:

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


版权声明:

本文由丝路设计培训学校的编辑人员所撰写,未经同意严禁转载,否则将严肃追究相关法律责任。文章原始链接:http://www.silucg.net/article/web/ymsj.html

热门课程

优惠活动:【领取免费学习资料】+【0元免费试听课程!】热线电话:025-69658961