手機網頁應用的互動設計

談

HTML5為提高手機網頁的體驗提供了諸多的可能性，互動效果越來越接近原生App，故而成為Web App，有望將APP功能引向瀏覽器，讓移動平台的競爭由系統平台轉向了瀏覽器之間。

Web App比起原生App和wap有著自身的優缺點，先簡單瞭解下其特點，掌握設計趨勢，也便於以後在設計中應用。

離線儲存

離線儲存的意思是第一次訪問是下載網頁，以後在無網路的情況下也可以使用。一個離線應用程式就是一個URL列表–HTML，CSS，JavaScript，圖片，或者其他類型的資源。訪問時探測到伺服器列表的緩衝名單時，會觸發下載事件，根據名單下載指定的檔案儲存體到本地。

在下載的同時，瀏覽器將會周期性的觸發進度事件，此事件包含了諸如多少檔案已被下載，多少檔案仍然處於下載隊列等資訊。當緩衝名單中所有列出的資源被成功下載後，瀏覽器觸發下載完成事件。

當再次訪問時，瀏覽器會再次檢查網站的緩衝名單，通過對比名單和本地的資源，得知是否需要載入新資源。新版本載入完成之後不會立即被使用。後台可以下載新網頁，也不會強制使用者打斷當前操作流程，重新重新整理頁面。

如果此過程中的任何一點出現可怕的錯誤，你的瀏覽器將會觸發一個錯誤事件，並立即終止。類似於安裝應用程式，中途不可以出錯。

Web App可以利用儲存的特性將重要和重複的資料儲存在本地，避免頁面的重複重新整理，減少重要訊息在傳輸過程中被泄露，增量傳輸修改內容。

而離線儲存但也不是Web App特有的問題，瀏覽和閱讀類App也有離線的使用需求，用來應對隨時可能出現的網路問題。如離線模式是利用網路閑暇時間下載內容，當使用者開啟App時立即開始閱讀。或者是網路不佳情況下儲存使用者的操作記錄和載入相對重要的文字內容，之後再依次上傳已更新的資料，如微博的發送隊列機制。

互動操作

手機網頁的操作發送只有點擊，點選連結和控制項，互動方式非常單一，而Web App 的操作將越來越接近應用程式。

1.Web App的建立離不開網路速度的提升，載入更多的內容，圖形元素更為豐富。同時更多的JS互動，便於使用者操作和形成扁平化的資訊架構。

表徵圖取代文字連結，介面更為美觀，便於識別的。點擊地區不限於元素的視覺地區，便於使用者點擊。同時排版不受限制，可以達到原生App的視覺效果。

增加標籤欄，首頁呈現更為的內容，減少介面的層級關係，頁面關係更為明確。

介面可以部分更新，在需要時再呈現，減少介面的重新整理，儲存視覺的穩定性。

氣泡框可以減少頁面跳轉，適合訊息提醒等微任務的處理。資訊架構上越來越接近原生App，有利於扁平化層級關係和減少介面跳轉等設計項目將得到更多的應用。

2.識別更多的手勢操作，如下拉重新整理和右滑存檔等平移手勢。操作不必全部呈現在介面中，和平台操作保證一致。

3.調用系統硬體，如重力感應等感應器，不過在手機端還鮮有應用案例，離大規模應用還有一定的距離。

總之，互動上可以按照原生App的設計方式，效果將越來越接近，主要區別在於：

1. 設計中要考慮到瀏覽器地址欄和工具列的佔有空間，和其對App的操作存在一定的影響。
2. 暫時不適合調用系統底層介面，更適合web網站適配手機做的分支版本。
3. 由於HTML的限制，互動的細節上存在一定的差異。
4. 動效還沒大規模的應用，但Web App介面操作將更為流暢，介面跳轉時的平滑移動已經可以實現，以後還有更多的動效得到應用。
5. 現階段資訊架構還混雜著原生App和wap兩種架構方式。