數(shù)據(jù)可視化設(shè)計(jì)指南

什么是數(shù)據(jù)可視化

1.數(shù)據(jù)可視化的定義 數(shù)據(jù)科學(xué)的大力發(fā)展，讓信息科學(xué)領(lǐng)域面臨的一個(gè)巨大挑戰(zhàn)就是數(shù)據(jù)爆炸，然而人類(lèi)分析數(shù)據(jù)的能力已經(jīng)遠(yuǎn)遠(yuǎn)落后于獲取數(shù)據(jù)的能力。  數(shù)據(jù)量越來(lái)越大、越多元化，數(shù)據(jù)內(nèi)容的噪聲讓人們?cè)邶嬰s的數(shù)據(jù)世界中倍感枯燥繁瑣，理解成本較高。所以這個(gè)挑戰(zhàn)不僅在于如何從海量數(shù)據(jù)中提取出有用知識(shí)，還在于如何將數(shù)據(jù)轉(zhuǎn)化成使人快速理解的知識(shí)。  如何從海量數(shù)據(jù)中提取知識(shí)是數(shù)據(jù)處理和數(shù)據(jù)挖掘的范疇，如何讓數(shù)據(jù)轉(zhuǎn)化成使人快速理解的知識(shí)就需要數(shù)據(jù)可視化了。

相比單純的數(shù)字，圖形形式可以讓人更容易洞察到數(shù)據(jù)的分布、趨勢(shì)、關(guān)系以及異常點(diǎn)，從而幫助決策者快速?zèng)Q策。數(shù)據(jù)可視化就是將數(shù)據(jù)轉(zhuǎn)換成易讀、易懂、易操作的圖或表等，以一種簡(jiǎn)潔明了、通俗易懂的方式展現(xiàn)和呈現(xiàn)數(shù)據(jù)。

2.數(shù)據(jù)可視化發(fā)展歷程

關(guān)于可視化的發(fā)展史可追溯至 19 世紀(jì)上半葉，這個(gè)時(shí)期可以說(shuō)是數(shù)據(jù)制圖的黃金時(shí)期，統(tǒng)計(jì)圖形、概念圖等迅猛爆發(fā)，此時(shí)人們已經(jīng)掌握整套統(tǒng)計(jì)數(shù)據(jù)可視化工具，包括直方圖、柱狀圖、餅圖、折線(xiàn)圖、時(shí)間線(xiàn)、輪廓線(xiàn)等。

3.為什么要做數(shù)據(jù)可視化

隨著世界與越來(lái)越多的電子設(shè)備建立聯(lián)系，數(shù)據(jù)量將繼續(xù)呈指數(shù)增長(zhǎng)?？茖W(xué)家們預(yù)測(cè)，到 2025 年將有 163 ZB（163 萬(wàn)億 GB）的數(shù)據(jù)。

人腦很難理解所有這些數(shù)據(jù)，實(shí)際上，如果不進(jìn)行某種類(lèi)比或抽象，人腦很難理解大于 5 的數(shù)字。數(shù)據(jù)可視化設(shè)計(jì)師可以在創(chuàng)建這些抽象中發(fā)揮至關(guān)重要的作用。

而對(duì)于用戶(hù)尤其是決策層的用戶(hù)來(lái)說(shuō)在現(xiàn)實(shí)的工作場(chǎng)景中經(jīng)常需要同時(shí)處理超過(guò) 5 組以上的數(shù)據(jù)并需要對(duì)其建立精準(zhǔn)的分析模型以便于做出最準(zhǔn)確的決策所以基于這樣的需求，數(shù)據(jù)可視化設(shè)計(jì)氤氳而生。

