數據可視化可以將數據分析與圖形設計相結合，比如，利用可視化圖表，我們可以清楚地傳達復雜的數據，同時我們也能更好地理解和挖掘數據價值。那么，圖表設計可以參照哪些基本原則和設計方法？一起來看看本文的分享。

數據可視化的作用

數據無處不在，幫助我們更好地做出決策。然而數據不能獨立存在，為了使數據有用，我們必須理解它。數據的質量很大程度上依賴于其表達方式，對數據分析結果的可視化呈現可以幫助我們更好地理解和挖掘數據的價值。數據可視化的本質是視覺對話，數據可視化將數據分析與圖形設計相結合，數據是可視化設計的依據，可視化為數據的表達提供了靈活性。利用數據可視化可以更好更高效地獲取有價值的信息。

精心設計的可視化圖表可以清楚地傳達復雜的數據，圖表為抽象的數據提供上下文，讓我們直觀地掌握數據的模式、識別數據的趨勢、進行數據比較和追蹤數據變化。

但在日常工作中，有時候會發現設計師把過多精力花在了讓圖表看上去“好看”，而忽視了這樣的數據究竟適合用哪些圖表來表達，導致沒達到想要的效果。我們結合了平時工作中的的經驗和對圖表設計的理解，寫出這篇文章，希望能對大家有所幫助。

圖表的設計方法

圖表設計的一般以目標導向，根據要傳達的信息用途明確目標，從而選擇需要使用的圖表類型。制定設計方案之前，需要先明確需要符合的原則，避免錯誤的圖表設計造成信息傳達失真。

一、開始設計之前，如何選擇要用什么類型的圖表？——圖表的類型由數據目標決定

1. 理解數據

首先需要確定你的核心內容，圖表可以提供視覺重心，在一個頁面中有許多內容可以被可視化，但只有最重要的內容才應該制成圖表，圖表會將用戶注意力引到你希望他們理解的信息上。接下來考慮你想傳達的數據的關系和數據的維度是什么？數據的關系有比較、趨勢、分布、組成、流水線等等

2. 分析用戶

用戶需要什么樣的體驗，圖表如何支持用戶達成目標？首先可以關注誰是你的受眾，他們更喜歡如何消費信息？不同的用戶角色對于數據的關注點也會不同，通過分析用戶的特征、使用場景、以及用戶使用這組數據的目的，可以進一步幫助明確圖表設計的目標。

比如下表是一組簡單的數據，從數據關系和數據維度來看，可以比較同一年里不同產品的銷售量，或者看同一年里不同產品的銷售量占比；也可以看每個產品的近幾年的銷售量增長趨勢變化。對于老板來說，可能傾向于看總的趨勢變化，對于產品經理來說，可能更側重于自己產品和其他產品的銷量對比和本產品的銷量變化。

3. 選擇圖表類型

理解數據和分析用戶后，進一步明確了圖表需要展示什么信息，選擇能清楚展示對數據的見解的圖表。使用錯誤的圖表類型可能會歪曲數據、混淆甚至誤導你的用戶。

一般我們根據需要表達的數據關系來選擇圖表類型：

① 比較

比較圖表用于顯示數據的差異和相似之處，它們包括條形、柱形圖、折線圖。

條形圖和柱形圖：

條形圖是用于比較分析的主力，人類的視覺可以快速辨別高度和長度的差異，所以它是呈現簡單的有序數據的好選擇。

堆積條形圖和柱形圖：

堆積條形圖非常適合顯示更復雜的類別和子類別之間的組關系和價值差異，或用于對比同一個分組數據內不同分類的占比。堆積柱形圖還可用于顯示有序數據子集中的組關系。一般分組較多時適合使用堆積條形圖，分組較少時適合使用堆積柱形圖。

折線圖：

折線圖用于展示連續數值（例如時間）或者有序數據的分類的變化趨勢，非常適合表示一個或多個值隨時間的變化，尤其是趨勢數據。繪制折線圖在X軸的投影面積可以更直觀的展示數值大小。

② 分布

關系圖，例如散點圖、氣泡圖、雷達圖，用于顯示數據中值之間的關系和相關性。

散點圖：

散點圖可用于顯示更復雜的數據關系，包括多個變量的相關性。與點圖一樣，點的顏色強度可以傳達額外的信息。

氣泡圖：

氣泡圖使用顏色密度和氣泡大小來顯示兩個變量的濃度模式。

雷達圖：

