網絡異常時APP該如何設計
用户在使用App時,除了正常的使用場景,還會碰到許多特殊場景:頁面內容為空(缺省頁面);網絡異常;信息輸入錯誤;App升級等。如何友好的設計特殊場景下的App頁面,對於用户體驗至關重要。這也是互聯網產品設計人員的基本功。就跟隨小編去了解下吧,想了解更多相關信息請持續關注我們應屆畢業生考試網!
這些特殊情況下的APP設計我會陸續寫文章介紹,今天先講講“網絡異常時,APP該如何設計?”
網絡異常有兩種情況,一種是網絡切換,即從WiFi狀態切換到3G/4G網絡;第二種是網絡中斷,APP與服務器的`數據傳輸。
網絡切換
一些需要消耗大量流量的APP,用户一般只會在WiFi的網絡狀態下運行(土豪用户除外),像視頻APP,音樂APP,還有現在很火的直播APP。
當網絡狀態從WiFi切換到3G/4G時,為了防止用户消耗流量,APP會採取一定的設計形式來告訴用户,網絡狀態切換了,請小心。
QQ音樂&蝦米音樂
QQ音樂、蝦米音樂,不僅提示了用户的網絡狀態切換了,還告訴了用户這種情況下該怎麼辦,是繼續用流量播放還是訂購免流量包。
告訴用户發生了什麼,遇到了什麼問題,也給用户提供解決問題的辦法和入口,這才是好的設計。
網絡信號不好或網絡中斷
網絡中斷,APP無法與服務器交換數據。一般有三種設計形式處理網絡中斷問題。
>>>①整頁提示
當由於網絡信號不好或網絡中斷等原因引起頁面數據無法調取狀態時,頁面做此處理。
閃電購&貓眼
整頁異常的設計樣式包括三部分:icon或者插畫形式;網絡異常文案;重新連接網絡的button。
上面兩圖分別是閃電購和貓眼的整頁異常設計,都採用了品牌形象的插畫形式,不僅增添了趣味性還起到了宣傳品牌形象的作品,可謂一舉兩得。閃電購在button下還增加了一個入口:搞不定網絡,看看小貼士。因為有部分用户可能並不清楚當前的網絡中斷是由於什麼引起的,尤其對於小白用户來説,添加一個下貼士的入口,幫助用户解決問題。
>>>②預設圖和佔位符提示
當由於網絡信號不好或網絡中斷等原因引起頁面數據無法調取狀態時,我們可以事先在APP中預設好圖標和佔位符來替代加載的數字、圖片、文字等數據。也就是預處理過程。
京東
keep&一個
這種設計形式有一個最大的好處就是當網絡中斷時間很短時,用户幾乎察覺不到網絡中斷,APP就已經恢復正常了。這就是利用設計技巧,不給用户帶來額外操作成本和認知負擔。
>>>③toast和dialog提示
網絡信號不好或網絡中斷時,用户還在繼續操作APP,為了提示用户,會採用toast或dialog的形式來提示用户網絡異常。
path&招行
上面兩個頁面都使用了dialog來提示用户網絡異常,但是又有所區別。因為左邊的path直接給出“設置”入口,讓用户直接前往設置界面開啟網絡,而右邊招行的dialog就遜色一點,僅僅是提示了用户網絡異常,如果僅僅是提示用户網絡異常,直接用toast的會更好,因為toast不會獲得用户焦點,並且不會中斷用户的操作。
摩拜單車&網易考拉
摩拜單車和網易考拉採用了toast的形式提示用户網絡異常。
-
JavaScript與用户端教程
一頁面輸出1.頭部文件複製代碼代碼如下:2.複製代碼代碼如下:3.外部文件4.利用頁面ID的innerHtml複製代碼代碼如下:5.警告alert("廣州百匯物流有限公司");6.詢問複製代碼代碼如下:if(confirm("是否訪問我們的首頁")){alert("是的',前往");}else{alert("退出");}...
-
針對dom元素的分析應用
如果這個DOM元素沒有樣式也就談不上操作了。2.我們也可以直接用JS動態的向html裏寫入DOM元素。今天這章我們就講這兩個應用(一)對html裏現有的DOM元素進行操作。我上面説了,對現有的DOM元素進行操作,無非就是對樣式的操作。所以我們首先就要能獲取這個DOM元素的樣...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
網頁設計很糟糕的10個原因
個好的網頁設計,不僅吸引眼球,也是實用的、直觀的、層級簡單卻足夠複雜到保持用户的興趣。但是不好的網頁設計是由很多原因造成的,下面是關於網頁設計很糟糕的10個原因,歡迎閲讀了解!沒有足夠的空白空白可以説是設計中最重要的一部分。它有助於防止用户在瀏覽網站時...