淺談數(shù)據(jù)可視化設(shè)計中的圖表設(shè)計過程與方法

李正奎 楊登豐 呂洪波

摘要：信息時代，數(shù)據(jù)無處不在，數(shù)據(jù)分析正在以我們未曾想象過的方式影響著我們的生活。而圖表設(shè)計則是進(jìn)行數(shù)據(jù)分析的常用方法，通常設(shè)計者利用圖表來對數(shù)據(jù)包含的信息進(jìn)行可視化呈現(xiàn)，這樣能極大的幫助用戶從紛雜的數(shù)據(jù)中快速獲取有價值的信息，但在日常圖表設(shè)計工作中，存在諸多圖表使用不當(dāng)或信息表達(dá)不合理的情況。本文將從圖表設(shè)計概述、設(shè)計過程以及基本設(shè)計原則等方面，淺談如何設(shè)計出優(yōu)秀的圖表。

關(guān)鍵詞：數(shù)據(jù)分析;圖表設(shè)計

一、圖表設(shè)計概述

圖表設(shè)計是數(shù)據(jù)可視化的重要手段，它是視覺設(shè)計與統(tǒng)計學(xué)相結(jié)合而產(chǎn)生的一個重要科學(xué)成果，其特點(diǎn)是感性與理性并重。十八世紀(jì)50年代左右，英國流行病學(xué)家約翰·思洛通過信息分析繪制了一張位置圖表，圖中標(biāo)出了霍亂疫情的病人所在位置，進(jìn)而通過該圖表找到了霍亂疫情源頭所在（圖1）。由此開始，經(jīng)過人們的不斷努力，它在各行各業(yè)都已發(fā)揮著不可替代的作用。

在對復(fù)雜信息進(jìn)行表述時之所以選用視覺圖形化的圖表設(shè)計方式，而非大段的純文本描述，是因?yàn)槿祟惖拇竽X對視覺信息的處理優(yōu)于對文本信息的處理，因此，用眼睛直接查看可視化數(shù)據(jù)是一種更清晰更有效傳達(dá)與溝通信息的方式。使用圖表、圖形和設(shè)計元素把數(shù)據(jù)進(jìn)行可視化，可以幫助人們更容易的解釋數(shù)據(jù)模式、趨勢、統(tǒng)計規(guī)律和數(shù)據(jù)相關(guān)性，而這些“信息背后的信息”是在其他呈現(xiàn)方式下很難被發(fā)現(xiàn)。

二、圖表體現(xiàn)的信息關(guān)系

通常情況下，圖標(biāo)可以體現(xiàn)出以下幾種數(shù)據(jù)關(guān)系：

2.1構(gòu)成

如圖2，構(gòu)成主要關(guān)注每個部分所占整體的百分比，如果想表達(dá)的信息包括：“份額”、“百分比”以及“預(yù)計將達(dá)到百分之多少”，此時可以用到餅圖、堆積面積圖等。

2.2比較

如圖3，比較不僅可以展示數(shù)據(jù)的排列順序 —— 是差不多，還是一個比另一個更多或更少呢？“大于”、“小于”或者“大致相當(dāng)”都是比較相對關(guān)系中的關(guān)鍵詞，此時這可選擇柱圖、條形圖等;另外也可展示數(shù)據(jù)如何隨時間變化而變化，每周、每月、每年的變化趨勢是增長、減少、上下波動或基本不變，此時折線圖則能更好額表現(xiàn)指標(biāo)隨時間呈現(xiàn)的趨勢。

2.3分布

如圖4，分布是關(guān)心各數(shù)值范圍內(nèi)各含了多少項(xiàng)目，典型的信息會包含：“集中”、“頻率”與“分布”等，這時候使用柱圖;還可以根據(jù)地理位置數(shù)據(jù)，通過地圖展示不同分布特征。

2.4聯(lián)系

如圖5，聯(lián)系主要查看變量之間是否表達(dá)出我們預(yù)期所要證明的模式關(guān)系，比如預(yù)期銷售額可能隨著折扣幅度的增長而增長而增長，這時候可以用氣泡圖來展示，用于表達(dá)“與……有關(guān)“、“隨……而增長”、“隨……而不同”變量間的關(guān)系。

三、圖表設(shè)計過程

數(shù)據(jù)可視化的本質(zhì)是將數(shù)據(jù)通過各種視覺通道映射成圖形，可以使得用戶更快、更準(zhǔn)確的理解數(shù)據(jù)。因此數(shù)據(jù)可視化要解決的問題是如何將數(shù)據(jù)通過視覺可觀測的方式表達(dá)出來，同時需要考慮美觀、可理解性，需要解決展示空間（畫布）有限的情況下覆蓋、雜亂、沖突等問題，再以交互的形式查看數(shù)據(jù)的細(xì)節(jié)。