雷達圖是以從同一點開始的軸上表示的三個或更多個定量變量的二維圖表的形式顯示多變量數據的圖形方法，專門用來進行多指標體系的分布和比較分析，可以將多維數據投影到平面上，實現多維數據的可視化。

③ 構成

用于顯示相對值，或表示一個值的相對構成，包括餅圖、環形圖、樹狀圖。

餅圖和環形圖：

餅圖在數據集中映射相對值或值的相對構成，突出顯示相對值（例如數據的分類和占比情況）而不是絕對值。也可使用環形在中間顯示更多圖表說明。

樹狀圖：

樹形圖使用嵌套的矩形顯示分層數據的組成，可以清晰地顯示層的結構，通過矩形面積、排列的不同來展示層的內部占比關系。

④ 流轉

流水線圖顯示了流程的各個階段，以及這些階段之間的流程。它們包括漏斗圖、瀑布圖、折紙圖和?；鶊D。

漏斗圖：

漏斗圖用于表示銷售或營銷過程中的各個階段，每個階段都有一個值。

瀑布圖：

瀑布圖用于顯示流程各個階段的起始值、中間值和最終值。適合用作反映數值的增減，比如一年中各月營收、用戶數等指標的變化。

折紙圖：

折紙圖表使用單個度量和分組顯示數據中的彈出值。您還可以使用它們來顯示值不按順序遞減的階段的可變性。它們可以很好地突出顯示相對于某個類別中的其他值表現良好的值。

?；鶊D：

?；鶊D顯示值如何在兩個分組之間流動，展示給定指標在從一個組移動到另一個組時是如何分布的。?；鶊D可以顯示負數并計算它們對總體總數的影響。

其他：信息圖形（Infographic）

除了常規的功能型圖表之外，還有一種表現型的數據可視化設計類型，那就是信息圖形。

信息圖形是一種藝術化的數據可視化設計，主要應用于需要清楚解釋或表達復雜信息的場景，如數據統計、新聞事件、人物關系、歷史脈絡、原理科普或教程指引等。其目的是通過藝術、易懂的表現形式傳遞復雜的信息或概念。信息圖形通常為定制設計，需要設計者具備理解、提煉和美化內容的能力，以及一定的設計專業技能。

二、圖表設計過程中，有一些常見的原則需要設計師考慮

1. 準確性

優先考慮數據的準確性、清晰度和完整性，以不會扭曲信息的方式呈現信息。盡可能使用熟悉的表格，降低理解門檻（比如柱狀圖、折線圖）。

使用過多顏色會破壞將數字與顏色相關聯的目的。有研究表明，大多數人的短期記憶一次最多可以保留 5 條信息，所以建議顏色數量的最佳最大值為5條。

2. 一致性

用統一的表達來描述圖表，比如始終如一地將顏色與數據屬性相匹配。如果在一個圖表中使用藍色表示銷售利潤率，則在所有其他圖表中都使用它來表示該值。

3. 有幫助的

使用上下文和可簡單觸達的交互來幫助用戶進行數據導航。比如通過標題和完整句子來解釋數據。當使用用戶不熟悉的新奇圖表時，需要額外解釋幫助理解（一般新奇圖表用來作為應用的核心，而不是補充描述，突出顯示一個新奇圖表會激發用戶去探索和理解它；而用來輔助描述的圖表更適合用用戶熟悉的形式，他們的關注度比新奇圖表低）。

4. 提高可擴展性

針對不同設備尺寸調整可視化，同時預測用戶對數據深度、復雜性和模式的需求。以下有3種常見的提高擴展性的處理方式：

① 引入差異：圖表之間的差異是某事發生改變的信號，當數據屬性發生更改時，適合用不同的顏色；當數據維度發生更改時，更適合改變圖表的類型。

② 整合宏觀和微觀：使用圖表來表達數據時，宏觀的描述整個數據集，比如總值或平均值；微觀的描述關注單個數據點，比如最新，最大，最小。

③ 用從小圖表到大圖表的交互變化，逐步呈現圖表的層次性：小圖表往往是靜態的且一般不會單獨存在，常常作為另一個視圖中更大的圖表的預覽，更大的圖表有著更豐富的交互性。在同一圖表的兩個版本之間創建交互連接時，通過保留數值、背景、顏色狀態來保持連續性，圖表在變化過程中最好保持形狀。前一個視圖中任何明顯的元素在另一個視圖里表示不同的內容可能會令用戶感到失望或迷惑。

三、圖表設計

1. 圖表基本構成

1）圖表標題

使圖表易于理解和解釋，使用說明或文本提供數據背景，比如標題、副標題、圖例、提示信息等。描述需要位于圖表附近，可以通過總結圖表的主要結論來更好的說明內容。

