了解H5亿万官网手机登录设计局限

我的开发知识比较缺乏♬♪♩♭♪の,写这篇文章主要是为了帮助自己梳理和总结开发知识★☆♀◆◇。为了保障此篇文章知识的准确性♬♪♩♭♪の,我请教了周围的开发同事★☆♀◆◇。如果大家发现哪些知识是有问题的♬♪♩♭♪の,欢迎在评论中指出★☆♀◆◇。下面是正文:



大家是否注意到♬♪♩♭♪の,越来越多的APP开始使用H5亿万官网手机登录来进行开发★☆♀◆◇。例如京东的账户与安全亿万官网手机登录♬♪♩♭♪の、QQ的兴趣部落♬♪♩♭♪の、唯品会的唯品花亿万官网手机登录♬♪♩♭♪の、以及最近的热点-微信小程序...

最近我的工作中也有越来越多的H5需求♬♪♩♭♪の,这些H5需要和Native来回跳转♬♪♩♭♪の,在设计上也有许多局限♬♪♩♭♪の,为了能在以后的设计中少踩雷♬♪♩♭♪の,我们从以下3个方面来分析一下H5:

1♬♪♩♭♪の、H5和Native有什么不同

2 ♬♪♩♭♪の、如何判断哪些亿万官网手机登录是H5

3♬♪♩♭♪の、在设计中H5有哪些局限


一♬♪♩♭♪の、H5和Native有什么不同


Native APP

Native APP 指的是原生程序♬♪♩♭♪の,依托于操作系统♬♪♩♭♪の,有很强的交互性♬♪♩♭♪の,是一个完整的 APP ♬♪♩♭♪の,可拓展性强♬♪♩♭♪の,需要用户下载安装使用★☆♀◆◇。


优点:

  • 性能稳定♬♪♩♭♪の、操作速度快♬♪♩♭♪の,上手流畅

  • 可以直接访问本地资源♬♪♩♭♪の,比如通讯录

  • 可以实现很多设计出色的动效

  • 拥有系统级别的贴心通知或提醒♬♪♩♭♪の,用户体验好


缺点:

  • 开发成本高:不同平台有不同的开发语言和界面适配,例如iOS♬♪♩♭♪の、Android★☆♀◆◇。

  • 维护成本高:例如一款 APP 已更新至 V5 版本♬♪♩♭♪の,但仍有用户在使用 V2♬♪♩♭♪の, V3♬♪♩♭♪の, V4 版本♬♪♩♭♪の,需要更多的开发人员维护之前的版本

  • 更新缓慢:根据不同平台♬♪♩♭♪の,提交–审核–上线 等等不同的流程♬♪♩♭♪の,需要经过的流程较复杂♬♪♩♭♪の,且iOS和Android相比♬♪♩♭♪の,审核更复杂♬♪♩♭♪の,时间也更长★☆♀◆◇。


H5

H5亿万官网手机登录是采用 Html5 语言写出的 APP♬♪♩♭♪の,也叫Web APP♬♪♩♭♪の,不需要下载安装★☆♀◆◇。是生存在浏览器中的应用♬♪♩♭♪の,需要通过浏览器和系统进行交互♬♪♩♭♪の,因此更加受限于网速和硬件★☆♀◆◇。但随着网速的不断提高♬♪♩♭♪の,硬件的不断提升♬♪♩♭♪の,H5在速度♬♪♩♭♪の、稳定性♬♪♩♭♪の、流畅度方面终将和Native的体验越来越拉近★☆♀◆◇。


优点:

  • 开发成本低:H5可以跨多个平台和终端♬♪♩♭♪の,方便快速迭代

  • 维护成本低:H5不需要用户手动升级即可更新♬♪♩♭♪の,没有维护老版本的成本

  • 更新快:不需要经过复杂的上线流程即可更新♬♪♩♭♪の,方便前期产品的不断试错


缺点:

  • 受限于网络和硬件♬♪♩♭♪の、很多动效即使可以在H5上实现♬♪♩♭♪の,效果也不好♬♪♩♭♪の,且由于硬件和系统劣势♬♪♩♭♪の,Android的效果更差★☆♀◆◇。

  • 临时性的入口♬♪♩♭♪の、无法获取系统级别的通知♬♪♩♭♪の,提醒♬♪♩♭♪の,动效等等

  • 设计上受限制诸多♬♪♩♭♪の, 用户体验较差 

现在使用H5的APP分为两类:一类是纯H5制作的♬♪♩♭♪の,另一类是嵌在原生亿万官网手机登录的H5★☆♀◆◇。

由于H5的诸多缺陷♬♪♩♭♪の,纯H5制作的APP比较少♬♪♩♭♪の,但有一个用户量极大的APP是纯用H5制作的♬♪♩♭♪の,就是铁路12306♬♪♩♭♪の,亿万官网手机登录都是用H5写的★☆♀◆◇。

而更多的APP选择将某些H5功能嵌在Native APP中♬♪♩♭♪の,例如QQ的兴趣部落★☆♀◆◇。这些功能不用跟随版本迭代即可快速更新♬♪♩♭♪の,且在不同系统中的体验都是相同的★☆♀◆◇。

