設(shè)計(jì)師在工作中經(jīng)常會遇到下面這種情況：

自己辛辛苦苦、加班加點(diǎn)、沒日沒夜做出來的數(shù)據(jù)分析報(bào)告交到 boss 們手上，結(jié)果看不懂，全程黑人問號臉。原因就是，自己埋頭苦干做出來的數(shù)據(jù)分析結(jié)果，沒有用能夠讓別人一目了然、清晰明了的呈現(xiàn)方式展示出來，努力全白費(fèi)。

所以，為了讓大家對于數(shù)據(jù)可視化不再那么束手無措，我希望能通過這篇文章和大家一起交流學(xué)習(xí)，解決一些屬于我們共同的問題。

1. 數(shù)據(jù)可視化的定義

數(shù)據(jù)科學(xué)的大力發(fā)展，讓信息科學(xué)領(lǐng)域面臨的一個(gè)巨大挑戰(zhàn)就是數(shù)據(jù)爆炸，然而人類分析數(shù)據(jù)的能力已經(jīng)遠(yuǎn)遠(yuǎn)落后于獲取數(shù)據(jù)的能力。

數(shù)據(jù)量越來越大、越多元化，數(shù)據(jù)內(nèi)容的噪聲讓人們在龐雜的數(shù)據(jù)世界中倍感枯燥繁瑣，理解成本較高。所以這個(gè)挑戰(zhàn)不僅在于如何從海量數(shù)據(jù)中提取出有用知識，還在于如何將數(shù)據(jù)轉(zhuǎn)化成使人快速理解的知識。

如何從海量數(shù)據(jù)中提取知識是數(shù)據(jù)處理和數(shù)據(jù)挖掘的范疇，如何讓數(shù)據(jù)轉(zhuǎn)化成使人快速理解的知識就需要數(shù)據(jù)可視化了。

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

利用“可視化”的方式，龐雜的大數(shù)據(jù)通過圖形化的手段，能夠?yàn)楣ぷ鲙?3 大好處：

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

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

這里分享一個(gè)這個(gè)時(shí)期典型的數(shù)據(jù)可視化案例。1864 年一名 John Snow 的醫(yī)生使用散點(diǎn)在地圖上標(biāo)注了倫敦的霍亂發(fā)病案例，從而判斷出 Broad Street 的水井污染是疫情爆發(fā)的根源。

John Snow 著手調(diào)查病例發(fā)生的地點(diǎn)和取水的關(guān)系，發(fā)現(xiàn) 73 個(gè)病例離布拉德街水井的距離比附近其他任何一個(gè)水井的距離都更近。在拆除布拉德街水井的搖把后不久，霍亂停息。

可視化真正被提到一個(gè)應(yīng)用理論的高度是到了 1987 年布魯斯·麥考梅克和馬克沁·布朗所編寫的美國國家科學(xué)基金會報(bào)告《Visualization in Scientific Computing》（科學(xué)計(jì)算之中的可視化），其意在強(qiáng)調(diào)了基于計(jì)算機(jī)的可視化技術(shù)方法的必要性，此時(shí)的概念已經(jīng)與現(xiàn)在我們所接觸的工作中的數(shù)據(jù)可視化是非常接近。

到了 90 年代初人們發(fā)起了一個(gè)稱為“信息可視化”的研究領(lǐng)域旨在為許多應(yīng)用領(lǐng)域（科學(xué)、商業(yè)、行政、財(cái)務(wù)、數(shù)字媒體）之中對于抽象的異質(zhì)性數(shù)據(jù)集的分析工作提供支持，與前面提到的“科學(xué)可視化”交叉形成了現(xiàn)在耳熟能詳?shù)摹皵?shù)據(jù)可視化”，此時(shí)這個(gè)詞匯才慢慢的被更多的專業(yè)領(lǐng)域的人所接受，并在之后互聯(lián)網(wǎng)的不斷發(fā)展中擴(kuò)充著自己的分支。

過去 1 年，全球塑料瓶的銷量達(dá)到 4800 億只，這個(gè)數(shù)字看起來很大，但到底有多大？這個(gè)作品就通過可視化呈現(xiàn)了出來。方式很簡單——看看一小時(shí)、一天、一個(gè)月、一年、十年產(chǎn)生的塑料瓶能堆多高——效果很震撼，看到世界最高的建筑也比不過堆積成山的塑料瓶，就能體會到我們消耗的塑料瓶數(shù)量之巨大。

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

據(jù) IBM 稱，我們的世界每天要創(chuàng)建出高達(dá) 2.5 萬億字節(jié)的數(shù)據(jù)。

