【Samshing專欄】動态等待符的實踐指南

點選關注 異步圖書

，置頂公衆号

每天與你分享IT好書 技術幹貨 職場知識

​

​系統狀态的可視性是使用者界面設計中最重要的原則之一。使用者希望在使用産品的時候體驗到足夠的控制感，即他們想要及時知道和了解産品的目前狀态，尤其是當系統忙于處理任務的時候。動态等待符是當産品在運作任務或加載時為使用者提供系統狀态的最常見形式。

我們應該去深入了解動态等待符對界面設計的幫助，因為這些資訊無疑能夠幫助我們設計更好的産品。在本文中，Nick Babich介紹了幾種主要的等待符的設計形式，并提供了關于何時及如何使用這些等待符的建議。

 1. 好的互動設計提供及時的回報

能夠做到即時響應無疑是最好的，但總有你的産品不能提供即時回報的情況：可能由網速慢、操作本身需要長時間完成(例如系統更新)等原因導緻。在這些情況下，為了減少使用者的心理緊迫感，你需要告知使用者你的産品正在為滿足他們的需求而努力工作，并且在逐漸接近目标。是以，你應該在合理的時間内向使用者告知你的産品在做什麼、做到什麼程度了。

 2. 總是給予一定程度的即時回報

使用者在發起動作的那一刻就開始等待了，然而最糟糕的情況是沒有任何訓示來告知他們系統已經接收了請求。當産品沒有告知使用者它需要一定的時間去執行任務時，使用者通常會認為該産品沒有接收到使用者的請求，他們會再次嘗試操作。缺乏回報會引發大量額外的點選或點觸。

産品應該對使用者的任何操作 (例如點選按鈕或下拉重新整理)提供相應的即時回報。在接收到使用者的操作請求之後就立即提供相應的視覺回報，以便使用者了解産品已經收到請求并開始處理了，如圖1所示。

​圖1 下拉重新整理的操作（圖檔源于Behance）

 3. 為長于1s的程序提供進度訓示

當産品的響應速度處于0.1～1s時，盡管使用者能夠感覺到一定的延遲，但他們的注意力仍然會維持在目前任務上。但是當響應速度長于1s時，使用者就會開始走神，然後發現産品的響應速度不夠快。

是以，對長于1s的處理過程就需要用進度訓示器減少使用者的不确定感，并提供給使用者一個等待的理由（注意：我們不推薦使用加載時間低于1s的動态訓示器，因為它們的閃現可能反而容易增加使用者的煩惱：剛才有個什麼過去了……）。動态的進度訓示器能夠舒緩使用者等待過程帶來的負面影響，延長使用者對網站或App的注意時間。

 4. 等待符的種類

等待符讓使用者知道産品需要更多的時間來處理他們最近一次的請求。

不确定的等待符是最簡單的進度訓示符，它們告知使用者需要等待任務處理的完成，但并不确定需要多長時間才能完成任務，如圖2所示。

​圖2 無限循環模式的等待符（圖檔源于Behance）

不确定的等待符通常用于能夠快速完成的處理（2～10s）。若長于這個時間，讓使用者盯着此類無限循環的旋轉符/線條會增加網站的跳出率或導緻使用者關閉App，如圖3所示。

與之相反的是确定的等待符，能夠大緻(或準确)告知使用者完成任務需要的時間以及任務處理的進度，如圖3所示。使用這種等待符能夠提高使用者的等待意願。确定的等待符是等待符中最具資訊量的一種：展示目前的程序、告知完成度和剩餘工作量。看着視覺辨別不斷朝着完成訓示接近能夠使使用者平靜下來并且更加願意等待。

​圖3 不确定的等待符（左）和确定的等待符（右）（圖檔源于 Material Design）

 5. 兩種常用的等待符

循環動畫和百分比進度訓示是兩種常見的等待符。

（1）循環動畫

大多數的循環動畫不提供确定的進度資訊，并多在延遲情況下發揮作用，包括長時間的延遲。這種等待符的應用場景通常帶有負面的影響。例如，Apple iOS預設的加載圖示從裝置啟動到網絡問題以及資料加載都有應用，如圖4所示。但是，使用者并不喜歡看到沒有其他進度或時間辨別隻是不斷循環的旋轉符。

​圖4 iOS的加載訓示符（圖檔源于 appance）

（2）百分比進度條

百分比進度條會明确告知使用者任務處理從0%～100%的程序，基本不存在數值回退。百分比可以用線條或環形線的形式實作，如圖5所示。

對于10s及以上的任務處理過程，百分比訓示是比較好的選擇。根據Jakob Nielsen關于響應時間的研究，10s是使用者的注意力維持在某個任務上的極限，一旦超過這個限度，使用者便會迅速失去耐心，尤其是在使用者不知道他們需要等待多久的時候。

​圖5 條狀（左）和環狀（右）進度條（圖檔源于Adobe Stock）

 6. 等待符的設計建議

如果不能避免，那麼至少應該努力使等待變得愉悅，可以采取如下建議。

（1）告知使用者等待/延遲的原因