而數(shù)據(jù)可視化能夠?qū)a(chǎn)生的數(shù)據(jù)，以視覺(jué)圖表的方式，清晰有效地傳遞出數(shù)據(jù)當(dāng)中的重要信息。很多企業(yè)管理層從實(shí)踐中看到了數(shù)據(jù)可視化的價(jià)值，它能夠使決策者能夠解決難以快速讀懂?dāng)?shù)據(jù)分析報(bào)告的問(wèn)題，以數(shù)據(jù)可視化的模式來(lái)理解數(shù)據(jù)，以便做出對(duì)企業(yè)更好的決策。

4.數(shù)據(jù)可視化有什么用

傳遞速度快，人腦對(duì)視覺(jué)信息的處理要比書(shū)面信息塊 10 倍。使用圖表來(lái)總結(jié)復(fù)雜的數(shù)據(jù)，可以確保對(duì)關(guān)系的理解要比那些混亂的報(bào)告或電子表格更快。

數(shù)據(jù)顯示的多維性，在可視化的分析下，數(shù)據(jù)將每一維的值分類(lèi)、排序、組合和顯示，這樣就可以看到表示對(duì)象或事件的數(shù)據(jù)的多個(gè)屬性或變量。

更直觀的展示信息，數(shù)據(jù)可視化報(bào)告使我們能夠用一些簡(jiǎn)短的圖形就能體現(xiàn)那些復(fù)雜信息，甚至單個(gè)圖形也能做到。決策者可以輕松地解釋各種不同的數(shù)據(jù)源。豐富但有意義的圖形有助于讓忙碌的主管和業(yè)務(wù)伙伴了解問(wèn)題和未決的計(jì)劃。

大腦記憶能力的限制，實(shí)際上我們?cè)谟^察物體的時(shí)候，我們大腦和計(jì)算機(jī)一樣有長(zhǎng)期的記憶(memory 硬盤(pán))和短期的記憶(cache 內(nèi)存)。只有我們讓要記下文字，詩(shī)歌，物體，一遍一遍的在短期記憶了出現(xiàn)之后, 它們才可能進(jìn)入長(zhǎng)期記憶。

5.數(shù)據(jù)可視化使用目標(biāo)

數(shù)據(jù)可視化是一種信息交流形式，它以圖形形式描繪密集和復(fù)雜的信息，最終的視覺(jué)效果旨在簡(jiǎn)化數(shù)據(jù)，并使用數(shù)據(jù)幫助用戶(hù)決策。

準(zhǔn)確性，數(shù)據(jù)可視化需考慮數(shù)據(jù)的準(zhǔn)確性，清晰度和完整性。以不失真的方式呈現(xiàn)信息，減少用戶(hù)的思考成本。

實(shí)用性，數(shù)據(jù)需要強(qiáng)調(diào)實(shí)用，降本提效，降低學(xué)習(xí)使用成本、數(shù)據(jù)分析成本、數(shù)據(jù)查找成本，提升操作效率、決策效率。

適應(yīng)性，能適應(yīng)多設(shè)備、多場(chǎng)景?？筛鶕?jù)不同設(shè)備大小調(diào)整可視化，同時(shí)預(yù)測(cè)用戶(hù)對(duì)數(shù)據(jù)深度、復(fù)雜性和模態(tài)的需求。

6.數(shù)據(jù)可視化應(yīng)用場(chǎng)景

信息圖表設(shè)計(jì)、B 端后臺(tái)界面設(shè)計(jì)、可視化大屏界面設(shè)計(jì)。

數(shù)據(jù)可視化圖表由哪些元素組成

一張標(biāo)準(zhǔn)樣式的圖表基本上是由標(biāo)題、圖例、切換選項(xiàng)、圖形主體、坐標(biāo)系、提示信息、值域這幾個(gè)元素構(gòu)成。除此之外，還有一些特殊的圖表（如：3D 類(lèi)，由背景墻、側(cè)面墻、底座等圖表元素）。

