如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
很多設(shè)計中,我們付出20%的精力就可以應(yīng)付80%的 Normal Case,而剩下20%的 Special Case 卻會花費我們80%的精力。換言之,普通情況誰都會處理,而為了應(yīng)對一些少數(shù)派,我們將要付出更多。
Loading 失敗時的錯誤提醒、搜索無少結(jié)果時的空白頁面、打了車卻沒車接單……除了這正常流程下的失敗反饋以外,最耗時間的是那些特殊流程或所有情況同時在一個頁面堆砌出現(xiàn)的情況。
在設(shè)計前期,我們就應(yīng)該盡可能地羅列特殊情況,即便它們出現(xiàn)的概率很低,也應(yīng)留足設(shè)計時間。而應(yīng)對非常規(guī) Case 時,有一條原則幫了我很多次:
確保多數(shù)人體驗的前提下,才去解決少數(shù)人的問題。
這不是說要為了多數(shù)人放棄少數(shù)人,還是造例子來說吧。
案例一:重復(fù)利用的物流單號
如果你在天貓有過退貨經(jīng)驗就會知道,申請退貨并得到商家確認后,需要填寫退貨的物流單號,當商家收貨后才會把錢退給你。這里有個奇妙的問題,設(shè)計上是否允許多個用戶填寫同一個退貨單號?
先來看看如果允許,會出現(xiàn)什么非常規(guī)情況:消費者AB兩人各自在同一個商家C處購買了兩臺
iPhone,并且商量好分別發(fā)起七天無理由退貨流程,商家C均同意。然后,消費者A先將手機按要求寄出,獲取物流單號一個后填寫到退貨系統(tǒng);同時,消費者B直接使用消費者A的退貨單號填入系統(tǒng),但不寄送自己的手機。
極端情況體現(xiàn)在,許多商家的店鋪與倉儲是分開的,當倉庫收到A寄來的手機并確認收貨后,店鋪工作人員收到系統(tǒng)通知兩個退貨流程都已收貨(其實是同一個單號),若不進行額外確認,就會把錢都退回去了。
再來看不允許重復(fù)填寫同一個物流單號的情況:很簡單,AB兩個消費者是好人,但希望節(jié)省快遞費,就商量好把兩個手機放在一個包裹里寄回。此時若規(guī)則只允許一個單號只能填寫一次,這種做法就無法實現(xiàn)。
錯誤的設(shè)計方法是這樣的:用戶填寫退貨單號時,新增一個流程詢問用戶該單號是否只關(guān)聯(lián)了一個訂單,訂單號是多少;或者在原有基礎(chǔ)上新增一個聯(lián)合退貨的功能,讓多個用戶合伙拼單退貨。
正確的設(shè)計方法是這樣的:消費者端流程全部不變,允許重復(fù)填寫物流單號,但必須在后臺記錄一條單號被使用的次數(shù)。對于被多次填寫的單號,在商家端告知商家須額外注意,一定與倉庫確認好包裹內(nèi)物品再進行退款操作。
錯誤方法的錯誤原因很簡單,我們不能為了一些極端情況就去修改主流程,也不能為了少數(shù)人的需求就影響所有正常用戶。
案例二:互相沖突的 Toast 提醒
天貓客戶端的商品詳情頁中,當點擊“收藏”按鈕會有一個 Toast 告訴用戶“收藏成功”,同樣當點擊“加入購物車”后,也會有 Toast
告訴用戶“加入成功”。這樣看好像沒什么問題,但若用戶點完“收藏”后馬上點擊“加入購物車”,就會出現(xiàn)兩個 Toast
相互沖突的情況——視覺上互相重疊,或后一個 Toast
無法出現(xiàn)。再極端一點,如果出現(xiàn)了一個腦殘用戶,為了測試反復(fù)快速點擊兩個按鈕,甚至?xí)?dǎo)致代碼錯誤。
為了追求設(shè)計和代碼邏輯的嚴密,我和開發(fā)同學(xué)花費了不少時間討論對于這種極端情況,要如何設(shè)置 Toast
的出現(xiàn)和沖突機制。甚至為了應(yīng)對極端情況,還需要調(diào)整 Toast 出現(xiàn)消失的動畫過程與邏輯。但最后,我只設(shè)置了2個 Toast
在極短時間內(nèi)前后觸發(fā)的交互,也就是新的 Toast 慢慢把舊的推上去,并各自做淡入淡出動畫——畢竟兩次短促的操作是比較可能會發(fā)生的。
什么?你問我那個腦殘用戶怎么辦?不好意思,為了滿足所有正常用戶的訴求,腦殘用戶的體驗就只好先放一放了……
案例三:神出鬼沒的 Loading
我們在客戶端上做了一個比較酷的動畫,對一個模塊長按后可以彈出一張卡片,并在卡片中閱讀一些詳情(有點像 3D
Touch)。問題在于,彈出卡片中的信息是觸發(fā)卡片后才向服務(wù)器請求數(shù)據(jù)并加載的,正常情況下沒有問題,但是弱網(wǎng)條件下,數(shù)據(jù)加載可能會花費不少時間。為此,第一版我們?yōu)檫@個數(shù)據(jù)請求設(shè)計了一個
Loading 的小動畫(好吧,你就當是轉(zhuǎn)菊花)。
這樣做的結(jié)果是,對于網(wǎng)絡(luò)非常流暢的用戶,他們喚起這張卡片時,會看到一個菊花飛快地閃過,然后才看到數(shù)據(jù)加載——再流暢的網(wǎng)絡(luò)下,數(shù)據(jù)也需要加載時間,哪怕是1ms,都會讓菊花快速閃爍。
當然,不要 Loading 也明顯不合理。弱網(wǎng)條件下,必須避免用戶盯著空白的卡片發(fā)呆而不知道系統(tǒng)正在干什么。
所以,合理的做法是,為 Loading
動畫的出現(xiàn)時間設(shè)置一個延遲:在卡片彈出的200ms內(nèi)(卡片不可能突然閃爍出現(xiàn)在用戶面前,必須有一個進場過程),如果數(shù)據(jù)加載完畢,則不顯示
Loading 動畫,直接顯示數(shù)據(jù)。如果卡片進場完畢(200ms后)數(shù)據(jù)還沒回來,則開始顯示 Loading 動畫。
這樣,我們保證了正常用戶的正常體驗,避免他們每一次操作都為弱網(wǎng)這一極端情況買單。同時,也保障了弱網(wǎng)用戶的體驗。
最后,再總結(jié)一下我們的設(shè)計原則:確保多數(shù)人體驗的前提下,才去解決少數(shù)人的問題。
藍藍設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)