麻省理工學(xué)院的研究科學(xué)家安德魯·邁克菲（Andrew McAfee）和麻省理工學(xué)院的埃里克·布林約爾夫森（Erik Brynjolfsson）教授指出，“每秒通過互聯(lián)網(wǎng)的數(shù)據(jù)比 20 年前存儲在整個(gè)互聯(lián)網(wǎng)中的數(shù)據(jù)還多。”

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

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

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

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

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

傳遞速度快

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

數(shù)據(jù)顯示的多維性

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

更直觀的展示信息

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

大腦記憶能力的限制

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

很多研究已近表明，在進(jìn)行理解和學(xué)習(xí)的任務(wù)的時(shí)候，圖文一起能夠幫助讀者更好的了解所要學(xué)習(xí)的內(nèi)容， 圖像更容易理解，更有趣，也更容易讓人們記住。

BBC 委托數(shù)據(jù)藝術(shù)家 Federica Fragapane 制作有關(guān)太空垃圾的數(shù)據(jù)可視化作品。數(shù)據(jù)集分為不同的類別：與地球的距離，太空垃圾的類型以及物體的大小和質(zhì)量。作為一名意大利獨(dú)立信息可視化藝術(shù)家 Federica Fragapane 的作品在細(xì)節(jié)和色彩上尤為引人關(guān)注。

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

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

準(zhǔn)確性

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

實(shí)用性

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

適應(yīng)性

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

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

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

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

1. 標(biāo)題

標(biāo)題簡短有力，以最少的字?jǐn)?shù)傳達(dá)觀點(diǎn)、信息或故事。

信息類標(biāo)題：提供理解數(shù)據(jù)所需的所有信息，回答「何事」、「何地」、「何時(shí)」這三個(gè)問題

描述類標(biāo)題：突出圖表中顯示的主要數(shù)據(jù)模式或趨勢，描繪出圖表所要講述的故事

2. 圖例

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

3. 切換選項(xiàng)

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

4. 坐標(biāo)系

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

5. 圖形主體

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

6. 提示信息

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

7. 值域

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

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

2017 年，荷蘭有 1917 人以自殺的方式結(jié)束了他們的生命。來自 Studio Terp 的 Sonja Kuijpers 從自身與自殺傾向抗?fàn)幍慕?jīng)歷中獲得靈感，在搜集相關(guān)數(shù)據(jù)、制作相應(yīng)圖表的基礎(chǔ)上，以“景觀”（landscape）的形式對荷蘭 2017 年的自殺情況進(jìn)行了可視化。這幅“景觀”的左右兩邊用以區(qū)分自殺者的性別。樹、云朵、波浪等元素表示不同的自殺方式，同一類元素的不同顏色、形狀、大小用以描述 8 個(gè)不同的年齡層。原本冰冷而絕望的自殺景觀在充滿自然意象的可視化手段下變得平靜而溫暖，作者借此喚醒有自殺傾向者對生命的眷戀

規(guī)范的流程是好結(jié)果的保證。按照設(shè)計(jì)流程，步步為營，就能避免很多不必要的返工，保證設(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ù)需求就是要解決的問題或達(dá)成的目標(biāo)。設(shè)計(jì)師通過設(shè)計(jì)的手段幫助相關(guān)人員達(dá)成這個(gè)目標(biāo)，是數(shù)據(jù)可視化的價(jià)值所在。

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

2. 確立指標(biāo)分析維度

