如何讓 H5 體驗接近 APP：（一）觸摸反饋

時間 2019-11-09

標籤如何 h5 體驗接近 app 觸摸反饋简体版

原文原文鏈接

要說互聯網發展趨勢，必然會說起一個詞彙：H5。從H5遊戲，H5站點，H5營銷等等。H5跨平臺的特性極大地下降了開發成本和推廣難度，同時也帶來了一個問題：如何讓h5的體驗能達到app同樣呢？讓咱們先來看一組對比(京東APP對比京東H5)：css

在h5頁中，手指接觸到列表項時，列表項沒有任何反應。而在app中，手指剛接觸到列表項時，列表項則從白色背景變爲灰色背景。這種交互反饋幾乎能夠在全部移動端APP中看見，甚至能夠說，交互反饋已經成爲一種用戶習慣。相較之下，h5頁雖然有着跨平臺的優點，但在細節處理上就差了不少，而且這種交互反饋h5並無原生支持。react native官方文檔有這麼一段介紹：html

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'。react

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".ios

綜上所述，咱們在開發h5頁面的時候，頗有必要給頁面一些可點擊元素加上一些觸摸反饋，這樣能夠大幅度提高頁面的總體體驗，使h5頁體驗更爲接近APP。去哪網的h5首頁即是這麼作的:css3

那麼，如何在頁面上加入這樣的反饋呢？目前瞭解到的有三種方案，總結以下：git

active 僞類

這種方式大多數前端童鞋都能聯想到，由於PC web就是這樣定義這種反饋的，那麼在移動端，這個方案如何呢？咱們先來看看w3c對:active的定義：github

the-user-action-pseudo-classes-hover-act
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.web

能夠看到，w3c標準裏對它的描述都是基於mouse事件的，徹底沒有說明如何支持touch事件。而正是因爲標準對此並無一個準肯定義，瀏覽器對此的理解和實際支持也是良莠不齊。react-native

在實際應用中，active僞類在移動端的表現也不是太好，在ios系統中甚至須要"hack"才能正常使用。若仔細看MDN對active僞類介紹，會發現下面這一段話：

MDN :active
[1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body>.

也就是說，在iOS中，咱們須要綁定一個touchstart事件來激活這一行爲。代碼以下：

document.addEventListener('touchstart', function(){});

通過反覆測試，得出結論以下:

安卓機型上觸發反饋會有延遲。和click的300ms延遲同樣。
ios上按住反饋元素後再將手指移出元素，反饋效果依然還在。(正常狀況，手指移出元素應當取消反饋效果)

測試demo: http://www.dearhaoge.com/touchFeedback/demo/delay-test.html

a 標籤包裹

在移動端，有個還在草案中的屬性-webkit-tap-highlight-color，定義了點擊一個超連接顯示的顏色。MDN上描述以下：

-webkit-tap-highlight-color
-webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on.

因此，咱們能夠在須要反饋的元素上包裹一層a標籤，而後設置這個屬性。缺點是隻能設置顏色和透明圖(rgba)。若是想要設置一些動畫效果(好比去哪網首頁的縮放效果)，這個方案也是不適用的。