温岭页面设计:了解H5页面设计的局限性

作者:台州市久谦网络科技有限公司 浏览: 发表时间:2021-09-24 09:22:10

温岭页面设计:了解H5页面设计的局限性。

1.H5和Native,有什么区别?

Native APP

Native APP指的是原生程序,依赖操作系统,交互性强,是一个完整的APP,可扩展性强,需要用户下载、安装和使用。

优点:

性能稳定,运行快速,运行平稳。

您可以直接访问本地资源,如通讯簿。

可以实现许多出色的动态效果。

在系统层面有贴心的通知或提醒,用户体验良好。

缺点:

开发成本高:不同的平台有不同的开发语言和界面适配,比如iOS和安卓。

维护成本高:比如一个APP已经更新到V5,但是还有用户在使用V2、V3、V4版本,需要更多的开发者来维护之前的版本。

更新慢:根据不同平台、不同流程,如提交-审核-上线等。,都比较复杂,和安卓相比,iOS更复杂,复习时间也更长。

H5

H5页面是一个用Html5语言编写的APP,也叫Web APP,不需要下载安装。它是一个生活在浏览器中的应用,需要通过浏览器与系统进行交互,因此受到网络速度和硬件的限制比较大。不过,随着网速和硬件的不断提升,H5在速度、稳定性和流畅度上最终会更接近Native的体验。

优点:

开发成本低:H5可以跨多个平台和终端,方便快速迭代。

维护成本低:H5无需用户手动升级即可更新,旧版本无需维护成本。

更新快:无需复杂的在线流程即可更新,方便以往产品的试错。

缺点:

受网络和硬件的限制,即使在H5上可以实现很多动态效果,效果也不好,而安卓由于硬件和系统的劣势,效果更差。

临时入口,无法获取系统级通知、提醒、动作等。

设计上有很多限制,用户体验差。

目前,使用H5的应用程序分为两类:一类是纯H5制作的,另一类是嵌入原生页面的。

由于H5的很多缺陷,纯H5制造的app很少,但是有一款纯H5制造的app,用户量很大,那就是Railway 12306,所有页面都是H5写的。

而更多的APP选择在Native APP中嵌入一些H5功能,比如QQ的兴趣部落。这些功能可以快速更新,不需要跟随版本的迭代,不同系统的体验是一样的。

二、如何确定哪些页面是H5。

如何快速判断一个APP页面是本地的还是H5的?

1.看页面跳转。

与APP H5页面相比,跳转速度更快。在网络环境一致的情况下,APP直接本地加载,而H5页面加载需要调用服务器,所以H5页面跳转比较费力不稳定。

比如Vipshop的首页是Native page,而Vipshop的页面是H5写的,所以进入Vipshop的页面时,加载时间会稍微长一些。

2.看看断网的情况。

断开手机网络,然后打开页面。页面Native可以正常显示,也可以部分显示,页面H5显示404或错误页面。这是因为Native页面通常在本地缓存,而H5页面在打开页面时通常会再次拉取数据。

3.看看APP顶部的导航栏是否会关闭。

如果关闭按钮出现在应用程序顶部的导航栏中,当前页面的正H5将不会出现(除非设计开发人员有意这样做)。

当H5加载过多时,“关闭”会出现在美团app、公众评论app和微信APP的左上角。

4.确定下拉刷新页面的时间(前提是下拉刷新功能可用)。

一般来说,如果界面没有明显的刷新现象,就是原生的,如果有明显的刷新现象,比如H5页面(IOS和安卓)是闪屏或者白屏。比如微信里的H5页面,淘宝里的蚂蚁花苑页面,刷新的时候明显是白色的,但是不到0.5秒,我多次抓拍微信截图都没有成功,但是淘宝里的蚂蚁花苑成功抓拍到了白色的屏幕,大家可以自己去感受一下。

3.H5在设计上有哪些局限?

1.键盘。

如下图所示,支付宝中Native的键盘和浮动层是可以集成的,而Vipshop H5页面的浮动层是和系统键盘分离的。这不是开发能力的问题,而是H5页面被调至浏览器键盘,其局限性是固有的。如果H5·佩奇想要获得更好的体验,他们需要开发自己的键盘,但是开发键盘并不是那么容易,也不是短时间就能完成的。

2.容易误操作的关闭按钮。

第三方的H5页面可以嵌入微信的微信官方账号。为了让用户在层次较深的第三方页面上快速返回微信主页面,导航栏会有返回和关闭两个选项。然而,这可能不适合所有的H5网页。有些H5页面,比如JD.COM修改支付密码的过程,都是在H5写的。有很多步骤,每一步都很关键。如果用户误点击了关闭,那么修改密码的整个过程就白费了。

3.突出显示原生栏。

常见的弹出操作是:弹出窗口出现时,为了让用户专注于弹出操作,会在底层出现一个遮罩,不可操作。

但是H5页面的蒙版无法覆盖Native bar,所以Native bar就像弹窗一样明亮可操作,干扰用户操作,容易转移用户注意力。

4.数据采集速度慢。

进入H5页面时,如果要获取的数据太多,用户的网络情况不好,会导致页面被刷出或者界面返回结果落后。例如,在Vipshop H5页面的短信验证中,如果在弹出窗口被调用的同时自动发送验证码,对页面的压力相对较大,因此该页面需要点击“获取验证码”来触发短信验证码的发送。

最后总结一下。

H5的优势显而易见。随着微信小程序的推出,H5将被广泛使用。然而,H5的自然缺陷是不可避免的。我们可以利用交互和UI设计技术来弱化这些缺陷,为用户带来更好的产品体验。


温岭页面设计:了解H5页面设计的局限性
长按图片保存/分享

台州市久谦网络科技有限公司  版权所有

 Copyright © 2020 All Rights浙ICP备2020041870号-1 Reserved      网站地图

台州市久谦网络科技有限公司  版权所有 

Copyright © 2020 All Rights Reserved 浙ICP备1245789785号-1      网站地图

添加微信好友,详细了解产品
使用企业微信
“扫一扫”加入群聊
复制成功
添加微信好友,详细了解产品
我知道了