超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

7個(gè)實(shí)用技巧,教你搞定可視化圖表

2023-2-5    博博

可視化圖表是提升信息傳遞效率的一種有效方法,特別是在B端平臺(tái)中經(jīng)常遇到對(duì)統(tǒng)計(jì)的數(shù)據(jù)分析總結(jié)的呈現(xiàn)。

可視化圖表是提升信息傳遞效率的一種有效方法,特別是在B端平臺(tái)中經(jīng)常遇到對(duì)統(tǒng)計(jì)的數(shù)據(jù)分析總結(jié)的呈現(xiàn)。我們?cè)O(shè)計(jì)師在設(shè)計(jì)圖表的過(guò)程中,如果沒(méi)有系統(tǒng)的可視化知識(shí),會(huì)出現(xiàn)設(shè)計(jì)的圖表雖然美觀但圖表不能很好的反應(yīng)數(shù)據(jù)的情況。那么,在復(fù)雜的數(shù)據(jù)關(guān)系中如何設(shè)計(jì)和選用圖表,如何在好看的同時(shí)提升信息傳達(dá)效率,看完這篇文章希望對(duì)你的設(shè)計(jì)過(guò)程有所幫助。


// 為什么要數(shù)據(jù)可視化


數(shù)據(jù)可視化就是用圖表來(lái)表示數(shù)據(jù)信息,它所傳達(dá)的信息包括你所拿到的數(shù)據(jù)源和你分析后的結(jié)果,再通過(guò)圖形強(qiáng)化用戶的理解和記憶。能讓用戶簡(jiǎn)潔明了的獲取更多的信息,是我們可視化的最終目的。



舉個(gè)例子,同樣一組數(shù)據(jù),用表格的形式呈現(xiàn)是很難有所洞察的;如果將各個(gè)地區(qū)維度的數(shù)據(jù)聚合以柱圖形式呈現(xiàn),很容易就能看出各個(gè)地區(qū)間數(shù)據(jù)的差異,并從中洞察規(guī)律


關(guān)于如何設(shè)計(jì)好數(shù)據(jù)可視化圖表,這邊總結(jié)了三個(gè)步驟:選擇適合的圖表,強(qiáng)化視覺(jué)層次,圖表響應(yīng)式適配。


一、選擇適合的圖表


數(shù)據(jù)可視化的圖表種類繁多,當(dāng)我們真的開(kāi)始作圖,往往會(huì)遇到一個(gè)困境:有這么多類型,要如何選擇正確的圖表呢?首要依據(jù)是考慮所要傳達(dá)的信息意圖,即所要制作的圖表它的任務(wù)是什么,再通過(guò)分析數(shù)據(jù)關(guān)系來(lái)選擇表達(dá)方式;第二層意圖是圖表傳達(dá)內(nèi)容,這時(shí)候我們就需要根據(jù)數(shù)據(jù)的特征去突出和強(qiáng)化。


1. 分析數(shù)據(jù)關(guān)系

根據(jù)數(shù)據(jù)分析的方式來(lái)看,每一種圖表都對(duì)應(yīng)了一種數(shù)據(jù)關(guān)系。從數(shù)據(jù)的維度出發(fā)弄清呈現(xiàn)結(jié)構(gòu),再結(jié)合數(shù)據(jù)關(guān)系作出選擇。了解圖表的可能知道,一般圖表的數(shù)據(jù)關(guān)系有構(gòu)成、比較、分布,以商業(yè)數(shù)據(jù)為例,常見(jiàn)的還有流轉(zhuǎn)關(guān)系。



構(gòu)成關(guān)系

構(gòu)成關(guān)系的圖表表達(dá)的是部分和整體的關(guān)系,用于分析總體和各部分的占比比例,構(gòu)成關(guān)系一般局部元素加起來(lái)為總數(shù)。如果只是想對(duì)比個(gè)別組成部分的大小,也可以使用比較關(guān)系的圖表。

常用圖表:餅/環(huán)圖、堆疊圖、面積圖等,如涉及到層級(jí)結(jié)構(gòu),還會(huì)用矩形樹(shù)圖或旭日?qǐng)D等特殊結(jié)構(gòu)圖表。