其過程大致可以分為以下幾個步驟：

3.1弄清需求定義問題

首先明確數(shù)據(jù)可視化是要讓用戶看懂?dāng)?shù)據(jù)，理解數(shù)據(jù)，所以開始數(shù)據(jù)可視化前一定要弄明白用戶的需求，以使后期的設(shè)計符合目標(biāo)用戶的認(rèn)知特性和行為特性。

3.1確定要展示的數(shù)據(jù)

進(jìn)行數(shù)據(jù)可視化首先要有數(shù)據(jù)，由于畫布大小限制，過量的數(shù)據(jù)不能夠直接顯示出來，所以要確定展示的數(shù)據(jù)：

l我要展示的數(shù)據(jù)是否已經(jīng)加工好，是否存在空值？

l是列表數(shù)據(jù)還是樹形數(shù)據(jù)？

l數(shù)據(jù)的規(guī)模有多大？

l是否對數(shù)據(jù)進(jìn)行聚合，是否要分層展示數(shù)據(jù)？

l如何加載到頁面，是否需要在前端對數(shù)據(jù)處理？

3.3確定數(shù)據(jù)維度與指標(biāo)

維度是針對對象的描述性特征或?qū)傩?，比如城市的分級、性別、行業(yè)等;指標(biāo)是用戶用戶衡量對象的單位或方法。維度與指標(biāo)一般成對出現(xiàn)，共同構(gòu)成一組數(shù)據(jù)。例如，我們要對比2020年某幾個部隊(duì)全年會議數(shù)量，那么部隊(duì)就是維度，會議數(shù)量就是指標(biāo)。

操作過程中，我們得到的數(shù)據(jù)表中存儲著多個主體的多個指標(biāo)數(shù)據(jù)，但是不是所有的維度和指標(biāo)是需要我們關(guān)注的。因此，我們通常會通過維度或者指標(biāo)，對將要提取的數(shù)據(jù)進(jìn)行限制，避免數(shù)據(jù)量級過大，同時也避免我們的注意力分散。

3.4對承載數(shù)據(jù)的圖表進(jìn)行設(shè)計

前期工作中已經(jīng)確定好用戶的需求以及需要展示的數(shù)據(jù)，現(xiàn)在就需要對承載數(shù)據(jù)的圖表進(jìn)行設(shè)計，我們可以根據(jù)前面講的數(shù)據(jù)關(guān)系對圖表類型進(jìn)行選擇，也可以進(jìn)行針對性的個性化圖表設(shè)計。在此階段，設(shè)計者必須要明白什么是優(yōu)秀的圖表，什么是失敗的圖表。

優(yōu)秀的圖表 失敗的圖表

?能把復(fù)雜變得簡單;

?講述一個清晰的故事;

?正確表達(dá)數(shù)據(jù)的意義;

?按照需求揭示細(xì)節(jié)。

?太多元素，造成視覺混亂;

?最基本的問題需要很長時間才能找到答案;

?缺少組織邏輯，圖表隨意拼裝;

?圖表根本產(chǎn)生不了任何洞察。

3.5確定圖表的交互

交互通常被認(rèn)為是圖表設(shè)計時需要考慮的次要問題，但是它一旦被用戶感知到，細(xì)微的交互就能給用戶創(chuàng)造一種愉悅的超預(yù)期體驗(yàn)，從而提升該圖表的價值。

四、圖表設(shè)計準(zhǔn)則

無規(guī)矩不成方圓，圖表設(shè)計自然也不是隨意為之，它的表達(dá)方式選擇、色彩搭配、交互形式等等都需要在一定規(guī)則的約束下進(jìn)行。

下面是設(shè)計圖表時應(yīng)該遵守的六項(xiàng)原則。

（一）數(shù)據(jù)準(zhǔn)確性和完整性至上，請勿扭曲或混淆信息的修飾或局部性，強(qiáng)調(diào)清晰度和透明度。

向用戶提供他們需要了解給定可視化效果的上下文元素，通過使用清晰的標(biāo)簽，準(zhǔn)確的軸和基線以及輔助工具提示和圖例，可以最大程度地提高圖形的完整性。

運(yùn)動可以幫助加強(qiáng)關(guān)系，但一定不能扭曲數(shù)據(jù)。對所使用的數(shù)據(jù)集，其來源以及收集和處理方式保持透明。

（二）提供上下文并幫助用戶瀏覽數(shù)據(jù)，建立有限考慮數(shù)據(jù)探索和比較的能力。

