台州页面设计:了解H5页面设计局限

作者:台州市久谦网络科技有限公司 浏览: 发表时间:2021-08-05 09:38:53

台州页面设计:了解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很少,但是有一个app用户量很大,就是Railway 12306,页面都是H5写的。

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

当然这样做也会有一些限制,也就是我们前面提到的坑。接下来,我们将重点分析嵌入在Native APP中的H5页面。

二、如何判断哪些页面是H5

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

1.看页面跳转

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

例如,Vipshop的主页将是Native,Vipshop的唯一页面将由H5编写,因此进入Vipshop的唯一页面时加载时间会稍长。

2.看看断网的情况

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

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

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

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

4.确定通过下拉刷新页面的时间(前提是具有下拉刷新功能)

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

体验的时候发现iOS QQ的有趣部落和Native刷新的时候体验一模一样,可以试试。只能说,腾讯的攻城狮尽可能接近H5页面的用户体验Native,开发能力强。

以上提供的这些方法都有局限性。如果APP有足够的开发资源优化H5页面,可以非常接近Native,让你几乎无法分辨。

3.H5在设计上有什么局限

1.键盘

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

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

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

那为什么JD.COM没有移除这个关闭按钮?我专门咨询过童鞋的开发,得到的答案是:如果可以针对H5界面at Native,修改导航栏,那肯定可以去掉。但是如果Native在编写基本框架时使用了开源代码,代码中的Native bar在这里有一个关闭按钮,并且没有接口可以移除,那么就没有办法了。这是基础设施问题,影响到全身。

因此,在设计交互流程时,如果需要去掉关闭按钮,需要和开发人员确认原因,看是否有合适的解决方案。

3.突出显示原生栏

常见的弹出操作是:弹出窗口出现时,为了让用户专注于弹出操作,底层会被屏蔽,无法操作。

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

在这个问题上,白色Native bar尤为突出,其他颜色更好。如下图,QQ的Native bar是蓝色的,所以当QQ的H5页面出现弹出窗口时Native bar并不是特别突出。

因此,建议如果H5页面上的Native bar为白色,那么H5弹窗的颜色就不要为白色,颜色和设计可以更加突出。如果Nativebar本身是蓝色和红色等亮色,那么可以将H5弹出窗口设为白色

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      网站地图

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