它是什么？

進度指示器表示未指定的等待時間或顯示過程的持續(xù)時間。使用活動指示器和進度條可以使人們知道您的應(yīng)用沒有停止，并讓他們知道他們要等待多長時間。

在那些需要很長時間才能完成的操作中，為用戶顯示操作進度的一種模式。

它有什么作用？

1. 如果一個界面用戶在操作以后，一動不動沒有反饋，用戶很容易就會失去耐心，一個操作等待耗時超過兩秒就可以應(yīng)用此模式來展示當(dāng)前進度，讓用戶知道等待時間，降低焦慮，確保內(nèi)心確認(rèn)感。

2. 反之，會引起用戶負(fù)面情緒，導(dǎo)致直接退出程序，引起疑惑，用戶體驗值偏低。

它的使用規(guī)范？

進度指示器向用戶通知正在進行的過程狀態(tài)，例如加載應(yīng)用程序，提交表單或保存更新。它們傳達(dá)應(yīng)用程序的狀態(tài)并指示可用的操作，例如用戶是否可以離開當(dāng)前屏幕。一個動態(tài)的指示器采用文字或者圖形指示器都可以，它需要告訴用戶以下幾點基礎(chǔ)信息：

• 當(dāng)前操作內(nèi)容

• 已經(jīng)完成的比例

• 還需要多少時間完成

• 是否可停止這項任務(wù)

  
  

  
  

使用原則

此類模式需要尊從以下幾點原則：

1. 功能優(yōu)先，進度指示器可設(shè)計外觀來反映流程狀態(tài)，切勿視覺大于功能。

2. 動畫效果，指示器始終是動態(tài)的，使用動畫來吸引注意力并通知用戶活動的進度。

3. 一致性，程序中一致的流程應(yīng)以一致的格式來展示。

組件分類

載體展示方式層面

進度指示器分為兩種，一種是線性進度指示器，一種是圓形進度指示器。在應(yīng)用程序中同樣的場景選擇一種指示器來展示，比如首頁的下拉刷新使用圓形進度指示器，則該應(yīng)用的其他下拉刷新的場景也請使用一致的圓形進度指示器來展示。

• 線性進度指示器

• 循環(huán)進度指示器

交互層面

指示器的加載狀態(tài)方式可以分為 2 種，一種是確定指示，一種是不確定指示。

• 確定指示：加載時間可量化，可以檢測到過程完成率的情況下使用此類方式。

• 不確定指示：記載時間不可量化，無法檢測到進度的情況下使用此類方式。

構(gòu)成模式

線性進度指示器

線性進度指示器通過可見軌道的長度來提示進度信息，指標(biāo)的行為取決于過程的進度是否已知。

加載進度條 

在 iOS 系統(tǒng)中此類指示器的一種組件被稱為 Progress Bars，即加載進度條。常規(guī)用于可確定指示，比如組件-加載進度條，常用于 h5 頁面的加載。

不確定線性進度指示

指示沿著軌跡進行增長或縮小來表現(xiàn)加載狀態(tài)，直到加載完成。

規(guī)則

1. 始終準(zhǔn)確地報告進度。線性指示器用于可量化的任務(wù)時，請準(zhǔn)確地顯示進度，切勿為了看起來很忙而顯示不正確的信息。

2. 在導(dǎo)航欄和工具欄中隱藏軌道的未填充部分。默認(rèn)情況下，進度條的軌跡包括填充和未填充部分。當(dāng)在導(dǎo)航欄或工具欄中使用時（例如表示頁面加載），進度欄應(yīng)配置為隱藏軌道的未填充部分。

3. 可修改進度條外觀來匹配應(yīng)用?？梢詫Ω櫤吞畛渲付ㄗ远x色調(diào)或圖像匹配產(chǎn)品品牌特性，增進靈活度。

場景

加載，整個頁面加載，通常位于導(dǎo)航欄和工具欄的下方。

循環(huán)進度指示器

指示器沿不可見的圓形軌道進行順時針方向移動來顯示進度。它們可以直接應(yīng)用于按鈕或卡片等表面。

分類

在谷歌的系統(tǒng)中，此進度指示器支持可量化過程，也支持不可量化過程。

• 確定循環(huán)進度指示器：指示器通過顏色填充 0-360 度不可見的圓形軌道。

• 不確定循環(huán)進度指示器：指示器在沿不可見軌道移動時會增大和縮小。

場景

加載

不確定循環(huán)進度指示器在 iOS 系統(tǒng)中此類控件稱為Activity Indicators（活動指示器），就是常見的「菊花轉(zhuǎn)」。在執(zhí)行無法量化的任務(wù)（例如加載或同步復(fù)雜數(shù)據(jù)）時，活動指示器會旋轉(zhuǎn)。

滑動刷新  

在Android上，“滑動刷新”手勢會顯示一個圓形進度指示器，以指示正在刷新UI。

與其他組件結(jié)合

圓形指示器還可在其他控件，比如按鈕中使用，代表動作反饋的交互狀態(tài)。

不確定循環(huán)進度指示器

