免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

談手機(jī)網(wǎng)頁應(yīng)用的交互設(shè)計(jì)

2024-01-15    分類: 網(wǎng)站建設(shè)

HTML5為提高手機(jī)網(wǎng)頁的體驗(yàn)提供了諸多的可能性,交互效果越來越接近原生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ǎng)頁,以后在無網(wǎng)絡(luò)的情況下也可以使用。一個(gè)離線應(yīng)用程序就是一個(gè)URL列表–HTML,CSS,JavaScript,圖片,或者其他類型的資源。訪問時(shí)探測(cè)到服務(wù)器列表的緩存名單時(shí),會(huì)觸發(fā)下載事件,根據(jù)名單下載指定的文件存儲(chǔ)到本地。

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

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

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

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

而離線存儲(chǔ)但也不是Web

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

交互操作

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

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

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

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

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

氣泡框可以減少頁面跳轉(zhuǎn),適合消息提醒等微任務(wù)的處理。信息架構(gòu)上越來越接近原生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)等傳感器,不過在手機(jī)端還鮮有應(yīng)用案例,離大規(guī)模應(yīng)用還有一定的距離。

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

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

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

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

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

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

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

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

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

廣告

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

成都做網(wǎng)站