設(shè)計時要考慮用戶現(xiàn)有的思維模型，營造舒適的使用體驗(yàn)，使用戶能夠輕松學(xué)習(xí)如何閱讀圖表及其信息;選擇支持核心功能可發(fā)現(xiàn)性的可視化和交互式功能，例如選擇、縮放、平移和過濾;運(yùn)動和交互應(yīng)該通過揭示上下文，見解，關(guān)聯(lián)和因果關(guān)系來支持分析推理和用戶理解。

（三）超出用戶期望，考慮性能，改進(jìn)，驚喜和創(chuàng)新。

創(chuàng)建出色的可視化體驗(yàn)，然后以意想不到的方式改進(jìn)它們。在適當(dāng)?shù)臅r候，使用簽名功能和一些小小的歡樂時刻，將用戶引導(dǎo)到他們所需要的。速度與圖形效果一樣令人賞心悅目。在狀態(tài)轉(zhuǎn)換的編排中考慮運(yùn)動和定時，以幫助感知快速響應(yīng)的系統(tǒng)。

（四）減少認(rèn)知負(fù)擔(dān)，并專注于重要的事情，每個動作，顏色和視覺元素都應(yīng)該支持?jǐn)?shù)據(jù)洞察力和理解力。

關(guān)注用戶的任務(wù)，其他所有操作都應(yīng)遵循。引導(dǎo)用戶盡快訪問基本信息。圖表應(yīng)該在5秒之內(nèi)，甚至一眼之間，就讓人得到相關(guān)的信息。研究表明，人們對任何一種信息的關(guān)注興趣取決于5秒時間，如果你不能在5秒內(nèi)讓用戶對你的信息產(chǎn)生興趣，那么用戶的關(guān)注點(diǎn)就會馬上移走。同時信息量不要過多，認(rèn)知心理學(xué)家發(fā)現(xiàn)，人腦一次只能理解7±2個信息，所以圖表中的信息，最好也在5～9個之間，超過這個數(shù)目，指揮造成信息干擾。

（五）允許系統(tǒng)擴(kuò)展并適應(yīng)上下文，在數(shù)據(jù)深度，復(fù)雜性和模式上尊重不同的用戶需求。

每個圖表都應(yīng)盡可能地易于訪問?？紤]圖表元素（調(diào)色板，過濾器配置，軸，面板，交互機(jī)制）如何縮放以適應(yīng)各種用戶需求，屏幕尺寸和數(shù)據(jù)類型（從單個數(shù)據(jù)點(diǎn)到大型多元數(shù)據(jù)集）。考慮各種各樣的可能性，而不是一成不變的配置。應(yīng)用交互式方法以最大程度地減少復(fù)雜性，例如逐步提供詳細(xì)信息（逐步公開），讓用戶更改視角以及鏈接不同的視圖以獲取更深刻的見解。

（六）使用視覺屬性傳達(dá)層次結(jié)構(gòu)，提供結(jié)構(gòu)并提高一致性，體驗(yàn)應(yīng)該直觀且易于使用。

一致性提高了熟悉度。在圖形處理（形狀，顏色，圖標(biāo)，版式）和交互模式（選擇，過濾，懸停狀態(tài)，展開）中發(fā)展統(tǒng)一性。動作應(yīng)該受到控制，在保持響應(yīng)能力的同時，給用戶帶來穩(wěn)定和視覺層次，軸的方向以及顯示的數(shù)據(jù)。保持強(qiáng)大的上下文線索，因此無論用戶在圖表中何處導(dǎo)航，他們都知道如何返回。

五、總結(jié)

如果不能量化，就不能理解，如果不能理解，就不能控制。

在信息技術(shù)時代，面對如何有效吸收、理解和應(yīng)用信息的挑戰(zhàn)，通過圖表在數(shù)據(jù)中提煉信息、發(fā)現(xiàn)知識，不僅僅是一種工具，更是一種基于數(shù)據(jù)分析的思維方式和工作方式。通過圖表設(shè)計，在數(shù)據(jù)時代更清晰地為用戶傳達(dá)背后信息，協(xié)助用戶發(fā)現(xiàn)數(shù)據(jù)背后的隱藏聯(lián)系，進(jìn)而讓用戶更好地理解信息，其意義和價值有待進(jìn)一步的挖掘。

參考資料：

[1]張文霖，劉夏璐，狄松.誰說菜鳥不會數(shù)據(jù)分析[M].北京：工業(yè)電子出版社，2016.06

[2]陳儀，劉敬慧.以用戶為中心的交互隱喻設(shè)計研究[J].科技經(jīng)濟(jì)導(dǎo)刊.2020，28（04）

[3]顧燕.淺談圖表的設(shè)計表現(xiàn)方式[J].高等教育在線.1006-3315（2009）08-117-003