移動Web應用開發入門指南——交互篇

時間 2019-11-20

標籤移動 web 應用開發入門指南交互欄目無線简体版

原文原文鏈接

交互篇

從PC到移動端，視覺和交互是用戶能直接感覺到的差別。在視覺篇中已經提到，移動設備的物理屬性一部分影響到視覺，另一些部分將影響到交互。那麼，移動設備影響交互的物理屬性都有哪些變化呢？對於這個問題，相信你們都早有答案。傳統PC的輸入設備相對單一，通常狀況下只有鼠標和鍵盤，而移動設備的硬件就變得很是豐富，觸屏、觸控筆、麥克風、陀螺儀和GPS等包羅萬象。下面我們就聊聊在移動Web開發中有關交互的一些問題。javascript

手勢

手勢是移動Web與PC Web開發在用戶接口上最大的一個差別，PC端主要考慮的是鼠標操做，鼠標的運行軌跡就比較簡單，jQuery對鼠標事件的支持也只有11個，基本上已經算最全的鼠標事件庫，這裏我就不細說，能夠自行查看API jQuery Mouse Event。html

下面這幅圖展現了基本的手勢圖例：html5

圖6（來自網絡）
java

就目前來講，大多數的移動Web應用場景，使用的手勢相對比較簡單，主要仍是單指手勢tap、long tap或double tap。我遇到的案例中，使用手勢相對複雜的應用應當是組圖產品。360搜索移動版的圖庫手勢實現，是我認爲目前移動端組圖展現的一個最佳實踐。在這個案例中手勢已經具有必定的複雜程度，使用到了單指和雙指手勢，包括：double tap、swipe、scale，而且使用的手勢與很是貼近組圖產品的實際需求，因此，360圖片搜索對於如何正確應用觸屏手勢來講很是具備參考意義。jquery

你們可使用手機掃描下面這個二維碼，查看360圖片搜索的的案例：
ios

使用手勢的技術並不複雜，如何在Web應用中選擇一個合適的手勢交互纔是值得深思的問題。Touch Gesture Guide這份PDF很是全面的分解了全部觸屏手勢，以及手勢動做的含義，同時，還能夠參考騰訊CDC團隊在早期的一篇文章《移動設備手勢設計初探》。git

觸屏事件

觸屏事件是一個較爲技術性的話題，可是在這篇文章中又不得不提到，由於它過重要了。全部的手勢都是使用觸屏事件的技術實現，如今在iOS和Android下通用的是Touch事件模型，Touch事件模型能夠參見Apple開發者文檔《Handling Events》的這篇文章，在iOS下還有一個特有的Gesture事件模型，在那篇文章中都有詳細的介紹。github

在觸屏事件模型中，傳統的click、mouse事件都是被模擬出來的，理論上應該是在touchend事件以後被觸發，如圖7：web

圖7（來自網絡）
api

在Touch事件模型中有一個必須注意的問題，click事件是在touchend以後延遲300ms觸發，如圖8：

圖8（來自網絡）

而就是這個延遲300ms，致使了移動Web開發很是著名的點擊穿透問題，《【初窺javascript奧祕之事件機制】論「點透」與「鬼點擊」》這篇文章舉的例子比較好，一看就能明白什麼是點透問題。關於點透問題也有不少已經出現了不少解決方案，如FastClick。

上面沒有提到Windows Phone，由於微軟爲移動設備專研發了PointerEvent事件模型，目前只有IE10+才支持，因此Web應用在Windows Phone下運行，要作PointerEvent兼容。在文章《瀏覽器的統一指針事件：Pointer Event》中講述了它的一些歷史和原理，並附了一些實例文章。

局部區域滾動

我先說明下我對它的定義，以避免有人和我理解不一樣。局部區域滾動就是給塊級元素賦予高寬和overflow:scroll，代碼以下：

div {
    width: 320px;
    height: 500px;
    overflow: scroll;
}

這麼作在PC瀏覽器下當然沒有任何問題，可是移動端瀏覽器因爲輸入設備（也就是上面說的手勢）的差別，致使局部區域與<body>全局滾動相沖突。當手指停留在局部區域時，瀏覽器須要識別你當前滾動的是全局仍是局部，這樣就顯得局部區域滾動的交互至關不協調。在早期的Android系統就不支持局部區域滾動，一直到Android 4才支持的比較不錯。

局部區域滾動在移動Web開發中，應用很是普遍，如：