中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文介紹了數(shù)據(jù)可視化設(shè)計(jì)的四大原則、圖表解構(gòu)要素以及各類圖表的設(shè)計(jì)要點(diǎn)，旨在幫助設(shè)計(jì)師創(chuàng)建準(zhǔn)確、清晰、簡單且美觀的數(shù)據(jù)圖表。

Halo，這里是設(shè)計(jì)夾，今天分享的是「數(shù)據(jù)可視化設(shè)計(jì)」。

數(shù)據(jù)可視化主要從可視化原則、圖表解構(gòu)、可視化色板、可視化圖表這 4 個(gè)方面進(jìn)行闡述。??

01 可視化原則

數(shù)據(jù)可視化是把相對(duì)復(fù)雜、抽象的數(shù)據(jù)通過可視化手段，表達(dá)數(shù)據(jù)內(nèi)在的信息和規(guī)律，促進(jìn)數(shù)據(jù)信息的傳播和應(yīng)用。

Dreawer Design團(tuán)隊(duì)總結(jié)了以下四個(gè)可視化原則，供設(shè)計(jì)者參考及使用：

1. 準(zhǔn)確

數(shù)據(jù)圖表需精準(zhǔn)、如實(shí)地反映數(shù)據(jù)信息的變化特征。

2. 清晰

讓設(shè)計(jì)服務(wù)于數(shù)據(jù)內(nèi)容，給用戶以最為清晰、明確、迅捷的數(shù)據(jù)展示。用戶看到可視化圖表時(shí)，應(yīng)能在 5 秒內(nèi)了解到它的用途，而不是花幾分鐘都不能理解各個(gè)數(shù)據(jù)的含義。

3. 簡單

可視化結(jié)果應(yīng)該是一看就懂，不需要思考和過度理解，因而選定圖表時(shí)要理性，避免為了視覺上的效果而選擇一些對(duì)用戶不太友好的圖形。

下面為圖標(biāo)類型與認(rèn)知成本對(duì)比：

4. 美觀

優(yōu)秀的數(shù)據(jù)可視化界面，會(huì)有一套非常嚴(yán)謹(jǐn)一致的版面。這里的一致性需要考慮到布局、結(jié)構(gòu)和內(nèi)容。

02 圖表解構(gòu)

1. 構(gòu)成元素

我們從標(biāo)題、坐標(biāo)軸、圖例、標(biāo)簽、提示信息、數(shù)據(jù)圖形這6個(gè)大類，對(duì)數(shù)據(jù)圖表進(jìn)行進(jìn)一步元素拆解及闡述。設(shè)計(jì)過程中，需遵循可視化原則來精簡數(shù)據(jù)圖表，讓用戶快速獲取圖表中的關(guān)鍵信息，完成任務(wù)。

圖表構(gòu)成6大類，元素細(xì)分：

1. 標(biāo)題：圖表標(biāo)題；
2. 坐標(biāo)軸：X/Y軸線、刻度線、網(wǎng)格線、X/Y軸標(biāo)題、X/Y軸標(biāo)簽；
3. 標(biāo)簽：數(shù)據(jù)點(diǎn)、引導(dǎo)線、（文本）數(shù)據(jù)值；
4. 提示信息；
5. 圖例；
6. 數(shù)據(jù)圖形：線、矩形、扇形、環(huán)形等。

下面為數(shù)據(jù)圖表的基本構(gòu)成元素示例(為了便于觀察，某些字母做了大寫處理)：

除了以上的常規(guī)元素，還有常用于餅圖、環(huán)形圖中的“引導(dǎo)線”：

2. 標(biāo)題

標(biāo)題是概括圖表主題的說明文字，一個(gè)明確、精簡的標(biāo)題可以迅速讓讀者理解圖表要表達(dá)的內(nèi)容。

位置

一般位于數(shù)據(jù)圖表卡片的左上方。

使用建議

標(biāo)題需言簡意賅、符合圖表主題；盡量控制在 20 個(gè)字以內(nèi)，標(biāo)題寬度盡量不要超過卡片寬度。

超長處理

當(dāng)標(biāo)題超過長出卡片寬度時(shí)，省略標(biāo)題中間的文字，保住首尾，如“我是…標(biāo)題”。

3. 坐標(biāo)軸

坐標(biāo)系

坐標(biāo)軸包含在坐標(biāo)系的概念里，因此，我們需要先了解坐標(biāo)系。坐標(biāo)系是能夠使每個(gè)數(shù)組在維度空間內(nèi)找到映射關(guān)系的定位系統(tǒng)，更偏向數(shù)學(xué)/物理概念。