我們在制作可視化圖表時(shí)，首先要從業(yè)務(wù)出發(fā)，優(yōu)先挑選合理的、符合慣例的圖表，尤其是如果你的用戶層次比較多樣的情況下，要兼顧各個(gè)年齡段或者不同認(rèn)知能力的用戶的需求；其次是根據(jù)數(shù)據(jù)的各種屬性和統(tǒng)計(jì)圖表的特點(diǎn)來選擇，例如很多小伙伴做完可視化設(shè)計(jì)，發(fā)現(xiàn)可視化圖形并沒有準(zhǔn)確表達(dá)自己的意圖，也沒能向用戶傳達(dá)出應(yīng)有的信息，可視化圖形讓人困惑或看不懂。出現(xiàn)這種情況很大程度就是因?yàn)榉治龅木S度沒有找準(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. 選定可視化圖表類型

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

柱狀圖

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

下圖是中國每年對象牙的需求正在下降的趨勢圖。象牙雕刻在中國已有數(shù)千年的歷史，但隨著需求助長非法貿(mào)易和非洲偷獵危機(jī)，當(dāng)局被迫采取行動。2011 年，中國禁止拍賣所有瀕危物種產(chǎn)品。

條形圖

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

下圖是老虎的數(shù)量逐年上升的對比圖。從 2010 年的歷史最低點(diǎn)開始，數(shù)字正在增加。

折線圖

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

下圖是世界上 85%的核彈頭退役的對比圖。圖表中兩個(gè)核大國簽署了多項(xiàng)條約，隨著時(shí)間的推移，冷戰(zhàn)期間積累的大量核武器庫存已基本拆除。

餅圖

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

下圖反映海上風(fēng)力發(fā)電可以滿足美國、歐盟、中國、日本和印度的電力需求。這種可再生能源具有驚人的潛力，并且隨著技術(shù)不斷改進(jìn)，成本持續(xù)下降。最終可能產(chǎn)生超過當(dāng)前全球電力需求 18 倍的電力。預(yù)計(jì)到 2040 年，這項(xiàng)業(yè)務(wù)將達(dá)到萬億美元，使世界步入全面脫碳的軌道。

散點(diǎn)圖

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

下圖反映了由于得到了更好的醫(yī)療保健、教育、社會條件，數(shù)百萬兒童的生命得到了挽救。人類進(jìn)步的一個(gè)直接影響是壽命延長。100 年前，世界上近一半的兒童在 5 歲之前死亡。今天，這一數(shù)字還不到 4%。這意味著數(shù)百萬人有了生命的機(jī)會。這就是進(jìn)步。

地圖

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

下圖反映了美國每個(gè)州擁有槍支的數(shù)量，根據(jù)哥倫比亞大學(xué)的研究人員 Bindu Kalesan、Marcos Villarreal 和 Katherine Keyes 以及波士頓大學(xué)的 Sandro Galea 最近在《傷害預(yù)防》雜志上發(fā)表的一項(xiàng)研究，幾乎每三個(gè)美國人中就有一個(gè)人擁有槍支 。

4. 可視化視覺設(shè)計(jì)

定義設(shè)計(jì)風(fēng)格

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

可視化設(shè)計(jì)雖然酷炫，但風(fēng)格定義方法也同樣可以是用情緒板來做，這種方法也是目前比較科學(xué)高效的風(fēng)格定義手段：

規(guī)劃頁面布局

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

布局一：

布局二：

布局三：

配色的重要性

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

顏色無需使用文字即可傳達(dá)大量信息。然而，使用顏色要注意以下幾點(diǎn)：

一般來說，我們在使用顏色的時(shí)候可以遵循以下的配色一致性原則：

數(shù)值指標(biāo)一致性

當(dāng)根據(jù)某一個(gè)指標(biāo)的數(shù)值大小進(jìn)行顏色映射時(shí)，建議使用生長色系的漸變顏色。

例如上圖所示，統(tǒng)計(jì)的是新型冠狀肺炎病例每個(gè)區(qū)域的現(xiàn)存病例人數(shù)，左邊的圖顏色并沒有色系和生長規(guī)律，用戶難以理解具體指標(biāo)數(shù)值的映含義，而此時(shí)如果使用右邊的生長色系的表達(dá)方式，它會傳達(dá)給用戶一種顏色可測量感。

那么用戶根據(jù)這樣的漸變生長色系，就可以很輕松地理解每個(gè)區(qū)域的現(xiàn)存病例分布情況。

語義顏色一致性

符合語義的顏色可以幫助人們更快地處理信息，盡量根據(jù)指標(biāo)含義選擇符合人類最直觀感受的顏色。

比如在分析股市時(shí)，我們可以使用統(tǒng)一的紅綠配色，分別代表了股票的上漲和下跌。

指標(biāo)顏色一致性

在同一儀表板中，對于相同的指標(biāo)盡量使用同一色系的顏色方案，避免使用過多的顏色對用戶造成干擾。

例如我們在做營業(yè)額利潤分析時(shí)，通常分析指標(biāo)會有成本、利潤、利潤率，那么即使我們在對同一個(gè)指標(biāo)做不同維度的數(shù)據(jù)可視化分析時(shí)，對于相同指標(biāo)建議分別使用相同的色系進(jìn)行配色，如下：

我們在遵循這樣的指標(biāo)顏色一致性配色原則之后，用戶就能夠快速地根據(jù)顏色區(qū)分來理解當(dāng)前的數(shù)據(jù)可視化圖表所要表達(dá)的指標(biāo)含義。

色系顏色一致性

如果我們是自定義配色，需要避免一些撞色。

例如把黃+白、藍(lán)+黑、紅+藍(lán)、黃+紫等等色系進(jìn)行搭配，這樣不但從感官上不美觀，而且還容易對用戶的眼睛造成刺激。

設(shè)計(jì)中需要遵循的原則

圖表的設(shè)計(jì)價(jià)值在于精準(zhǔn)、高效、簡單的傳遞數(shù)據(jù)信息，最好能夠讓讀者一目了然，即使做不到一目了然也應(yīng)該具備自我解釋的能力。所以，就要求在設(shè)計(jì)時(shí)應(yīng)該增強(qiáng)和突出數(shù)據(jù)元素，減少和弱化非數(shù)據(jù)元素，具體應(yīng)該注意以下原則：

刪除

除非特殊場景的考慮，應(yīng)盡可能的刪除和數(shù)據(jù)非相關(guān)的元素:

1. 背景色
2. 漸變色
3. 網(wǎng)格線
4. 3D 效果
5. 陰影效果（如果具體操作需要強(qiáng)調(diào)的除外，如：鼠標(biāo) Hover 查看具體信息）

弱化

即使有必要保留非數(shù)據(jù)元素，也要弱化或隱藏它們，盡量使用淡色

1. 坐標(biāo)軸
2. 網(wǎng)格輔助線
3. 表格線

組織、強(qiáng)調(diào)

把相關(guān)的數(shù)據(jù)進(jìn)行合理的組織分類，只放關(guān)鍵的、重要的數(shù)據(jù)在圖表內(nèi)。并且考慮數(shù)據(jù)展示的優(yōu)先級，明確哪些數(shù)據(jù)是需要重點(diǎn)突出的進(jìn)行重點(diǎn)標(biāo)識，以便用戶能夠快速 get 到重要信息。

5. 飛機(jī)稿溝通確認(rèn)

最初的設(shè)計(jì)稿不需要十分精致，我們可以把它理解為一個(gè)“低保真”原型，然后通過不斷溝通修改，讓它逐步完善精致起來，也就是小步快跑，避免那種一下子走到終點(diǎn)，然后又大修大改的情況。

根據(jù)頁面布局、圖表類型、頁面風(fēng)格特點(diǎn)，我們需要用盡可能簡單的方法 ，把之前幾步的成果在頁面上快速體現(xiàn)出來，然后去敲定五方面內(nèi)容：

6. 頁面交付開發(fā)

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

總結(jié)

我們回顧一下，這篇文章主要是講了三個(gè)部分：

第一部分主要說明一下什么是數(shù)據(jù)可視化，數(shù)據(jù)可視化講的是將數(shù)據(jù)轉(zhuǎn)換成易讀、易懂、易操作的圖或表等，以一種簡潔明了、通俗易懂的方式展現(xiàn)和呈現(xiàn)數(shù)據(jù)。以及數(shù)據(jù)可視化的發(fā)展歷程、作用、使用目標(biāo)和應(yīng)用場景；

第二部分主要說明了一個(gè)圖表的組成元素都有哪些？一張標(biāo)準(zhǔn)樣式的圖表基本上是由標(biāo)題、圖例、切換選項(xiàng)、圖形主體、坐標(biāo)系、提示信息、值域這幾個(gè)元素構(gòu)成；

第三部分主要介紹了數(shù)據(jù)可視化設(shè)計(jì)流程，以及一些比較常見的圖表類型。其中規(guī)范的流程是好結(jié)果的保證。按照設(shè)計(jì)流程，步步為營，就能避免很多不必要的返工，保證設(shè)計(jì)質(zhì)量和項(xiàng)目進(jìn)度。

最后，除了學(xué)習(xí)以上可視化相關(guān)的基礎(chǔ)知識以外，更需要在日常工作學(xué)習(xí)中培養(yǎng)習(xí)慣，養(yǎng)成數(shù)據(jù)可視化的思維方式。

1. 保持對數(shù)據(jù)的敏感度
2. 嘗試?yán)每梢暬ぞ邉?chuàng)建圖表，鍛煉分析整理的能力
3. 密切關(guān)注自家產(chǎn)品線的用戶行為數(shù)據(jù)，解讀各類數(shù)據(jù)指標(biāo)，培養(yǎng)分析的習(xí)慣
4. 關(guān)注前沿技術(shù)和可視化新形式，保持開放包容的心態(tài)

以上就是本文全部內(nèi)容，希望能帶給大家?guī)椭?/p>

參考：

1. CSDN 前端修羅場《大屏數(shù)據(jù)可視化設(shè)計(jì)指南》
2. 且曼 B 端產(chǎn)品設(shè)計(jì) 美芳老師 《數(shù)據(jù)可視化設(shè)計(jì)之視覺篇》
3. 《10 rules for better dashboard design》Taras Bakusevych
4. AntV： https://antv-2018.alipay.com/zh-cn/index.html
5. Echarts： https://echarts.apache.org/zh/index.html
6. CSDN captain811《數(shù)據(jù)可視化的重點(diǎn)》
7. 馬世權(quán)《樂見數(shù)據(jù)：商業(yè)數(shù)據(jù)可視化思維》