教育改變生活 嶽麓成就夢想

全國報名咨詢電話:0731-85572692
超全面的設計異常情況和處理方式彙總

2018-09-19

在設計中,一些異常情況經常很容易被忽略,在後期的實踐過程才發現原來還有這種狀态……本篇文章彙總了常見的異常情況及處理方式,趕緊來收藏學習!
 
一、快速了解異常是什麼?
異常在百度中的解釋是這樣的,異常,拼音:yì cháng,是一個漢語詞彙。釋義非正常的;不同于平常的。
 
在設計中異常指的是除了正常狀态之外的情況,舉個例子,假如你要設計一個下載按鈕,那麼下載按鈕需要有幾種狀态呢?
 
正常狀态下需要提供的下載按鈕的狀态應該有:點擊下載(下載前)、正在下載(或者是下載中、已下載59%等描述)、下載完成,如果你在設計中隻提供了這三種下載狀态是不夠的(其實有部分新手設計師,隻提供了點擊下載這種狀态)。還應該考慮如果下載中出現了斷網,或者是用戶暫停下載等情況的時候應該怎麼處理呢?這就是異常情況,所以除了前面三種狀态,還需要提供繼續下載,下載失敗等狀态。下載完成後,現在的設計一般是會自動安裝的,此時顯示安裝中,如果不自動安裝還需要提供安裝操作,安裝完成後提供打開的操作。當然這裡面包含的異常狀态主要是暫停後的繼續下載、下載失敗等。
 
下圖就是我做的下載按鈕,可以看到其實很多狀态如點擊下載、下載完成、安裝、打開等在視覺表現上是一樣,隻是文本不同,即使是這樣,這些應有的狀态無論是交互設計師還是視覺設計師都應該給出的,不然程序員會不知道哪一種情況用什麼形式的按鈕。其實在一些登錄、支付、提交等按鈕,還有一種「不可用」的狀态,用戶未輸入信息時,登錄按鈕置灰,隻有當用戶輸入相應的信息後,按鈕才高亮。
 
二、異常情況的彙總
通過上面的例子,相信已經充分了解到設計中的異常是什麼,以及異常的處理方式,那麼接下來總結一下設計中常見的異常情況。
 
異常情況處理其實分為兩種情況。
 
兩種異常情況處理
 
1. 界面中有明顯的提示,需要用戶了解此情況的,并且影響用戶進行下一步操作的,主要包含以下7種情況:
 
與網絡環境等有關的:下載失敗、服務器出錯、斷網,網速過慢、加載失敗、網絡連接失敗(wifi 密碼正确,連接不成功);
空狀态:搜索結果為空、無浏覽記錄、無收藏、無購買記錄、無訂單記錄、無下載記錄等;
表單類異常:密碼錯誤、輸入字符太少,數量超額,賬号密碼等不符合相應規則、賬号過期、必填項未填寫(提示并定位)、必填項的輸入字符為空等;
時效性:二維碼/驗證碼的過期/失效處理,例如具有實效性的鍊接,二維碼等;
限定值:上傳文件超過限定大小、操作過于頻繁(刷新頻繁,點贊、抖一抖,戳一戳等,需給出友好提示);
不可用:賬号不存在、賬号過期、選項不可選、按鈕置灰等;
其他:外接設備連接失敗(如遙控器、音響、手機等)、斷電/電量過低、安裝失敗;
2. 用戶在操作中是感受不到這種異常,并且對用戶的操作有較小影響的。
 
主要是用戶切換任務引起的異常:如按 home 鍵突然退出/切換應用、返回鍵退出、下載過程退出等。
 
以上就是在設計中常見的一些異常情況彙總,看到這裡,可能很多朋友就要說了,這麼多,我怎麼記得住。我個人的建議是,如果你熟悉上面的這些異常的話,其實在設計類似的模塊時就會考慮到相應的情況;如果你不熟悉這些,你可以把文章描述的異常情況當作一個檢查表,設計到相應的模塊時,可以參考是否會出現上方的情況。
 
三、異常處理
接下來分析一下這些異常情況的處理方式,按異常方式來處理。
 
與網絡環境等有關的:下載失敗、服務器出錯、斷網,網速過慢、加載失敗、網絡連接失敗(wifi 密碼正确,連接不成功)
 
1. 下載失敗
 
一般需要給出明确的下載失敗提示,可以通過彈窗、Toast、列表等提示。如下圖所示,然後給出用戶下一步的操作提示,例如重試、重新下載、删除等操作。
 
2. 服務器出錯
 
服務器出錯的頁面常見的500、501、502、503、504、505等5開頭的頁面。其中這些錯誤的解釋如下:
 
500 内部服務錯誤:顧名思義500錯誤一般是服務器遇到意外情況,而無法完成請求;
501 服務器不具備完成請求的功能;
502 Bad Gateway錯誤;
503 服務器目前無法使用(由于超載或停機維護);
504 Bad Gateway timeout 網關超時;
505 服務器不支持請求中所用的 HTTP 協議版本。
服務器異常時,在網頁端的處理方式為提示+返回,在移動端的處理方式為提示+重試,下圖是一些普通的處理方式。
 