數(shù)據(jù)可視化中，最常用的二維坐標(biāo)系有兩種：

笛卡爾坐標(biāo)系：即直角坐標(biāo)系，是由相互垂直的兩條軸線構(gòu)成。常用于柱狀圖、條形圖、折線圖、面積圖等。

極坐標(biāo)系：由極點(diǎn)、極軸組成，坐標(biāo)系內(nèi)任何一個(gè)點(diǎn)都可以用極徑 r 和夾角 θ（逆時(shí)針為正）表示。常用于餅圖、圓環(huán)圖、雷達(dá)圖等。

補(bǔ)充說明：

坐標(biāo)軸由定義域軸(X軸)和值域軸(Y軸)組成。條形圖中，定義域軸為Y軸，值域軸為X軸；X軸為水平方向的橫軸，Y軸為垂直方向的豎軸。以下主要針對(duì)笛卡爾坐標(biāo)系的坐標(biāo)軸構(gòu)成進(jìn)行分析。

坐標(biāo)軸

定義：坐標(biāo)軸指二維空間中統(tǒng)計(jì)圖表中的軸，是坐標(biāo)系的構(gòu)成部分，它用來定義坐標(biāo)系中數(shù)據(jù)在方向和值之間的映射關(guān)系。構(gòu)成元素細(xì)分：X/Y 軸線、刻度線、網(wǎng)格線、X/Y 軸標(biāo)題、X/Y 軸標(biāo)簽。

軸類型

根據(jù)對(duì)應(yīng)變量是連續(xù)數(shù)據(jù)還是離散數(shù)據(jù)，可以把坐標(biāo)軸分為：分類軸、時(shí)間軸、連續(xù)軸三大類。

X/Y 軸線

顏色層級(jí)：X/Y軸線要比網(wǎng)格線層級(jí)高、顏色深，這樣能讓圖表有主次區(qū)分。

使用建議：有網(wǎng)格線時(shí)，柱狀圖/折線圖會(huì)隱藏 Y 軸線，條形圖則是隱藏 X 軸線，以達(dá)到信息降噪、突出重點(diǎn)的目的。

刻度線

軸刻度線是軸線上的小線段， 用于指示數(shù)值標(biāo)簽在坐標(biāo)軸上的具體位置。軸刻度線有 3 種放置方式：置內(nèi)、置中（即交叉方式）、置外。

位置建議：刻度線置中/置內(nèi)時(shí)，可能會(huì)和網(wǎng)格線、數(shù)據(jù)圖形重疊，所以建議將刻度線置于數(shù)值坐標(biāo)軸外側(cè)，以呈現(xiàn)最佳顯示效果。

顯示建議：

折線圖：刻度線、X/Y 軸標(biāo)簽、數(shù)據(jù)點(diǎn)需要保持在同一垂直線上。

柱狀圖/條形圖：由于單個(gè)柱子有很強(qiáng)的對(duì)應(yīng)關(guān)系，此時(shí)可以隱藏刻度線。

網(wǎng)格線

定義：網(wǎng)格線是用來輔助圖表優(yōu)化映射關(guān)系的，我們需要弱化網(wǎng)格線的視覺效果，來增加數(shù)據(jù)的可閱讀性。

作用：延伸數(shù)值刻度至可視化對(duì)象中，以便觀察數(shù)據(jù)值的大?。辉黾涌梢暬瘜?duì)象之間的對(duì)比觀察度。

使用建議1：使用網(wǎng)格線時(shí)，需遵從主次原則，以軸線為主、網(wǎng)格線為輔；樣式上可采用實(shí)線或虛線；避免顏色過重、使用純黑/純白色。

使用建議2：網(wǎng)格線一般跟隨值域軸的位置單向顯示，柱狀圖、折線圖等采用水平網(wǎng)格，條形圖采用垂直網(wǎng)格。

X/Y軸標(biāo)題

軸標(biāo)題主要用于說明坐標(biāo)軸數(shù)據(jù)組的含義，也可理解為“軸單位”。當(dāng)可視化圖表標(biāo)題、圖例、軸標(biāo)簽等已能充分表達(dá)數(shù)據(jù)含義時(shí)，可隱藏軸標(biāo)題。

這樣處理體現(xiàn)了奧卡姆剃刀定律：如無必要，勿增實(shí)體。

X/Y軸標(biāo)簽

軸標(biāo)簽是對(duì)當(dāng)前某一組數(shù)據(jù)的內(nèi)容標(biāo)注，用于提高數(shù)據(jù)的可讀性。

以下從 X 軸標(biāo)簽、Y軸標(biāo)簽兩方面進(jìn)行分析：

