用一篇文章,幫你搞定10種異常狀態設計 - 優設網 - UISDC

用一篇文章,幫你搞定10種異常狀態設計

2019/09/21 11568評論區

吳軼 :在做設計的過程中,大部分設計師只專注于主操作流程、主頁面、分支流程、小頁面和頁面的不同狀態。卻容易忽略產品中容易出現的各種異常狀態。

當用戶停留任何一個界面,進行任何一個操作都可能發生異常狀態。

如果接到每個需求都去制定一次異常狀態,這樣的后果可能會使得產品的不同模塊、不同流程,異常狀態都不一致。全局規范性被破壞,同時設計師的效率也降低。

因此全局制定異常狀態規范很有必要,后續就不需要再設計,開發直接復用異常狀態的規范。省時省力、提高效率、設計規范、運行更流暢、減少代碼重復率、安裝包也會更小。

異常狀態一共有以下 10 類:

  • 網絡異常
  • 消耗大量流量時
  • 空數據
  • 加載失敗
  • 操作失敗
  • 服務器異常
  • 搜索無結果
  • 無權限
  • 功能建設中
  • 內容被刪除

網絡異常

當移動設備網絡異常時,導致無法上傳和下載數據,從而無法正常的使用產品。

網絡異常存在兩種場景:

  • 網絡異常時,用戶打開 App,這種情況 App 會出現異常狀態提示給用戶,這是 App 主動告知行為;
  • 用戶點擊操作時,由于網絡異常,這時候通過交互反饋給用戶,這是 App 被動告知行為。

1. App主動行為

當無網絡時,用戶打開 App,通常有三種方式提醒用戶當前網絡異常。

tips 提示,通過 tips 提示用戶當前網絡不可用,tips 使用場景一般為用戶打開后,界面停留在首頁,且首頁以列表形式展示,這樣的話, tips 才能合理的融入到界面中,常見使用這種布局方式的有微信、qq等。

使用toast提示用戶網絡異常,同時提示用戶可以去使用非數據影響的操作。例如網易云音樂,當無網絡時候,告知用戶可以去正常聽已下載的音樂。

使用對話框,引導用戶進入設置頁面,關閉飛行模式或者打開 Wi-Fi,例如美團進入首頁后的對話框提示。

2. App被動行為

當前無網絡時,用戶點擊操作,無法正常使用產品,這時候通常有兩種處理方式。

一種是當前界面出現 toast 提示。另一種是進入下一級界面,以缺省頁的形式提醒用戶當前網絡異常。

例如手機淘寶,沒有網絡時,用戶點擊會進入下一頁,出現缺省頁提示,告知用戶網絡異常,同時提供刷新按鈕。

美團在無網絡時,點擊其他 tab bar,出現 toast 提示用戶當前網絡異常,稍后重試。

3. 小結

  • 個人覺得,當 App 打開進入列表頁面時,常見的如 IM,則使用 tips 提示告知用戶,非列表的 IM 工具時,可使用 toast 告知用戶。
  • 當用戶進行界面交互時,用戶點擊操作,通過 toast 告知用戶。

消耗大量流量時

當涉及需要消耗大量流量數據時,且非 Wi-Fi 情況下,這時候需要告知用戶。常見的例如看視頻,聽/下載歌曲、視頻通話、下載上傳文件等。

例如B站,當使用移動數據看視頻,則通過提示語和對應按鈕上的流量值告知用戶。

網易云音樂在非 Wi-Fi 情況下,下載音樂時,通過對話框,告知用戶當前使用數據流量,同時提供可繼續下載的功能,也提供通過辦理新業務解決數據流量的問題。

空數據

空數據一共分為兩種類型,分別為初始狀態和清空狀態。

1. 初始狀態

用戶首次使用,沒有任何內容數據時,需要用戶進行某種操作才能產生內容的界面,這時候需要提示用戶需要進行某種操作。

例如淘寶App,當用戶沒有把商品加入購物車時,進入購物車界面,會給出提示購物車界面為空。給出用戶提示,給出相對應的入口按鈕,引導用戶操作。

