中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

系統(tǒng)狀態(tài)的可見性是用戶交互設計最重要的原則之一。在使用系統(tǒng)時，用戶想要感覺一切都在掌控之中，這意味著在任何特定時間下，他們想要知道并了解他們當前的處境，尤其是在系統(tǒng)正處于繁忙狀態(tài)時。當系統(tǒng)在處理或者加載進程時，一個等待動畫進度指示器是向用戶展示系統(tǒng)狀態(tài)最為常見的形式。

（這里有一部分關(guān)于Adobe XD的介紹，不翻譯了，并且附上了下載地址）

在這篇文章中，我們將探討動畫進度指示器的幾種主要類型，并提供建議在什么情況如何使用每種類型。

好的交互設計會提供反饋

盡管app的及時響應是最好的，但總有些app為了速度不能及時響應的時候。一個緩慢的響應可能由于互聯(lián)網(wǎng)連接故障引起，或者源于這個操作本身就會占用一段很長的時間（比如安裝OS系統(tǒng)的更新）。

對于這樣的情況，為了減少用戶的焦躁不安，你必須讓用戶明確這個app正在運行它的請求，真實的進程正在被處理。

因此，應該提供反饋給用戶，讓用戶了解app在適當時間內(nèi)正在發(fā)生些什么。

永遠提供及時反饋的類型

一個用戶的等待時間從他們發(fā)起操作便開始了，而最糟糕的是用戶沒有得到任何指示表明系統(tǒng)已經(jīng)接收到了操作。當一個app無法告知用戶完成這項操作需要花費一定時間，用戶會認為這個app并沒有接受到請求，并且再一次發(fā)起操作請求。大量的額外點擊和輸入輸出都歸咎于反饋信息的匱乏。

任何操作，比如點擊一個按鈕或者下滑刷新，都應當有一個及時的反饋。在接受到用戶操作請求后，給用戶一些及時的視覺反饋去表明操作已經(jīng)被發(fā)起是非常重要的。

下滑刷新操作 來源：Behance

對任何操作的進程指示器花費超過1秒的時間

當app使用超過0.1秒但是少于1秒的時間去響應用戶輸入時，這感覺好像這個app正在促使結(jié)果出現(xiàn)。盡管用戶注意到了一小段延遲，他們?nèi)匀粫Ｗ⒃谒麄儺斍暗娜蝿丈?。但在?jīng)過1秒后，用戶的注意力開始會分散，他們會意識到正在等待一個速度緩慢的app的響應。

為了減少用戶的不確定性，用進程指示器去為需要超過1秒時間響應的操作提供一個等待的原因。（對于任何加載時間不到一秒的操作不推薦使用動畫，因為用戶對只是一閃而過的畫面可能感受到不安。）動畫進程指示器緩和了用戶等待時長帶來的負面影響，并延長了用戶在站點或者app上的注意力。

進程指示器的類型

進程指示器告訴用戶app需要更多的時間去處理最后的用戶操作。最簡單的進程指示器形式是不確定的——這些指示器的類型需要用戶在操作即將結(jié)束時等待，但是他們并不指示需要等待多長的時間。

無限循環(huán)動畫提供了系統(tǒng)正忙的反饋，但是并不提供任何關(guān)于用戶將要等待多久的信息。圖片來源：Behance

常規(guī)上，這種類型的進程指示器應該用于快速的響應（2-10秒內(nèi)）。使用戶盯著旋轉(zhuǎn)輪或無限線性動畫更長的時間會增長網(wǎng)站的跳出率，或者使得人們關(guān)閉掉app。

另一種類型的進程指示器指示了一個操作需要花費多久的時間（大致上或者是確切的時間）。這種類型的進程指示器被稱為確定模式。它們是等待動畫反饋時最能提供信息的指示器類型，因為它們展示了當前的進度，現(xiàn)在有多少已經(jīng)被完成了，以及還剩下多少未完成。一個進程趨于完成的視覺指示器使用戶感到放松，并且讓他們更愿意等待。

不確定的指示器視覺化不具體的等待時間，而確定的指示器顯示了這個操作需要花費多久的時間。圖片來源：Material Design

兩種最受歡迎的動畫進程指示器

有兩種最受歡迎的動畫進程指示器類型——循環(huán)動畫進程指示器和百分比完成指標進程指示器。

循環(huán)動畫指示器

因為大部分的循環(huán)動畫都是不確定的，并且用于延遲的多種類型（包括很長的那些延遲），所以這種類型的進度指示器趨向于有許多消極影響。比如，在Apple iOS里的一個默認的加載圖標（圍繞著一個中心點區(qū)域面向四周發(fā)散灰色線條的旋轉(zhuǎn)器）被用于多種操作系統(tǒng)功能延遲，表明了所有從啟動設備到連接網(wǎng)絡或加載數(shù)據(jù)的問題的延遲。正因為如此，用戶不想只看見一個沒有任何進程或者時間指示的加載旋轉(zhuǎn)器。

看著加載旋轉(zhuǎn)器仿佛在看著時鐘轉(zhuǎn)動 —— 當你這樣做時，時間似乎停止了。圖片來源：appance

百分比指示器

百分比完成指標指示器是一種確定的進程指示器，它從0%填滿到100%，并且不會負增長。線性和環(huán)形進程指示器都可以是百分比完成指標的形式。

線性百分比完成指標進度指示器。圖片來源：Adobe Stock

環(huán)形百分比完成指標進度指示器。圖片來源：Adobe Stock

