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