如果初始狀態,無任何內容直接給出一個空白界面,用戶可能會以為該界面出 bug 了。

Gmail 直接用一個插畫提示用戶收件箱為空。

一般對于初始狀態的設計,常規做法是簡單的插畫配合簡潔的文案,必要的時候給出引導用戶操作行為的按鈕。

現在流行的設計趨勢是插畫越輕量越簡單越好,以免搶奪了文案信息。

2. 清空狀態

當用戶清空當前的頁面內容,產生了空界面,這時候需要有明確的提示告知用戶出現當前頁面的原因,且告知用戶該如何處理。

清空狀態是對初始狀態的進一步細化。清空狀態的界面和初始狀態設計很相似,唯一不同的是文案的提示。

有的產品直接把清空狀態的界面按照初始狀態來設計,這樣也是可以的,缺點就是沒有告知用戶產生空狀態原因是初始化還是清空所致。

加載失敗

在加載過程中,App 向服務器請求數據,如果是網絡原因導致,則使用網絡異常的設計規范。

如果非網絡異常原因,則可能因為服務器異常導致接口請求不到數據,從而加載失敗。

第一次請求失敗,有些場景可能重試 2 次,例如微信支付寶,這種情況可使用 toast 告知用戶加載失敗的原因。

操作失敗

任何操作行為的交互界面都伴隨著操作失敗的概率。

當用戶操作失敗時,在當前頁面給予一個反饋,告知用戶操作失敗,最好告知用戶操作失敗的原因,讓用戶知道接下來如何避免操作失敗。

服務器異常

因為服務器異常是小概率事件,但是也會發生。

當服務器異常時,且用戶在操作過程中,出現這種情況,一般可設計為對話框提示,明確告知用戶,服務器出現問題,讓用戶稍后重試。

例如下圖的華為云備份恢復界面:

搜索無結果

用戶在搜索過程中,除了出現正常的匹配結果,還存在無匹配結果的情況。針對搜索無結果的情況,要給予用戶操作無結果的提示。

幾乎搜索無結果的狀態都是在內容區出現對應提示。例如 iOS 相冊,通過搜索關鍵詞,當沒有匹配照片時,則出現對應的提示,如下圖右側圖:

下圖淘寶買家版后臺,當用戶搜索關鍵詞無結果時,出現對應的提示語和插畫。

無權限

無權限的場景,通常適用于 b 端產品,對于不同組織架構的企業員工,會存在不同的權限。

例如部分重要的內容,非同一組織架構的員工無權限查看,這種情況,用戶點擊進入一般給出對應的提示。

當然最好的方案是在 App 上面過濾掉無法查看的內容,但是存在員工間的轉發行為,這時候無權限的員工,點擊進入,則顯示暫無權限查看的提示頁面。

功能建設中

一般 App 功能正在開發中,這種情況不會在 App 界面中展示出來,只有完全開發完畢并上線后才會出現在 App 上。

但是也有一些產品的特殊業務,會將一些未開發的功能展示出來,例如微信公眾號,長按微信文章,即出現對應的提示。

也有一些新聞頻道還沒有開發完畢上線,這時候用戶點擊進入下級界面,則出現對應的提示語/插圖提示,如下圖所示:

內容被刪除

有的時候,文件或者頁面內容被刪除,但由于文件或者頁面內容的上一級頁面有緩存,所以當用戶點擊進入時,會出現文章/文件被刪除的情況。

已被刪除的異常狀態,常見的設計是用戶進入新頁面出現對應的插畫和標題提示。

例如下圖微信公眾號文章內容被作者刪除,讀者點擊進入,加載后的界面就出現內容被刪除的提示。

以上就是常見的 10 種異常狀態的簡單介紹和說明。在制定異常狀態的設計規范時,可以參考本篇文章。

當然也有公司特殊的業務導致存在很特殊的異常狀態,針對這種情況,可以適當的增加、刪除或者修改,使其更適用于自己公司的項目。

歡迎關注作者的微信公眾號:「Echo的設計筆記」

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.tawbbt.live/10-abnormal-state

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計師干貨 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

二八杠千术