如何让 H5 体验接近 APP

发送到手机
使用"扫一扫"即可发送至手机

要说互联网发展趋势,必然会提及一个词汇:H5。从H5游戏,H5站点,H5营销等等。H5跨平台的特性极大地降低了开发成本和推广难度,同时也带来了一个问题: 如何让h5的体验能达到app一样呢?让我们先来看一组对比(京东APP对比京东H5):


在h5页中,手指接触到列表项时,列表项没有任何反应。而在app中,手指刚接触到列表项时,列表项则从白色背景变为灰色背景。这种交互反馈几乎可以在所有移动端APP中看见,甚至可以说,交互反馈已经成为一种用户习惯。相较之下,h5页虽然有着跨平台的优势,但在细节处理上就差了很多,并且这种交互反馈h5并没有原生支持。react native官方文档有这么一段介绍:


Tappable Components

Tappable components should provide feedback that show the user what is handling their touch, and what will happen when they lift their finger. The user should also be able to cancel a tap by dragging their finger away.


这段介绍主要是说,原生APP组件中,“可点击组件”就应该对用户的操作做出及时反馈。下面一段话更是直接指出了为什么"web" app doesn't feel 'native'。


TouchableWithoutFeedback

Do not use unless you have a very good reason. All the elements that respond to press should have a visual feedback when touched. This is one of the primary reason a "web" app doesn't feel "native".


综上所述,我们在开发h5页面的时候,很有必要给页面一些可点击元素加上一些触摸反馈,这样可以大幅度提升页面的整体体验,使h5页体验更为接近APP。

如何让 H5 体验接近 APP

如何让 H5 体验接近 APP

分享: