創意進度條設計-12個優秀作品分享【附例項分析】

本文分享了12個創意進度條設計，多為Dribble上的作品，點選圖片即可檢視原作品，同時附上了案例分析—蝸牛進度條的設計步驟，希望能對你有幫助。

 

什麼叫進度條？

 

進度條即計算機在處理任務時，實時的，以圖片形式顯示處理任務的速度，完成度，剩餘未完成任務量的大小，和可能需要處理時間等資訊，一般以長方形條狀顯示，但不侷限於“條狀”。

 

進度條的作用：

①幫助使用者明確程式正在做什麼，是否正常；

②向使用者清楚表明當前進度；

③緩解使用者等待時的焦慮感。

 

進度條的分類：從進度條的變化方式來看，可以分為偏靜態進度條和偏動態進度條倆類。

 

偏靜態進度條—明確顯示當前狀態，讓使用者瞭解當前狀況，並基於此作出後續決策。比如電池電量、電腦磁碟空間的使用情況、遊戲中的血量和魔法量等。

 

偏動態進度條—在使用者等待過程中，動態地顯示整個程式的當前狀態，並提供相關操作（是否中斷等）。只有程式完成後，才能到達使用者預期的狀態，比如程式初始化的載入過程（遊戲的載入過程），資源的下載過程，應用程式的安裝過程等。

 

 

進度條的樣式

 

常見的進度條設計樣式主要有三種：條形、圓形和不規則形。條形進度條和圓形進度條，形狀雖然簡單，但如果和企業logo、產品特色、文字、數字或色彩巧妙結合，也可以達到簡潔清爽而又不失趣味。

 

1、條形:

此款進度條設計是針對酒水類網站設計的條形載入進度條，設計師結合產品生產流程，並以動畫的形式展現出來，讓使用者不知不覺被動效吸引，忘卻等待的時間。而重複的動圖，會舒緩我們焦慮的心理，類似於催眠動圖。

 

摹客，定製你的設計規範

設計系統

其他創意類的條形進度條設計：

 

 

圓形進度條設計：

 

 

在此款圓形進度條設計中，設計師以3條曲線的旋轉結合數字的變化，來直觀展示當前程式狀態。曲線顏色則選取深藍色的3個相似色，來平復使用者在等待過程中可能產生的焦慮感。曲線的旋轉設計和數字的快速變化，也可以讓使用者直觀的感受到程式正在後臺飛速運轉。

 

在圓形進度條的設計中，可以參考與數值動效的結合，可以便於使用者直觀的瞭解當前程式進行到的程度，提升使用者體驗。

可能給你靈感的其他圓形進度條設計：

 

 

其他形狀進度條設計：

 

 

此款進度條設計中，設計師在簡單圖示變化的同時，用數字顯示當前進度。logo與數字的巧妙結合，簡潔又不失趣味。

 

在你的設計中，也可以以logo為切入點，在動態展示logo的同時，用數字顯示當前進度，更加直觀的展示品牌的logo，加深使用者印象。品牌的logo可以結合簡單的動效，如發光、流體、旋轉、色彩 及形狀的變化。

 

 

此款進度條設計中，設計師結合產品使用流程，並以動畫的形式展現出來，減緩使用者在等待過程中可能產生的焦躁感，同時加深使用者對產品的理解，甚至對公司的品牌印象。

 

所以，在你的進度條設計中，也可以結合公司的品牌特色、產品使用流程或者製作流程，動態展示公司文化，減緩使用者可能產生的負面情緒的同時，加深品牌知名度。

 

蝸牛進度條設計例項分析

 

先看效果

製作步驟：

 

①拉兩個形狀元件出來，分別設定圓角，顏色；

 

 

②蝸牛對自己做互動，點選時移動，並選擇移動方向和動畫時長；

 

 

 

③蝸牛對兩個形狀元件做互動，點選時調整尺寸，選擇移動方向和動畫時長。

 

 

 

進度條預覽連結：https://run.mockplus.cn/iy6xS8f2jgDRcHUz/index.html

 

本次進度條設計所用軟體為：原型設計工具mockplus。

 

希望這裡分享的12個創意進度條設計和案例分析能對你有幫助。載入也是一門技術，如何在載入的過程中讓使用者有愉悅的體驗，你可以看看這篇：《乾貨！15個最新優質載入動畫設計，讓等待成為一種享受》。

 

如果你對啟動頁設計更感興趣，那麼來瞧瞧《App啟動頁設計例項和技巧，啟動即讓人心動》。