<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          10種異常狀態設計

          2019-9-23    資深UI設計者

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

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

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

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

          異常狀態一共有以下 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 種異常狀態的簡單介紹和說明。在制定異常狀態的設計規范時,可以參考本篇文章。

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

          文章來源:優設

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合