安陽app開發:超全面的設計異常情況和處理方式匯總

安陽app開發:超全面的設計異常情況和處理方式匯總

更新時間

2018-08-19

QQ截圖20180814092451.png

作者:月牙兒,微信公眾號:一戈何處

在設計中,一些異常情況經常很容易被忽略,在后期的實踐過程才發現本來還有這種狀態……

一、快速了解異常是什么?

異常在百度中的解釋是這樣的,異常,拼音: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 輕提示用戶網絡異常。


相關標簽
埃及女王APP