網路異常時APP該如何設計

使用者在使用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的形式提示使用者網路異常。