Airbnb 首頁的走馬燈和進度條相結(jié)合，讓用戶在瀏覽 banner 的時候知道下一張什么時候開始，給用戶感知預(yù)期，便于用戶對當(dāng)前內(nèi)容的專注。

如何在產(chǎn)品中應(yīng)用？

控件可結(jié)合產(chǎn)品的品牌定位進行視覺上的調(diào)整，增加情感化設(shè)計，提升用戶體驗?，F(xiàn)在很多 app 在進度指示的控件設(shè)計上有很多推陳出新的設(shè)計，給大家總結(jié)了幾種。

什么是情感化設(shè)計？本能 – 行為 – 反思。

諾曼提出的情感設(shè)計，認(rèn)為在任何設(shè)計中，本能，行為和反思這三個不同層面相互作用，影響情緒和認(rèn)知。

我們在和產(chǎn)品的交互過程中，包含了功能、性能和可用性的體驗，如果在本能-視覺層給予足夠吸引力和感染力，那么將會在行為層影響到用戶對產(chǎn)品的操作，最終的目的是促使反思層的反饋是正面的，積極的情緒，愉悅感。滿足用戶需求，從而最終觸發(fā)用戶對產(chǎn)品的情緒依賴。

1. 結(jié)合吉祥物設(shè)計

作為產(chǎn)品品牌的推廣和宣傳，將產(chǎn)品品牌元素融合進去，比如吉祥物的形狀，顏色，插畫等。

美團外賣

美團在加載和下拉刷新中都融入了吉祥物，并且設(shè)計得非常有趣。吉祥物騎著電動車在送外賣的場景和實際美團外賣送外賣的場景非常相似，一致的認(rèn)知模型讓用戶對品牌印象更加深刻，也讓 app 多了一份趣味性。

飛豬旅行

飛豬app也是運用了吉祥物飛豬，結(jié)合旅游場景來做有趣的動畫設(shè)計。

在做動畫的時候?qū)ξ矬w動作的把控和場景心智模型的符合度要求比較高，簡單的加載動畫呈現(xiàn)背后需要對產(chǎn)品需求有深刻的理解。

閑魚

閑魚在品牌升級以后，也是在 app 的不同場景中融入了品牌形象，并且在不斷迭代中也對形象進行升級。加載的等待過程的確不會讓人開心，但如果在這個過程中提供生動有趣的設(shè)計可以幫用戶轉(zhuǎn)移注意力，提升好感。

2. 結(jié)合產(chǎn)品logo設(shè)計

產(chǎn)品的 logo 也非常適合融入在活動指示的設(shè)計中。簡潔明了的展示品牌信息，加深品牌印象。

馬蜂窩

馬蜂窩的產(chǎn)品 logo 呈現(xiàn)線性，設(shè)計運用了線性進度指示器結(jié)合循環(huán)展示的動畫效果來展示 logo，進度展示的同時展現(xiàn)產(chǎn)品 logo，簡單明了的凸顯品牌力量。

大眾點評

大眾點評在設(shè)計活動指示器的時候，結(jié)合自身 logo 的同時，也將用戶在使用大眾點評時所期望有的驚喜感，融入其中，使簡單的 logo 瞬間飽滿，簡單且有趣。

還有一些比如淘票票，京東購物，網(wǎng)易考拉也做得很好。

3. 結(jié)合產(chǎn)品理念設(shè)計

產(chǎn)品通過自身品牌定位，在加載刷新組件中融入，滿足用戶本身使用產(chǎn)品的需求目標(biāo)，并且對產(chǎn)品價值進行強化，一方面完美傳遞了產(chǎn)品理念，另一方面也讓產(chǎn)品顯得更有趣味。

餓了么

餓了么的 logo 也是屬于簡約型，單純的字母和線條結(jié)合，在下拉刷新和加載的設(shè)計上，融入了時間的概念，產(chǎn)品 logo 和時效性相結(jié)合，動畫做的非常有趣，也生動傳遞了產(chǎn)品理念。

網(wǎng)易嚴(yán)選

網(wǎng)易嚴(yán)選的 logo 屬于文字 logo，文字表現(xiàn)力會比圖形稍微弱一點，那么結(jié)合自身產(chǎn)品定位和理念來展示形象的處理方式也非常好，深入人心。

有錢花

有錢花通過字母 logo 和金融類的產(chǎn)品屬性「錢幣」相結(jié)合，直觀簡約，再加上動畫效果表現(xiàn)使用產(chǎn)品所帶來的利益驚喜感，展現(xiàn)「日進斗金」的效果，用戶體驗加分。

KEEP

keep 產(chǎn)品的加載使用一個秒表的樣式來體現(xiàn)運動 app 的特性，也是讓人耳目一新。

總結(jié)

最后總結(jié)一下以上所梳理的內(nèi)容，首先是對設(shè)計規(guī)范中進度指示相關(guān)組件的分類和了解，以及使用規(guī)則。然后再列舉了大量市面上優(yōu)秀的線上案例，更深一步探究對組件的使用。