HTML5為提高手機(jī)網(wǎng)頁(yè)的體驗(yàn)提供了諸多的可能性，交互效果越來(lái)越接近原生App，故而成為Web App，有望將APP功能引向?yàn)g覽器，讓移動(dòng)平臺(tái)的競(jìng)爭(zhēng)由系統(tǒng)平臺(tái)轉(zhuǎn)向了瀏覽器之間。
Web App比起原生App和wap有著自身的優(yōu)缺點(diǎn)，先簡(jiǎn)單了解下其特點(diǎn)，掌握設(shè)計(jì)趨勢(shì)，也便于以后在設(shè)計(jì)中應(yīng)用。
離線存儲(chǔ)
離線存儲(chǔ)的意思是第一次訪問(wèn)是下載網(wǎng)頁(yè)，以后在無(wú)網(wǎng)絡(luò)的情況下也可以使用。一個(gè)離線應(yīng)用程序就是一個(gè)URL列表 –HTML，CSS，JavaScript，圖片，或者其他類(lèi)型的資源。訪問(wèn)時(shí)探測(cè)到服務(wù)器列表的緩存名單時(shí)，會(huì)觸發(fā)下載事件，根據(jù)名單下載指定的文件存儲(chǔ)到本地。
在下載的同時(shí)，瀏覽器將會(huì)周期性的觸發(fā)進(jìn)度事件，此事件包含了諸如多少文件已被下載，多少文件仍然處于下載隊(duì)列等信息。當(dāng)緩存名單中所有列出的資源被成功下載后，瀏覽器觸發(fā)下載完成事件。
當(dāng)再次訪問(wèn)時(shí)，瀏覽器會(huì)再次檢查網(wǎng)站的緩存名單，通過(guò)對(duì)比名單和本地的資源，得知是否需要加載新資源。新版本加載完成之后不會(huì)立即被使用。后臺(tái)可以下載新網(wǎng)頁(yè)，也不會(huì)強(qiáng)制用戶打斷當(dāng)前操作流程，重新刷新頁(yè)面。
如果此過(guò)程中的任何一點(diǎn)出現(xiàn)可怕的錯(cuò)誤，你的瀏覽器將會(huì)觸發(fā)一個(gè)錯(cuò)誤事件，并立即終止。類(lèi)似于安裝應(yīng)用程序，中途不可以出錯(cuò)。
Web App可以利用存儲(chǔ)的特性將重要和重復(fù)的數(shù)據(jù)保存在本地，避免頁(yè)面的重復(fù)刷新，減少重要信息在傳輸過(guò)程中被泄露，增量傳輸修改內(nèi)容。
而離線存儲(chǔ)但也不是Web App特有的問(wèn)題，瀏覽和閱讀類(lèi)App也有離線的使用需求，用來(lái)應(yīng)對(duì)隨時(shí)可能出現(xiàn)的網(wǎng)絡(luò)問(wèn)題。如離線模式是利用網(wǎng)絡(luò)閑暇時(shí)間下載內(nèi)容，當(dāng)用戶打開(kāi)App時(shí)立即開(kāi)始閱讀�；蛘呤蔷W(wǎng)絡(luò)不佳情況下保存用戶的操作記錄和加載相對(duì)重要的文字內(nèi)容，之后再依次上傳已更新的數(shù)據(jù)，如微博的發(fā)送隊(duì)列機(jī)制。
交互操作
手機(jī)網(wǎng)頁(yè)的操作發(fā)送只有點(diǎn)擊，點(diǎn)擊鏈接和控件，交互方式非常單一，而Web App 的操作將越來(lái)越接近應(yīng)用程序。
1.Web App的建立離不開(kāi)網(wǎng)絡(luò)速度的提升，加載更多的內(nèi)容，圖形元素更為豐富。同時(shí)更多的JS交互，便于用戶操作和形成扁平化的信息架構(gòu)。
圖標(biāo)取代文字鏈接，界面更為美觀，便于識(shí)別的。點(diǎn)擊區(qū)域不限于元素的視覺(jué)區(qū)域，便于用戶點(diǎn)擊。同時(shí)排版不受限制，可以達(dá)到原生App的視覺(jué)效果。
增加標(biāo)簽欄，首頁(yè)呈現(xiàn)更為的內(nèi)容，減少界面的層級(jí)關(guān)系，頁(yè)面關(guān)系更為明確。
界面可以部分更新，在需要時(shí)再呈現(xiàn)，減少界面的刷新，保存視覺(jué)的穩(wěn)定性。
氣泡框可以減少頁(yè)面跳轉(zhuǎn)，適合消息提醒等微任務(wù)的處理。信息架構(gòu)上越來(lái)越接近原生App，有利于扁平化層級(jí)關(guān)系和減少界面跳轉(zhuǎn)等設(shè)計(jì)元素將得到更多的應(yīng)用。
2.識(shí)別更多的手勢(shì)操作，如下拉刷新和右滑存檔等平移手勢(shì)。操作不必全部呈現(xiàn)在界面中，和平臺(tái)操作保證一致。
3.調(diào)用系統(tǒng)硬件，如重力感應(yīng)等傳感器，不過(guò)在手機(jī)端還鮮有應(yīng)用案例，離大規(guī)模應(yīng)用還有一定的距離。
總之，交互上可以按照原生App的設(shè)計(jì)方式，效果將越來(lái)越接近，主要區(qū)別在于：
1.設(shè)計(jì)中要考慮到瀏覽器地址欄和工具欄的占有空間，和其對(duì)App的操作存在一定的影響。
2.暫時(shí)不適合調(diào)用系統(tǒng)底層接口，更適合web網(wǎng)站適配手機(jī)做的分支版本。
3.由于HTML的限制，交互的細(xì)節(jié)上存在一定的差異。
4.動(dòng)效還沒(méi)大規(guī)模的應(yīng)用，但Web App界面操作將更為流暢，界面跳轉(zhuǎn)時(shí)的平滑移動(dòng)已經(jīng)可以實(shí)現(xiàn)，以后還有更多的動(dòng)效得到應(yīng)用。
5.現(xiàn)階段信息架構(gòu)還混雜著原生App和wap兩種架構(gòu)方式。
參考資料：
- W3C HTML5
- Mobile Web Application Best Practices
- HTML5離線存儲(chǔ)
- Making It a Mobile Web App
- Css iPhone
- Developing Mobile Web Applications and Mobile Widgets
- Getting Started with iOS Web Apps
- Youtube Mobile Web App
- [IBM developerworks]HTML5 Web app