国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

xiguadada / 1412人閱讀

摘要：跨平臺的特性極大地降低了開發(fā)成本和推廣難度，同時也帶來了一個問題如何讓的體驗?zāi)苓_到一樣呢讓我們先來看一組對比京東對比京東在頁中，手指接觸到列表項時，列表項沒有任何反應(yīng)。代碼如下經(jīng)過反復(fù)測試，得出結(jié)論如下安卓機型上觸發(fā)反饋會有延遲。

要說互聯(lián)網(wǎng)發(fā)展趨勢，必然會提及一個詞匯：H5。從H5游戲，H5站點，H5營銷等等。H5跨平臺的特性極大地降低了開發(fā)成本和推廣難度，同時也帶來了一個問題： 如何讓h5的體驗?zāi)苓_到app一樣呢？讓我們先來看一組對比(京東APP對比京東H5)：

在h5頁中，手指接觸到列表項時，列表項沒有任何反應(yīng)。而在app中，手指剛接觸到列表項時，列表項則從白色背景變?yōu)榛疑尘啊＿@種交互反饋幾乎可以在所有移動端APP中看見，甚至可以說，交互反饋已經(jīng)成為一種用戶習(xí)慣。相較之下，h5頁雖然有著跨平臺的優(yōu)勢，但在細節(jié)處理上就差了很多，并且這種交互反饋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組件中，“可點擊組件”就應(yīng)該對用戶的操作做出及時反饋。下面一段話更是直接指出了為什么"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".

綜上所述，我們在開發(fā)h5頁面的時候，很有必要給頁面一些可點擊元素加上一些觸摸反饋，這樣可以大幅度提升頁面的整體體驗，使h5頁體驗更為接近APP。去哪網(wǎng)的h5首頁便是這么做的:

那么，如何在頁面上加入這樣的反饋呢？目前了解到的有三種方案，總結(jié)如下：

active 偽類

這種方式大多數(shù)前端童鞋都能聯(lián)想到，因為PC web就是這樣定義這種反饋的，那么在移動端，這個方案如何呢？我們先來看看w3c對:active的定義：

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.

可以看到，w3c標準里對它的描述都是基于mouse事件的，完全沒有說明如何支持touch事件。而正是由于標準對此并沒有一個準確定義，瀏覽器對此的理解和實際支持也是參差不齊。

在實際應(yīng)用中，active偽類在移動端的表現(xiàn)也不是太好，在ios系統(tǒng)中甚至需要"hack"才能正常使用。若仔細看MDN對active偽類介紹，會發(fā)現(xiàn)下面這一段話：

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 .

也就是說，在iOS中，我們需要綁定一個touchstart事件來激活這一行為。代碼如下：

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

經(jīng)過反復(fù)測試，得出結(jié)論如下:

安卓機型上觸發(fā)反饋會有延遲。和click的300ms延遲一樣。

ios上按住反饋元素后再將手指移出元素，反饋效果依然還在。(正常情況，手指移出元素應(yīng)當取消反饋效果)

測試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標簽，然后設(shè)置這個屬性。缺點是只能設(shè)置顏色和透明圖(rgba)。如果想要設(shè)置一些動畫效果(比如去哪網(wǎng)首頁的縮放效果)，這個方案也是不適用的。

自定義添加 class

第三個方法通過自定義touch事件來觸發(fā)反饋，具體方法如下文所示：

在touchstart觸發(fā)的時候，給元素加上class(比如圖中是波紋效果)并且在手指持續(xù)放在元素上的時候保持class不被移除。

touchmove移出元素或者觸發(fā)滾動條時移除class。當然,touchend和touchcancel也必須移除反饋class。

總結(jié)

如果只是想要簡單實現(xiàn)的話，可以選擇前兩種方案，配置相對簡單。追求良好體驗的童鞋推薦第三種方案，第三種方案整體思想不是很復(fù)雜，但也不能對所有的交互元素都多帶帶配置一次，這樣也有失代碼的優(yōu)雅。

經(jīng)過思考和折騰，本人提出了一個方案-->touchFeedback.js，在用戶體驗和開發(fā)體驗之間取了一個平衡，這里是一些使用touchFeedback.js做的反饋效果(PC需要模擬手機查看)：一些有趣的反饋效果

項目地址： https://github.com/backToNature/touchFeedback

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/90937.html

相關(guān)文章

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

    摘要：跨平臺的特性極大地降低了開發(fā)成本和推廣難度，同時也帶來了一個問題如何讓的體驗?zāi)苓_到一樣呢讓我們先來看一組對比京東對比京東在頁中，手指接觸到列表項時，列表項沒有任何反應(yīng)。代碼如下經(jīng)過反復(fù)測試，得出結(jié)論如下安卓機型上觸發(fā)反饋會有延遲。 showImg(https://segmentfault.com/img/bVCXXT); 要說互聯(lián)網(wǎng)發(fā)展趨勢，必然會提及一個詞匯：H5。從H5游戲，H5站...

    Hegel_Gu 評論0 收藏0

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

    摘要：跨平臺的特性極大地降低了開發(fā)成本和推廣難度，同時也帶來了一個問題如何讓的體驗?zāi)苓_到一樣呢讓我們先來看一組對比京東對比京東在頁中，手指接觸到列表項時，列表項沒有任何反應(yīng)。代碼如下經(jīng)過反復(fù)測試，得出結(jié)論如下安卓機型上觸發(fā)反饋會有延遲。 showImg(https://segmentfault.com/img/bVCXXT); 要說互聯(lián)網(wǎng)發(fā)展趨勢，必然會提及一個詞匯：H5。從H5游戲，H5站...

    ctriptech 評論0 收藏0

  • 保利威無延遲直播：全面增強互動體驗，大班課、帶貨直播轉(zhuǎn)化更高效！

    摘要：保利威無延遲直播可以在手機電腦上實現(xiàn)高參與度的互動，讓課堂體驗再上一層，對于提升公開課轉(zhuǎn)化率非常有幫助。無延遲體驗?zāi)茏屩辈ジ咏€下體驗。 ? ? 衡量一場直播是否成功，用戶互動體驗必然是關(guān)鍵一環(huán)。 ? 今年疫情影響下，云辦公、云上課、云會展、云購物紛紛興起。帶貨直播、空中課堂、會展直播等多樣化的場景讓用戶對直播實時性、流暢性有了更高要求。 ? ...

    不知名網(wǎng)友 評論0 收藏0

  • 螞蟻金服移動端可視化解決方案 F2 3.2 正式發(fā)布

    摘要：，一個專注于移動，開箱即用的可視化解決方案，完美支持環(huán)境同時兼容多種環(huán)境小程序，。專業(yè)的移動設(shè)計指引為你帶來最佳的移動端圖表體驗。基于，移動端可視化圖表庫。 showImg(https://segmentfault.com/img/remote/1460000016176811?w=1600&h=440); F2，一個專注于移動，開箱即用的可視化解決方案，完美支持 H5 環(huán)境同時兼容多...

    sydMobile 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<