網絡異常時,APP該如何設計?

6 評論 46398 瀏覽 309 收藏 7 分鐘

形式可以千變萬化,但總歸是為了服務功能,而功能又立足于用戶需求。深刻理解用戶需求才是靈活運用設計形式的根本。

用戶在使用App時,除了正常的使用場景,還會碰到許多特殊場景:頁面內容為空(缺省頁面);網絡異常;信息輸入錯誤;App升級等。如何友好的設計特殊場景下的App頁面,對于用戶體驗至關重要。這也是互聯網產品設計人員的基本功。

這些特殊情況下的APP設計我會陸續寫文章介紹,今天先講講“網絡異常時,APP該如何設計?”

網絡異常有兩種情況,一種是網絡切換,即從WiFi狀態切換到3G/4G網絡;第二種是網絡中斷,APP與服務器的數據傳輸。

網絡切換

一些需要消耗大量流量的APP,用戶一般只會在WiFi的網絡狀態下運行(土豪用戶除外),像視頻APP,音樂APP,還有現在很火的直播APP。

當網絡狀態從WiFi切換到3G/4G時,為了防止用戶消耗流量,APP會采取一定的設計形式來告訴用戶,網絡狀態切換了,請小心。

636302-4e3fb82cb66d9942

QQ音樂&蝦米音樂

QQ音樂、蝦米音樂,不僅提示了用戶的網絡狀態切換了,還告訴了用戶這種情況下該怎么辦,是繼續用流量播放還是訂購免流量包。

告訴用戶發生了什么,遇到了什么問題,也給用戶提供解決問題的辦法和入口,這才是好的設計。

網絡信號不好或網絡中斷

網絡中斷,APP無法與服務器交換數據。一般有三種設計形式處理網絡中斷問題。

①整頁提示

當由于網絡信號不好或網絡中斷等原因引起頁面數據無法調取狀態時,頁面做此處理。

636302-1a2e9984891c30ea

閃電購&貓眼

整頁異常的設計樣式包括三部分:icon或者插畫形式;網絡異常文案;重新連接網絡的button。

上面兩圖分別是閃電購和貓眼的整頁異常設計,都采用了品牌形象的插畫形式,不僅增添了趣味性還起到了宣傳品牌形象的作品,可謂一舉兩得。閃電購在button下還增加了一個入口:搞不定網絡,看看小貼士。因為有部分用戶可能并不清楚當前的網絡中斷是由于什么引起的,尤其對于小白用戶來說,添加一個下貼士的入口,幫助用戶解決問題。所以從用戶體驗的角度來看,閃電狗比貓眼做的更用心。

②預設圖和占位符提示

當由于網絡信號不好或網絡中斷等原因引起頁面數據無法調取狀態時,我們可以事先在APP中預設好圖標和占位符來替代加載的數字、圖片、文字等數據。也就是預處理過程。

636302-ff14286a298db32f

京東

636302-1b9eee7113a46741

keep&一個

這種設計形式有一個最大的好處就是當網絡中斷時間很短時,用戶幾乎察覺不到網絡中斷,APP就已經恢復正常了。這就是利用設計技巧,不給用戶帶來額外操作成本和認知負擔。

③toast和dialog提示

網絡信號不好或網絡中斷時,用戶還在繼續操作APP,為了提示用戶,會采用toast或dialog的形式來提示用戶網絡異常。

636302-99eacd3284efb6a8

path&招行

上面兩個頁面都使用了dialog來提示用戶網絡異常,但是又有所區別。因為左邊的path直接給出“設置”入口,讓用戶直接前往設置界面開啟網絡,而右邊招行的dialog就遜色一點,僅僅是提示了用戶網絡異常,如果僅僅是提示用戶網絡異常,直接用toast的會更好,因為toast不會獲得用戶焦點,并且不會中斷用戶的操作。

636302-849eac3dcd3d71f0

摩拜單車&網易考拉

摩拜單車和網易考拉采用了toast的形式提示用戶網絡異常。

上述說的三種設計形式并不是孤立的,是可以配合使用的。上圖的網易考拉APP就使用了整頁提示和toast提示。形式可以千變萬化,但總歸是為了服務功能,而功能又立足于用戶需求。深刻理解用戶需求才是靈活運用設計形式的根本。

 

作者:鄒志楠,個人公眾號:UE修養,一枚交互設計師

本文由 @鄒志楠 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 干貨!學習到了,謝謝

    回復
  2. 謝謝分享這種干貨文章

    來自江蘇 回復
  3. 有無緩存的情況下要分別處理

    來自上海 回復
    1. 居然看到你了,哈哈哈

      回復
    2. 能說下怎么具體處理么?

      來自江蘇 回復
  4. 有些不能用整頁是因為 webview加載的頁面,不同情況不同考慮。

    來自山東 回復