本文梳理了設計規范中進度指示的相關組件，包括分類和使用規則，還列舉了大量市面上優秀的線上案例，更深一步探究對組件的使用。

基礎組件

1. 組件定義

它是什么？

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

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

它有什么作用？

• 如果一個界面用戶在操作以后，一動不動沒有反饋，用戶很容易就會失去耐心，一個操作等待耗時超過兩秒就可以應用此模式來展示當前進度，讓用戶知道等待時間，降低焦慮，確保內心確認感。
• 反之，會引起用戶負面情緒，導致直接退出程序，引起疑惑，用戶體驗值偏低。

它的使用規范是什么？

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

• 當前操作內容
• 已經完成的比例
• 還需要多少時間完成
• 是否可停止這項任務

2. 使用原則

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

• 功能優先，進度指示器可設計外觀來反映流程狀態，切勿視覺大于功能。
• 動畫效果，指示器始終是動態的，使用動畫來吸引注意力并通知用戶活動的進度。
• 一致性，程序中一致的流程應以一致的格式來展示。

3. 組建分類

載體展示方式層面

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

• 線性進度指示器
• 循環進度指示器

交互層面

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

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

構成模式

1. 線性進度指示器

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

加載進度條

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

不確定線性進度指示，指示沿著軌跡進行增長或縮小來表現加載狀態，直到加載完成。

規則

• 始終準確地報告進度。線性指示器用于可量化的任務時，請準確地顯示進度，切勿為了看起來很忙而顯示不正確的信息。
• 在導航欄和工具欄中隱藏軌道的未填充部分。默認情況下，進度條的軌跡包括填充和未填充部分。當在導航欄或工具欄中使用時（例如表示頁面加載），進度欄應配置為隱藏軌道的未填充部分。
• 可修改進度條外觀來匹配應用。可以對跟蹤和填充指定自定義色調或圖像匹配產品品牌特性，增進靈活度。

場景

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

2. 循環進度指示器

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

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

• 確定循環進度指示器：指示器通過顏色填充 0-360 度不可見的圓形軌道。
• 不確定循環進度指示器：指示器在沿不可見軌道移動時會增大和縮小。

確定循環指示器—場景

加載：不確定循環進度指示器在 iOS 系統中此類控件稱為Activity Indicators（活動指示器），就是常見的「菊花轉」。在執行無法量化的任務（例如加載或同步復雜數據）時，活動指示器會旋轉。

滑動刷新，在 Android 上，「滑動刷新」手勢會顯示一個圓形進度指示器，以指示正在刷新界面。

與其他組件結合：圓形指示器還可在其他控件，比如按鈕中使用，代表動作反饋的交互狀態。

不確定循環進度指示器

Airbnb 首頁的走馬燈和進度條相結合，讓用戶在瀏覽 banner 的時候知道下一張什么時候開始，給用戶感知預期，便于用戶對當前內容的專注。

如何在產品中應用？

控件可結合產品的品牌定位進行視覺上的調整，增加情感化設計，提升用戶體驗。現在很多 app 在進度指示的控件設計上有很多推陳出新的設計，給大家總結了幾種。

什么是情感化設計？本能 - 行為 - 反思。

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

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

1. 結合吉祥物設計

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

美團外賣

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

飛豬旅行

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

在做動畫的時候對物體動作的把控和場景心智模型的符合度要求比較高，簡單的加載動畫呈現背后需要對產品需求有深刻的理解。

閑魚

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

2. 結合產品logo設計

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

馬蜂窩

馬蜂窩的產品 logo 呈現線性，設計運用了線性進度指示器結合循環展示的動畫效果來展示 logo，進度展示的同時展現產品 logo，簡單明了的凸顯品牌力量。

大眾點評

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

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

3. 結合產品理念設計

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

餓了么

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

網易嚴選

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

有錢花

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

KEEP

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

總結

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

歡迎關注作者的微信公眾號：「酒夏」