近幾年,很多網站和應用将這種異常頁面設計的相對美觀和有故事性一些,提升了整體的趣味性,減少用戶的焦慮。例如網絡被外星人劫走了之類的,相信大家也看過很多。這裡就不舉例子了。
 
3. 網絡異常
 
斷網、網速過慢、網絡連接失敗(wifi 密碼正确,連接不成功)
 
其實都是屬于網絡異常的情況,加載失敗有時是網絡速度慢造成的,有時可能是IIS(Internet Information Services 互聯網信息服務)空間不足。下圖是一些網絡異常情況下的處理方式。
 
如果網絡異常之前應用沒有緩存之前的頁面的内容,則整體提示用戶網絡異常,也可以提供一個操作指導用戶操作;
 
如果網絡異常之前頁面已經緩存則顯示之前的頁面,Toast 輕提示用戶網絡異常。
 
4. 空狀态
 
搜索結果為空、無浏覽記錄、無收藏、無購買記錄、無訂單記錄、無下載記錄等。
 
其實空狀态很好理解,就是頁面沒有内容時,空頁面一般會提示用戶當前頁面的空狀态,同時也可以做适當的引導。例如在影視類 App 中,如果觀看記錄為空,則可以為用戶推薦影片,如熱播影片、猜您喜歡,其他人都在看等熱門推薦供用戶選擇。不過如果無法确定你推薦的用戶是否喜歡,不建議做推薦。
 
5. 表單類異常
 
密碼錯誤、輸入字符太少,數量超額,賬号密碼等不符合規則、賬号過期、必選項未填寫(提示并定位)、必填項的輸入字符為空等。
 
表單類異常建議查看我的上一篇文章《如何設計輸入框?》,裡面有比較詳細的讨論。
 
6. 時效性
 
二維碼/驗證碼的過期/失效處理,例如具有實效性的鍊接,二維碼等。
 
實效性比較多的體現在二維碼、付款碼、驗證碼等有時間限定的情況下才有效的情況,通常失效之後需要重新刷新,手機的篩選操作通常是點擊或者是下拉刷新;PC 端的通常好似點擊,TV 端的是按「OK」鍵刷新。如下圖所示為 QQ 的掃碼登錄頁面和 UC浏覽器的手機登錄頁面。
 
7. 限定值
 
上傳文件超過限定大小、操作過于頻繁(刷新頻繁,點贊、抖一抖,戳一戳等,需給出友好提示)
 
對于文件過大無法上傳、下載這種建議都是采取彈窗的方式告訴用戶當前狀況,明确問題并且加上操作提示。如新媒體管家中的導入的 word 的文件不能超過10M的提示如下左圖所示。對于操作過于頻繁,比較常見于 QQ 中的抖動窗口,其實在一些電視頁面的手機截圖工具中,刷新太頻繁也會彈出 Toast 提示。
 
8. 不可用
 
賬号不存在、賬号過期、選項不可選、按鈕置灰等。
 
賬号不存在用于登錄時,輸入的賬号不在已注冊的賬号中,則會提示此賬号不存在,是否立即注冊等,如下圖所示。
 
9. 賬号過期
 
APP 或網站中,登錄賬号後,如果太久不使用,則會有過期的期限,設計師需要根據 APP 的具體情況設置登錄過期的時間期限,此時需要提醒用戶重新登錄。
 
主要有 Toast 和彈窗兩種方式提示,這需要根據賬号過期對用戶的影響大小來決定用哪一種方式。如下方左圖所示,登錄賬号過期對用戶使用此應用的影響不大,則可以采用 Toast 輕提示的方式處理;如下方右圖,如果不登錄賬号則無法使用此應用的功能,則需要采用彈窗強提示的方式,提示用戶去登錄。
 
10. 選項不可選
 
主要包含當前的選項中有不可選的選項,還包括在不達到某種條件情況下,無法使用此功能的按鈕等。
 
11. 其他
 
外接設備連接失敗(如遙控器、音響、手機等)、斷電/電量過低、安裝失敗。
 
外接設備連接失敗需要提示,如果知道連接失敗原因,建議給出原因。
 
斷電情況通常用于 PC 端和 TV 端,斷電後需要為用戶恢複文件。很多設計軟件都有這個功能,一旦軟件無響應或者其他異常情況導緻文件出問題,一般都會提供恢複文件。
 
安裝失敗後需要提供提示安裝失敗原因,如存儲空間不足、文件已損壞的提示。
 
12. 用戶切換任務引起的異常較多
 
如按 home 鍵突然退出/切換應用、返回鍵退出、下載過程退出。
 
此類異常建議用戶再次打開時,回到上次用戶離開前的狀态。如果數據被清理,則回到上次保存的數據頁面中。
 
四、總結
文章主要總結了設計中常用的異常情況,并且給出了相應的解決方案,最長用的規則就是給出異常提示+下一步操作提示,既明确了出錯原因,又指引用戶下一步操作,用戶是相對容易接受的。異常是設計中的一部分,無論是交互設計師還是視覺設計師都應該給出異常的表現形式或處理方式。
文章來源于網絡

(0)