使用者如果知道了等待原因，他們可能會變得更加耐心。設計者可以通過增加額外的文本資訊來告知使用者，産品正在處理什麼或者其他必須等待的原因，如圖6所示。

​圖6 Skyscanner告知使用者，産品正在從現有的供應商中搜尋最适合的航空結果

（2）對長時間等待的任務，給使用者一個預計的完成時間

不需要完全準确，簡單的“這個任務大概需要5分鐘”就足以鼓勵使用者完成等待，如圖7所示。

​圖7 iOS在系統更新時告訴使用者大概的完成時間

（3）告訴使用者已經完成了哪些工作

對于那些耗時但又無法預估完成時間的任務，用百分比的進度訓示明顯是不合适的。但仍然可以通過告知使用者“已經完成了哪些工作/步驟”，如圖8所示。通過這些回報能夠幫助使用者估算出完成整個任務需要的時間。

​圖8 當不能準确監控運作程序時，考慮展示已完成的步驟

（4）不要讓進度條停下來

通過進度條的顯示能夠幫助使用者對産品的處理能力形成一定的預判（如圖9所示）。是以任何預料之外的停頓都可能被注意到，進而影響使用者的滿意度。最糟心的事情莫過于進度條走到99%就不動了。不過我們還有補救的機會——通過即時和穩定的進度顯示能夠在一定程度上掩蓋不算嚴重的延遲。

​圖9 不要讓進度條停下來（圖檔源于Behance）

（5）讓進度看起來更快一些

使用者感覺到的處理速度和實際的處理速度一樣重要。你可以讓進度條在剛開始的時候慢一點兒，然後在結束前移動得更快一些。這樣使用者就會感覺産品的處理速度快于預期，如圖10所示。

​圖10 讓進度看起來更快一些（圖檔源于Behance）

（6）應用視覺幹擾

有創意的等待符能夠減弱使用者對時間的感覺。如果産品能夠在使用者等待時提供一些有趣的事物給他們觀看，使用者将減少對等待本身的關注。是以，為了確定使用者不會在等待過程中感到無聊，給他們看點兒好玩的吧，比如圖11所示的有趣畫面。

​圖11 應用視覺幹擾1（圖檔源于Behance）

或者像圖12所示的可愛畫面。

​圖12 應用視覺幹擾2（圖檔源于Vimeo）

又或者其他能夠在App加載過程中吸引使用者注意力的東西，如圖13所示。

​圖13 精緻的動圖能夠吸引使用者的注意力，讓他們忽略長時間的等待

 7. 頁面架構：傳統等待符的替代物

以上的所有内容都表明：如果某個操作需要一段時間來進行處理，應該通過等待符給使用者更好的等待體驗。然而，盡管這樣做是出于好意，但最終的結果可能并不理想。Luke Wroblewski在其文章中指出：“從其定義上來看就知道等待符意味着使用者必需等待。這就好像看着時鐘嘀嗒嘀嗒地走一樣——當你真去看的時候，時間好像是變慢了。”在産品中加入等待符就好像給了使用者一個時鐘去關注。盡管比什麼都不做更強，但UI設計應該緻力于讓等待變得更加愉悅。

幸運的是，我們有頁面架構（Skeleton Screen）這個等待符的優秀替代物。頁面架構事實上是内容逐漸加載過程中的空白狀态。與進度條/加載訓示不同，頁面架構關注于資訊處理的具體過程并為使用者提供完成狀态的架構預覽。這樣做能夠給使用者提供足夠的回報：随着加載的進行，資料/資訊一點點地展現出來。使用者會知道在他們等待的過程中，你的産品具體在做些什麼。

Medium就使用這樣的技巧。在内容加載的過程中，展示線框圖似的占位符。同時，這個加載頁面也讓使用者熟悉加載完成後的内容展示會是怎樣顯示的，如圖14所示。

​圖14 Medium使用頁面架構作為内容加載時的等待符

 8. 總結

不管我們如何努力提升App或網站的速度，總有些任務是需要時間去處理的。等待符，例如加載的循環和百分比進度條，能夠通過告知使用者産品目前的工作狀态以減少不确定性，同時增加使用者等待任務加載完成的意願。根據經驗，對需要2～10s處理速度較快的任務最好使用循環動畫或頁面架構，而對于需要10s以上處理時間的任務，則百分百進度條會更适用。在循環動畫和頁面架構之間，我們更加推薦後者，因為頁面架構有着較大的優勢——任何需要幾毫秒以上時間的任務都能借助他們提升使用者的體驗。

本文摘自異步社群， 異步社群走刀口，作品

《【Samshing專欄】動态等待符的實踐指南》

，未經允許禁止轉載。

推薦閱讀 2018年4月新書書單 異步圖書最全Python書單 一份程式員必備的算法書單 第一本Python神經網絡程式設計圖書

​長按二維碼，可以關注我們喲

每天與你分享IT好文。

在“

”背景回複“關注”，即可免費獲得2000門線上視訊課程；推薦朋友關注根據提示擷取贈書連結，免費得異步e讀版圖書一本。趕緊來參加哦！

點選閱讀原文,檢視更多内容

閱讀原文