數(shù)據(jù)可視化主要就是把數(shù)據(jù)用圖形的方式表現(xiàn)出來，讓人們看著更舒服，更快，更便捷，不再需要花費大量的時間去慢慢的琢磨數(shù)據(jù)之間的關(guān)系和起伏，這些東西我們?nèi)慷加脠D形來表現(xiàn)出來，讓人一目了然。
今天文章當中主要內(nèi)容就是數(shù)據(jù)可視化的表現(xiàn)，告訴你如何正確的表現(xiàn)，什么情況下用那種表現(xiàn)方式，哪一種表現(xiàn)方式是最好的，等等。里面也穿插了一些數(shù)據(jù)可視化設(shè)計的呈現(xiàn)效果。
好了，抓緊時間看一看吧。
原則
數(shù)據(jù)可視化是一種以圖形形式描繪密集和復雜信息的通信形式。由此產(chǎn)生的視覺效果旨在使比較數(shù)據(jù)并使用它來講述故事變得容易——這兩者都可以幫助用戶做出決策。
數(shù)據(jù)可視化可以表達不同類型和大小的數(shù)據(jù)：從幾個數(shù)據(jù)點到大型多元數(shù)據(jù)集。
優(yōu)先考慮數(shù)據(jù)的準確性、清晰度和完整性，以不扭曲信息的方式呈現(xiàn)信息。
幫助用戶通過強調(diào)探索和比較的上下文和可供性來導航數(shù)據(jù)。
針對不同的設(shè)備尺寸調(diào)整可視化，同時預測用戶對數(shù)據(jù)深度、復雜性和模態(tài)的需求。
類型
數(shù)據(jù)可視化可以用不同的形式表達。圖表是表達數(shù)據(jù)的常用方式，因為它們描繪了不同的數(shù)據(jù)種類并允許進行數(shù)據(jù)比較。
你使用的圖表類型主要取決于兩件事：你想要傳達的數(shù)據(jù)，以及你想要傳達的關(guān)于該數(shù)據(jù)的內(nèi)容。這些指南提供了對各種不同類型的圖表及其用例的描述。
圖表類型
隨時間變化圖表顯示一段時間內(nèi)的數(shù)據(jù)，例如跨多個類別的趨勢或比較。
常見用例包括：
股價表現(xiàn)
健康統(tǒng)計
年表
隨時間變化的圖表包括：
類別比較圖表比較多個不同類別之間的數(shù)據(jù)。
用例包括：
不同國家的收入
熱門場地時間
團隊分配
類別比較圖包括：
排名圖表顯示項目在有序列表中的位置。
用例包括：
選舉結(jié)果
性能統(tǒng)計
部分到整體圖表顯示部分元素如何加總。
用例包括：
產(chǎn)品類別的合并收入
預算
部分到整體圖表包括：
相關(guān)圖顯示兩個或多個變量之間的相關(guān)性。
用例包括：
收入和預期壽命
相關(guān)圖包括：
分布圖顯示每個值在數(shù)據(jù)集中出現(xiàn)的頻率。
用例包括：
人口分布
收入分配
流程圖顯示數(shù)據(jù)在多個狀態(tài)之間的移動。
用例包括：
資金轉(zhuǎn)賬
票數(shù)和選舉結(jié)果
流程圖包括：
關(guān)系圖顯示多個項目如何相互關(guān)聯(lián)。
用例包括
社交網(wǎng)絡(luò)
詞表
關(guān)系圖包括：
1. 網(wǎng)絡(luò)圖
2. 維恩圖
3. 弦圖
4. 旭日圖
選擇圖表
多種類型的圖表適用于描述數(shù)據(jù)。下面的指南提供了有關(guān)如何選擇一個圖表而不是另一個圖表的見解。
可以使用時間序列圖表來表示隨時間的變化，該圖表是按時間順序表示數(shù)據(jù)點的圖表。表達時間變化的圖標包括：折線圖、條形圖和面積圖。
| 類型的圖表 | 用法 | 基線值 * | 時間序列的數(shù)量 | 數(shù)據(jù)類型 |
|---|---|---|---|---|
| 折線圖 | 表達數(shù)據(jù)的微小變化 | 任何值 | 任何時間序列（適用于具有 8 個或更多時間序列的圖表） | 連續(xù) |
| 條形圖 | 表達更大的數(shù)據(jù)變化，單個數(shù)據(jù)點與整體、比較和排名的關(guān)系 | 零 | 4 個或更少 | 離散或分類 |
| 面積圖 | 總結(jié)數(shù)據(jù)集之間的關(guān)系，單個數(shù)據(jù)點如何與整體相關(guān) | 零（當 有多個系列時） | 8 個或更少 | 連續(xù) |
* 基線值是 y 軸上的起始值。
條形圖和餅圖
條形圖和餅圖均可用于顯示比例，它表示與總值相比的部分值。
條形圖使用公共基線通過條的長度表示數(shù)量
餅圖使用圓內(nèi)的弧線或角度表示整體的一部分
條形圖、折線圖和堆積面積圖比餅圖更能有效地顯示隨時間的變化。由于所有這三個圖表共享可能值的相同基線，因此更容易根據(jù)條形長度比較值差異。
按照下面的方式去做
使用條形圖顯示隨時間的變化或類別之間的差異。
這個時候下面的方式就不可取了
不要使用多個餅圖來顯示隨時間的變化。很難比較每塊餡餅的大小差異。
面積圖有多種類型，包括堆積面積圖和重疊面積圖：
堆疊面積圖顯示多個時間序列（在同一時間段內(nèi)）堆疊在一起
重疊面積圖顯示多個時間序列（在同一時間段內(nèi)）相互重疊
不建議使用超過兩個時間序列的重疊面積圖，因為這樣做會掩蓋數(shù)據(jù)。相反，使用堆積面積圖來比較一個時間間隔內(nèi)的多個值（時間在水平軸上表示）。
重疊堆積一定要按照下圖的方式去做
使用堆積面積圖來表示多個時間序列并保持良好的易讀性。
下面的方式不可用
不要使用重疊面積圖，因為它會掩蓋數(shù)據(jù)值并降低可讀性。
風格
數(shù)據(jù)可視化使用自定義樣式和形狀，以適合用戶需求和上下文的方式使數(shù)據(jù)更易于一目了然地理解。
圖表可以從自定義以下內(nèi)容中受益：
圖形元素
排版
圖像學
軸和標簽
圖例和注釋
視覺編碼是將數(shù)據(jù)轉(zhuǎn)換為視覺形式的過程。獨特的圖形屬性可以應用于定量數(shù)據(jù)（例如溫度、價格或速度）和定性數(shù)據(jù)（例如類別、風味或表達式）。
這些屬性包括：
形狀
顏色
尺寸
區(qū)域
體積
長度
角度
位置
方向
密度
表達多個屬性
多個視覺處理可以應用于數(shù)據(jù)點的多個方面。例如，條形顏色可以表示一個類別，而條形的長度可以表示一個值（如人口規(guī)模）。
形狀可用于表示定性數(shù)據(jù)。在此圖表中，每個類別都由特定形狀（圓形、正方形和三角形）表示，這樣可以輕松比較特定范圍內(nèi)的數(shù)據(jù)或與其他類別的數(shù)據(jù)。
形狀
圖表可以使用形狀以多種方式顯示數(shù)據(jù)。形狀可以設(shè)計為俏皮和曲線，或精確和高保真，以及介于兩者之間的其他方式。
圖表可以表示不同精度級別的數(shù)據(jù)。用于近距離探索的數(shù)據(jù)應由適合交互的形狀表示（在觸摸目標大小和相關(guān)可供性方面）。而旨在表達總體想法或趨勢的數(shù)據(jù)可以使用細節(jié)較少的形狀。
柱狀圖按照下面的方式去做
此圖表中的條形具有微妙的圓角，確保條形頂部精確測量條形的長度。
不要把定不做成圓角，如下圖
不要使用難以閱讀圖表的形狀，例如頂部邊緣不精確的條形。
顏色可用于通過四種主要方式區(qū)分圖表數(shù)據(jù)：
區(qū)分類別
代表數(shù)量
突出顯示特定數(shù)據(jù)
表達意義
顏色可以突出一個焦點區(qū)域，當它被謹慎使用時。不建議使用大量的顏色高光，因為它們會分散和阻礙用戶的注意力。
按照下圖的方式去做
使用高光和中性色的組合來提供對比和強調(diào)。
不要做成下圖這樣
單個圖表中的許多顏色可能會阻礙焦點。
提示是用符號強化
使用其他視覺提示（如圖標）強化圖表顏色的含義。
如果只用數(shù)字不是很明顯
不要單獨使用顏色來表示含義。
為了適應看不到顏色差異的用戶，你可以使用其他方法來強調(diào)數(shù)據(jù)，例如高對比度陰影、形狀或紋理。
將文本標簽應用于數(shù)據(jù)還有助于闡明其含義，同時消除對圖例的需求。關(guān)于配色的文章全部都在下面已經(jīng)給你準備好了
線
圖表線條可以表達有關(guān)數(shù)據(jù)的質(zhì)量，例如層次結(jié)構(gòu)、突出顯示和比較。可以通過不同方式設(shè)置線條樣式，例如使用破折號或不同的不透明度。
線條可以應用于特定元素，包括：
注釋
預測要素
比較工具
置信區(qū)間
異常
按照下圖方式去做
改變線條的紋理以表示不同的數(shù)據(jù)類型。
不要這樣做，如下圖
不要使用不同的顏色來顯示同一數(shù)據(jù)類別的周期性變化。
文本可用于標記不同的圖表元素，包括：
圖表標題
數(shù)據(jù)標簽
軸標簽
傳奇
具有最高層次結(jié)構(gòu)的文本通常是圖表標題，軸標簽和圖例具有最低層次結(jié)構(gòu)。
| 類別 | 字體 | 字體 | 尺寸 |
|---|---|---|---|
| 1.圖表標題 | Roboto | 常規(guī) | 18pt |
| 圖表副標題 | Roboto | 常規(guī) | 14pt |
| 2. 數(shù)據(jù)標簽 | Roboto | 常規(guī) | 22pt |
| 子標簽 | Roboto | 常規(guī) | 14pt |
| 3. 軸標簽 | Roboto | 常規(guī) | 12pt |
| 4.圖例標簽 | Roboto | 常規(guī) | 12pt |
標題和不同的字體粗細可以傳達哪些內(nèi)容比層次結(jié)構(gòu)中的其他內(nèi)容更重要（或更不重要）。但是，應謹慎使用這些處理方法，并使用數(shù)量有限的排版樣式。
按照下圖方式做
僅用于一兩個關(guān)鍵元素的粗體營造出平衡的設(shè)計。
不要做成這樣如下圖
在太多元素上使用粗體會使識別重要元素變得更加困難。
圖像學
圖標可以表示圖表中不同類型的數(shù)據(jù)，并提高圖表的整體可用性。
圖像學可用于：
用于區(qū)分組或類別的分類數(shù)據(jù)
UI 控件和操作，例如過濾、縮放、保存和下載
狀態(tài)，例如錯誤、無數(shù)據(jù)、已完成狀態(tài)和危險
在圖表中放置圖標時，建議使用普遍可識別的符號，尤其是在表示操作或狀態(tài)時，例如：保存、下載、完成、錯誤和危險。
按照下圖方式去做
使用標簽和圖標來清楚地表示關(guān)鍵信息。
不要這樣做如下圖
避免僅使用圖標和符號來表示重要信息。
圖標在傳達意義時補充顏色。
帶標簽的軸或多個軸表示所顯示數(shù)據(jù)的比例和范圍。例如，折線圖顯示沿水平和垂直標記軸的一系列值。
條形圖應始終從 x 軸基線值為零開始。
考慮完全刪除軸以將數(shù)據(jù)作為焦點。你可以將值直接放置在其相應的圖表元素上。
條形圖應從零基線（y 軸上的起始值）開始。從不為零的基線開始可能會導致數(shù)據(jù)被錯誤地感知。
按照下圖方式去做
從零基線開始的條形圖
不要做成這樣，如下圖
不要從零以外的值開始基線。此基線從 20% 開始，使條形差異看起來更加引人注目。
標簽使用應反映圖表中最重要的數(shù)據(jù)洞察。應根據(jù)需要使用軸標簽，并在整個 UI 中以一致的方式使用。他們的存在不應妨礙閱讀圖表。
按照下圖方式去做
通過使用平衡數(shù)量的軸標簽來支持易讀性。
不要這樣做，如下圖
不要用大量軸標簽使圖表過載。
文本標簽應水平放置在圖表上，以便于閱讀。
文本標簽不應：
被輪換
垂直堆疊
按照下圖方式去做
在條形圖上水平定位文本，如果需要，旋轉(zhuǎn)條形以騰出空間。
盡量不要做成這樣，如下圖
不要旋轉(zhuǎn)條形標簽，因為這會使它們難以閱讀。
圖例和注釋描述圖表的信息。注釋應突出顯示數(shù)據(jù)點、數(shù)據(jù)異常值和任何值得注意的內(nèi)容。
在桌面上，建議在圖表下方放置圖例。在移動設(shè)備上，將圖例放置在圖表上方以使其在交互過程中可見。
圖表元素可以在簡單的圖表中直接標注。但是，密集的圖表（或較大圖表組的一部分）可以在圖例中顯示標簽。
使用直接標記的折線圖
使用圖例的折線圖
小顯示器
可穿戴設(shè)備（或其他小屏幕）上顯示的圖表應該是移動或桌面圖表的簡化版本。
按照下圖方式去做
在圖表上標注關(guān)鍵點以描述數(shù)據(jù)。在此示例中，顯示了最高和最低數(shù)據(jù)值。
盡量不要做成這樣，如下圖
不要將關(guān)鍵數(shù)據(jù)點放在屏幕外，因為它需要用戶滾動才能看到它們。
閾值線為用戶提供有關(guān)所顯示數(shù)據(jù)的上下文。
行為
圖表提供了交互模式，讓用戶可以控制顯示的數(shù)據(jù)。這些模式讓用戶可以專注于圖表的特定值或范圍。
以下推薦的交互模式、樣式和效果（如觸覺反饋）可以提高用戶對圖表數(shù)據(jù)的理解：
漸進式披露為揭示細節(jié)提供了一條清晰的途徑，可按需訪問。
直接操作允許用戶直接對 UI 元素進行操作，最大限度地減少屏幕上所需的操作數(shù)量，包括：縮放和平移、分頁和數(shù)據(jù)控件。
改變視角使一種設(shè)計能夠適用于不同的用戶和數(shù)據(jù)類型，例如數(shù)據(jù)控件和運動。
使用漸進式披露顯示圖表詳細信息，允許用戶根據(jù)需要查看特定數(shù)據(jù)點。
顯示詳細信息（桌面）
在桌面上，懸停狀態(tài)可以顯示更詳細的數(shù)據(jù)。
顯示詳細信息（移動設(shè)備）
在移動設(shè)備上，觸摸并按住手勢會顯示位于圖表上方的工具提示。
縮放和平移
縮放和平移是流行的圖表交互，會影響用戶研究數(shù)據(jù)和探索圖表 UI 的密切程度。
縮放
縮放會改變 UI 是從近處還是從遠處顯示。設(shè)備類型決定了縮放的執(zhí)行方式。
在桌面上，通過單擊和拖動或滾動進行縮放
在移動設(shè)備上，使用捏合進行縮放
當縮放不是主要操作時，可以通過單擊和拖動（在桌面上）或雙擊（在移動設(shè)備上）來實現(xiàn)。
平移允許用戶探索擴展到屏幕之外的 UI。它應該以對顯示的數(shù)據(jù)有意義的方式進行約束。例如，如果圖表的一個維度比另一個維度更重要，則平移方向可以僅限于該方向。
平移的行為通常與縮放配對。
在移動設(shè)備上，平移通常通過手勢實現(xiàn)，例如單指滑動。
在桌面上縮放
在桌面上平移
在移動設(shè)備上，分頁是一種常見模式，允許用戶通過向右或向左滑動來查看上一個或下一個圖表。
在移動設(shè)備上，用戶可以向右滑動查看前一天。
數(shù)據(jù)控制
可以使用切換控件、選項卡和下拉菜單過濾或更改數(shù)據(jù)。這些控件還可以顯示指標，而用戶可以調(diào)整控件。
切換控件、選項卡和下拉菜單可以更改或過濾數(shù)據(jù)。
運動
可以增強和加強數(shù)據(jù)之間的關(guān)系以及用戶如何與之交互。運動應該有目的地使用（而不是裝飾性的），表達不同狀態(tài)和空間之間的聯(lián)系。
動作應該感覺合乎邏輯、流暢且反應靈敏，不會妨礙用戶的旅程。
在此示例中，數(shù)據(jù)在按天顯示和按周顯示之間進行動畫處理。轉(zhuǎn)換期間不會顯示所選日期范圍之外的數(shù)據(jù)，從而降低了復雜性。
動畫顯示了兩個不同的圖表是如何相關(guān)的。
空狀態(tài)
空的圖形和圖表可以顯示建議數(shù)據(jù)可用時的預期內(nèi)容的內(nèi)容。
在適用的情況下，可以顯示角色動畫以提供愉悅和鼓勵。
特色動畫增強了原本空白的圖形。
儀表盤
數(shù)據(jù)可視化可以跨一系列多個圖表顯示在稱為儀表板的UI 中。多個單獨的圖表有時可以更好地傳達一個故事，而不是一個復雜的圖表。
儀表盤設(shè)計
儀表板的用途應該反映在其布局、樣式和交互模式中。它的設(shè)計應該適合它的使用方式，無論它是用于進行演示還是深入探索數(shù)據(jù)的工具。
儀表板應該：
優(yōu)先處理最重要的信息（使用布局）
顯示根據(jù)層級排列信息優(yōu)先級的焦點（使用顏色、位置、大小和視覺權(quán)重）
應根據(jù)數(shù)據(jù)提出的問題對信息進行優(yōu)先排序和安排。在此示例操作儀表板中，考慮了以下用戶問題：
1. 需要注意的問題
2. 問題發(fā)生的時間
3.問題發(fā)生的位置
4. 受問題影響的其他變量
分析儀表板
分析儀表板使用戶能夠探索多組數(shù)據(jù)并發(fā)現(xiàn)趨勢。通常這些儀表板包括復雜的圖表，可以發(fā)現(xiàn)數(shù)據(jù)洞察力。
用例包括：
隨著時間的推移突出趨勢
回答“為什么”和“假設(shè)”的問題
預測
創(chuàng)建深度報告
分析儀表板示例：
隨著時間的推移跟蹤廣告活動的表現(xiàn)
跟蹤產(chǎn)品在整個生命周期中產(chǎn)生的銷售額和收入
顯示城市人口隨時間變化的趨勢
隨著時間的推移跟蹤氣候數(shù)據(jù)
顯示氣候數(shù)據(jù)的分析儀表板
操作儀表板
操作儀表板旨在回答一組預定義的問題。它們通常用于完成與監(jiān)控相關(guān)的任務。
在大多數(shù)情況下，這些類型的儀表板將當前信息排列在一組簡單的圖表中。
用例包括：
根據(jù)目標跟蹤當前進度
實時跟蹤系統(tǒng)性能
操作儀表板示例：
跟蹤呼叫中心活動，例如呼叫量、等待時間、呼叫時長或呼叫類型
監(jiān)控在云上運行的應用程序的運行狀況。
顯示股市表現(xiàn)
監(jiān)控賽車的遙測數(shù)據(jù)
操作儀表板顯示設(shè)備存儲指標
演示儀表板提供有關(guān)感興趣主題的精選快照。
這些儀表板通常包括一些小圖表或記分卡，帶有動態(tài)標題，解釋每個支持圖表中提供的趨勢和見解。
用例包括：
提供關(guān)鍵績效指標的概述
創(chuàng)建高級別的執(zhí)行摘要
演示儀表板示例：
提供投資賬戶表現(xiàn)概覽
提供產(chǎn)品銷售和市場份額數(shù)據(jù)的摘要
顯示網(wǎng)站使用數(shù)據(jù)的分析儀表板
下面還有一些表現(xiàn)得形式
今天就分享到這里了。
各位，加油哦！
聯(lián)系客服