關(guān)鍵詞:“占比、比例、百分比”



比較關(guān)系

比較關(guān)系是基礎(chǔ)分析中常用的一種圖表類型。在一定的取值范圍內(nèi),通過(guò)對(duì)兩個(gè)或兩個(gè)以上的指標(biāo)分析,可以直觀的看到變化和差距。對(duì)比分析包括趨勢(shì)對(duì)比和分類對(duì)比兩種形式,趨勢(shì)對(duì)比用于表示一段時(shí)間內(nèi)數(shù)據(jù)的變化,分類對(duì)比用于比較數(shù)據(jù)規(guī)模。

常用圖表:趨勢(shì)對(duì)比常用圖表有折線圖、散點(diǎn)圖等;分類對(duì)比常用條形圖、柱狀圖、氣泡圖等。

關(guān)鍵詞:“增減、升降、漲跌、波動(dòng)”



分布關(guān)系

利用空間分區(qū)來(lái)展示數(shù)據(jù)之間的分布關(guān)系,常用于體現(xiàn)兩個(gè)或以上數(shù)據(jù)的相關(guān)性。

常用圖表:散點(diǎn)圖、熱力圖、雷達(dá)圖等

關(guān)鍵詞:“隨著……而變化、A/B之間的相關(guān)性、交/并集”等



關(guān)聯(lián)與流轉(zhuǎn)

流轉(zhuǎn)關(guān)系是B端數(shù)據(jù)常用的一種關(guān)系,它可以動(dòng)態(tài)的體現(xiàn)相關(guān)路徑下對(duì)象之間的關(guān)系、狀態(tài)、數(shù)據(jù)量的流轉(zhuǎn)變化等,以面積或顏色深淺展示了多個(gè)狀態(tài)或?qū)ο笾g的流動(dòng)量或流動(dòng)強(qiáng)度。

常用圖表:關(guān)系圖、?;鶊D、漏斗圖、進(jìn)度圖等

關(guān)鍵詞:“流程步驟、留存、轉(zhuǎn)化、關(guān)系”



2. 分析數(shù)據(jù)特征

按數(shù)據(jù)關(guān)系和分析目的選擇好圖表類型后,第二步是根據(jù)數(shù)據(jù)特征選擇更加適合的展示方式。從數(shù)據(jù)分析的角度常見(jiàn)數(shù)據(jù)特征有:變量特征、維度特征、層級(jí)特征、流程特征。


變量特征

分辨一個(gè)指標(biāo)通常有兩類特征,按變量值是否連續(xù)可分為連續(xù)數(shù)據(jù)與離散數(shù)據(jù)兩種。連續(xù)數(shù)據(jù)通常會(huì)統(tǒng)計(jì)一組數(shù)據(jù)的變化趨勢(shì),離散數(shù)據(jù)通常統(tǒng)計(jì)各分類下數(shù)量的變化。

  • 連續(xù)型數(shù)據(jù):指在一定區(qū)間內(nèi)可以任意取值的數(shù)據(jù)叫連續(xù)數(shù)據(jù),其數(shù)值是連續(xù)不斷的。如身高、體重等帶有時(shí)間因素變量的數(shù)據(jù)等,通常用折線圖體現(xiàn)變化趨勢(shì)。
  • 離散型數(shù)據(jù):指其數(shù)值只能用自然數(shù)或整數(shù)單位計(jì)算的數(shù)據(jù)。如當(dāng)天銷量、進(jìn)店人數(shù)等表示分類類型的數(shù)據(jù),用柱圖表現(xiàn)更加體現(xiàn)變量的特征。


維度特征

多維度分析需要將多個(gè)變量在同一平面上直觀的表示,可以選擇使用極坐標(biāo)系去展示多個(gè)維度變量。如果希望對(duì)比多組數(shù)據(jù),可使用不同顏色進(jìn)行分類

  • 根據(jù)分析視角選擇圖表:對(duì)于多維度變量的數(shù)據(jù)我們需要明確分析的視角,去找準(zhǔn)對(duì)應(yīng)的數(shù)據(jù)映射。如案例中多個(gè)班級(jí)的科目成績(jī)的這組數(shù)據(jù),如需要全局視角查看個(gè)班的綜合素質(zhì),推薦使用雷達(dá)圖;對(duì)比單科成績(jī)的變化分布,則推薦使用堆積圖。


