進度條上的小圓點怎麼做 4個方面輕鬆搞定進度條

2021-10-16 20:00:20 字數 3823 閱讀 5776

目標: 為什麼會有進度條的存在?引入進度條的目的是什麼?

型別: 結合使用場景,進度條型別有哪些呢?它們的目標是什麼?需要展示哪些資訊?

形式: 進度條形式多種多樣,怎樣從本質上區分呢?

運用: 實際專案中如何選用合適的進度條呢?

下面列出了3種常見的進度條樣式,我們將結合這3種進度條,一步一步梳理,希望可以幫助大家獲得更加清晰的認知。

一、為什麼要有進度條?

進度條是較為通俗的叫法,代表的是與進度展示相關的內容,但並不侷限於「條形」。它廣泛的存在於各種設計中。

從「進度」一詞不難看出,「進度條」這一視覺元素其實是為了讓使用者清晰的了解當前狀態。狀態表現一般都有一定的參照,同時存在限定值,如果單純的通過數字/文字表達,不便於使用者理解,所以引入了圖形化的元素,也就是我們常見的進度條。

進度條本身比較單一,但是當和場景結合起來,就會衍生出不同的型別。不同型別的進度條設計目標,相關資訊元素均不相同。

二、進度條有哪些型別?

進度條的實際運用情況多種多樣。有些進度條是實時變化的,有些則是靜止不動的。當放到實際的場景中,進度條在場景中的含義就有了進一步的擴充套件。結合使用場景,我將它們分別分成3種型別,分別是「程序型」進度條,「程序型+狀態型」進度條和「狀態型」進度條。下面將按照如下思路細緻介紹這3種進度條。

1. 「程序型」進度條

一般為動態,表明程式正忙於某些功能

在此種使用場景下,進度條的設計目標可以歸納為以下兩點:

1、幫助使用者明確程式正在做什麼,是否正常;

2、如果一定要讓使用者等待,那就緩解他們等待時的焦慮感;

這類使用場景具有3個顯著特徵:

1、「程序」概念十分明顯,只有將程序走完,才能達到較為穩定的狀態;

(例如只有loading完,才能看到完整的頁面;只有掃瞄完,才能獲知完整的掃瞄結果 )

2、一般都需要使用者等待;

3、需要讓後台程序在前台可見,幫助使用者明晰當前進度;

alan cooper在《about face 互動設計精髓》一書中列舉了進度對話方塊需要完成的任務:

1、向使用者清楚地表明正在執行乙個耗時的程序;

2、向使用者清楚地表明一切正常;

3、向使用者清楚地表明程序還需要多長時間;

4、向使用者提供一種取消操作和恢復程式控制的方式;

結合上面的設計目標、場景特徵和進度條任務,就能夠對此類進度條應當包含哪些資訊元素,有了更為清楚的了解。乙個完整的「程序型」進度條包含以下資訊:

4、提供強相關的操作(e.g.取消,開通會員提公升速度)

在實際情況下,並不是所有的「程序型」進度條都具有上述4個方面的資訊。進度條的資訊元素會受到很多因素的影響,比如程序的時間長短,使用情境的上下文,專案實現成本等。這些不僅會影響資訊元素的有無,同時還會影響各資訊的優先順序。

2. 「狀態型」進度條

一般為靜態,表明當前所處狀態

在大部分講進度條的文章中,「狀態型」進度條較少有人提及,但不管是在實際生活中,還是網際網路產品中都十分常見。下圖中的汽車時速表,就是典型的「狀態型」進度條,形式上也脫離了條形。

在此種使用場景下,進度條的設計目標主要為兩點:

1、幫助使用者明確當前狀態;

2、為使用者的後續決策提供充足的支援;

這類使用場景具有3個顯著特徵:

1、「程序」概念被削弱,有些甚至完全沒有程序概念;

2、不需要使用者等待;

3、充分展示較為穩定的「當前狀態」,需要讓使用者了解基本狀況,並基於此作出相關決策。

在引言的例子中,最右邊的進度條則為「狀態型」進度條。

1、向使用者清楚地表明當前狀態;

2、向使用者清楚地表明重要的進度節點;

3、向使用者清晰地展示他可能需要的操作;

結合上面的設計目標、場景特徵和進度條任務,就能夠更清晰的得出此類進度條應當包含哪些資訊元素。乙個完整的「程序型」進度條包含以下資訊:

1、說明當前的展示項及對應的狀態,並展示相關資訊;(e.g.電腦管家中的「容量」title)

2、若狀態分階段,即這一階段和下一階段的狀態有較大差別,則需要說明重要的變化節點;(e.g.「汽車轉速表」中的正常階段和標紅階段)

3、提供強相關的操作(e.g.電腦管家中的「清理」)