H5亿万官网手机登录★☆♀◆◇。


二♬♪♩♭♪の、如何判断哪些亿万官网手机登录是H5


如何快速的判断一个APP亿万官网手机登录是原生的还是H5亿万官网手机登录呢☂ ☃ ☄ ★?

1♬♪♩♭♪の、看网页跳转情况

    APP和H5亿万官网手机登录相比♬♪♩♭♪の,跳转速度更快★☆♀◆◇。网络环境一致的情况下♬♪♩♭♪の,APP的直接在本地加载♬♪♩♭♪の,而H5亿万官网手机登录加载是需要调取服务器的♬♪♩♭♪の,所以H5亿万官网手机登录跳转更费力♬♪♩♭♪の,不稳定感会强一些★☆♀◆◇。

例如唯品会的首页就是Native亿万官网手机登录♬♪♩♭♪の,而唯品花亿万官网手机登录是由H5写的♬♪♩♭♪の,所以进入唯品花亿万官网手机登录的时候♬♪♩♭♪の,加载时间会稍微长一些★☆♀◆◇。

2♬♪♩♭♪の、看断网的情况

把手机的网络断掉♬♪♩♭♪の,然后打开亿万官网手机登录♬♪♩♭♪の,可以正常显示♬♪♩♭♪の、或者可以显示一部分的是Native亿万官网手机登录♬♪♩♭♪の,显示404或错误亿万官网手机登录的是H5亿万官网手机登录★☆♀◆◇。这是由于Native亿万官网手机登录一般都会在本地进行缓存♬♪♩♭♪の,而H5亿万官网手机登录一般是在打开亿万官网手机登录的时候去重新拉数据★☆♀◆◇。

当然也有例外情况♬♪♩♭♪の,比如QQ的兴趣部落在断网的情况下♬♪♩♭♪の,亿万官网手机登录依旧是可以加载出来的★☆♀◆◇。这是由于兴趣部落的开发团队制作了离线包♬♪♩♭♪の,将原来要请求服务器的H5亿万官网手机登录的资源打包在本地♬♪♩♭♪の,这样就能在本地预加载了♬♪♩♭♪の,不用在线上拉取♬♪♩♭♪の,节省了很多时间♬♪♩♭♪の,体验上也和Native非常接近★☆♀◆◇。

3♬♪♩♭♪の、看APP顶部导航栏是否会有关闭的操作

如果APP顶部导航栏当中出现了关闭按钮♬♪♩♭♪の,那么当前的亿万官网手机登录肯定的H5♬♪♩♭♪の,原生的不会出现(除非设计开发者故意弄的)

美团的♬♪♩♭♪の、大众点评的APP♬♪♩♭♪の、微信APP当加载H5过多的时候♬♪♩♭♪の,左上角会出现“关闭”★☆♀◆◇。

4♬♪♩♭♪の、判断亿万官网手机登录 下拉刷新的时候(前提是要有下拉刷新的功能)

一般情况下♬♪♩♭♪の,如果界面没有明显刷新现象的是原生的♬♪♩♭♪の,如果有明显刷新现象♬♪♩♭♪の,比如亿万官网手机登录闪一下或者白屏一下的是H5亿万官网手机登录(IOS和Android)★☆♀◆◇。比如微信里的H5亿万官网手机登录♬♪♩♭♪の,和淘宝里的蚂蚁花呗亿万官网手机登录刷新时都明显的白屏一下♬♪♩♭♪の,但也就不到0.5秒的瞬间♬♪♩♭♪の,微信我截图扑捉了很多次都没成功♬♪♩♭♪の,但淘宝的蚂蚁花呗成功截到了白屏的瞬间♬♪♩♭♪の,大家可以去自己感受一下★☆♀◆◇。

在体验的时候发现iOS版的QQ的兴趣部落在下拉刷新时和Native的体验一模一样♬♪♩♭♪の,大家可以去试试★☆♀◆◇。只能说腾讯的攻城狮们将H5亿万官网手机登录的用户体验最大限度接近Native♬♪♩♭♪の,开发能力很强★☆♀◆◇。


以上提供的这些方法也都是有局限性的♬♪♩♭♪の,如果APP有足够的开发资源来对H5亿万官网手机登录进行优化♬♪♩♭♪の,其实是可以做到和Native的体验非常接近的♬♪♩♭♪の,能让你几乎无法分辨★☆♀◆◇。


三♬♪♩♭♪の、在设计中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的应用将更加广泛★☆♀◆◇。但H5的天然缺陷也是无法避免的♬♪♩♭♪の,我们可以运用交互♬♪♩♭♪の、UI的设计技巧来弱化这些缺陷♬♪♩♭♪の,为用户带来更好的产品体验★☆♀◆◇。

此篇文章帮助自己记录♬♪♩♭♪の,也希望能提供给大家一些参考

来源:UI中国

上一篇: 国内最火的五款HTML5前端开发框架

下一篇: 南非海岸卷起“泡沫巨浪” 民众拥抱海浪秒变“泡沫人”

分享到: 更多