常規(guī)翻閱網(wǎng)站時，對于使用10秒或更多時間的長進程應該使用百分比完成指標的動畫指示器?；贘akob Nielsen的關(guān)于響應時間的研究，10秒是用戶在當前任務上保持注意力的極限，在10秒過后，如果沒有得到足夠的關(guān)于等待結(jié)果還需要多久的信息，用戶會迅速的變得不耐煩。

設計進程指示器的要點

如果不能縮短時間，應該始終試圖讓等待的時間變得更愉悅。

解釋為什么用戶在等待

大多數(shù)情況下，如果用戶被提前告知情況，他們會更為有耐心。通過內(nèi)含文本的形式，通知用戶發(fā)生了什么，并且解釋為什么用戶在等待，這對于增加用戶的清晰度是很有幫助的。

Skyscanner告知用戶它在檢查所有可用的服務商去搜尋最佳航班選擇。

為耗時的任務提供一個大致的預估時間

時間不用十分精確，舉個例子，“這可能要花費5分鐘”就足夠鼓勵用戶繼續(xù)等待結(jié)果出來。

Apple iOS的軟件更新預估時間

展示工作完成的絕對量

對無法提前知道需要完成多少工作量的消費時間的操作，使用一個百分比指標指示器是不太可能的，但是仍然可以就明確的已完成的工作量提供運行中的進度反饋。在這種情況下，考慮到展示步驟的數(shù)量，因為了解步驟的數(shù)量可以至少讓用戶有一個大致的預估。

當進度無法被準確監(jiān)控時，考慮展示步驟的數(shù)量而不是百分比。

不要停止進度條

進度條確保用戶對操作正在多快被處理保留了期待。因此，任何意料不到的停滯都將被注意到并且影響到用戶的滿意度。最壞可能的情況是當進度條接近99%時突然停止了。大部分用戶會對這樣的行為感覺挫敗，因為這會讓他們認為app有故障了。

開心的是，有一個簡單的解決方案——采用一致，穩(wěn)定和持續(xù)增長進度條的方式掩飾進程中小的延遲。

圖片來源：Behance

讓用戶感覺進度條很快

記住看起來的感知就和計算機運算速度一樣重要。為了讓用戶感覺進度條很快，可以讓進度條在開始時慢一些，而在接近結(jié)束的時候移動快一點。這種方式可以給用戶一種完成時間很快速的感覺。

圖片來源：Bechance

提供視覺上的干擾分散注意力

創(chuàng)造性的進度指示器可以減少用戶對于時間的時長觀念。如果app在等待時為用戶提供了一些有趣的視覺干擾去觀看，這會讓用戶更少的留意到在等待這件事情。因此，為了確保用戶在等待什么發(fā)生的時候不感覺到無聊，可以提供用戶一個干擾來分散注意力。比如下面的例子，干擾可以是有趣的。

圖片來源：Behance

或者干擾也可以很可愛…

圖片來源：Vimeo

或者是出其不意的抓住用戶的注意力，等候app加載。

好的動畫可以分散訪問用戶的注意力，讓他們無視很長的加載時間。圖片來源：Behance。

傳統(tǒng)進度指示器的絕佳替代

正如剛剛所了解到的，當操作需要花費一定時間時，應當讓用戶明白使用進度指示器。然而，當隱藏在進度指示器后的意圖是好的時候，最后的結(jié)果常證明是壞的。Luke Wroblewski在他的文章中提到：“定義上的進度指示器喚起注意到用戶需要去等待。這就好像等待時鐘運轉(zhuǎn)——當你這樣做的，時間似乎流逝得更慢了?！彪S著進度指示器被引用到了UI領(lǐng)域，設計師經(jīng)常讓用戶“觀看時鐘”。盡管這比什么都不做更好，但是UI設計時應當永遠致力于讓等待變得更為愉悅。

好的是，有一個進度指示器的絕佳替代，技術(shù)使得用戶在等待時有了更好的體驗。這種技術(shù)被稱為加載占位符，加載占位符(換句話說，臨時信息存儲器)本質(zhì)上是一頁空白版。比起展示一個進度指示器，加載占位符專注在實際的進程上，并且創(chuàng)造了什么即將到來的預期。隨著信息逐漸的顯示在屏幕上，這構(gòu)建了一種事情正在立即發(fā)生的感覺，用戶會認為在他們等待的時候應用正在運行。

當內(nèi)容加載的時候，媒體使用這個小技巧像占位符一樣展示簡單的框架。加載的屏幕也會讓用戶感覺熟悉加載內(nèi)容的整體結(jié)構(gòu)。

媒體的焦點在被加載的內(nèi)容，而不是在加載的事實。圖片來源：merhl

結(jié)論

不管我們?nèi)绾问刮覀兊腶pp或者網(wǎng)站運行快速，總是有一些操作和進程需要時間去處理。等待動畫，比如旋轉(zhuǎn)等待動畫和完成百分比指示器，都通過告知用戶目前的工作狀態(tài)減少了用戶感知到的不確定性，并且增加了用戶愿意停留等待信息加載的可能性。

經(jīng)驗法則是對于花費2-10s的合理快速反應操作使用一個循環(huán)指示器或者加載占位符，而對于超過10s的操作使用完成百分比指示器。當考慮選擇加載占位符還是循環(huán)指示器時，更傾向于選擇加載占位符，因為它有一個重要的優(yōu)勢：加載占位符可以減少對于花費數(shù)毫秒的操作的時間感知從而改善體驗。

譯者：xElaine

來源：http://www.jianshu.com/p/c16b2fe97f3c

本文由 @xElaine 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

原文地址：https：//www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/