設(shè)計(jì)中的異常:超全面的設(shè)計(jì)異常情況和處理方式匯總--泉州網(wǎng)絡(luò)公司
在設(shè)計(jì)中,一些異常情況經(jīng)常很容易被忽略,在后期的實(shí)踐過(guò)程才發(fā)現(xiàn)原來(lái)還有這種狀態(tài)……
異常在百度中的解釋是這樣的,異常,拼音:yì cháng,是一個(gè)漢語(yǔ)詞匯。釋義非正常的;不同于平常的。
在設(shè)計(jì)中異常指的是除了正常狀態(tài)之外的情況,舉個(gè)例子,假如你要設(shè)計(jì)一個(gè)下載按鈕,那么下載按鈕需要有幾種狀態(tài)呢?
正常狀態(tài)下需要提供的下載按鈕的狀態(tài)應(yīng)該有:
點(diǎn)擊下載(下載前)
正在下載(或者是下載中、已下載59%等描述)
下載完成
如果你在設(shè)計(jì)中只提供了這三種下載狀態(tài)是不夠的(其實(shí)有部分新手設(shè)計(jì)師,只提供了點(diǎn)擊下載這種狀態(tài))。
還應(yīng)該考慮如果下載中出現(xiàn)了斷網(wǎng),或者是用戶暫停下載等情況的時(shí)候應(yīng)該怎么處理呢?
這就是異常情況。
所以除了前面三種狀態(tài),還需要提供繼續(xù)下載,下載失敗等狀態(tài)。--泉州網(wǎng)絡(luò)公司
下載完成后,現(xiàn)在的設(shè)計(jì)一般是會(huì)自動(dòng)安裝的,此時(shí)顯示安裝中,如果不自動(dòng)安裝還需要提供安裝操作,安裝完成后提供打開的操作。
當(dāng)然這里面包含的異常狀態(tài)主要是暫停后的繼續(xù)下載、下載失敗等。
下圖就是我做的下載按鈕,可以看到其實(shí)很多狀態(tài)如點(diǎn)擊下載、下載完成、安裝、打開等在視覺表現(xiàn)上是一樣,只是文本不同。
即使是這樣,這些應(yīng)有的狀態(tài)無(wú)論是交互設(shè)計(jì)師還是視覺設(shè)計(jì)師都應(yīng)該給出的,不然程序員會(huì)不知道哪一種情況用什么形式的按鈕。
其實(shí)在一些登錄、支付、提交等按鈕,還有一種「不可用」的狀態(tài),用戶未輸入信息時(shí),登錄按鈕置灰,只有當(dāng)用戶輸入相應(yīng)的信息后,按鈕才高亮。
通過(guò)上面的例子,相信已經(jīng)充分了解到設(shè)計(jì)中的異常是什么,以及異常的處理方式,那么接下來(lái)總結(jié)一下設(shè)計(jì)中常見的異常情況。
異常情況處理其實(shí)分為兩種情況。--泉州網(wǎng)絡(luò)公司
1. 界面中有明顯的提示,需要用戶了解此情況的,并且影響用戶進(jìn)行下一步操作的。
主要包含以下 7 種情況:
與網(wǎng)絡(luò)環(huán)境等有關(guān)的:下載失敗、服務(wù)器出錯(cuò)、斷網(wǎng),網(wǎng)速過(guò)慢、加載失敗、網(wǎng)絡(luò)連接失?。╳ifi 密碼正確,連接不成功);
空狀態(tài):搜索結(jié)果為空、無(wú)瀏覽記錄、無(wú)收藏、無(wú)購(gòu)買記錄、無(wú)訂單記錄、無(wú)下載記錄等;
表單類異常:密碼錯(cuò)誤、輸入字符太少,數(shù)量超額,賬號(hào)密碼等不符合相應(yīng)規(guī)則、賬號(hào)過(guò)期、必填項(xiàng)未填寫(提示并定位)、必填項(xiàng)的輸入字符為空等;
時(shí)效性:二維碼/驗(yàn)證碼的過(guò)期/失效處理,例如具有實(shí)效性的鏈接,二維碼等;
限定值:上傳文件超過(guò)限定大小、操作過(guò)于頻繁(刷新頻繁,點(diǎn)贊、抖一抖,戳一戳等,需給出友好提示);
不可用:賬號(hào)不存在、賬號(hào)過(guò)期、選項(xiàng)不可選、按鈕置灰等;
其他:外接設(shè)備連接失?。ㄈ邕b控器、音響、手機(jī)等)、斷電/電量過(guò)低、安裝失?。?/p>
2. 用戶在操作中是感受不到這種異常,并且對(duì)用戶的操作有較小影響的。
主要是用戶切換任務(wù)引起的異常:如按 home 鍵突然退出/切換應(yīng)用、返回鍵退出、下載過(guò)程退出等。
以上就是在設(shè)計(jì)中常見的一些異常情況匯總,看到這里,可能很多朋友就要說(shuō)了,這么多,我怎么記得住。
我個(gè)人的建議是:如果你熟悉上面的這些異常的話,其實(shí)在設(shè)計(jì)類似的模塊時(shí)就會(huì)考慮到相應(yīng)的情況;如果你不熟悉這些,你可以把文章描述的異常情況當(dāng)作一個(gè)檢查表,設(shè)計(jì)到相應(yīng)的模塊時(shí),可以參考是否會(huì)出現(xiàn)上方的情況。--泉州網(wǎng)絡(luò)公司
接下來(lái)分析一下這些異常情況的處理方式,按異常方式來(lái)處理。
與網(wǎng)絡(luò)環(huán)境等有關(guān)的:下載失敗、服務(wù)器出錯(cuò)、斷網(wǎng),網(wǎng)速過(guò)慢、加載失敗、網(wǎng)絡(luò)連接失?。╳ifi 密碼正確,連接不成功)
一般需要給出明確的下載失敗提示,可以通過(guò)彈窗、Toast、列表等提示。如下圖所示,然后給出用戶下一步的操作提示,例如重試、重新下載、刪除等操作。
△ 注:?jiǎn)螐垐D片來(lái)源于網(wǎng)絡(luò)截圖
服務(wù)器出錯(cuò)的頁(yè)面常見的500、501、502、503、504、 505 等 5 開頭的頁(yè)面。其中這些錯(cuò)誤的解釋如下:
500 內(nèi)部服務(wù)錯(cuò)誤:顧名思義 500 錯(cuò)誤一般是服務(wù)器遇到意外情況,而無(wú)法完成請(qǐng)求;
501 服務(wù)器不具備完成請(qǐng)求的功能;
502 Bad Gateway錯(cuò)誤;
503 服務(wù)器目前無(wú)法使用(由于超載或停機(jī)維護(hù));
504 Bad Gateway timeout 網(wǎng)關(guān)超時(shí);
505 服務(wù)器不支持請(qǐng)求中所用的 HTTP 協(xié)議版本。--泉州網(wǎng)絡(luò)公司
服務(wù)器異常時(shí),在網(wǎng)頁(yè)端的處理方式為提示+返回,在移動(dòng)端的處理方式為提示+重試,下圖是一些普通的處理方式。
△ 注:?jiǎn)螐垐D片來(lái)源于網(wǎng)絡(luò)截圖
近幾年,很多網(wǎng)站和應(yīng)用將這種異常頁(yè)面設(shè)計(jì)的相對(duì)美觀和有故事性一些,提升了整體的趣味性,減少用戶的焦慮。例如網(wǎng)絡(luò)被外星人劫走了之類的,相信大家也看過(guò)很多。這里就不舉例子了。
斷網(wǎng)、網(wǎng)速過(guò)慢、網(wǎng)絡(luò)連接失?。╳ifi 密碼正確,連接不成功)
其實(shí)都是屬于網(wǎng)絡(luò)異常的情況,加載失敗有時(shí)是網(wǎng)絡(luò)速度慢造成的,有時(shí)可能是IIS(Internet Information Services 互聯(lián)網(wǎng)信息服務(wù))空間不足。下圖是一些網(wǎng)絡(luò)異常情況下的處理方式。
如果網(wǎng)絡(luò)異常之前應(yīng)用沒(méi)有緩存之前的頁(yè)面的內(nèi)容,則整體提示用戶網(wǎng)絡(luò)異常,也可以提供一個(gè)操作指導(dǎo)用戶操作;
如果網(wǎng)絡(luò)異常之前頁(yè)面已經(jīng)緩存則顯示之前的頁(yè)面,Toast 輕提示用戶網(wǎng)絡(luò)異常。--泉州網(wǎng)絡(luò)公司