標(biāo)題，標(biāo)題簡(jiǎn)短有力，以最少的字?jǐn)?shù)傳達(dá)觀點(diǎn)、信息或故事。信息類(lèi)標(biāo)題：提供理解數(shù)據(jù)所需的所有信息，回答「何事」、「何地」、「何時(shí)」這三個(gè)問(wèn)題，描述類(lèi)標(biāo)題：突出圖表中顯示的主要數(shù)據(jù)模式或趨勢(shì)，描繪出圖表所要講述的故事。

圖例，通常在圖形主題的右側(cè)或頂部，用來(lái)區(qū)分不同類(lèi)別代表的數(shù)據(jù)含義。

切換選項(xiàng)，可以是 tab 類(lèi)的切換，也可以是下拉選擇，根據(jù)具體場(chǎng)景設(shè)計(jì)，用于同類(lèi)型圖表的切換。

坐標(biāo)系，由 X 軸，Y 軸，標(biāo)識(shí)線(xiàn)，軸標(biāo)題構(gòu)成。一般場(chǎng)景中，坐標(biāo)軸是圖表中必須存在的元素之一，AntV 官方給出的迷你圖表（Minichart）中，坐標(biāo)軸可以被省略，只保留圖形基本姿態(tài)。

圖形主體，由選擇的圖表類(lèi)型決定，有時(shí)也會(huì)多個(gè)圖表類(lèi)型組合使用。

提示信息，多為 hover 或者選擇狀態(tài)，對(duì)選擇的位置數(shù)據(jù)進(jìn)行詳細(xì)展示。

值域，當(dāng)屏幕不足以容納圖形，選擇可視范圍的工具，當(dāng)圖表足夠復(fù)雜時(shí)會(huì)用到。

需要注意的是，數(shù)據(jù)可視化圖表除了上述常規(guī)元素外，還有個(gè)很重要的的概念—時(shí)間范圍。因?yàn)閿?shù)據(jù)的統(tǒng)計(jì)一定要有時(shí)間范圍，否則這個(gè)數(shù)據(jù)圖表就是無(wú)意義的，所以大家在設(shè)計(jì)圖表時(shí)一定要體現(xiàn)出“時(shí)間范圍”，它可以不出現(xiàn)在具體的某一個(gè)圖表中，但是要通過(guò)標(biāo)題或者其它方式表現(xiàn)出來(lái)。

數(shù)據(jù)可視化的設(shè)計(jì)流程

規(guī)范的流程是好結(jié)果的保證。按照設(shè)計(jì)流程，步步為營(yíng)，就能避免很多不必要的返工，保證設(shè)計(jì)質(zhì)量和項(xiàng)目進(jìn)度。

1.根據(jù)業(yè)務(wù)需求確立關(guān)鍵指標(biāo) 可視化設(shè)計(jì)要避免為了展示而展示，排版布局、圖表選用等應(yīng)服務(wù)于業(yè)務(wù)，所以可視化設(shè)計(jì)是在充分了解業(yè)務(wù)需求的基礎(chǔ)上進(jìn)行的。那什么是業(yè)務(wù)需求呢？業(yè)務(wù)需求就是要解決的問(wèn)題或達(dá)成的目標(biāo)。設(shè)計(jì)師通過(guò)設(shè)計(jì)的手段幫助相關(guān)人員達(dá)成這個(gè)目標(biāo)，是數(shù)據(jù)可視化的價(jià)值所在。

關(guān)鍵指標(biāo)是一些概括性詞語(yǔ)，是對(duì)一組或者一系列數(shù)據(jù)的統(tǒng)稱(chēng)。確定關(guān)鍵指標(biāo)后，根據(jù)業(yè)務(wù)需求擬定各個(gè)指標(biāo)展示的優(yōu)先級(jí)（主、次、輔）。

