本文分享了12個創(chuàng)意進(jìn)度條設(shè)計(jì)，多為Dribble上的作品，點(diǎn)擊圖片即可查看原作品，同時附上了案例分析—蝸牛進(jìn)度條的設(shè)計(jì)步驟，希望能對你有幫助。

什么叫進(jìn)度條？

進(jìn)度條即計(jì)算機(jī)在處理任務(wù)時，實(shí)時的，以圖片形式顯示處理任務(wù)的速度，完成度，剩余未完成任務(wù)量的大小，和可能需要處理時間等信息，一般以長方形條狀顯示，但不局限于“條狀”。

進(jìn)度條的作用：

①幫助用戶明確程序正在做什么，是否正常；

②向用戶清楚表明當(dāng)前進(jìn)度；

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

進(jìn)度條的分類：從進(jìn)度條的變化方式來看，可以分為偏靜態(tài)進(jìn)度條和偏動態(tài)進(jìn)度條倆類。

偏靜態(tài)進(jìn)度條—明確顯示當(dāng)前狀態(tài)，讓用戶了解當(dāng)前狀況，并基于此作出后續(xù)決策。比如電池電量、電腦磁盤空間的使用情況、游戲中的血量和魔法量等。

偏動態(tài)進(jìn)度條—在用戶等待過程中，動態(tài)地顯示整個進(jìn)程的當(dāng)前狀態(tài)，并提供相關(guān)操作（是否中斷等）。只有進(jìn)程完成后，才能到達(dá)用戶預(yù)期的狀態(tài)，比如程序初始化的加載過程（游戲的加載過程），資源的下載過程，應(yīng)用程序的安裝過程等。

進(jìn)度條的樣式

常見的進(jìn)度條設(shè)計(jì)樣式主要有三種：條形、圓形和不規(guī)則形。條形進(jìn)度條和圓形進(jìn)度條，形狀雖然簡單，但如果和企業(yè)logo、產(chǎn)品特色、文本、數(shù)字或色彩巧妙結(jié)合，也可以達(dá)到簡潔清爽而又不失趣味。

1、條形:

此款進(jìn)度條設(shè)計(jì)是針對酒水類網(wǎng)站設(shè)計(jì)的條形加載進(jìn)度條，設(shè)計(jì)師結(jié)合產(chǎn)品生產(chǎn)流程，并以動畫的形式展現(xiàn)出來，讓用戶不知不覺被動效吸引，忘卻等待的時間。而重復(fù)的動圖，會舒緩我們焦慮的心理，類似于催眠動圖。

其他創(chuàng)意類的條形進(jìn)度條設(shè)計(jì)：

圓形進(jìn)度條設(shè)計(jì)：

在此款圓形進(jìn)度條設(shè)計(jì)中，設(shè)計(jì)師以3條曲線的旋轉(zhuǎn)結(jié)合數(shù)字的變化，來直觀展示當(dāng)前進(jìn)程狀態(tài)。曲線顏色則選取深藍(lán)色的3個相似色，來平復(fù)用戶在等待過程中可能產(chǎn)生的焦慮感。曲線的旋轉(zhuǎn)設(shè)計(jì)和數(shù)字的快速變化，也可以讓用戶直觀的感受到程序正在后臺飛速運(yùn)轉(zhuǎn)。

在圓形進(jìn)度條的設(shè)計(jì)中，可以參考與數(shù)值動效的結(jié)合，可以便于用戶直觀的了解當(dāng)前進(jìn)程進(jìn)行到的程度，提升用戶體驗(yàn)。

可能給你靈感的其他圓形進(jìn)度條設(shè)計(jì)：

其他形狀進(jìn)度條設(shè)計(jì)：

此款進(jìn)度條設(shè)計(jì)中，設(shè)計(jì)師在簡單圖標(biāo)變化的同時，用數(shù)字顯示當(dāng)前進(jìn)度。logo與數(shù)字的巧妙結(jié)合，簡潔又不失趣味。

在你的設(shè)計(jì)中，也可以以logo為切入點(diǎn)，在動態(tài)展示logo的同時，用數(shù)字顯示當(dāng)前進(jìn)度，更加直觀的展示品牌的logo，加深用戶印象。品牌的logo可以結(jié)合簡單的動效，如發(fā)光、流體、旋轉(zhuǎn)、色彩 及形狀的變化。

此款進(jìn)度條設(shè)計(jì)中，設(shè)計(jì)師結(jié)合產(chǎn)品使用流程，并以動畫的形式展現(xiàn)出來，減緩用戶在等待過程中可能產(chǎn)生的焦躁感，同時加深用戶對產(chǎn)品的理解，甚至對公司的品牌印象。

所以，在你的進(jìn)度條設(shè)計(jì)中，也可以結(jié)合公司的品牌特色、產(chǎn)品使用流程或者制作流程，動態(tài)展示公司文化，減緩用戶可能產(chǎn)生的負(fù)面情緒的同時，加深品牌知名度。

蝸牛進(jìn)度條設(shè)計(jì)實(shí)例分析

先看效果

制作步驟：

①拉兩個形狀組件出來，分別設(shè)置圓角，顏色；

②蝸牛對自己做交互，點(diǎn)擊時移動，并選擇移動方向和動畫時長；

③蝸牛對兩個形狀組件做交互，點(diǎn)擊時調(diào)整尺寸，選擇移動方向和動畫時長。

進(jìn)度條預(yù)覽鏈接：https://run.mockplus.cn/iy6xS8f2jgDRcHUz/index.html

本次進(jìn)度條設(shè)計(jì)所用軟件為：原型設(shè)計(jì)工具mockplus。

希望這里分享的12個創(chuàng)意進(jìn)度條設(shè)計(jì)和案例分析能對你有幫助。加載也是一門技術(shù)，如何在加載的過程中讓用戶有愉悅的體驗(yàn)，你可以看看這篇：《干貨！15個最新優(yōu)質(zhì)加載動畫設(shè)計(jì)，讓等待成為一種享受》。

如果你對啟動頁設(shè)計(jì)更感興趣，那么來瞧瞧《App啟動頁設(shè)計(jì)實(shí)例和技巧，啟動即讓人心動》。