B端必看：圖表設計最易犯的“七宗罪”

編輯導語：在B端產品設計中，圖表設計是常見的工作項目。合理有效的圖表設計有助于數據抽象化、可視化，體現數據真實性，并傳達相關信息。在本篇文章里，作者對B端圖表設計可能出現的問題做了相應總結，一起來看一下。

這些天在幫網友看Ｂ端測試題，幾乎每份都會涉及到可視化圖表。我從中提煉出一些規律，將這些梳理總結出一份七宗罪走查清單，正如芒格先生所說“如果知道我會si在哪里，那我將永遠不會去那個地方”，希望這份清單能幫助大家排雷掃障。

本文5480字，預計閱讀時長20分鐘，內含大量圖表示例，建議PC端閱讀。記得每次設計完圖表后拿出來對照走查。閱讀指引如下：

一、圖表構成

清單中涉及一些專業詞匯，為方便大家理解，我們先簡單地認識一下圖表構成。

圖表設計規范同樣由原子、分子、組件、模塊、頁面搭建而成，其中圖表由多個組件構成，如數據標簽、圖例、圖形主體、坐標系等。

• 標題：圖表內容主題，包括主標題和副標題。可以是圖表內容的概括，也可以是結論。
• 切換選項：用以切換同組對象的不同維度數據，如銷售量與銷售額。
• 數據標簽：也叫提示信息，即當前數據的內容標注。數字型的數據標簽，以通常以常駐形式存在于圖表；氣泡型/卡片型的數據標簽，常以交互行為（點擊、長按、懸停等）觸發的形式出現。
• 圖例：指圖表內容與數據的符號或顏色說明，它既為繪圖標準，又是圖表的閱讀指南。
• 工具（欄）：當前圖表的操作項，例如編輯、刷新、導出、分享等。

• 坐標系：將抽象的數據關系映射到具象的圖表上，該圖表所處的空間維度叫做“坐標系”，用來確定數據空間位置的數組叫做“坐標”，例如（x，y）、（北緯N22°38′17.54″ ，東經E114°05′52.35）。坐標系包括坐標軸和標尺。
• 圖形主體 ：用于數據視覺展現形式的圖形，可以根據數據維度、數據差異，在同一圖表使用不同圖形繪制，例如常見的折柱混合、K線圖。
• 網格：以標尺刻度為基準的參考線，用以輔助數據的快速定位。
• 值域：表示圖表X軸的縮放大小，以及可視區域，多用于存在大量數據的情況。
• 映射域：表示圖表Y軸的縮放大小，以及可視區域，多用于數據差異較大的情況。

二、圖表設計七宗罪

1. 冗余

冗余即多余的、不必要的信息，或重復內容，產生了視覺干擾，無法直觀獲取數據信息。

圖表的價值在于使抽象的數據關系具象化、可視化，使其直觀易懂。我們在設計時，可通過信息降噪來提高信息獲取效率。《紐約時報》信息設計師Jonathan Corum曾給出指導：“顯示內容，而非顯示框架”。

例如下圖斑馬紋背景、黑色的網格，作者試圖給柱形添加描邊來提高閱讀性，使得圖表更加地混亂不堪。當我們去掉斑馬紋與描邊，適當削弱網格，圖表是否變得干凈起來？接著我們添加數據標簽，剔除坐標系，不僅使得圖表更清爽，閱讀效率也有大步提升。

再者，刻度值選取也是較容易忽視的地方。

我們的設計原則為：在保證易讀取坐標的基礎上做最簡化。例如我們可以保留半個刻度值，灰色顯示，方便用戶快速讀取數值。如果你的圖表用只來展示對比情況，無需精確讀值，亦或者有交互行為觸發數據標簽，那么你完全可以只選取合適的整值刻度。

可視化的數據集一般分為展示類和業務類，展示類只做某些確定的數據集展示，如項目提案、工作匯報等；業務類圍繞著業務數據，包含已有的確定數據集與未知的數據集，如物流監控、天氣預監、數據埋點監測等等。

業務數據集大多隨時間推演而變化，縮小字號與斜置X軸軸標簽都會影響數據閱讀。建議抽樣選取軸標簽，并輔以交互行為觸發數據標簽。也可以完整保留軸標簽，用值域縮略器控制顯示范圍與軸刻度大小。

