系統(tǒng)狀態(tài)的可知性是用戶界面設(shè)計(jì)中最重要的原則之一花盐。 用戶在使用產(chǎn)品的時(shí)候體驗(yàn)到足夠的控制感，這意味著他們需要及時(shí)知道和理解產(chǎn)品的當(dāng)前狀態(tài)，尤其是當(dāng)系統(tǒng)忙于處理任務(wù)的時(shí)候梯浪。 動(dòng)態(tài)的等待符是當(dāng)產(chǎn)品在運(yùn)行任務(wù)或加載時(shí)為用戶提供系統(tǒng)狀態(tài)的最常見形式牛曹。
Nick Babich 在Smashing Magazine分享了這篇文章佛点，介紹了等待符的幾種設(shè)計(jì)形式，并為何時(shí)及如何使用這些指示符提供了建議躏仇。
好的交互設(shè)計(jì)提供及時(shí)的反饋
能夠做到即時(shí)反應(yīng)無疑是最好的恋脚，但總有的時(shí)候你的產(chǎn)品不能提供即時(shí)的反饋：網(wǎng)速慢、操作本身需要長時(shí)間完成焰手。在這些情況下糟描，為了減少用戶的心理緊張感，你需要告知用戶你的產(chǎn)品正在為了執(zhí)行他們的請求而工作书妻。
總是給予某種程度上的即時(shí)反饋
產(chǎn)品應(yīng)該對用戶的任何操作（如點(diǎn)擊按鈕或下拉刷新）做出即時(shí)的視覺反饋船响。用戶的等待在他們發(fā)起動(dòng)作的那一刻就開始了，而最糟糕的情況是沒有任何指示來告知他們系統(tǒng)以及接受了請求躲履。當(dāng)產(chǎn)品不能告知用戶它需要一定時(shí)間去執(zhí)行任務(wù)時(shí)见间，用戶通常認(rèn)為該產(chǎn)品沒有接受到用戶請求，他們會再次嘗試操作工猜。缺乏反饋會引發(fā)大量額外的點(diǎn)擊或點(diǎn)觸米诉。
為長于1秒的操作提供進(jìn)度指示
對于1秒以內(nèi)的反應(yīng)速度，盡管用戶能夠感覺到一定的延遲篷帅，但他們的注意力仍然會維持在當(dāng)前任務(wù)上史侣。當(dāng)產(chǎn)品的反應(yīng)速度長于1秒時(shí)拴泌，用戶的注意開始搖擺，他們會開始注意到產(chǎn)品的反應(yīng)速度不夠快惊橱。因此蚪腐，對長于1秒的處理過程就需要給用戶提供一個(gè)進(jìn)度指示器和一個(gè)等待的理由（對于1秒以內(nèi)的過程，等待符的閃現(xiàn)可能更容易增加用戶的煩惱：剛才有個(gè)什么過去了...）税朴。
等待符的種類
等待符提示用戶產(chǎn)品需要更多的時(shí)間來處理他們最近一次的請求回季。
不確定的等待符是最簡單的進(jìn)度指示符，它們告知用戶需要等待任務(wù)處理的完成正林，但并不確定需要多長時(shí)間才能完成任務(wù)泡一。作為一個(gè)普遍的原則，不確定的等待符用于能夠快速完成的處理中（2~10秒）卓囚。讓用戶長久的盯著一個(gè)無限循環(huán)的旋轉(zhuǎn)符/線條會增加網(wǎng)站的跳出率或?qū)е掠脩絷P(guān)閉APP瘾杭。
與之相反的是確定的等待符，能夠大致告知用戶完成任務(wù)需要的時(shí)間以及任務(wù)處理的進(jìn)度哪亿。使用這種等待符能夠提高用戶的等待意愿粥烁。
兩種最常用的等待符
循環(huán)動(dòng)畫和百分比進(jìn)度指示是兩種最常見的等待符。
循環(huán)動(dòng)畫 ?大多數(shù)的循環(huán)動(dòng)畫不提供確定的進(jìn)度信息蝇棉，并在多種延遲情況下發(fā)揮作用：包括長時(shí)間的延遲讨阻。例如，Apple IOS默認(rèn)的加載圖標(biāo)在多種情況下被使用篡殷，從設(shè)備啟動(dòng)到網(wǎng)絡(luò)問題以及數(shù)據(jù)加載钝吮。但是，用戶并不喜歡只看到循環(huán)的旋轉(zhuǎn)符板辽，尤其是沒有其它進(jìn)度或時(shí)間標(biāo)識的時(shí)候奇瘦。
百分比進(jìn)度條 ?百分比進(jìn)度條會明確告知用戶任務(wù)處理從0%到100%的進(jìn)度，基本不存在數(shù)值回退劲弦。百分比可以用線條或環(huán)形線的形式實(shí)現(xiàn)耳标。對于10秒以上的任務(wù)處理過程，百分比指示是最好的選擇邑跪。根據(jù)Jakob Nielsen關(guān)于反應(yīng)時(shí)間的研究次坡，10秒是用戶的注意在某個(gè)任務(wù)上維持的極限，一旦超過這個(gè)界限画畅，用戶便會迅速失去耐心---尤其是在用戶不知道他們需要等待多久的時(shí)候砸琅。
等待符的設(shè)計(jì)建議
1. 告知用戶等待/延遲的原因 ?用戶如果知道了等待原因，他們可能會變得更加耐心轴踱≈⒅可以通過增加額外的文本信息來告知用戶你的產(chǎn)品正在處理什么或者其它延遲反應(yīng)的原因。
2. 于長時(shí)間的任務(wù)，給用戶一個(gè)預(yù)計(jì)的完成時(shí)間 ?不需要完全準(zhǔn)確摊腋，簡單的‘這個(gè)任務(wù)大概需要5分鐘’就足以鼓勵(lì)用戶完成等待沸版。
3. 訴用戶已經(jīng)完成了哪些步驟 ?對于那些耗時(shí)嘁傀，但又無法預(yù)估完成時(shí)間的任務(wù)兴蒸，用百分比的進(jìn)度指示明顯是不合適的。但仍然可以通過告知用戶‘已經(jīng)完成了哪些工作/步驟’细办，通過這些反饋能夠幫助用戶自己估算整個(gè)任務(wù)需要的時(shí)間橙凳。
4. 不要讓進(jìn)度條停下來 ?用戶通過進(jìn)度條的只是對產(chǎn)品的處理能力產(chǎn)生一定的預(yù)期笑撞。任何預(yù)料之外的停頓都可能被注意到岛啸，進(jìn)而降低用戶滿意的有。最糟心的事情莫過于進(jìn)度條走到99%就不動(dòng)了茴肥。通過即時(shí)和穩(wěn)定的反饋進(jìn)度信息能夠在一定程度上避免這種情況坚踩。
5. 讓進(jìn)度看起來更快一些 ?用戶感知到的處理速度和實(shí)際的處理速度一樣重要。你可以讓進(jìn)度條在剛開始的時(shí)候慢一點(diǎn)兒瓤狐，然后在結(jié)束前移動(dòng)更快一些瞬铸。這樣用戶將感覺產(chǎn)品的處理速度快于預(yù)期。
6. ?展示視覺干擾 ?有創(chuàng)意的等待符能夠減弱用戶對時(shí)間的認(rèn)知础锐。如果產(chǎn)品能夠在用戶等待是提供一些有趣的事物給他們觀看嗓节，用戶將減少對等待本身的關(guān)注。比如以下這些：
Skeleton Screen：等待符的替代物
以上的所有內(nèi)容都在說：如果某個(gè)操作需要一段時(shí)間來進(jìn)行處理皆警，應(yīng)該通過等待符給用戶更好的等待體驗(yàn)拦宣。然而，盡管這樣做是出于好意信姓，但最終的結(jié)果可能也并不理想鸵隧。Luke Wroblewski在其文章中指出：“從其定義上來看就知道等待符以為著用戶必需等待。這就好像看著時(shí)鐘嘀嗒嘀嗒地走一樣---當(dāng)你真去看的時(shí)候意推，時(shí)間好像是變慢了豆瘫。”在產(chǎn)品中加入等待符就好像給了用戶一個(gè)時(shí)鐘去盯著左痢。盡管比什么都不做更強(qiáng)靡羡，UI設(shè)計(jì)應(yīng)該致力于讓等待變得更加愉快。
頁面框架（Skeleton Screen）因此成為等待符的良好替代物俊性。頁面框架事實(shí)上是內(nèi)容逐漸加載過程中的空白狀態(tài)略步。與進(jìn)度/加載指示不同，頁面框架關(guān)注于信息處理的具體過程并為用戶提供完成狀態(tài)的框架預(yù)覽定页。這樣做給用戶提供足夠的反饋：隨著加載的進(jìn)行趟薄，數(shù)據(jù)/信息一點(diǎn)點(diǎn)的展現(xiàn)出來。用戶會知道在他們等待的過程中典徊，你的產(chǎn)品具體在做些什么杭煎。
Medium就使用這樣的技巧恩够。在內(nèi)容加載的過程中，展示線框圖似的的占位符羡铲。同時(shí)蜂桶，這個(gè)加載頁面也讓用戶熟悉加載完成后的內(nèi)容展示會是怎樣的。
PS. 如果我有什么術(shù)語翻譯不對也切，請指正和包涵扑媚。畢竟不是學(xué)設(shè)計(jì)的啊...
拓展閱讀：
有創(chuàng)意的等待符，讓等待變的不再枯燥（交互設(shè)計(jì)）中作者提供了諸多創(chuàng)意的等待符雷恃。
Progress Bars vs. Spinners: When to Use Which 中Anthony分析了何時(shí)使用進(jìn)度條或循環(huán)動(dòng)畫：與本文中10秒的界限不同疆股，Anthony認(rèn)為區(qū)分兩種等待符的時(shí)間界限為4秒。
