提示類控件之 I 進(jìn)程指示器(Progress indicators)

進(jìn)程指示器

一览芳、 定義

在加載數(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)行交互。

活動(dòng)指示器

設(shè)計(jì)原則:

  1. 優(yōu)先選擇進(jìn)度條而非活動(dòng)指示器敦第。以便用戶更好地衡量等待時(shí)長(zhǎng)峰弹。
  2. 活動(dòng)指示器應(yīng)該保持順暢地旋轉(zhuǎn)。
  3. 在等待任務(wù)完成時(shí)芜果,可以在活動(dòng)指示器旁加上標(biāo)簽以提供額外的上下文信息鞠呈。

2. 進(jìn)度條Progress Bars
軌跡從左到右被填滿,顯示持續(xù)時(shí)間已知的任務(wù)進(jìn)程右钾。不可進(jìn)行交互蚁吝,雖然會(huì)搭配一些取消相應(yīng)操作的按鈕。

進(jìn)度條

設(shè)計(jì)原則:

  1. 始終精準(zhǔn)報(bào)告進(jìn)度舀射,進(jìn)度信息不精準(zhǔn)則使用進(jìn)度指示器窘茁。
  2. 只對(duì)確定時(shí)限的任務(wù)使用進(jìn)度條,傳達(dá)任務(wù)完成需要的時(shí)間脆烟。
  3. 隱藏導(dǎo)航欄和工具欄中進(jìn)度條軌跡的未填充部分山林。
II. Material design

1. 進(jìn)度條指示器(Linear progress indicator)
由兩部分組成:軌跡條(track)和進(jìn)度指示 (indicator)

linear progress indicator構(gòu)成

精確指示器(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)容(如下圖)


加載全部?jī)?nèi)容

在卡片下邊緣放置,則表示對(duì)應(yīng)加載卡片內(nèi)限定的內(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)指示器,表示界面正在加載撑刺。

Circular indicator

支持精確和不精確兩種方式:

  • 確定進(jìn)度環(huán)的指示器會(huì)從0移動(dòng)到360度域那,用顏色填充不可見的圓形軌道。
  • 不確定進(jìn)度環(huán)的指示器會(huì)沿著不可見的圓形軌道一直循環(huán)旋轉(zhuǎn)猜煮,直到過程完成。

進(jìn)度環(huán)指示器作用:

  1. 利用呈現(xiàn)位置作引導(dǎo)
    當(dāng)居中屏幕時(shí)败许,指示空白狀態(tài)的初始加載王带;當(dāng)放置在現(xiàn)有內(nèi)容上下方時(shí),引導(dǎo)用戶新內(nèi)容出現(xiàn)的位置市殷。
  2. 可與操作進(jìn)行整合
    集成到按鈕或可操作的圖標(biāo)中愕撰,可以表示與特定項(xiàng)目之間的交互狀態(tài)。適用于短期的(2-5秒之間)醋寝,不確定時(shí)長(zhǎng)的指示搞挣,以吸引用戶注意。


    點(diǎn)擊按鈕后呈現(xiàn)操作進(jìn)程狀態(tài)
設(shè)計(jì)原則:
  1. 不要將進(jìn)度指示器應(yīng)用到所有按鈕音羞。


    反面教材
  2. 應(yīng)用于一個(gè)程序的指示器應(yīng)保持樣式一致囱桨。

  3. 如果多進(jìn)程作為一組狀態(tài),指示器代表整體進(jìn)度而不是每個(gè)活動(dòng)的進(jìn)度嗅绰。

  4. 進(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/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末窘面,一起剝皮案震驚了整個(gè)濱河市翠语,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌财边,老刑警劉巖肌括,帶你破解...
    沈念sama閱讀 206,968評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異酣难,居然都是意外死亡谍夭,警方通過查閱死者的電腦和手機(jī)黑滴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來慧库,“玉大人跷跪,你說我怎么就攤上這事∑氚澹” “怎么了吵瞻?”我有些...
    開封第一講書人閱讀 153,220評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)甘磨。 經(jīng)常有香客問我橡羞,道長(zhǎng),這世上最難降的妖魔是什么济舆? 我笑而不...
    開封第一講書人閱讀 55,416評(píng)論 1 279
  • 正文 為了忘掉前任卿泽,我火速辦了婚禮,結(jié)果婚禮上滋觉,老公的妹妹穿的比我還像新娘签夭。我一直安慰自己,他們只是感情好椎侠,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評(píng)論 5 374
  • 文/花漫 我一把揭開白布第租。 她就那樣靜靜地躺著,像睡著了一般我纪。 火紅的嫁衣襯著肌膚如雪慎宾。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,144評(píng)論 1 285
  • 那天浅悉,我揣著相機(jī)與錄音趟据,去河邊找鬼。 笑死术健,一個(gè)胖子當(dāng)著我的面吹牛汹碱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播荞估,決...
    沈念sama閱讀 38,432評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼比被,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了泼舱?” 一聲冷哼從身側(cè)響起等缀,我...
    開封第一講書人閱讀 37,088評(píng)論 0 261
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎娇昙,沒想到半個(gè)月后尺迂,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,586評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評(píng)論 2 325
  • 正文 我和宋清朗相戀三年噪裕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蹲盘。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,137評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡膳音,死狀恐怖召衔,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情祭陷,我是刑警寧澤苍凛,帶...
    沈念sama閱讀 33,783評(píng)論 4 324
  • 正文 年R本政府宣布,位于F島的核電站兵志,受9級(jí)特大地震影響醇蝴,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜想罕,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評(píng)論 3 307
  • 文/蒙蒙 一悠栓、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧按价,春花似錦惭适、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至鸠蚪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間师溅,已是汗流浹背茅信。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留墓臭,地道東北人蘸鲸。 一個(gè)月前我還...
    沈念sama閱讀 45,595評(píng)論 2 355
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像窿锉,于是被迫代替她去往敵國(guó)和親酌摇。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • 1嗡载、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請(qǐng)求組件 FMDB本地?cái)?shù)據(jù)庫組件 SD...
    陽明先生_x閱讀 15,968評(píng)論 3 119
  • 我相信 如果經(jīng)過努力 還沒有得到自己想要的 那一定是老天爺 覺得你值得擁有更好的 但一定是建立在 你付出百分百的努力之上
    海倫妹閱讀 196評(píng)論 0 0
  • 生命的閃耀不堅(jiān)持到底怎么能看到窑多,與其茍延殘喘不如縱情燃燒,不妥協(xié)洼滚,一路向前埂息! 是夜,輾轉(zhuǎn)反側(cè),難以入眠千康。 環(huán)顧四周...
    口述筆錄閱讀 176評(píng)論 0 1
  • 今天下午吃完飯拾弃,等到太陽快落山值桩,和老弟一起出門散步,夏天酷熱難當(dāng)豪椿,白天根本不敢出門奔坟,只能趁著夜晚,縷縷涼風(fēng)相伴砂碉,活...
    落青芳閱讀 500評(píng)論 0 5