用戶體驗設計中有哪些針對「等待」的設計的好例子？

12-06

人機交互中的等待，簡單可以看做以下過程：

我們的設計目標，是儘可能減少用戶感知到的等待時間。我能想到的，有如下幾種方式：
1. 「欺騙」用戶，隱藏等待
例如，微信和Path分享圖片，點擊「發送」，圖片立即出現在時間線上。實際上並未上傳到伺服器。用戶直接收到「發送成功」的視覺反饋，而上傳的過程被隱藏了。涉及狀態切換的按鈕，比如「喜愛」、「收藏」，一般會先給用戶一個操作成功的視覺反饋，無需等待伺服器返回「操作成功」的實際結果。
這樣的好處是，大多數情況下用戶不需要焦慮等待內容上傳完畢。壞處是，偶爾網路連接不好，用戶的獲得反饋和實際情況不一致。
示意圖如下：

2. 「欺騙」用戶，縮減等待
這種方式我只想到一個案例，就是大家耳熟能詳的 Instagram 提前上傳策略(Secrets to Lightning Fast Mobile Design // Speaker Deck)：

示意圖如下：

3. 將模態的等待，轉化為非模態的等待
Weico 客戶端有一個非常貼心的特性。當用戶點擊一個網頁或視頻鏈接時，用戶不會被鎖定在一個模態的載入狀態，鏈接內容會以小窗的形式在左下角不影響閱讀的區域進行非模態載入。用戶可以繼續瀏覽微博時間線，直到內容載入完成。令人焦慮的等待時間被用戶的持續瀏覽消解了。
示意圖如下：

4. 以上三種都是通過對流程的設計來減少或化解實際等待時間。而在交互設計中最常使用的手法，應該是通過不斷給予用戶當前狀態反饋，從而縮減感知到的等待時間，即過場、載入動畫等。
這是一個蠻大的話題，以個人能力無法展開闡述。有興趣的同學可以去玩一下這個東東：http://jsfiddle.net/gUkgX/1/embedded/result/
嘗試估算每種按鈕給出結果的時間，你有什麼體驗？
大概你已經猜到了，每個按鈕的給出結果的時間都是10s。但是由於反饋的形式不同，人們感知到的時間也各不相同。以此為啟發，再根據實際情況的限制和使用場景，我們可以設計出不同形態的的滾動條、旋轉菊花甚至彈幕和小遊戲，來降低被感知的等待時間。

少女祈禱中

進度條造假，我想這是針對「等待」的設計最普遍的例子了。

瀏覽器進度條很多都是假的，像移動端瀏覽器基本全部是假的，或者說不完全表明載入進度。
不信的話，手機連著wifi，打開一個網頁到一半時，把路由器網線拔掉，進度條會繼續往前走，雖然越走越慢……沒錯，就是安慰劑。

以下來自《認知與設計》

進度標識設計的一些原則：
* 顯示還剩下多少工作，不是完成了多少；
* 顯示總進度，而不是當前步驟的進度；
* 顯示一個操作已經完成的百分比時，從1%開始，而不是0%；
* 在操作結束時，只需要非常短暫的顯示100%；
* 進度的顯示應該是平緩的、線性的而不是不穩定的；
* 使用人們平時熟悉的、而不是電腦使用的單位，如用大約4min而不是240s

進度條的優化例子還有很多，就不上圖了，想看各種實例的話可以戳進度條loading,讓煩躁少一些

《認知與設計》中還提到了更多提高響應度的原則，比如「在網頁上提供快速顯示的縮略圖，只在需要的時候才顯示細節」，這也是針對等待設計的普遍例子。

最後貼上一個自己很喜歡的例子：

要說loading，那出現的最多的必然是遊戲了，尤其是大型遊戲，資源的載入難免要很多時間，而最近幾年隨著硬體性能的提升，很多遊戲都能在loading的時候騰出一些資源和用戶做一些更多的交流

（雖然我遊戲玩的不能算特別多）最近玩的遊戲里印象最深的是max payne 3。這款遊戲的體積和實際遊戲時間（以第一次通關為目標）比實屬罕見……rip過後的都有18G，安裝後28G……平均遊戲時間只有11個小時…………這樣一個奇葩的遊戲實現了讓我玩完後才反應過來玩下來都沒遇到傳統的loading。
max payne 3有著歷代最多最長的cg動畫，我當時第一反應時，遊戲畫面明明很精細了怎麼反而要用這非1080p且不見得特別細膩的cg動畫呢，而且這動畫還不能skip……後來我才反應過來，靠著這些相對頻繁的cg動畫，max payne 3成功的掩蓋過去了loading。而且因為動畫頻繁了，更加不會讓人覺得這其實是背後在loading。外加整個故事也比較連貫緊湊，有時候玩了會想「下一個章節就休息會」，可是連續玩的話很容易根本意識不到章節的概念…………
其實在loading的時間裡提前交代一些章節間的銜接早就被很多遊戲所採用了，比如crysis、COD、RA等大作都有，但max payne3算是個巔峰（不過不排除我以前電腦配置較差……），我沒有遇到任何一次動畫完了還需要的情況。估計是rockstar評估了最低配置後估算出最慢loading時間然後只做了過場動畫的，回過頭來想，確實很多cg動畫都時間不短。

當然max payne 3也有個問題是……clear了後玩其他難度……發現cg不能跳過！尼瑪……足夠去泡杯茶了…………哈哈哈(???≡(???)≡???)哈哈

另外記得某個linux，安裝系統時提供了小遊戲給你玩，不過現在人的話估計都會直接逃出手機來玩了吧……

ps2上有一款龍珠
在等待的時候可以按鍵讓角色做俯卧撐...

布卡漫畫，在載入的時候進度條上會有一隻小萌娘跳舞。有的時候看的只嫌載入時間太短……

洛奇 (Mabinogi) 的安裝程序，能用滑鼠帶動氣流掀 Nao 的裙子……

近年來，隨著智能手機與觸摸技術及硬體交互的發展，人機操作關係發生了巨大的變革。移動產品相對於網頁類產品而言，其便攜性，移動性等都成為了其顯著的優勢，互聯網也給了移動產品無限的可能性，但大量的信息湧現使得用戶在尋找感興趣內容的過程會耗費更長的時間。

同時，因為移動網路狀況的不確定，移動硬體配置參差不齊，後台演算法不統一等原因，頁面信息載入等待成為了移動產品必須面對的一個問題。等待時長如果超過了用戶的等待的極限閾值，用戶會出現無聊，焦慮，暴躁等負面情緒，對於產品滿意度的打分會大大降低。

在web時代，設計師很早就意識到在用戶等待信息載入的過程中給予用戶相應的產品運行狀況反饋會有效的提升用戶體驗，如載入進度條提示等。但移動產品的信息載入方式和載入量都與web端產品有很大的差異，傳統的載入方式已經不適用移動產品的信息載入，通過設計策略有層次的降低用戶在移動產品的操作過程中的等待時間感知對優化移動產品的用戶體驗具有十分重要的意義。

移動產品等待體驗的影響因素

用戶在移動產品的使用過程中需要等待的原因主要是緣於後台數據的運算載入，其載入形式主要包括啟動載入，內容載入，下載應用載入等。在用戶的使用過程中，心理層面影響其等待體驗的兩個因素是用戶實際等待時間和用戶等待的「感知時間」。

1、實際等待時間

實際等待時間是指產品在載入過程中客觀的實際消耗時間，實際等待時間除了會因為移動終端所處的網路環境、自身的硬體配置而有所變化，產品的數據載入方式、後台運算方式、信息架構方法等都會對產品的實際載入時間產生影響，但由於移動產品使用環境的不確定性以及技術的限制等，實際等待時長往往難以改變。

2、等待「感知時間」

用戶的等待「感知時間」在心理認知上稱為等待「時間知覺」，是指人們在等待過程中對等待時長的主觀感受和心理體驗。影響等待時間知覺的客觀因素包括等待過程的填充物，等待時間的確定性，接受服務的階段和等待的物理環境等。

內容豐富有趣的時間填充物會讓用戶分散注意力，縮短其感知到的等待時間；內容乏味無聊的時間填充物會讓用戶感知到的等待時間增長；當給予用戶等待時間的相關信息，用戶的等待時間知覺會縮短，反之，如果用戶對於等待時間的信息一無所知，時間知覺就會增長；等待出現的階段以及等待發生的外部環境也會影響等待時間知覺的長度。

等待時間知覺是指用戶對於等待時長的主觀感受和心理體驗，除此之外，主觀因素對於時間知覺影響更大。除了人格因素以及自我調控能力這種具有差異性的不可控因素外，時間知覺常常被情緒所影響，人們在歡樂的時候感覺時間飛逝，在煩悶時度日如年，消極情緒會導致很多不利的結果，如壓力增大，效率惡化，以及對計算機的信任度降低等，用戶的等待時間知覺會增長。

基於心理學認知的等待體驗優化設計策略

由於移動端相比於pc端而言最顯著的特點是使用場景的多樣化，外界條件的多變性導致移動產品的實際載入時長可控程度較低。優化用戶在移動產品過程中的等待體驗的有效方式就是縮短用戶在等待過程中的時間知覺感知時長，緩解用戶在頁面載入過程中因為等待而產生的焦慮感，並在一定程度上影響用戶產生積極情緒。

1、基礎層優化載入反饋
大量的實驗證明，能否快速響應並給用戶反饋直接影響用戶的滿意度。用戶在產品頁面載入的過程中對於產品的後台運行以及數據載入的過程是無法感知的，當用戶面對空無一物的卻又沒有給出任何反饋提示的界面，等待過程平淡又毫無刺激，對於載入狀態以及載入時間預估都是處於未知的狀態，直接導致用戶時距估計出現錯覺，等待時間知覺被延長。

解決方案主要是一般產品可以通過系統自帶的載入圖標來提示用戶使用的產品的運行狀態，並給出用戶等待時間的長度，給用戶提供等待時長的心理預期。

蘋果的APP Store在用戶等待過程中是使用了系統自帶的緩衝圖標，在保證整體系統視覺一致性的同時給予用戶「數據正在載入」的正面反饋；
Path的頁面載入在系統載入圖標的基礎增加了文字描述，告知了用戶可能等待時間，給予了用戶心理預期等待長度；
微博圖片載入是以餅狀圖倒計時的方式告知用戶的載入過程和預計時長。

▲Apple APPStore載入界面 ▲Path載入界面 ▲ 微博圖片載入界面

2、中間層緩解用戶焦慮
用戶在等待的過程中，除了要給予用戶及時的產品後台運行反饋外，用戶在等待的過程中也會出現較多的負面情緒，如焦慮，疲勞，厭倦等。

設計師一般通過預載入部分內容的方式來滿足用戶對下一頁內容窺視的心理需求，減少用戶在等待過程所造成的負面情緒，縮短用戶的時間知覺。

Airbnb會通過優先載入文字的方式讓用戶快速尋找到個人需要信息並進行下一步的相關操作，有效地減少了等待的時長；
Facebook先行載入佔位符，讓用戶了解新打開頁面的內容框架。除此之外，通過降低圖片或視頻的質量的方式加快載入速度，並在後續的瀏覽過程中逐漸完成數據載入，保證用戶的無縫使用體驗；
Recipes在內容載入的過程中會優先載入低像素的圖片；
Path的圖片載入方式為先行載入黑白圖片，並在不影響用戶接下來操作的狀態下完成後續的載入。

▲Airbub內容載入界面 ▲Facebook內容載入界面 ▲Recipes圖片載入界面 ▲Path圖片載入界面

3、上層設計產生積極情緒

我們運用情感設計的設計方法增加移動產品信息載入過程中的動效展示，採用一些有趣的，符合場景的動效形式，增加用戶在等待過程中的趣味性，使用戶在等待的過程中產生積極的正面情緒，縮短用戶的等待時間知覺，優化等待體驗。

（1）通過動效的方式展現頁面之間的跳轉，削弱用戶對於頁面載入的感知。動效的運用不宜過於突兀，讓用戶在等待的過程中得到一些樂趣、驚喜。給用戶產生無縫操作的錯覺；iPhone系統圖標打開過程和豌豆莢的內容打開方式都是利用動效細化頁面之間的跳轉過程，弱化用戶對於頁面的載入感知。
（2）基於情景的載入icon設計，給用戶講故事，讓用戶融入到情境之中（好奇心日報）
（3）基於通感理論加入聲音，觸覺反饋等，增加用戶的交互快感（微博的下拉刷新）
（4）融入品牌形象等與產品相關的潛層信息（twitter，1688）

▲ 「好奇心日報」內容刷新界面 ▲ Twitter啟動頁開啟界面

整篇文章可以概括成下圖：

希望這篇文章的畫風不會讓你有點吃不消，有什麼想法可以後台反饋給要瘋兄，希望能幫助到你。

作者簡介：前阿里巴巴交互設計師，現任職騰訊音樂娛樂集團。個人公眾號：@符要瘋。

爐石傳說

「正在學習魚人呻吟」
「正在給卡牌上做小記號」
「旗鼓相當的對手」旁邊的「暴雪員工」等等
每次看都會心一笑

等待，不光是Loading，還有等待對手出牌的時候，牌桌四周的小建築小景觀小物件的互動，都做的十分貼心，尤其是那個投石車！！
英雄會時不時發出「嗯……」「我要想一下」之類的話，讓人能感覺到對手確實是在思考，還有在選牌出牌時對方也能看到你在看那張牌。

玩過的都懂

舉個小例子吧。
下拉刷新，一個小指南針在轉，0.5s一圈，1s一圈，用戶的感受是不同的。
轉的慢，用戶會覺得刷新的快，這是一種錯覺。

app《高鐵大戰飛機》
loading時會介紹一些購票常識，效果上雖然有些生硬，但還是很實用的

Toshl Finance 中，上傳記錄到雲端時的等待畫面，小怪獸會滾動地說一些賣萌的話。當用戶驚訝地去閱讀這個氣泡是什麼意思，然後會心一笑時，上傳就完成了。等待？我忙著呢，什麼時候等待了？

舉手補充。
時間太久遠了，偉大的windows沒事還需要重裝的時候，安裝過程中，有俄羅斯方塊可以玩...

The Psychology of Waiting, Loading Animations, and Facebook ? Mercury Intermedia

It was from this perspective that I noted that custom loading animations can be valuable to distract and entertain your users while content is retrieved. But I also noted a word of warning.
This warning pertained to a Facebook test indicating that when their users were presented with a custom loading animation in the Facebook iOS app (left) they blamed the app for the delay. But when users were shown the iOS system spinner (right), they were more likely to blame the system itself.

我翻譯如下：從這個角度看，我發現，在讀取內容的時候，自定義的「載入中」動畫對分散用戶注意力和娛樂用戶來說，確實有一定價值。但是我同時注意到了另一個問題。
這個問題就是，Facebook在測試的時候發現，在Facebook iOS應用中當給用戶展示自定義「載入中」動畫（左）時，他們會責怪是App太慢了。但是給用戶展示iOS系統菊花轉（右）時，他們更傾向於責怪系統本身。

然後Facebook就改成菊花轉了，當然線上版本還是在定義動畫和系統菊花轉之間取了個折中，大概是這個樣子：

（誰能告訴我怎麼上傳GIF，怎麼讓圖片左右排版。。）

1.iOS版gmail的載入和下拉刷新動畫，看不夠
2.windows文件傳輸，文件從一個文件夾飛向另一個文件夾的動畫
3.mac版qq 對方正在輸入的小氣泡

現代化機場里登機口和取行李的地方往往離得很遠，我們往往需要花很久時間走過去。用不斷地走路取代了站立的等待，抵消了消極等待下產生的焦慮心急等心態。

前面的答案基本都是人「等待」機器的例子，我來補充兩個機器「等待」人的例子吧。

第一個例子：通過延長反應時間來判斷用戶的真實意圖。

在網易郵箱歡迎頁的右上角有個設計很精美的天氣模塊

當你把滑鼠hover在這個模塊上面，就會展開一個詳細天氣信息的彈窗
滑鼠移出這個彈窗所在的區域，彈窗就會消失

這一切看起來都很完美對吧？但是如果你不小心滑鼠滑過這個區域，或者想點擊別的地方經過了這裡，這個彈窗就會在一瞬間「彈出-收起」，眼前閃過一片白。如果滑鼠來回經過，就會被一片閃爍的白框炫瞎狗眼。效果可以參考你在知乎頁面一排答案上滑過，「分享感謝收藏沒有幫助舉報」那一排按鈕閃個不停。

更何況，這個彈窗真！夠！大！如果是小屏的用戶，這個傢伙彈出來，別的功能模塊都被遮！住！了！
比如你想去點個按鈕什麼的

滑鼠一滑過，我擦，被什麼奇怪的東西擋住了！

要把滑鼠向反方向拉出去好遠再拉回來才能點到想要的功能，這是在玩老！鷹！捉！小！雞！啊！

所以，怎麼來解決這個問題呢？
在滑鼠hover天氣模塊到彈出天氣詳情彈框之間增加了100ms的等待時間。如果用戶hover天氣模塊超過了100ms才彈出彈框。
這100ms在用戶感知里只是微不足道的一瞬間，但是已經足夠發生很多事情了。我們測算過，以1920*1200的解析度，足夠一般用戶移動滑鼠到任意想要的地方。所以，在100ms過後，用戶只是路過還是想查看內容，目的清晰瞭然。

雖然讓用戶也付出了一點「等待」的成本，但是在整體的使用體驗中郵箱變的優雅謙遜許多，是一個真正讓人感到愉悅的設計。

第二個例子：通過限制等待操作反應時間來兼容其他頁面錯誤。
在很多網站里，這樣的下拉菜單都是在用戶點擊其他區域空白處消失的

但不幸的是，郵箱裡面有很多iframe頁面，經常有開發忘了在iframe頁面調用父層的點擊事件。所以就總會出現怎麼點都關閉不了下拉菜單的情況。

你總不能靠每次都跟對方開發、測試耳提面命吧，更何況萬一產品活的比我還久呢……
所以，怎麼來解決這個問題呢？
在下拉菜單增加一個「等待」判斷，如果用戶滑鼠離開下拉菜單區域超過2s，就自動關閉彈窗。
這樣做是基於兩個考慮：
1.如果用戶注意力集中在這塊操作區域，一般他的滑鼠指針也不會離開此區域
2.2s的時間足夠想回來操作的用戶重新把指針移動回來（把注意力轉回來）
3.和用戶將滑鼠指針移開在頁面空白處點擊的反應時間相差不大，還有很多用戶以為是點擊消失的

這樣通過一個小小的「等待」機制來降低對用戶感知的干擾，頁面表現時刻追隨用戶的注意力，同時兼容外來錯誤對產品本身的影響。用產品和做產品的都開心一點。

這類等待的例子還有很多。比如常見的發送簡訊驗證碼要求等待60s重新發送，是為了避免造成資源浪費或者被滑鼠狂人虐個不停；再比如有些網站的404頁面會在等待幾秒後自動跳轉回首頁，可以挽回更多跳出流量。這些常見微小的設計都帶來明顯的優化效果。還有很多例子，就不一一例舉了。

爐石各種場景里可以交互的、戳來戳去的小東西....簡直是等對手燒繩子的利器！
我實在是...太tm喜歡戳它們了！小石頭可以拎起來再丟下去、滿樹的花戳兩下會謝掉（不過過一會又會長出來，大概是為了方便我繼續戳...）、風箏會飛走、奇怪的大鳥會抬頭看你、水車轉呀轉、窗戶里的燈開了有關、門會打開、敲鐘會發出聲響.....應該還有很多我沒戳出來過的東西吧XDDDD
滿分！好評！媽媽再也不用擔心我碰到燒繩子選手了！

暴雪系列遊戲的 loading tips，特別是最早的魔獸世界，在遊戲載入過程中會每次隨機地顯示一些遊戲的 tips：

雖然時間長了這些 tip 都無關緊要了，但是在版本更新、推出新功能的時候這些 tip 也會隨之更新、增加，所以這個每天會見到無數次的 loading 畫面就沒那麼煩人了，甚至有的玩家會發現他們玩了幾個月後還不知道的小技巧，就出現在這些 loading tips 里。不單單魔獸世界，Diablo 3 也採用了相同的做法：

不知道是否是借鑒 WOW，最近比較火的 COC 也是用這種做法：

最後可以看看豌豆莢上最近比較火的消除遊戲：「開心消消樂」安卓版免費下載
，也採用了這種國際先進的 loading 設計，大家可以玩看看：

騰訊微博遊戲"你畫我猜"中,等待界面是個切水果的遊戲