題外話，當展示類數據集遇到類別名稱較長，又不具備連續性時，建議使用條形圖。

潛在風險

過多不必要的視覺噪音，干擾信息讀取效率，圖表內容得不到凸顯，失去直觀、形象的價值。

如何避免

• 剔除不必要的非數據元素（如輪廓、網格線、背景），將重點放在數據元素；
• 弱化坐標系（坐標軸、刻度線），保持其清晰但不起眼；
• 當你設計了常駐數據標簽時，甚至可以剔除坐標系；
• 數據集具有連續性時，坐標軸抽樣顯示，或使用值域縮略器。

2. 繁雜

即多而雜亂，分為設計語言繁雜、數據集繁雜，和視覺瀏覽動線繁雜。

相比其設計冗余，設計繁雜時閱讀更為困難，甚至出現無法讀取信息的情況。

1）設計語言繁雜

在同一套系統中各個模塊，分別使用藍綠科技風、黑金尊貴風、玫紫時尚風、駝色休閑風等等等。紛繁多樣的設計語言，不僅使用戶困惑、認知困難，還加大了開發成本。

雖在業內沒有明確的規范，大家可應根據載體終端，將產品原設計系統衍生出一份圖表設計規范。

在可視化專業術語中，我們給圖表定義的設計語言叫做視覺編碼，它是數據與視覺結果之間的映射規則。其中包括了形態、大小、位置、色彩、紋理、方向等等。

感興趣的朋友可以閱讀Jacques Bertin 的《Semiology of Graphics》，他在當中總結了有哪些視覺變量，能最有效地顯示定性或定量差異。

其中比較值得注意的是圖表色板的設定，我們分為定性色板、順序色板、離散色板。

• 定性色板：基于明度、飽和度的平衡上，調整色相以區分不同類別。適用于無順序關系的圖表，多見于對比類圖表，例如柱狀圖、條形圖、面積圖。
• 順序色板：基于色相、飽和度的平衡上，調整明度以表示遞進、流程、順序等。適用于順序關系的圖表，例如于漏斗圖、熱圖。
• 離散色板：基于中間值（例如0）將兩種順序色板組合起來，適用于兩種不同關聯關系的圖表，例如雙向堆疊圖。

注：這里的順序關系指的是圖表類型本身帶有連續性、遞進性、流轉性，與數據本身的連續性不同。

2）數據集繁雜

數據集難免出現極限情況，例如對比幾十個省份訂單變化情況時，你能在左側圖中找上海的數據嗎？

建議把總覽圖表按某種規則拆分為小組，例如按地理分區拆分為東北、華北、華中、華東、華南、西南、西北七區各省份訂單對比。

也可以拆分為若干個子數據圖表，如示例右側每個省份一張圖，拓展性更強，可以靈活調取任意省份進行對比。

當我們要看子數據占比情況時，較多的分類會出現餅圖切片過小，讀取困難。當數據類別＞5時，我們可以將較小的/不重要的數據合并為“其他”。

如果每個數據都很重要，合并子數據會導致信息顯示不全，可以在外部展開單獨繪制，但要注意合并項與總項的比例大小，避免讓用戶誤解該合并項為重點特寫部分。

3）視覺瀏覽動線繁雜

數據排列時，為幫助用戶快速讀取信息，我們需要將數據按照某種邏輯順序進行排列，避免用戶視線來回橫跳。

① 按數據值大小排列

如數據類別無任何邏輯順序，那么我們可以按照數據值的大小順序進行排列。除非你的圖表只用作點綴裝飾。

餅圖與玫瑰圖除了按數據值大小排列，還應注意起始位點，最好從12點鐘方向順時針或逆時針繪制。以及將合并項置于最后。

② 按邏輯順序排列

如果你的數據類別帶有連續性質，如時間、量級、年齡等，那么就按照連續順序排列。

潛在風險

設計語言、數據集和瀏覽動線的繁雜，使得用戶需要自行處理復雜信息，讀取困難、認知成本高。

如何避免

制定視覺規范、統一有效的視覺編碼，將龐大數據集拆分為多個子數據組或單一數據，按照大小、時間、年齡等邏輯順序排列，幫助用戶降低認知成本。

3. 曖昧

指關系含糊不明朗，令人難以辨別，常見于視覺編碼近似、圖表選擇失誤。