層級(jí)特征

多層級(jí)數(shù)據(jù)由多個(gè)部分構(gòu)成一個(gè)整體,又稱樹(shù)形結(jié)構(gòu)數(shù)據(jù)。除了用結(jié)構(gòu)樹(shù)圖表表現(xiàn)以外,還可以考慮以下兩種圖表類型:

  • 矩形樹(shù)圖:突出子層級(jí)占比大小。最初是用來(lái)顯示計(jì)算機(jī)硬盤驅(qū)動(dòng)器上文件的結(jié)構(gòu)和大小,它以面積的形式突出展現(xiàn)各個(gè)子層級(jí)節(jié)點(diǎn)的占比,可幫助用戶看到數(shù)據(jù)的層次結(jié)構(gòu)以及各層級(jí)之間的關(guān)系。


例如:上圖顯示了市場(chǎng)銷售額的來(lái)源結(jié)構(gòu)。長(zhǎng)方形的大小取決于各國(guó)家的平均銷售額,通過(guò)色調(diào)來(lái)區(qū)分不同類型,顏色的深淺代表分類下的子集,面積體現(xiàn)銷售占比。對(duì)比一般結(jié)構(gòu)樹(shù)圖表,它的優(yōu)勢(shì)在于可以有效利用空間。

  • 旭日?qǐng)D:突出細(xì)分層級(jí)關(guān)系。由多個(gè)圓環(huán)圖嵌套而成,也稱為徑向樹(shù)圖,它既能像餅圖一樣表現(xiàn)局部和整體的占比,又能像矩形樹(shù)圖一樣表現(xiàn)層級(jí)關(guān)系。常用于細(xì)分分析方法,將事物從大到小進(jìn)行拆解。每個(gè)級(jí)別的數(shù)據(jù)通過(guò)1個(gè)圓環(huán)表示,離原點(diǎn)越近代表圓環(huán)級(jí)別越高。 旭日?qǐng)D在顯示一個(gè)環(huán)如何被劃分為多個(gè)層級(jí)時(shí)最有效,而矩形樹(shù)圖適合比較相對(duì)大小。


流程特征

流轉(zhuǎn)關(guān)系是表達(dá)數(shù)據(jù)轉(zhuǎn)化流程的重要類型,不僅包含統(tǒng)計(jì)意義上的數(shù)據(jù)總和,同時(shí)還表達(dá)了信息流轉(zhuǎn)的路徑;其中?;鶊D和漏斗圖都可以表達(dá)路徑中流量的變化,不同的是?;鶊D重點(diǎn)強(qiáng)調(diào)流量的強(qiáng)度和走向,漏斗圖更加注重突出轉(zhuǎn)化率和效果,根據(jù)不同的表達(dá)目的選用。



二、強(qiáng)化視覺(jué)層次


選擇合適的圖表后,在信息傳達(dá)上也需要正確的表達(dá),展示形式美觀的同時(shí)能夠清晰的體現(xiàn)數(shù)據(jù)特點(diǎn)。


1. 強(qiáng)化數(shù)據(jù)特性

使用圖表正確的表達(dá)信息,需要設(shè)計(jì)師在強(qiáng)化數(shù)據(jù)特性的同時(shí)避免偏差

  • 趨勢(shì)易感知:折線圖數(shù)值如過(guò)于平均導(dǎo)致趨勢(shì)平緩,有時(shí)候無(wú)法體現(xiàn)偏差;在強(qiáng)調(diào)數(shù)據(jù)趨勢(shì)的場(chǎng)景下,推薦用動(dòng)態(tài)取值范圍讓波動(dòng)保持在一定范圍內(nèi),放大波動(dòng)占比更突出趨勢(shì)。


  • 展示更準(zhǔn)確:柱狀圖依靠柱體面積體現(xiàn)最終數(shù)值,使用動(dòng)態(tài)范圍截?cái)鄬?huì)導(dǎo)致數(shù)據(jù)解讀不完整;始終將 y 軸從 0 開(kāi)始,才能更準(zhǔn)確的反映柱圖中的值。