在實際情況情況下,並不是所有的「狀態型」進度條都有這3類資訊,都需要結合實際的場景和上下文進行梳理。例如,汽車時速表中就沒有狀態的「重要節點」,也無需「汽車時速表」的title,相關的加速、減速操作也是和進度條及相關資訊區分開來的。上述3條資訊的有無,資訊的優先順序高低,都是需要結合實際專案具體判斷的。

3. 「程序型+狀態型」進度條

部分結合「程序型」+「狀態型」的特點

它為什麼有「程序型」的概念?

它為什麼有「狀態型」的概念?

-無需使用者等待,進度條展示當前狀態,這就是聆聽**的過程,過程的意義更大;

-幫助使用者明確當前狀態,為後續操作提供進一步的支援;(e.g.快進、上/下一曲)

在此種使用場景下,進度條的設計目標綜合了「程序型」和「狀態型」兩種,主要為3點:

1、幫助使用者明確程式正在做什麼,是否正常;

2、幫助使用者明確當前狀態;

3、為使用者的後續決策提供充足的支援;

這類進度條的使用場景具有3個顯著的特徵:

1、有明確的程序概念,和時間關聯緊密;

2、進度條不是為了緩解等待的焦慮感,而是為了展示當前狀態,讓使用者做出相關決策;

3、對比完成狀態,當前狀態轉瞬即逝,但意義更大,使用者是在程序中&當前狀態下實現自己的目標;

此類進度條需要完成的任務如下:

1、向使用者清楚地表明當前正在執行程序,程序是否正常;

2、向使用者清楚地表明當前狀態、重要的進度節點;

3、向使用者清晰地展示可能需要的操作

「程序型+狀態型」進度條的資訊也是同上述任務密切相關。主要包括

2、重要資訊節點(e.g.進度條中的白點代表了歌曲的高潮部分起始點)

同樣,在實際場景中並不是這3種資訊都存在。「程序型」和「狀態型」資訊兩者之間維持著微妙的平衡關係,兩者的優先順序高低也是隨著使用場景的變化而變化。

三、進度條的形式

從變化方式來看,主要分為2類:

1、偏靜態進度條

此種進度條多用於「狀態型」進度條。但現在也有很多做法在狀態型進度條出現時,在很短的時間內從0變到當前值,同時插入一些動效。但這都是在極短的時間內完成,之後進度條趨於穩定。

2、偏動態進度條

此種進度條多用於「程序型」進度條和「程序型+狀態型」進度條。大多數的做法是伴隨著整個程序,進度條均會伴隨動態效果。

從基礎形態來看,主要分為3類:

1、條形

2、圓形

3、不規則型

通過基礎形態+動態效果的集合,進度條的形式可以千變萬化,有無限的發揮空間,也為進度條的設計增添了不少趣味性。

四、如何選擇合適的進度條?

通過上面的分析,相信大家對這3種進度條都有了一定的了解,雖然3者都會涉及到進度的展示,但是從本質上看,是屬於完全不同的3種型別。只有依據真實的專案場景,選擇合適的進度條型別,才能幫助自己實現設計意圖。

這個過程主要有4個步驟:

1、明確自己的設計意圖

場景中如果需要使用進度條,想清楚自己的設計意圖是什麼,是為了幫助使用者更明確當前狀態,並基於此作出決策呢?還是為了幫助在當前程序中減緩等待的焦慮感?

2、依據設計意圖選用合適的進度條型別

結合自己的設計意圖,確定3類進度條中哪種更適合當前場景。同時,結合前文分析,帶入當前專案進行深挖,明確進度條需要完成哪些任務,展示哪些資訊。

3、確定資訊元素的優先順序

在明確展示資訊之後,進一步考慮資訊優先順序,哪些最重要,哪些不重要,對當前場景下的進度條有更深層次的理解與思考。

4、採用合適的表現形式

進度條的表現形式多種多樣,但無論何種形式都應當以前面的思考為前提,在此基礎之上,結合實際專案特點,考慮適宜的基礎形態+動態效果,這樣的進度條設計才是乙個優秀的設計。

進度條,怎麼做?

public partial class form1 form private void form1 load object sender,eventargs e long l 1000 private void button1 click object sender,eventargs e cat...

Android進度條 等待載入 旋轉小圓點效果

12個小圓點疊放 i 0,1,11 動畫一 依次從0度旋轉到30i度 動畫二 依次從30i度旋轉到360度 因為不牽扯使用者互動,所以用最基本的檢視動畫即可 src main res layout activity launch.xml android id id progress dots loc...

自動輪播的小圓點怎麼畫怎麼用?

中如何新增小圓點 畫小圓點 private void getdian else 新增到集合中 ls img.add iv 設定寬和高 layoutparams params new layoutparams 16,16 設定小圓點的間距 params.setmargins 8,0,8,0 新增到布局...