中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)絡(luò)錯(cuò)誤的app界面設(shè)計(jì)

2022-05-27    分類: 網(wǎng)站建設(shè)

本文說(shuō)的關(guān)于網(wǎng)絡(luò)異常的兩種情況以及五種設(shè)計(jì)形式并不是孤立的,也不是只能單獨(dú)使用,是可以配合使用的。

用戶在使用App時(shí),除了正常的使用場(chǎng)景,還會(huì)碰到許多特殊場(chǎng)景:頁(yè)面內(nèi)容為空(缺省頁(yè)面);網(wǎng)絡(luò)異常;信息輸入錯(cuò)誤;App升級(jí)等。如何友好的設(shè)計(jì)特殊場(chǎng)景下的App頁(yè)面,對(duì)于用戶體驗(yàn)至關(guān)重要。這也是互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)人員的基本功。

前面幾篇文章介紹了注冊(cè)登錄頁(yè)、啟動(dòng)頁(yè)、加載頁(yè)的設(shè)計(jì),今天來(lái)講講“網(wǎng)絡(luò)異常時(shí),APP該如何設(shè)計(jì)?”

網(wǎng)絡(luò)異常呈現(xiàn)在用戶面前有兩種情況,一種是網(wǎng)絡(luò)切換,即從WiFi狀態(tài)切換到3G/4G網(wǎng)絡(luò);第二種是網(wǎng)絡(luò)中斷,APP與服務(wù)器的數(shù)據(jù)傳輸。

1.網(wǎng)絡(luò)切換

一些需要消耗大量流量的APP,用戶一般只會(huì)在WiFi的網(wǎng)絡(luò)狀態(tài)下運(yùn)行(土豪用戶除外),像視頻APP,音樂(lè)APP,還有現(xiàn)在很火的直播APP。

當(dāng)網(wǎng)絡(luò)狀態(tài)從WiFi切換到3G/4G時(shí),為了防止用戶消耗流量,APP會(huì)采取一定的設(shè)計(jì)形式來(lái)告訴用戶,網(wǎng)絡(luò)狀態(tài)切換了,請(qǐng)小心。


QQ音樂(lè)&蝦米音樂(lè)

QQ音樂(lè)、蝦米音樂(lè),不僅提示了用戶的網(wǎng)絡(luò)狀態(tài)切換了,還告訴了用戶這種情況下該怎么辦,是繼續(xù)用流量播放還是訂購(gòu)免流量包。

告訴用戶發(fā)生了什么,遇到了什么問(wèn)題,也給用戶提供解決問(wèn)題的辦法和入口,這才是好的設(shè)計(jì)。

2.網(wǎng)絡(luò)信號(hào)不好或網(wǎng)絡(luò)中斷

網(wǎng)絡(luò)中斷或信號(hào)不好,APP無(wú)法與服務(wù)器交換數(shù)據(jù),這時(shí)要分兩種情況考慮:無(wú)緩存數(shù)據(jù)時(shí)和有緩存數(shù)據(jù)。

(1)無(wú)緩存數(shù)據(jù)時(shí)

A.整頁(yè)提示:

當(dāng)整個(gè)頁(yè)面內(nèi)容都因?yàn)榫W(wǎng)絡(luò)異常導(dǎo)致未加載成功,采用整頁(yè)提示的方式。


閃電購(gòu)&貓眼

整頁(yè)異常的設(shè)計(jì)樣式包括三部分:icon或者插畫(huà)形式;網(wǎng)絡(luò)異常文案;重試或者前往WiFi設(shè)置的button(或者沒(méi)有button,直接點(diǎn)擊頁(yè)面空白區(qū)域)。

上面兩圖分別是閃電購(gòu)和貓眼的整頁(yè)異常設(shè)計(jì),都采用了品牌形象的插畫(huà)形式,不僅增添了趣味性還起到了強(qiáng)調(diào)品牌的作用,可謂一舉兩得。閃電購(gòu)在button下還增加了一個(gè)入口:搞不定網(wǎng)絡(luò),看看小貼士。因?yàn)橛胁糠钟脩艨赡懿⒉磺宄?dāng)前的網(wǎng)絡(luò)中斷是由于什么引起的,尤其對(duì)于小白用戶來(lái)說(shuō),添加一個(gè)下貼士的入口,幫助用戶解決問(wèn)題。所以從用戶體驗(yàn)的角度來(lái)看,閃電狗比貓眼做的更用心。

B.占位符提示:

此種情況多出現(xiàn)于采用native技術(shù)架構(gòu)的頁(yè)面,頁(yè)面框架是直接呈現(xiàn)的,不需要聯(lián)網(wǎng),APP只需要聯(lián)網(wǎng)獲取框架內(nèi)的數(shù)據(jù)即可。所以頁(yè)面呈現(xiàn)出了框架,但是沒(méi)有內(nèi)容的情況,這個(gè)時(shí)候會(huì)使用占位符替代未加載出來(lái)的圖片,用灰色塊替代未加載出來(lái)的文字。(可以參考上篇文章《特殊情況下的APP設(shè)計(jì)③:如何處理加載頁(yè)面?》)


keep&一個(gè)

這種設(shè)計(jì)形式有一個(gè)大的好處就是當(dāng)網(wǎng)絡(luò)中斷時(shí)間很短時(shí),用戶幾乎察覺(jué)不到網(wǎng)絡(luò)中斷,APP就已經(jīng)恢復(fù)正常了。這就是利用設(shè)計(jì)技巧,不給用戶帶來(lái)額外操作成本和認(rèn)知負(fù)擔(dān)。

此外,占位符的方式也可以作為loading的解決方案。

(2)有緩存數(shù)據(jù)時(shí)

A.列表提示:

當(dāng)頁(yè)面有緩存數(shù)據(jù)時(shí),可以用list的設(shè)計(jì)形式,來(lái)提示用戶,網(wǎng)絡(luò)異常,請(qǐng)前去檢查網(wǎng)絡(luò)設(shè)置。


微信&京東

B.dialog提示:

除了上述list的提示形式,還有的APP采用了dialog的形式來(lái)提示用戶。


喜馬拉雅&path

上面兩個(gè)頁(yè)面都使用了dialog來(lái)提示用戶網(wǎng)絡(luò)異常,采用dialog不僅僅可以提示用戶網(wǎng)絡(luò)異常,還能給出“設(shè)置”的入口,讓用戶直接前往WiFi界面設(shè)置網(wǎng)絡(luò)。如果僅僅是提示用戶網(wǎng)絡(luò)異常,直接用toast的會(huì)更好,因?yàn)閠oast不會(huì)獲得用戶焦點(diǎn),并且不會(huì)中斷用戶的操作。

C.toast提示:

當(dāng)網(wǎng)絡(luò)信號(hào)不好或網(wǎng)絡(luò)中斷時(shí),用戶還在繼續(xù)操作APP,為了提示用戶,會(huì)在用戶每次觸發(fā)操作時(shí)利用toast提示用戶網(wǎng)絡(luò)異常。讓用戶的行為即使在網(wǎng)絡(luò)異常時(shí)也能得到反饋。


閃電購(gòu)&微博

上圖的閃電購(gòu)和微博都采用了toast的形式提示用戶網(wǎng)絡(luò)異常。

總結(jié)一下,本文說(shuō)的關(guān)于網(wǎng)絡(luò)異常的兩種情況以及五種設(shè)計(jì)形式并不是孤立的,也不是只能單獨(dú)使用,是可以配合使用的。喜馬拉雅的首頁(yè)即采用了list方式提示用戶,同時(shí)采用了dialog的形式。記?。涸O(shè)計(jì)形式是可以千變?nèi)f化,但總歸是為了服務(wù)功能,而功能又立足于用戶和產(chǎn)品需求。

網(wǎng)站名稱:網(wǎng)絡(luò)錯(cuò)誤的app界面設(shè)計(jì)
網(wǎng)頁(yè)網(wǎng)址:http://www.rwnh.cn/news/159862.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、外貿(mào)網(wǎng)站建設(shè)、面包屑導(dǎo)航、軟件開(kāi)發(fā)營(yíng)銷型網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站

廣告

聲明:本網(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í)需注明來(lái)源: 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化
京山县| 连南| 江安县| 大冶市| 鲁甸县| 松江区| 曲阜市| 东兰县| 南通市| 巴南区| 波密县| 庆阳市| 天门市| 吉木萨尔县| 衡水市| 咸阳市| 文成县| 吉隆县| 阿克苏市| 文安县| 会同县| 中阳县| 清水河县| 镇平县| 古蔺县| 天长市| 望谟县| 雅安市| 辽宁省| 潜山县| 屯留县| 信丰县| 周至县| 安阳县| 大丰市| 固阳县| 东兴市| 特克斯县| 鹤庆县| 深泽县| 紫云|