中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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)用。

離線(xiàn)存儲(chǔ)

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

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

當(dāng)再次訪(fǎng)問(wèn)時(shí)，瀏覽器會(huì)再次檢查網(wǎng)站的緩存名單，通過(guò)對(duì)比名單和本地的資源，得知是否需要加載新資源。新版本加載完成之后不會(huì)立即被使用。后臺(tái)可以下載新網(wǎng)頁(yè)，也不會(huì)強(qiáng)制用戶(hù)打斷當(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)容。

而離線(xiàn)存儲(chǔ)但也不是Web App特有的問(wèn)題，瀏覽和閱讀類(lèi)App也有離線(xiàn)的使用需求，用來(lái)應(yīng)對(duì)隨時(shí)可能出現(xiàn)的網(wǎng)絡(luò)問(wèn)題。如離線(xiàn)模式是利用網(wǎng)絡(luò)閑暇時(shí)間下載內(nèi)容，當(dāng)用戶(hù)打開(kāi)App時(shí)立即開(kāi)始閱讀?；蛘呤蔷W(wǎng)絡(luò)不佳情況下保存用戶(hù)的操作記錄和加載相對(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交互，便于用戶(hù)操作和形成扁平化的信息架構(gòu)。

圖標(biāo)取代文字鏈接，界面更為美觀(guān)，便于識(shí)別的。點(diǎn)擊區(qū)域不限于元素的視覺(jué)區(qū)域，便于用戶(hù)點(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離線(xiàn)存儲(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

來(lái)源：http://daichuanqing.com/index.php/archives/3155