2. 色彩視覺(jué)傳達(dá)

除了在設(shè)計(jì)構(gòu)圖上優(yōu)化以外,顏色的選擇也是圖表重要的的信息表達(dá)元素。顏色會(huì)影響我們對(duì)數(shù)據(jù)的感知,錯(cuò)誤的取色會(huì)讓信息讀取產(chǎn)生誤解。我們可以通過(guò)不同的分析目的設(shè)置意圖色板,精確傳達(dá)信息同時(shí)后續(xù)的項(xiàng)目在選用時(shí)也可以達(dá)到用色的統(tǒng)一。



我們?cè)谥暗奈恼吕镉薪榻B過(guò)圖表的取色模型,通過(guò)調(diào)整顏色HSL值的區(qū)間,可以得到以下三種意圖色板:

  • 定性型-分類色板:用于區(qū)分不同的類型,又稱為無(wú)序色板。適合區(qū)分沒(méi)有內(nèi)在順序的類別
  • 定量分歧型-發(fā)散色板:通過(guò)兩邊互補(bǔ)色來(lái)體現(xiàn),具有明亮的中間值,然后以不同的色調(diào)在刻度的兩端變暗。通常用于可視化負(fù)值和正值
  • 定量順序型-順序色板:從亮到暗或相反的漸變。適合可視化從低到高的數(shù)字。

那么我們要怎么樣去使用這些色板呢?下面幾個(gè)案例將帶你了解其中的差異。


定性型:使用色調(diào)來(lái)進(jìn)行分類

數(shù)據(jù)內(nèi)在沒(méi)有順序差別時(shí),建議使用色調(diào)值(H)進(jìn)行區(qū)分;如定義國(guó)家、行業(yè)等類型。如果希望圖表看起來(lái)更加專業(yè),以下有幾項(xiàng)分類色板的小建議:

  • 選取盡量少的色調(diào):取色時(shí)無(wú)需使用整個(gè)色環(huán),使用鄰近色或互補(bǔ)色的取色方式顯得更加專業(yè)。


  • 色板適度明暗交替:一些視障人士無(wú)法區(qū)分色相,主要靠顏色的明暗差異來(lái)識(shí)別,通過(guò)飽和度和暗度的調(diào)整,創(chuàng)造明暗交替的色板。


定量型:使用深淺色板強(qiáng)調(diào)內(nèi)在順序

如果在同一個(gè)分類下包含子類別,或者數(shù)據(jù)本身具有排名屬性,那么建議使用連續(xù)色板來(lái)突出他們內(nèi)在的順序,使圖表更加易讀。

  • 順序色板-選擇合適的插值:根據(jù)數(shù)據(jù)的分布情況選擇不同的的插值斷點(diǎn),突出數(shù)據(jù)的差異。如以下案例中,根據(jù)統(tǒng)計(jì)學(xué)概念設(shè)定不同的取值區(qū)間,左側(cè)示例使用的是平均線性差值,反映的是數(shù)據(jù)的集中趨勢(shì);右側(cè)示例使用的是中位數(shù)插值,能更好的體現(xiàn)數(shù)據(jù)分布的形態(tài)。


  • 發(fā)散色板-關(guān)注對(duì)比色的識(shí)別性:盡量避免紅綠配色,如需使用綠色,偏黃或偏藍(lán)的綠色更易分辨,對(duì)視障人士也更加友好。


三、圖表中的響應(yīng)式設(shè)計(jì)


B端圖表可視化的數(shù)據(jù)一般是在網(wǎng)頁(yè)或移動(dòng)端上動(dòng)態(tài)顯示。不同于平面展示或匯報(bào),在基礎(chǔ)設(shè)計(jì)完成后還需要考慮到圖表展示的環(huán)境,根據(jù)不同端去適配顯示效果,以適應(yīng)各種復(fù)雜情況。而動(dòng)態(tài)顯示帶來(lái)的交互特性也讓數(shù)據(jù)展示有了更多的可能性。


1. 布局框架適配

