一览芳、 定義
在加載數(shù)據(jù)和內(nèi)容的進(jìn)程中,表示不明確或明確時(shí)長(zhǎng)的等待狀態(tài)鸿竖。
二沧竟、 作用
告知用戶進(jìn)程正在運(yùn)行,沒有停止響應(yīng)缚忧。
三悟泵、 類型
I. iOS Human Interface Guidelines
1. 活動(dòng)指示器Activity Indicators
執(zhí)行時(shí)間不可量化的任務(wù)(例如加載或同步復(fù)雜數(shù)據(jù))時(shí),活動(dòng)指示器持續(xù)旋轉(zhuǎn)闪水,任務(wù)完成時(shí)消失糕非,不可進(jìn)行交互。
設(shè)計(jì)原則:
- 優(yōu)先選擇進(jìn)度條而非活動(dòng)指示器敦第。以便用戶更好地衡量等待時(shí)長(zhǎng)峰弹。
- 活動(dòng)指示器應(yīng)該保持順暢地旋轉(zhuǎn)。
- 在等待任務(wù)完成時(shí)芜果,可以在活動(dòng)指示器旁加上標(biāo)簽以提供額外的上下文信息鞠呈。
2. 進(jìn)度條Progress Bars
軌跡從左到右被填滿,顯示持續(xù)時(shí)間已知的任務(wù)進(jìn)程右钾。不可進(jìn)行交互蚁吝,雖然會(huì)搭配一些取消相應(yīng)操作的按鈕。
設(shè)計(jì)原則:
- 始終精準(zhǔn)報(bào)告進(jìn)度舀射,進(jìn)度信息不精準(zhǔn)則使用進(jìn)度指示器窘茁。
- 只對(duì)確定時(shí)限的任務(wù)使用進(jìn)度條,傳達(dá)任務(wù)完成需要的時(shí)間脆烟。
- 隱藏導(dǎo)航欄和工具欄中進(jìn)度條軌跡的未填充部分山林。
II. Material design
1. 進(jìn)度條指示器(Linear progress indicator)
由兩部分組成:軌跡條(track)和進(jìn)度指示 (indicator)
精確指示器(Determinate indicators)與不精確指示器(Indeterminate indicators)
精確指示器顯示過程需要的時(shí)長(zhǎng),完成率可被預(yù)測(cè)時(shí)使用邢羔。
不精確指示器表示進(jìn)度時(shí)長(zhǎng)不可預(yù)知驼抹,當(dāng)進(jìn)度不可預(yù)測(cè)或者不必要明確知道時(shí)使用桑孩。
進(jìn)度條指示器支持精確和不精確兩種方式:
- 確定操作的指示器會(huì)從0增長(zhǎng)到100%,與進(jìn)程的進(jìn)度同步框冀。
- 不確定的操作的指示器會(huì)沿著軌跡條不斷循環(huán)流椒,直到過程完成。
進(jìn)度條指示器放置的位置可以指示出特定元素正在加載內(nèi)容明也,以吸引用戶注意新內(nèi)容即將呈現(xiàn)的位置宣虾。
比如在屏幕中指示加載屏幕全部?jī)?nèi)容(如下圖)
在卡片下邊緣放置,則表示對(duì)應(yīng)加載卡片內(nèi)限定的內(nèi)容(如下圖)
2. 進(jìn)度環(huán)指示器(Circular indicator)
進(jìn)度環(huán)指示器通過順時(shí)針沿著不可見的圓形轉(zhuǎn)動(dòng)温数,來顯示進(jìn)程的進(jìn)度绣硝。
刷新(swipe to refresh)手勢(shì)會(huì)顯示一個(gè)進(jìn)度環(huán)指示器,表示界面正在加載撑刺。
支持精確和不精確兩種方式:
- 確定進(jìn)度環(huán)的指示器會(huì)從0移動(dòng)到360度域那,用顏色填充不可見的圓形軌道。
- 不確定進(jìn)度環(huán)的指示器會(huì)沿著不可見的圓形軌道一直循環(huán)旋轉(zhuǎn)猜煮,直到過程完成。
進(jìn)度環(huán)指示器作用:
- 利用呈現(xiàn)位置作引導(dǎo)
當(dāng)居中屏幕時(shí)败许,指示空白狀態(tài)的初始加載王带;當(dāng)放置在現(xiàn)有內(nèi)容上下方時(shí),引導(dǎo)用戶新內(nèi)容出現(xiàn)的位置市殷。 -
可與操作進(jìn)行整合
集成到按鈕或可操作的圖標(biāo)中愕撰,可以表示與特定項(xiàng)目之間的交互狀態(tài)。適用于短期的(2-5秒之間)醋寝,不確定時(shí)長(zhǎng)的指示搞挣,以吸引用戶注意。
設(shè)計(jì)原則:
-
不要將進(jìn)度指示器應(yīng)用到所有按鈕音羞。
應(yīng)用于一個(gè)程序的指示器應(yīng)保持樣式一致囱桨。
如果多進(jìn)程作為一組狀態(tài),指示器代表整體進(jìn)度而不是每個(gè)活動(dòng)的進(jìn)度嗅绰。
進(jìn)度條的外觀(顏色等)可以調(diào)整舍肠,以匹配應(yīng)用程序的設(shè)計(jì)風(fēng)格。
參考來源:
https://material.io/design/components/progress-indicators.html
https://developer.apple.com/design/human-interface-guidelines/ios/controls/progress-indicators/