2.確立指標(biāo)分析維度 我們?cè)谥谱骺梢暬瘓D表時(shí)，首先要從業(yè)務(wù)出發(fā)，優(yōu)先挑選合理的、符合慣例的圖表，尤其是如果你的用戶(hù)層次比較多樣的情況下，要兼顧各個(gè)年齡段或者不同認(rèn)知能力的用戶(hù)的需求；其次是根據(jù)數(shù)據(jù)的各種屬性和統(tǒng)計(jì)圖表的特點(diǎn)來(lái)選擇，例如很多小伙伴做完可視化設(shè)計(jì)，發(fā)現(xiàn)可視化圖形并沒(méi)有準(zhǔn)確表達(dá)自己的意圖，也沒(méi)能向用戶(hù)傳達(dá)出應(yīng)有的信息，可視化圖形讓人困惑或看不懂。出現(xiàn)這種情況很大程度就是因?yàn)榉治龅木S度沒(méi)有找準(zhǔn)或定義的比較混亂。

比較：數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面

分布：指標(biāo)里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律

聯(lián)系：數(shù)據(jù)之間的相關(guān)性

構(gòu)成：指標(biāo)里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何

3.選定可視化圖表類(lèi)型 通過(guò)上述分析，我們可以跟據(jù)我們想要展現(xiàn)的數(shù)據(jù)種類(lèi)，以及我們制作圖表的目的，來(lái)選擇到合適的圖表。但是日常工作中，我們往往用不到這么多的圖表種類(lèi)，這個(gè)篩選的維度更適合我們作為學(xué)習(xí)圖表概念的工具。我們最經(jīng)常使用的還是六件套 — 柱狀圖、條形圖、折線(xiàn)圖、餅圖、散點(diǎn)圖、地圖。

柱狀圖  柱狀圖用于描述分類(lèi)數(shù)據(jù)之間的對(duì)比，是一種以長(zhǎng)方形的長(zhǎng)度為變量的統(tǒng)計(jì)圖表，有且僅有一個(gè)變量，其中一個(gè)軸表示需要對(duì)比的分類(lèi)維度，另一個(gè)軸代表相應(yīng)的數(shù)值 。

條形圖  條形圖對(duì)比柱狀圖，看上去雖然只是 X 軸與 Y 軸交換，數(shù)據(jù)種類(lèi)較為類(lèi)似，但不同的是，條形所能承載的項(xiàng)目數(shù)量相對(duì)于柱狀圖而言更多，由于其優(yōu)良的縱向延展性一般用于手機(jī)端較多，比如當(dāng)條目大于 12 條，就適合用條形圖，而且從上到下的閱讀方式符合人眼閱讀習(xí)慣，所以也會(huì)經(jīng)常用于排行榜的設(shè)計(jì)中。

折線(xiàn)圖  折線(xiàn)圖用于反映事物隨時(shí)間或有序類(lèi)別而變化的趨勢(shì)。要繪制折線(xiàn)圖，先在笛卡爾座標(biāo)上定出數(shù)據(jù)點(diǎn)，然后用直線(xiàn)把這些點(diǎn)連接起來(lái)。通常 Y 軸用于定量數(shù)值，而 X 軸則是分類(lèi)或順序刻度。負(fù)值可以顯示在 X 軸下方。使用建議：Y 軸刻度值選擇要合理，當(dāng)前顯示的數(shù)據(jù)波動(dòng)要大化的顯示；顯示數(shù)據(jù)盡量大于 3 條，否則不能夠清晰地反映出數(shù)據(jù)隨時(shí)間變化的趨勢(shì)。

餅圖  餅圖以扇區(qū)的形式顯示每一個(gè)數(shù)值相對(duì)于總數(shù)值的大小。通過(guò)不同的扇面大小，表達(dá)了不同類(lèi)別的比例，即一個(gè)數(shù)據(jù)組中不同數(shù)據(jù)項(xiàng)的數(shù)據(jù)大小占所有數(shù)據(jù)和的比例；并通過(guò)帶顏色的圖例將扇面和數(shù)據(jù)項(xiàng)一一對(duì)應(yīng)起來(lái)。所以當(dāng)我們想要一組數(shù)據(jù)中每個(gè)數(shù)據(jù)類(lèi)型所占的比例時(shí)，就可以?xún)?yōu)先選擇餅形圖。餅形圖可以分為基礎(chǔ)餅形、環(huán)形圖以及扇形圖。