2）軸線

軸線為標記提供框架，為值提供參考。橫軸表示時間，縱軸表示上下限選擇。網格線提供估計值，設計時要調整密度，以免分散注意力。小圖表不需要網格線，了解其模式即可；在大圖表中加入網格線有助于更精確的分析。

3）圖形

表示數據項的可視化元素，比如柱狀圖中的柱，折線圖的直線，散點圖的點。圖形是圖表的視覺構建基礎，需要針對目標和數據進行設計，考慮真實數據的情況和各種極限情況。

2. 圖表顏色

配色對圖表的美觀度也起著決定性的作用，恰當的色彩搭配，能夠使整個圖表的呈現更加清晰、整潔、準確，下面講解一下關于圖表的顏色設計。

1）色相/飽和度/明度

色相本身沒有明顯的順序性，一般不用于表達圖表數據量的高低，通常用于區分數據的類別。例如用柱狀圖展示同一維度的數據時，應該盡量用單色。確實需要突出某一個數據的時候，可以用一個較明顯的顏色用以區別其他數據。

飽和度代表色彩的鮮艷程度，飽和度越高、顏色越鮮艷，容易給人年輕活潑的感覺；反之飽和度越低，容易給人成熟、穩重的感覺。

明度代表色彩的亮度，不同的顏色具有不同的明度，例如同樣飽和度明度下黃色就比藍色的更亮，所以在同樣情況下，可以把亮色的明度適當調低以保證整體配色的和諧統一。

因此在選擇圖表配色時要注意飽和度明度的適中，避免過高或過低，過高容易造成廉價感，過低會導致信息無法有效區分。

2）配色方法

使用常見色環搭配原理，包括鄰近色、對比色、互補色等。

• 鄰近色：弱對比，選擇相鄰的顏色進行搭配，可以打造出一致而連貫的效果。
• 互補色：強對比，選擇對角線的顏色，搭配在一起可以打造活力四射的強烈視覺效果。
• 對比色：強對比，采用等邊三角上的三種顏色進行搭配，制造強烈的對比效果。

連續漸變：

用于表達同一分類中的數值大小、梯度的變化，使用連續漸變可以強調數據內在的變化邏輯，使圖表閱讀起來更加有效。

從品牌Logo延展配色：

有時也會在一些品牌內容上使用圖表，使用品牌配色有助于提升圖表的美感、可讀性和品牌識別度，同時有助于保持企業形象的統一性。

如果品牌暫時沒有配色定義，那么我們可以從Logo出發進行延展配色，可以借助一些在線工具輕松提取配色，例如Muzli Colors、Coolors等。

從素材圖發散配色：

有時候缺少靈感或配色來源時也可以考慮從其他地方汲取，不妨大膽的從其他領域進行借鑒，例如一些好看的素材圖或者海報等。

圖表配色的方法雖然相對簡單易學，但關鍵在于設計者需要根據圖表要傳達的信息、應用場景或品牌表達等因素，有策略地選擇配色方案。此外，還要確保所選的配色方案與畫面中的其他元素和諧共存。因此，并沒有統一的配色標準，這很大程度上考驗了設計者的審美觀和整體把控能力。

3. 數據墨水比（Data-Ink-Ratio）

數據墨水比是愛德華·塔夫特（Edward Tufte）在其出版的《The Visual Display of Quantitative Data》一書中提出的一個概念：描述數據的墨水量除以所有圖形使用的墨水量的比例。

可以簡單理解為設計圖表時，傳達核心數據信息元素越多，數據墨水比就越高、效果越好。而低墨水比說明圖表設計中有太多核心數據信息之外的干擾元素，換句話說也就是圖表信息傳達的“信噪比”。

但是設計圖表時追求數據墨水比越高不意味著要過度簡化信息，過度簡化反而會導致信息缺失，而是應該是在合理范圍內達到平衡。這里可以考慮幾個要點：

• 以數據展示傳遞為核心，確保圖表能夠有效傳遞關鍵信息；
• 去除多余裝飾和跟傳遞關鍵信息無關的的元素；
• 圍繞關鍵信息再適當補充一些輔助信息。

四、常用圖表設計工具

最后跟大家介紹一些好用的數據可視化工具，大部分是在線的無需安裝即可使用~

1. Flourish

Flourish是一款在線的數據可視化平臺，適合各行各業，它可以幫助用戶輕松地將數據轉化為有趣和有說服力的圖表，提高數據分析和溝通的效率和質量。比如快速地創建各種類型的圖表、地圖、儀表盤等，而無需編程或安裝任何軟件。