大多B端設計師天然喜歡克制、冷靜、理性，經常在設計中使用同類色。但對比類圖表如果使用同類色、鄰近色，在餅圖中尚且可以勉強分辨，但在折線圖中就難以辨別了。

數據類別較少時建議選取定性色板中的對比色，數據類別多時可在定性色板基礎上進行擴展。

人眼對于面積的敏感度會低于高度/長度，數據值差異較小時，不建議使用面積圖，可改用玫瑰圖、條形圖/柱狀圖、異形柱狀圖。

可能有朋友要好奇了，南丁格爾玫瑰圖不是基于面積對比嗎？玫瑰圖是基于半徑進行對比的，具體會在第七點中詳細展開。如下圖，從面積圖至異形柱狀圖，用戶認知敏感度逐漸遞增。

當我們使用面積圖時，兩類數據近距離重疊，建議使用透明色，確保信息不會被遮擋。

還有，曖昧要兩個人才是甜甜的，最多可以加一位僚機，當出現第四人，場面開始有點不受控制了。所以數據類別≥4類時，建議使用折線圖或柱狀圖。

潛在風險

顏色、圖表選取不當，信息區分感模糊，容易造成用戶困惑，價值體驗降低。

如何避免

針對不同需求不同場景，選取合適的顏色與圖表，幫助用戶快速辨別。

4. 失焦

即層級模糊，無法對焦核心信息。

與剛才的曖昧不同，失焦指在傳遞某一個核心信息時層級模糊，數據之間是有層級關系的；而曖昧指在展示數據集時分辨邊界模糊，數據之間是平級的。

例如在匯報提案場景，有想要著重傳達的核心觀點結論。此時我們可弱化次要數據，強調主要數據，以突顯關鍵信息；亦或者在查看基金業績走勢場景，用戶更關注的是當前所選基金的走勢詳情，同類均值與滬深300只是參照物。

潛在風險

特殊情況下，信息層級模糊，用戶需要主動獲取信息，不利于核心業務信息的高效傳達。

如何避免

通過顏色明度對比、特殊樣式，按需強調主數據、淡化次要數據，幫助用戶直接接收核心信息，提高傳達效率與準確性。

5. 浮夸

即虛幻夸張，不切實際。

這是很多設計師常犯的錯誤，總是忍不住地添加視覺效果，影響了數據真實性卻不自知。以下的柱狀圖，你能快速地告訴我1月、3月、5月哪個數據值更大嗎？折線圖中，你能快速地分辨分辨并讀取信息嗎？

如果這些圖表只做視覺點綴作用，不承載信息傳遞作用，那么是勉強可用的。但如果你需要傳遞信息，讓用戶讀取，那么建議你放棄3D、物理投影、擬物質感，除非你是在VR場景中使用它們。

還有很多設計師喜歡用的大圓角，圓頭端點讀取困難且不精準，是讀端點還是圓心呢？

端點只此一個點，單憑一個小點如何精確讀值？

在堆疊圖中更會因為圓角之間的間隙丟失數值，請問圖二的間隙應該計算在數值內嗎？算在哪個屬性之內呢？

如果你的數據集屬于展示類，在常駐數據標簽的存在下，你是可以使用大圓角的。在業務類數據集，還是建議大家使用平角或小圓角（1~5pt即可）。

還有這種嵌套式的環狀圖，相關從業人員或許能清楚的判斷3個數據值大小，但是普羅大眾未必就能清楚判斷了。

我們將其拆開，你能清楚地發現藍色百分比最高，但是黃色的視覺重量明顯最大。百分比值與視覺重量不符，容易影響用戶判斷，并且空間利用率低。

潛在風險

浮夸的3D效果、質感效果、大圓角效果、異形效果，在業務數據集的可視化中容易丟失數據、信息讀取困難、浪費空間。

如何避免

去掉一切浮夸樣式，回到可視化本質：清晰、高效、準確地傳遞信息，而不是讓用戶猜測、計算。

6. 失真

即失去本意或本來的面貌，信息傳遞錯誤。

我們常見的平滑曲線圖，相較于折線圖，多了一份柔美、自然與律動感。但是請注意，曲線在用戶心智當中是一組連續的數據，是真實的趨勢，曲線上任意一點都會對應一個真實的數據。而折線圖在用戶心智中是一組有限的數據進行連接，方便查看大致趨勢。