X軸標(biāo)簽

X軸標(biāo)簽的設(shè)計(jì)重點(diǎn)在顯示規(guī)則上。卡片寬度過窄、標(biāo)簽過多、名稱過長時(shí)，X軸標(biāo)簽便會(huì)出現(xiàn)顯示問題(如標(biāo)簽重疊等)。

為了解決顯示問題，我們從連續(xù)/時(shí)間軸標(biāo)簽（數(shù)值類）、分類軸標(biāo)簽（文本類）兩方面進(jìn)行分析：

連續(xù)/時(shí)間軸標(biāo)簽

顯示規(guī)則：建議等分抽樣顯示、旋轉(zhuǎn)；不尾部省略。

建議等分抽樣：連續(xù)/時(shí)間軸，通常由一組等差數(shù)列組成，具有規(guī)律性，缺失的數(shù)據(jù)用戶會(huì)在腦海中自動(dòng)補(bǔ)全。所以建議用等分抽樣來避免標(biāo)簽的重疊問題。

注意：等分抽樣盡量保留首尾數(shù)據(jù)標(biāo)簽；隨機(jī)抽樣沒有規(guī)律，會(huì)影響用戶的判斷及辨認(rèn)，不建議采取隨機(jī)抽樣顯示。

連續(xù)/時(shí)間軸標(biāo)簽是由“關(guān)鍵數(shù)值”組成的標(biāo)注點(diǎn)，一般都明確精簡，尾部省略會(huì)影響用戶對(duì)關(guān)鍵數(shù)值的辨認(rèn)。

為了保證標(biāo)簽的辨識(shí)度，我們可以將標(biāo)簽旋轉(zhuǎn) 45°、 90° 。極端情況下（圖表寬度極窄），可以同時(shí)進(jìn)行旋轉(zhuǎn)+抽樣。

分類軸標(biāo)簽

顯示規(guī)則：建議旋轉(zhuǎn)顯示；不建議抽樣顯示。

分類軸由幾個(gè)離散數(shù)據(jù)標(biāo)簽組成，標(biāo)簽之間獨(dú)立存在，無緊密邏輯關(guān)系，用戶無法自動(dòng)補(bǔ)全缺失信息。因此，不能采取抽樣顯示，應(yīng)盡量展示全部標(biāo)簽的全部文本。

若標(biāo)簽橫向展示空間不夠（文字重疊），我們可以將標(biāo)簽旋轉(zhuǎn) 45°、 90° 來達(dá)到預(yù)期顯示效果。若通過旋轉(zhuǎn)無法滿足需求，可使用條形圖，將分類軸放在Y軸。

旋轉(zhuǎn)方向說明：通常情況下，用戶的閱讀視線為從左至右、從上到下。因此，標(biāo)簽順時(shí)針旋轉(zhuǎn) 45° 更符合用戶的瀏覽習(xí)慣。

Y 軸標(biāo)簽

Y 軸標(biāo)簽的設(shè)計(jì)重點(diǎn)在標(biāo)簽數(shù)量、取值范圍和數(shù)據(jù)格式上。標(biāo)簽顯示區(qū)域一般根據(jù)最長標(biāo)簽寬度進(jìn)行自適應(yīng)縮放。

軸標(biāo)簽的數(shù)量

使用建議：根據(jù)米勒定律（7±2 法則），Y 軸標(biāo)簽數(shù)量應(yīng)控制在 5-9 個(gè)的范圍內(nèi)；Web頁面中，Y 軸常用標(biāo)簽數(shù)為：6 或 7（含標(biāo)簽0）。

軸標(biāo)簽的數(shù)量越多，橫向網(wǎng)格線就會(huì)越多。過多的軸標(biāo)簽及網(wǎng)格線會(huì)造成元素冗余，違背了清晰、準(zhǔn)確的可視化原則，也不利于圖表信息的表達(dá)及閱讀。

對(duì)齊方式：右對(duì)齊

軸標(biāo)簽的取值范圍

基準(zhǔn)線：Y 軸標(biāo)簽取值應(yīng)從 0 基線開始，以反映數(shù)據(jù)的真實(shí)性。如果展示被截?cái)嗟?Y 軸數(shù)據(jù)，會(huì)導(dǎo)致用戶做出錯(cuò)誤的判斷。

軸標(biāo)簽的數(shù)據(jù)格式

使用建議 1：標(biāo)簽保留的小數(shù)位數(shù)保持統(tǒng)一。

4. 數(shù)據(jù)標(biāo)簽

