HTML5為提高手機網(wǎng)頁的體驗提供了諸多的可能性，交互效果越來越接近原生App，故而成為Web

App，有望將APP功能引向瀏覽器，讓移動平臺的競爭由系統(tǒng)平臺轉(zhuǎn)向了瀏覽器之間。

Web App比起原生App和wap有著自身的優(yōu)缺點，先簡單了解下其特點，掌握設(shè)計趨勢，也便于以后在設(shè)計中應(yīng)用。

離線存儲

離線存儲的意思是第一次訪問是下載網(wǎng)頁，以后在無網(wǎng)絡(luò)的情況下也可以使用。一個離線應(yīng)用程序就是一個URL列表–HTML，CSS，JavaScript，圖片，或者其他類型的資源。訪問時探測到服務(wù)器列表的緩存名單時，會觸發(fā)下載事件，根據(jù)名單下載指定的文件存儲到本地。

在下載的同時，瀏覽器將會周期性的觸發(fā)進度事件，此事件包含了諸如多少文件已被下載，多少文件仍然處于下載隊列等信息。當緩存名單中所有列出的資源被成功下載后，瀏覽器觸發(fā)下載完成事件。

當再次訪問時，瀏覽器會再次檢查網(wǎng)站的緩存名單，通過對比名單和本地的資源，得知是否需要加載新資源。新版本加載完成之后不會立即被使用。后臺可以下載新網(wǎng)頁，也不會強制用戶打斷當前操作流程，重新刷新頁面。

如果此過程中的任何一點出現(xiàn)可怕的錯誤，你的瀏覽器將會觸發(fā)一個錯誤事件，并立即終止。類似于安裝應(yīng)用程序，中途不可以出錯。

Web App可以利用存儲的特性將重要和重復(fù)的數(shù)據(jù)保存在本地，避免頁面的重復(fù)刷新，減少重要信息在傳輸過程中被泄露，增量傳輸修改內(nèi)容。

而離線存儲但也不是Web

App特有的問題，瀏覽和閱讀類App也有離線的使用需求，用來應(yīng)對隨時可能出現(xiàn)的網(wǎng)絡(luò)問題。如離線模式是利用網(wǎng)絡(luò)閑暇時間下載內(nèi)容，當用戶打開App時立即開始閱讀?；蛘呤蔷W(wǎng)絡(luò)不佳情況下保存用戶的操作記錄和加載相對重要的文字內(nèi)容，之后再依次上傳已更新的數(shù)據(jù)，如微博的發(fā)送隊列機制。

交互操作

手機網(wǎng)頁的操作發(fā)送只有點擊，點擊鏈接和控件，交互方式非常單一，而Web App 的操作將越來越接近應(yīng)用程序。

1.Web App的建立離不開網(wǎng)絡(luò)速度的提升，加載更多的內(nèi)容，圖形元素更為豐富。同時更多的JS交互，便于用戶操作和形成扁平化的信息架構(gòu)。

圖標取代文字鏈接，界面更為美觀，便于識別的。點擊區(qū)域不限于元素的視覺區(qū)域，便于用戶點擊。同時排版不受限制，可以達到原生App的視覺效果。

增加標簽欄，首頁呈現(xiàn)更為的內(nèi)容，減少界面的層級關(guān)系，頁面關(guān)系更為明確。

界面可以部分更新，在需要時再呈現(xiàn)，減少界面的刷新，保存視覺的穩(wěn)定性。

氣泡框可以減少頁面跳轉(zhuǎn)，適合消息提醒等微任務(wù)的處理。信息架構(gòu)上越來越接近原生App，有利于扁平化層級關(guān)系和減少界面跳轉(zhuǎn)等設(shè)計元素將得到更多的應(yīng)用。

2.識別更多的手勢操作，如下拉刷新和右滑存檔等平移手勢。操作不必全部呈現(xiàn)在界面中，和平臺操作保證一致。

3.調(diào)用系統(tǒng)硬件，如重力感應(yīng)等傳感器，不過在手機端還鮮有應(yīng)用案例，離大規(guī)模應(yīng)用還有一定的距離。

總之，交互上可以按照原生App的設(shè)計方式，效果將越來越接近，主要區(qū)別在于：

設(shè)計中要考慮到瀏覽器地址欄和工具欄的占有空間，和其對App的操作存在一定的影響。

暫時不適合調(diào)用系統(tǒng)底層接口，更適合web網(wǎng)站適配手機做的分支版本。

由于HTML的限制，交互的細節(jié)上存在一定的差異。

動效還沒大規(guī)模的應(yīng)用，但Web App界面操作將更為流暢，界面跳轉(zhuǎn)時的平滑移動已經(jīng)可以實現(xiàn)，以后還有更多的動效得到應(yīng)用。

現(xiàn)階段信息架構(gòu)還混雜著原生App和wap兩種架構(gòu)方式

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

分享題目：談手機網(wǎng)頁應(yīng)用的交互設(shè)計
網(wǎng)頁網(wǎng)址：http://redsoil1982.com.cn/news18/313818.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、微信小程序、網(wǎng)站收錄、全網(wǎng)營銷推廣、網(wǎng)站設(shè)計、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)