在網(wǎng)頁(yè)端顯示時(shí),有時(shí)候同一個(gè)圖表需要考慮不同容器下的適配方式。根據(jù)數(shù)據(jù)相關(guān)性變化元素的適應(yīng)形態(tài),將非必要的的元素轉(zhuǎn)化或隱藏,保留重要的圖形元素去適應(yīng)當(dāng)前空間;元素隱藏后使用懸浮交互來(lái)保證信息的展示,保持圖表的可讀性同時(shí)也避免產(chǎn)生元素的重疊。



如案例中的圖表,在不同尺寸下通過(guò)改變和隱藏圖表元素,以達(dá)到適配當(dāng)前空間的效果。

2. 圖表元素適配

要適配移動(dòng)端,網(wǎng)頁(yè)端橫向延展的顯示方式需要適應(yīng)移動(dòng)端縱向空間的顯示。除了呈現(xiàn)角度的改變外,還需要考慮手機(jī)屏幕的尺寸和圖表元素的適配性,去兼容相關(guān)的交互操作。

  • 信息浮層:在圖表中,信息卡元素是傳達(dá)信息內(nèi)容的重要組件,在網(wǎng)頁(yè)端中懸浮展示,通常會(huì)占據(jù)很大空間;圖表適配移動(dòng)端后,信息浮層改動(dòng)到圖表上方常駐顯示,并跟隨手指的滑動(dòng)變化響應(yīng)數(shù)值,完整展示信息的同時(shí)也避免了頁(yè)面抖動(dòng)。


  • 坐標(biāo)軸標(biāo)簽:過(guò)長(zhǎng)的坐標(biāo)標(biāo)簽在適配過(guò)程中會(huì)產(chǎn)生重疊,而省略也會(huì)造成信息展示的不完整。我們需要針對(duì)不同的坐標(biāo)軸類型給出響應(yīng)的規(guī)范。如文本類軸標(biāo)簽我們可以采用省略、換行、旋轉(zhuǎn)等方式適配,避免信息的缺失。針對(duì)有連續(xù)型的數(shù)據(jù)類坐標(biāo)軸我們可以使用抽樣、轉(zhuǎn)化單位等方式適配,精簡(jiǎn)空間避免堆疊。


3. 極值適配

因B端平臺(tái)的特性,我們無(wú)法預(yù)知客戶傳入的數(shù)據(jù)量,可能會(huì)遇到因數(shù)據(jù)量過(guò)多,造成圖表顯示不佳,數(shù)據(jù)讀取困難等問(wèn)題。這種情況下,提前考慮數(shù)據(jù)極限場(chǎng)景,通過(guò)交互的形式變化的方式讓用戶獲取完整信息,提升理解同時(shí)信息展示更靈活。

  • 縮放和平移:在數(shù)據(jù)范圍過(guò)多時(shí)增加取值范圍的縮略軸組件,通過(guò)限制展示范圍讓數(shù)據(jù)量顯示可控。


  • 互動(dòng)切換視圖:如果折線的類別過(guò)多且無(wú)法省略的,建議分組查看。默認(rèn)狀態(tài)僅當(dāng)前組折線高亮,其他數(shù)據(jù)以淺色顯示,通過(guò)切換的方式查看其他組別的信息。


  • 懸浮鼠標(biāo)高亮:在分類過(guò)多不好分辨時(shí),可使用懸浮高亮的交互方式突出相關(guān)聯(lián)的數(shù)據(jù)組。


還有懸浮放大、點(diǎn)擊下鉆、聯(lián)動(dòng)圖表等交互行為可以組成更加豐富的圖表。因篇幅原因,在這篇文章就不做深入講解了,以后可獨(dú)立介紹。


// 結(jié)語(yǔ)


數(shù)據(jù)可視化在B端設(shè)計(jì)場(chǎng)景中發(fā)揮著重要作用。設(shè)計(jì)師在表達(dá)數(shù)據(jù)之美的同時(shí)更加準(zhǔn)確,才能更直觀地向用戶傳達(dá)數(shù)據(jù)的價(jià)值。使業(yè)務(wù)人員能夠從復(fù)雜的業(yè)務(wù)數(shù)據(jù)中快速、直接地找到重要數(shù)據(jù),確保用戶能夠更好的接收信息,才是可視化的關(guān)鍵


作者:百度MEUX      來(lái)源:站酷



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

分享本文至:

日歷

鏈接

個(gè)人資料

存檔