散點(diǎn)圖  散點(diǎn)圖常用于展現(xiàn)數(shù)據(jù)的分布情況。通過(guò)數(shù)據(jù)之間的位置分布來(lái)觀察變量之間的相互關(guān)系。數(shù)據(jù)之間的相互關(guān)系主要分為：正相關(guān)（兩個(gè)變量值同時(shí)增長(zhǎng)）、負(fù)相關(guān)（一個(gè)變量呈現(xiàn)增長(zhǎng)分布另一個(gè)變量呈現(xiàn)下降分布）、不相關(guān)、線(xiàn)性相關(guān)、指數(shù)相關(guān)等。而分布在集群點(diǎn)較遠(yuǎn)的數(shù)據(jù)點(diǎn)，被稱(chēng)之為異常點(diǎn)。散點(diǎn)圖經(jīng)常與回歸線(xiàn)（就是最準(zhǔn)確地貫穿所有點(diǎn)的線(xiàn)）結(jié)合使用，歸納分析現(xiàn)有數(shù)據(jù)以進(jìn)行預(yù)測(cè)分析。

地圖  地圖常用于顯示地理區(qū)域上的數(shù)據(jù)。使用地圖作為背景，通過(guò)圖形的位置來(lái)表現(xiàn)數(shù)據(jù)的地理位置，通常來(lái)展示數(shù)據(jù)在不同地理區(qū)域上的分布情況。

4.可視化視覺(jué)設(shè)計(jì) 定義設(shè)計(jì)風(fēng)格  大多數(shù)設(shè)計(jì)都應(yīng)該有 APP 或者 Web 風(fēng)格定義的經(jīng)驗(yàn)。我們?cè)诙x一款 APP 或者 Web 頁(yè)面設(shè)計(jì)風(fēng)格時(shí)常用的方法是什么呢？情緒板！精美的圖片搭配符合主題的關(guān)鍵詞，可以向需求方和產(chǎn)品側(cè)準(zhǔn)確地表達(dá)出頁(yè)面的設(shè)計(jì)方向和風(fēng)格。

規(guī)劃頁(yè)面布局  設(shè)計(jì)前期規(guī)劃階段，先想好打算怎么表達(dá)，再選擇對(duì)應(yīng)的構(gòu)圖方式。以數(shù)據(jù)大屏為例，表達(dá)上我們講究總分主次關(guān)系，那么構(gòu)圖上依舊遵循這個(gè)規(guī)則，先具體再抽象。

配色的重要性  當(dāng)我們打開(kāi)一個(gè)頁(yè)面時(shí)，第一眼看到的往往并不是板塊布局，也不是詳細(xì)內(nèi)容，而是頁(yè)面的色彩。色彩引導(dǎo)著我們視覺(jué)進(jìn)行運(yùn)動(dòng)，較強(qiáng)的沖擊力很容易給用戶(hù)留下深刻的印象，設(shè)計(jì)者對(duì)色彩的運(yùn)用和搭配，將決定可視化的展現(xiàn)效果。

5.頁(yè)面交付開(kāi)發(fā) 頁(yè)面交付開(kāi)發(fā)完成后，我們還需要進(jìn)行視覺(jué)方面的走查：關(guān)鍵視覺(jué)元素、字體字號(hào)、頁(yè)面動(dòng)效、圖形圖表等是否按預(yù)期顯示、有無(wú)變形、錯(cuò)位等情況。

網(wǎng)站名稱(chēng)：數(shù)據(jù)可視化設(shè)計(jì)指南
文章轉(zhuǎn)載：http://bm7419.com/news24/325724.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、ChatGPT、App設(shè)計(jì)、外貿(mào)建站、做網(wǎng)站、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)