數(shù)據(jù)標(biāo)簽是對(duì)數(shù)據(jù)點(diǎn)對(duì)應(yīng)數(shù)值的標(biāo)注，用于直接觀察每個(gè)數(shù)據(jù)點(diǎn)的具體數(shù)值。

若圖表主要是用來看趨勢變化、占比大小等，則不需要顯示數(shù)據(jù)標(biāo)簽。若想精確了解每組數(shù)據(jù)的具體數(shù)值，則可以顯示數(shù)據(jù)標(biāo)簽。

位置

數(shù)據(jù)標(biāo)簽位于數(shù)據(jù)點(diǎn)的上方。

顯示規(guī)則

在不同類型的圖表中，數(shù)據(jù)標(biāo)簽的顯示規(guī)則不同。我們可以根據(jù)數(shù)據(jù)圖形、數(shù)據(jù)值的特性，選擇合適的顯示方式，提高圖表的準(zhǔn)確性。

柱狀圖

基礎(chǔ)柱狀圖：數(shù)據(jù)標(biāo)簽可顯示在數(shù)據(jù)圖形內(nèi)部、外部。

數(shù)據(jù)標(biāo)簽在圖形內(nèi)部的顯示規(guī)則：正常情況下，橫向顯示；數(shù)據(jù)標(biāo)簽超長時(shí)，旋轉(zhuǎn) 90°；圖形高度 < 數(shù)據(jù)標(biāo)簽高度時(shí)，不顯示數(shù)據(jù)標(biāo)簽。

分組柱狀圖：數(shù)據(jù)標(biāo)簽可顯示在數(shù)據(jù)圖形內(nèi)部、外部。顯示在內(nèi)部的數(shù)據(jù)標(biāo)簽顯示寬度不夠時(shí)，解決方案同上。

堆疊柱狀圖：數(shù)據(jù)標(biāo)簽顯示在數(shù)據(jù)圖形內(nèi)部。

數(shù)據(jù)標(biāo)簽在圖形內(nèi)部的顯示規(guī)則：正常情況下，橫向顯示；數(shù)據(jù)標(biāo)簽超長時(shí)，旋轉(zhuǎn) 90°；圖形高度 < 數(shù)據(jù)標(biāo)簽高度時(shí)，不顯示數(shù)據(jù)標(biāo)簽。

條形圖

數(shù)據(jù)標(biāo)簽在圖形內(nèi)部的顯示規(guī)則：正常情況下，橫向顯示；圖形寬度 < 數(shù)據(jù)標(biāo)簽高度時(shí)，不顯示數(shù)據(jù)標(biāo)簽；條形圖高度需 >= 數(shù)據(jù)標(biāo)簽高度。

基礎(chǔ)、分組條形圖的數(shù)據(jù)標(biāo)簽也可以顯示在圖形外部：

折線圖

數(shù)據(jù)標(biāo)簽顯示在數(shù)據(jù)點(diǎn)的上方。

圖表寬度過窄，數(shù)據(jù)點(diǎn)多且密時(shí)，相鄰的數(shù)據(jù)標(biāo)簽會(huì)出現(xiàn)重疊的問題。此時(shí)，我們會(huì)采用抽樣的方式顯示數(shù)據(jù)標(biāo)簽。鼠標(biāo)懸停數(shù)據(jù)點(diǎn)，顯示隱藏的數(shù)據(jù)標(biāo)簽。

餅圖、環(huán)形圖

數(shù)據(jù)標(biāo)簽顯示在圖形內(nèi)部、外部均可。

由于扇形有角度，且形狀相對(duì)不規(guī)則，對(duì)數(shù)據(jù)標(biāo)簽的文本長度包容度較低，環(huán)形更是如此。所以，當(dāng)扇/環(huán)形分割過多、面積較小時(shí)，建議將數(shù)據(jù)標(biāo)簽顯示在圖形外部。

當(dāng)然，我們也可以內(nèi)外部結(jié)合使用：

數(shù)據(jù)標(biāo)簽顏色

數(shù)據(jù)標(biāo)簽顯示在圖形內(nèi)部時(shí)，圖形為背景，數(shù)據(jù)標(biāo)簽為前景。此時(shí)，數(shù)據(jù)圖形作為背景色，會(huì)影響到數(shù)據(jù)標(biāo)簽的顯色度及易讀性。

為了確保良好的可讀性，我們通過對(duì)圖形顏色 HS 值的判斷，來決定文字的顏色。這樣對(duì)比度就在可控范圍內(nèi)，不會(huì)出現(xiàn)可讀性低的問題。

最后

由于篇幅問題，剩余內(nèi)容接下一篇文章展示～