例如當你只測量了整點時刻的溫度，為了美觀繪制了平滑曲線，用戶可能會認為12:30時，溫度為20°。但這并非真實的，誰知道是12點后緩慢降溫，還是突然降溫呢？

如果我們用鋼筆工具在相同的幾個點當中繪制平滑曲線，我們可以獲得無數種可能性，這就是平滑曲線的失真原因。

在業務數據集中，我們需要考慮更多可能會發生的情況，例如出現了缺失的數據點。“空”與“0”是完全不同的概念，我們不能擅自為該數據點添加“0”值，而是真實的反應存在數據缺失。

潛在風險

設計偏離用戶心智與擅自定義數據，造成數據不真實，使用戶接收到錯誤的信息。

如何避免

盡可能考慮更多的場景，與用戶心智保持一致性，杜絕擅自修改數據，真實反映數據情況。

7. 誤導

即錯誤的引導，讓用戶接收到錯誤的信息。

誤導是7宗罪當中最嚴重的，前面幾條多是基于無心之失，而誤導卻是刻意而為的。

商業活動中，所有項目都是圍繞著商業價值的，我們不能否認設計是帶著商業考量展開的。所以為了商業目的，或多或少會存在一些“美化”作用，為的是數據更好看或者更能為商業目標服務。我們作為B端設計師，甚至是C端設計，都應該真實地反映數據，而不是欺騙我們的用戶。

我們在第三點曖昧中提到，建議數據值差異較小時使用玫瑰圖。仔細看會發現玫瑰圖每個扇形角度是一致的，但半徑不同。由扇形面積S=nπr²/360可得，數據類別的面積對比由r²決定，也就是半徑的平方，它放大了數據之間的差異。

這一解釋，似乎玫瑰圖存在失真情況，但玫瑰圖的真實對比不是基于面積，而是基于半徑，面積只是在視覺上放大了不易觀察的較小差異。

你可以理解玫瑰圖是一種扇形的、旋轉排布的柱狀圖。畢竟事物都具有雙面性，我們可以用玫瑰圖放大較小的差異感知，但是不可以用于夸大差異、傳遞某種美好的假象。其他“美化”手段也是如此。

Y軸標簽的起始值選取，是提案、匯報中較為常見的一種美化手段。當取值非0時，數據差異被直接拉大。

如左圖5月銷量看似是1月的25倍，但實際情況是它們只相差將近2倍。我們秉承真實反映的原則，Y軸起始值應從0開始。當數據存在負值時，可根據實際情況選擇負值起始值。

潛在風險

用戶被刻意引導，接收了錯誤的信息，容易造成信任危機，且違反了真實原則。

如何避免

真實反映數據，放棄“美化”手段，真實引導用戶讀取真實信息，不要欺騙用戶。

三、圖標設計走查表

我特意整理了一份圖表設計走查表，在此分享出來，希望它能幫助到大家，如果你在使用過程中有任何問題請務必向我反饋，作為體驗設計師我很注重用戶反饋的，嘿嘿～讓我們一起持續迭代這個走查表。

最后

以上就是本文的所有內容啦，如果你有什么B端相關問題，歡迎和我一起交流。在此也感謝有贊設計師@美芳的指導，一群人才能跑得更快一點。

參考資料

http://www.woshipm.com/data-analysis/4197825.html

https://www.yuque.com/books/share/0cec1b86-5c3d-4a31-8a2e-a2dd00ab917f?#

https://appo8jahz3e4635.h5.xiaoeknow.com/v1/course/column/p_6007ced1e4b0ab9a254ac006?is_redirect=1&pro_id=p_6007ced1e4b0ab9a254ac006&scene=%E9%82%80%E8%AF%B7%E9%93%BE%E6%8E%A5&share_type=5&share_user_id=u_5f675e0e1be1e_PNfrKK2u4m&sw=1%20&type=3&wxwork_userid=ZhuLinLin

https://medium.com/m/global-identity?redirectUrl=https%3A%2F%2Fmedium.muz.li%2Fdataviz-sins-976f3a08948c

https://www.zhihu.com/question/20855952

 

作者：梁17，微信公眾號：梁17

本文@梁17 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。