起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識8000 字深度長文！B端數據可視化設計指南（信息圖表篇）
編輯導語：數據化時代，越來越多的場景需要數據可視化，越來越多的設計師需要與數據打交道。對于B端設計師，數據可視化更是一個必不可少的一個技能。本文作者從數據可視化的基本信息入手，給大家整理了一份B端數據可視化設計指南。一起來看看吧。
在如今的工作中（尤其是 B 端）越來越多的會開始出現數據可視化的身影，對于一部分小伙伴來說這個概念是較為陌生的，面對這道無形之中提升的“門檻”我們常常會表現的手足無措。
所以，為了讓大家對于數據可視化不再那么束手無措，我希望能通過這篇文章和大家一起交流學習，解決一些屬于我們共同的問題。
那么我們還是老規矩，想要了解一個事物首先需要知道的是它的定義。
一、數據可視化的基本信息
1. 數據可視化的定義
較為籠統的來說數據可視化是一種由圖形、圖像、數字等元素組成的語言用于解釋、呈現目標數據之間的關系。
從這個定義上來看，數據可視化從外觀層面來說是與圖形、圖像這些視覺元素密不可分，這也是數據可視化最為明顯的特征。
而結合我們實際的生活與工作來說，數據可視化是一種以圖形符號為主要表現形式，將不可見的、抽象的、復雜的、枯燥的、專業的、不直觀的數據內容，有趣的、淺顯的傳遞給用戶的有效手段。
用戶可以通過這樣的手段完成自己的目標（例如對選定范圍內的數據進行分析，發現數據的周期與規律、迅速找到自己目標節點中的關鍵數值、對比幾組數據以了解當下研究對象的情況等）這也是數據可視化最為明顯的價值。
2. 可視化發展簡史
關于可視化的發展史上可追溯至 1950 年，當時人們利用計算機創建出了首批圖形圖表，可以說是數據可視化圖表最為早期的雛形，而在 50-60 年代的可視化中又以查爾斯·約瑟夫·米納德的《1812－1813 對俄戰爭中法軍人力持續損失示意圖》為代表。
該圖描繪了拿破侖的軍隊自離開波蘭到俄羅斯邊界后軍力損失的狀況，也是后世分析拿破侖對俄戰爭的重要數據分析資料，后來這種帶狀圖被稱為“桑基圖”用來解釋能量的流動。
而可視化真正被提到一個應用理論的高度是到了 1987 年布魯斯·麥考梅克和馬克沁·布朗所編寫的美國國家科學基金會報告《Visualization in Scientific Computing》（科學計算之中的可視化），其意在強調了基于計算機的可視化技術方法的必要性，此時的概念已經與現在我們所接觸的工作中的數據可視化是非常接近。
到了 90 年代初人們發起了一個稱為“信息可視化”的研究領域旨在為許多應用領域（科學、商業、行政、財務、數字媒體）之中對于抽象的異質性數據集的分析工作提供支持，與前面提到的“科學可視化”交叉形成了現在耳熟能詳的“數據可視化”，此時這個詞匯才慢慢的被更多的專業領域的人所接受，并在之后互聯網的不斷發展中擴充著自己的分支。
3. 為什么會使用數據可視化
目前大量開始使用視覺可視化的原因其實非常簡單大致的原因可以分為需要處理的數據量太大了和人腦不夠用了。
據不完全統計 IBM 公司每天有 2.5 億字節數據的吞吐量，麻省理工學院的研究科學家 Andrew McAfee 和 Erik Brynjolfsson 教授指出，如今在互聯網上傳遞的數據量比過去 20 年的總和還多，而且根據 IDC 預測，到 2025 年將有 163 萬億 GB 的數據。
這是非常驚人的，而這么多需求的數據量單憑人腦的計算能力和處理能力來說是完全無法與之匹配的，研究表明人腦很難同時處理 5 組以上的抽象數據，所以這種單線程的處理方式就決定了需要借助外力。
而對于用戶尤其是決策層的用戶來說在現實的工作場景中經常需要同時處理超過 5 組以上的數據并需要對其建立精準的分析模型以便于做出最準確的決策所以基于這樣的需求，數據可視化設計氤氳而生。
4. 數據可視化的優勢
基于數據可視化的需求來看，數據可視化的優勢是顯而易見的，可以概括為兩點：認知減負和傳遞賦能。
認知減負是使用者在使用數據可視化工具時候的最直觀感受，當所面對的龐大的、復雜的枯燥海量數據集變成了圖像化、通俗化、形象化的視覺符號時，我們會本能的放下對于面對冰冷數據時候的抗拒和戒備，這是因為人對于一目了然更加接近自己熟悉的有趣事物的時候，會更為親切和愿意去主動理解。
而且被處理過、規劃過的簡潔直觀表現形式，能更為直接的讓使用者看到數據與數據之間的關聯，進而分析出其潛在關系，在人對數據的認知這個環節上降低了識別成本和分析成本。
傳遞賦能上圖像傳遞更接近人類最本能的獲取信息的方式，比起文字來說圖像更像是一個解密的步驟，通過解開文字描述這重“密碼”將最本質的信息進行呈現，而且對比文字，圖像所能夠承載的信息其實更為廣泛，而且人類讀圖的效率要遠遠高于閱讀文字。
無論是一個約定俗成的語義符號形象還是符合語境的配色都能夠起到比文字直白表述更為強烈的深入人心效果，并且圖解的形式并不受限于語言的障礙，極大的降低了溝通成本。
5. 使用目標
基于用戶的使用目標來說，使用數據可視化其實就像是一個偵探用“蛛網圖”輔助自己梳理思緒進行破案的過程：
將一些有關的，但是較為零散信息數據用一根根線索穿插起來，形成體系化的聯系，方便使用者迅速把握各個節點之間的關系進行推導。
所以說我們在設計數據可視化的時候并不是對我們拿到的數據的無腦映射，而是要基于用戶的目標經過一定的處理和優化后才能進行呈現，隨時記住我們是給用戶在打輔助，所以我們每一步的設計一定要基于用戶的思考。
用戶的期望是能夠高效、清晰、簡潔地完成數據的對比、關鍵節點的查詢、每組數據之間的分析等一系列交互，提升自己的工作效率，降低自己的學習和使用成本。
6. 應用場景
數據可視化的應用領域較為廣泛涉及醫療、統計、管理、金融、娛樂、人工智能等一系列領域，在 UI 的設計中我們最常接觸到的包括：
PC 后臺的數據概覽、數據可視化大屏、游戲 UI、后臺實時監控等。
二、設計師們的任務
當我們大致了解了數據可視化的歷史、使用原因、優勢、用戶目標、應用領域后下面就要切入我們設計師最為關心的話題：我們在設計中的任務。
1. 設計難點
數據可視化作為一門跨領域的學科，本身對于從業者而言就有著一定的綜合素質要求，但由于國內教育并沒有垂直教學學科，所以在現在的階段從業人員一部分由純視覺設計專業的同學組成，另一部分由純工科類型的專業的同學組成。
于是這就導致了非視覺設計師在進行設計時，會將全副精力放在強數據的準確性、合理性上，從而讓視覺的易讀性上有一定的損失，表現形式也較為單一枯燥，視覺感官較差，反觀視覺設計師通常會將數據可視化在視覺表現形式上過度用力，雖然營造了很好的視覺體驗，但是從其實用度、可用性上來說會大打折扣。
于是設計的難點很多時候就會集中在平衡視覺與實用之間的關系。
2. 設計目標
通過以上分析，不難看出設計的主要目標，而面對這句較為抽象的“把握設計與實用之間的平衡”其實無外乎也就是拆解到功能和視覺這兩個方面。
從功能上來說，我的目標是提升用戶的數據閱讀效率、讓用戶能夠迅速 Touch 到目標信息，提升交互效率，一切都是以結果為導向，以解決用戶問題為導向，一定記住人們不愿意接受未處理過的數據。
而從視覺上來說，我們的目標是處理好在視覺上各個模塊之間的統一、透氣關系，將數據進行可視化的同時盡量提升感官上的審美體驗與傳達上的有趣。
以上會作為后文中我們每一步設計的指導和檢驗的方式，從實際操作的維度上來說二者也并不是五十比五十的分配，遵循的原則是：體驗一定要讓位于功能，所以在視覺的層面發揮的空間其實需要比較克制。
三、案例制作
了解了數據可視化的設計難點，明確了數據可視化的設計目標，那么我下面進入我們最重點的環節：
可視化頁面案例制作，由于數據可視化的形式較多，這次我們以工作中經常接觸得到的 PC 頁面數據概覽頁為例。
1. 明確性質
同樣的，細化到數據概覽這個分支項目，我們同樣需要明確了解其基礎定義和性質，嚴格意義上來說數據概覽部分屬于 Dashboard design（儀表盤設計）的一種，其主要的目的和功能可分為分析和操作兩塊。
所以從綜合的角度來說數據概覽部分可以理解為：
其它模塊的摘要視圖，并顯示來自應用程序各個部分的關鍵信息。
從這點上來說建議此模塊可以在其余模塊設計完后再進行設計。
如此有利于設計師從一個全局的視角切入進行設計，理解上也會更加透徹，否則很可能會陷入在你設計其他模塊的時候不斷地返回對其進行修改的怪圈。
它也是核心功能、常用功能的快速操作助手和快捷頁面跳轉（有點類似于導航），交互功能的排布和關鍵信息的顯示，其共同的要求點是顯而易見的，即明確各個模塊之間的層級，做好順序、優先級排布。
這就需要你對業務目標有一定的了解，記住，對業務目標不了解，你的設計將毫無意義。
你可以通過查詢一些內部資料、報告、也可以詢問產品經理等相關負責人，還可以通過用戶調研得出，這里不展開說，在動手之前你需要搞清楚：
各模塊之間優先級如何、你需要在一張單獨的圖表內展示多少變量、想展示一段時間內的值是項目和項目之間還是組與組之間、每段變量中有多少關鍵數據需要展示等問題。
2. 定義模塊優先級
如上圖所示，在工作中我們接到需求的時候是面對一堆冗雜的數據集，組成了若干個模塊。
但是正如上文所說，我們并不能對其進行無腦的可視化映射，所以首先要做的就是要對各個模塊進行優先級的梳理排序。
明確了各個模塊的優先級排布之后，我們開始對每一個單獨模塊進行可視化轉化，即哪一個部分分別用什么類型的可視化形式表現。
這一步非常類似于土地使用規劃，當你在將土地劃分完后，為每一塊土地定義其使用類型。
3. 明確圖表選擇
想準確的將圖表與所要表現的數據進行對應，需要了解圖表本身所包含的基本元素。
在這些元素中正常情況下一定在圖表中的有：標題、時間范圍、圖形主體。
經常出現的有：坐標系、圖例、提示信息，有時候會有的有：切換選項和值域。
知道了這些重要的基礎信息了，那么在面對這么多圖表的時候我們該如何正確的選擇來進行使用呢？
其實和之前說的一樣：
基于目的來進行思考，所謂的基于目的來進行思考也就是要明確你所確立的數據指標需要分析的維度。
而日常使用的數據需要分析的維度無外乎：比較、構成、分布聯系。
（1）比較類圖表
比較類圖表應該是大家最為熟悉的范疇，第一時間能夠想到的就是柱狀圖。
這也是運用最為廣泛的圖表之一，經常出現在 PC 端之中，用于描述分類數據之間的對比，描述的數據可以是地區、品類甚至一個時間周期。
但由于其擴展能力有限，所以一般不建議項目超過 12 條。
條形圖與柱狀圖類似，看上去只是交換了 X 軸與 Y 軸，功能和承載數據種類較為類似。
但不同的是，條形所能承載的項目數量相對于柱狀圖而言更多。
由于其優良的縱向延展性一般用于手機端較多，而且從上到下的閱讀方式符合人眼閱讀習慣，所以也會經常用于排行榜的設計中。
分組條形圖是條形圖的衍生之一用于比較多個變量在不同區域之間的數量關系。
比如當想比較同樣一款衣服和鞋子在四個門店中的一個季度的營業額時就可以使用分組條形圖。
雙向條形圖表適合比較兩組以上的分類數據比較，和分組條形圖較為類似。
但是由于自身外觀特征更適合用于比較兩組意義相反的數據，也正是如此，雙向條形圖的組內二級分類數量一般不要超過 3 條最好。
折線圖與前者最大的不同就在于在坐標軸中加入了連續類別這個概念，數據基于時間等因素變得動態了起來，注重變化趨勢的展現。
面積圖是折線圖的延伸，除了表示變化趨勢之外還能比較所選范圍內積累的值。
玫瑰圖應該算是可視化圖表中的“網紅”，因為我們從小學的課本中就知道它還有一個別稱叫“南丁格爾玫瑰圖”。
它是一種圓形的直方圖，使用半徑長短表示數值大小。
其特點就在于因為其獨特的外觀可以將數值之間的差距在視覺層面進行放大，和將坐標軸范圍縮小來提升視覺上數值的碾壓是一個道理，發布會吹水最愛。
但是要注意的是這不是一個表示占比構成的圖，因為玫瑰圖的每一份角度是一樣的，一定要和餅狀圖等圖區分開來，它用來表示的還是數值與數值之間的大小。
雷達圖經常用于分析一些多維的性能數據、評分數據。
經常打游戲的朋友應該不陌生，有多少五邊形選手可以扣個 1。
每一項指標越接近圓心說明狀態越差，越向外說明越佳。
子彈圖用于比較當前數值與目標之間的關系。
比如看當前業績是否達標，也可以通過標記劃分區域來進行更好的評估。
漏斗圖適用于業務流程比較規范、周期長、環節多的單流程單項分析。
一定要有清晰的環節，比如監控買家從瀏覽到最后下單的數量統計以求得轉化率，不適合無邏輯、無流程的分類對比。
（2）構成類圖表
構成類圖表整體上來說主要用于觀察部分和整體的占比關系。
最經典的莫過于餅狀圖，這個不用多說，通過每一份半圓角度所占整個圓的大小來表示部分和整體的關系。
但是由于其所占面積較大，經常會讓視覺過于集中，影響注意力。
相對于餅狀圖而言，環狀圖十分有效的避免的干擾視覺的問題。
其本質是將餅圖中間掏空，功能與餅圖基本一致。
但是視覺上做到了輕量化，目前在日常設計中較為常用。
旭日圖相當于前面二者的結合，適用于展示多層級數據的占比關系。
距離圓心越近代表層級越高，下一層級的總和構成上一層級，存在一定的父子層級關系。
堆疊面積圖出了可以表達趨勢外。
其優勢在于能夠表達總量和分量的構成關系，堆疊面積圖上的最大的面積代表了所有的數據量的總和，是一個整體。
各個疊起來的面積表示各個數據量的大小。
堆疊柱狀圖的優勢在于它既可以表達一級分類的比較，同時還能看出二級分類在其一級分類中的占比。
但是缺點在于二級分類并不是按照同一基準線對齊的，相比于堆疊面積圖更為常用。
瀑布圖用表達兩個數值之間的變化過程，過程值為正的時候，向上加，過程值為負的時候向下減。
（3）分布聯系類圖表
分布聯系類地圖在這兩年在國人的心中其實已經非常熟悉了，因為疫情今年的地圖可視化的應用經常出現在我們的生活中，地圖可以結合不同的表達方式：
可以結合散點、可以結合動畫、還可以結合引導線以及熱力圖的方式，圖的形式使用視具體的業務需求來定。
最后就是氣泡圖，這是在查看分布關系中最為經典的視覺模型，用氣泡的面積大小表示數量，結合輔助線可以更好地觀察分布情況。
4. 匹配圖表 重構布局
當我們對每種圖表的功能和使用范圍有了一個較為明確的認知之后，下面我們就可以對我們之前所規劃好的優先級的模塊進行可視化形式（圖表）的匹配了。
進行匹配過后，我們將對布局進行重構，整體重構需要遵循的原則是：
- 布局層級明確，首屏盡量曝光更多內容。
- 統一透氣，具有呼吸感。
（1）布局層級明確，首屏盡量曝光更多內容
從首屏曝光更多內容來說，主要是因為基于分析類的數據概覽工作場景和 Analytical dashboard 自身特征決定的。
用戶希望能夠通過僅僅一屏的的大小進行對各類信息的情況有基本的把控，達到一眼全局的目的，其主要注意力都會放在首屏，所以我們需要盡可能的在首屏安排更多的信息。
當然首屏內容也并不是越多越好，一般建議也盡量不要超過 7 組模塊，而在層級明確這塊兒主要是根據人眼閱讀習慣所產生的優先級排布：
正常情況下都是左上為優先級最高，而右下優先級較低，這是無數經典的眼動測試和設計總結產生的最常用結論，就不展開敘述了。
所以當我們按照優先級、首屏曝光更多內容的原則進行處理后會得到如上圖的布局。
（2）統一透氣 具有呼吸感
這主要是視覺層面的問題，統一透氣的要求在首頁概覽中可以依靠柵格系統來解決。
它可以有效的保持頁面布局一致性，為頁面建立基礎布局框架，將頁面中的所有元素都捆綁在一個體系之中，同時還能有效解決適配問題。
5. 模塊拆解
完成了大規劃之后，下面我們開始對一個一個的模塊進行拆解，同樣的以目標指導設計，邊設計邊驗證
（1）層級明確 突出重點
和大規劃一樣，單獨到每一個圖表同樣要時刻注意層級的梳理，銷售渠道部分很明確應該是運用一個折線圖的形式。
由于業務目標上來說更關注銷售額而不是銷售額和訂單數的比較，所以我們選用了一個帶有切換選項的折線圖形式。
但是我們會很容易發現在讀圖時會出現較大的視覺干擾，并沒有能夠很好地突出重點信息，視覺層級不清晰、混亂。
于是我們對沒有重點的視覺層級進行梳理，像之前劃分模塊那樣，對視覺元素進行高、中、低的 P0、P1、P2 的設定，提升易讀性。
P0：
層級最高的自然是重點信息突出部分。
所以我們需要在其之上做加法，給予內容異形懸停樣式進行具體強調，配合投影加強視覺效果，有效傳遞用戶，拉開與別的元素的層級。
同時數據部分用特殊字體并適當加大字號進行設計，方便用戶第一時間能夠看到所要強調的數據具體值。
P1:
其次就是主體圖形部分，這是用戶需要看到的重要部分，在使用場景中會長時間盯視。
所以采用更低的明度與更高的飽和色顏色確保易讀性。
但是也不致于會讓用戶太晃眼產生視覺疲勞，最后考慮到該模塊所處位置屬于頁面中較為核心的地帶，給予一定的顏色透明度漸變裝飾，在強化主體圖形的同時不致于太顯單薄。
P2：
前兩者都是一定程度的做加法，那么層級最低的元素需要開始做減法，此時軸線、刻度、切換選項等元素需要弱化視覺層級，降低透明度，尤其是背后的刻度線與背景的明度對比大概控制在 1.6:1 上較為合適。
銷售總額、訂單數、渠道數同屬于一個數據統計的范疇，最忌諱的就是把以上提供的三個信息給做平，讓用戶抓不住重點。
面對這樣的情況還是一樣，確立需要突出的重點信息給予特殊文字和大小的設計，選擇合適的主體圖形。
但在這里需要注意的是由于在這個模塊中 P0 是金額數、訂單數、渠道數這些重要值。
所以可視化圖形需要適當為其讓步，不要放在閱讀中心位置，按照 P1 來進行處理，而訂單數、轉換率這樣的標題就成了 P2 需要適當降低透明度和文字大小，不干擾主要信息的表達。
（2）統一營造
說到統一，最先想到的一定是色彩，無非也就是需要處理好對立統一關系，而這其中統一的比例又要大于對立，配色上盡量選用同類色系，不宜太過花哨。
尤其是對于 B 端而言，建議在可能的情況下不要超過 5 種，而且主色、輔助色，對比色的比例建議控制在 6:3:1 的比例（但不絕對），既能做到有所區別又不致于過于絢麗干擾視覺。
你的主色不一定要遷就你的品牌色，但是一定要是如上文說的盡量低明度高飽和，以適應于長時間的注視。
顏色過后就是字體，字體的使用需要極為謹慎。
如果可以盡量只出現一種字體（但不要超過三種），并且只采用基礎字體。
正常情況下都是將其作為一個需要被降噪了的視覺元素來對待（比如降低透明度），在 PC 端中盡量也不要出現較多不同的字號、字重，造成沒有必要的視覺干擾。
除了字體之外，在統一感的營造上卡片的布局結構也需要盡量保持一致。
這是為了提升易用性，同一個產品內，相同布局會給予用戶相同交互、相同功能的暗示，也更容易培養用戶習慣，提升操作效率。
（3）呼吸適中
呼吸感是留白的藝術，很考驗設計師的排版能力，在單獨的模塊內，元素與元素之間盡量不要用實線進行間隔，可以的話利用親密性原則通過元素間距的遠近進行布局。
而柱狀圖的設計上，柱與柱之間的間距最好大于柱寬的 1.5 倍，這樣才顯得視覺上較為透氣，不致于太臃腫。
最后就是模塊中的邊距留白部分，這點一定要重視，不然不僅你的版心會變散，還會嚴重影響你的頁面呼吸感。
（4）細節處理
細節上首先要說的就是橫縱坐標軸上的文字，上面的文字一定不要過長，最好的方式是將文字進行精簡。
然后橫、豎排對齊處理，如果實在不能精簡那么再進行斜排的方式。
第二點就是橫縱坐標軸有的時候會因為需要展示的數據過多而過于密集影響閱讀。
這個時候可以采用適當增加一個值域的劃定的方式來進行坐標間距的縮放。
第三點就是，在排行榜等模塊可以適當增加一些小設計，比如金、銀、銅的設計，提升情感化元素的融入。
第四點就是，盡量不要選用一些 3D 的酷炫效果來做可視化。
因為這種效果很容易對數據進行遮擋和扭曲，不是非常適用于高效閱讀，也不適合 PC 頁面上的交互，而且也不利于開發，比較得不償失。
6. 組裝自檢
當所有的模塊設計完成后，像拼高達一樣進行組裝，組裝完成后適當調整其過于干擾視覺的地方，然后進行自檢。
自檢不只是從檢查你的視覺、你的模塊間的布局，更重要的是帶入使用角色來進行檢查，你可以模仿用戶使用中的各種需求場景，對已經制作好的頁面進行交互和閱讀，看是否能夠快速高效地完成使用目標。
當然除了自己之外，你還能在有條件的情況下找專家用戶進行使用，即使記錄使用中存在的問題并及時進行調整，當初步使用大致無問題后便可以交付。
四、結語
好了以上就是在 B 端設計中對于數據可視化尤其是 PC 端數據概覽的設計探討。
當然其實關于數據可視化的范圍還遠遠不止于此。
感謝你能夠耐心看到最后，如果這對于你的工作有一點幫助那么備感榮幸，也很感謝留下你的交流意見。
作者：核糖Bro
本文由 @核糖Bro 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Pexels，基于 CC0 協議。
瀑布圖 凈利潤那個柱子方向反了，正增長是朝上的
詳細，有料～
親，這些圖都是啥軟件做的呀
很多渠道，自己用中繼器做也可以，找元件庫直接用現成的也行，最不濟自己畫圖
寫的非常給力！有學習到思路，之前設計首頁的數據展示的時候，只能用感覺去做，然后過程很煎熬，現在get到思路了，后續的話就知道如果去分析，如何模塊化制作和組裝
這是什么軟件啊，親。（筆記）
不要說是Axure…..
盲猜是sketch
找元件庫搬一下就有了
點贊mark一下路上看~ 希望能像知乎一樣在長文旁邊加一個目錄功能，不然一點點翻著看有點累
右下角不就是嗎 文章導航
路上可能是在app里看的？