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

2 評論 7202 瀏覽 66 收藏 26 分鐘

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

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

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

圖表設計最易犯的七宗罪

一、圖表構成

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

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

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

  • 坐標系:將抽象的數據關系映射到具象的圖表上,該圖表所處的空間維度叫做“坐標系”,用來確定數據空間位置的數組叫做“坐標”,例如(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點后緩慢降溫,還是突然降溫呢?

圖表設計最易犯的七宗罪

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

圖表設計最易犯的七宗罪

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

圖表設計最易犯的七宗罪

潛在風險

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

如何避免

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

7. 誤導

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

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

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

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

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

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

圖表設計最易犯的七宗罪

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

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

圖表設計最易犯的七宗罪

潛在風險

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

如何避免

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

三、圖標設計走查表

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

最后

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

參考資料

http://www.zun9shi0.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協議。

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 收藏+1

    回復
  2. 寫的很全面,收藏了,

    回復