Flourish的特點有：

• 提供了豐富的模板庫，涵蓋了折線圖、柱狀圖、餅圖、散點圖、樹圖、?；鶊D、地圖、時間軸等多種常用的數據可視化形式。
• 支持了多種數據源，用戶可以直接上傳Excel、CSV等格式的文件，或者通過Google Sheets、SQL等方式連接數據，也可以手動輸入或編輯數據。
• 具有強大的自定義功能，用戶可以通過簡單的拖拽和點擊操作，調整圖表的樣式、顏色、字體、動畫等細節，也可以添加標題、注釋、圖例等元素，使圖表更加完善和美觀。
• 支持了多種分享和導出方式，用戶可以通過鏈接或嵌入代碼將圖表分享到網站、社交媒體等平臺，也可以導出為圖片、視頻或PDF等格式，方便保存和傳播。

2. Echart

Echart是一個開源的數據可視化工具，它可以幫助用戶創建各種類型的圖表，如折線圖、柱狀圖、餅圖、地圖等，來展示數據的分布、趨勢和關系。

Echart的優點有：

• 提供豐富的配置項，如顏色、字體、動畫、交互等，讓用戶可以自定義圖表的樣式和功能。
• 兼容多種瀏覽器和設備，如Chrome、Firefox、Safari、IE8+等，以及移動端和PC端，保證圖表的顯示效果和性能。
• 基于HTML5 Canvas繪制，支持高清屏幕和大數據量的渲染，提高圖表的清晰度和流暢度。
• 遵循Apache 2.0協議，允許用戶免費使用和修改源代碼，促進開源社區的發展。

3. TableauPublic

Tableau Public是一款免費的數據可視化工具，可以幫助用戶創建和分享交互式的數據圖表、儀表盤和故事。用戶可以通過拖拽的方式選擇數據字段，選擇不同的圖表類型，如柱狀圖、折線圖、地圖等，以及調整顏色、大小、標簽等視覺元素，來制作出各種各樣的數據可視化效果。Tableau Public還支持用戶在網頁上發布和嵌入他們的作品，讓其他人可以在線查看和交互。

4. Informationisbeautiful

Informationisbeautiful是一個可以創建精美、有趣和有洞察力的圖表和圖形的在線平臺。它可以使用各種模板和選項來定制可視化。通過選擇不同的顏色、字體、圖例、標簽等，來讓圖表更加吸引人和易于理解。也可以添加注釋、鏈接、引用等，來增加圖表的可信度和參考價值。它還可以分享和導出作品，以便在網站、社交媒體、報告或演示中使用。支持不同的格式，如PNG、SVG、PDF等，來適應不同的場合和需求。

5. D3js

D3js是一個用于創建動態、交互式和基于數據的圖形的JavaScript庫。它可以讓開發者使用HTML、SVG和CSS來制作各種類型的數據可視化，例如折線圖、柱狀圖、餅圖、地圖、樹狀圖等。D3js的優勢在于它提供了強大的數據綁定機制，可以讓數據和圖形元素之間建立映射關系，從而實現數據驅動的視覺效果。

D3js還支持多種數據格式，如JSON、CSV、XML等，以及多種交互方式，如縮放、拖拽、過濾等。D3js是一個開源的項目，有著龐大的社區和豐富的資源，可以幫助開發者快速學習和使用這個工具。

6. 配色參考工具

• Muzli Colors：在線快速生成多種配色，并支持預覽和下載自定義UI工具包。
• Brand Colors：最大的知名官方品牌配色板集合。
• Coolors：免費的配色板生成器，支持圖片上傳吸取顏色。
• Flat UI Colors：多款精心挑選的設計師配色板推薦。

結語

數據可視化設計是一門結合了藝術和科學的學科，它能夠幫助我們更好地理解和傳達數據的含義和價值。在本文中，我們介紹了圖表設計的基本原則和設計方法，以及一些常見的圖表類型和工具。我們希望通過這篇文章，能夠激發讀者對數據可視化設計的興趣和熱情，能夠在自己的工作和生活中運用數據可視化設計，創造出更有吸引力和影響力的數據展示。

參考：

• https://carbondesignsystem.com/data-visualization/chart-types/
• https://m2.material.io/design/communication/data-visualization.html#principles
• https://www.lightningdesignsystem.com/guidelines/charts/
• https://developer.apple.com/videos/play/wwdc2022/110340
• https://developer.apple.com/videos/play/wwdc2022/110342/