國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

3 評論 9433 瀏覽 138 收藏 14 分鐘

在B端設(shè)計中,圖表設(shè)計是一個不可忽視的板塊,那么你知道要怎樣才能做好圖表設(shè)計,既清晰地傳遞出信息、且在展示上也可以更加美觀和高級嗎?本篇文章里,作者便總結(jié)了B端圖表設(shè)計的相關(guān)原則,一起來看看吧,也許會對你有所啟發(fā)。

最近幾年以來,大家能看到B端設(shè)計趨勢已經(jīng)越來越火熱,在B端設(shè)計中關(guān)于圖表的設(shè)計算是為數(shù)不多的視覺發(fā)揮點了。那么怎樣才能做好圖表設(shè)計,讓設(shè)計出來的圖表高大上,符合業(yè)務(wù)需求,讓業(yè)務(wù)方和總監(jiān)對你贊不絕口,本文就必須看完和收藏了,因為實在是太實用!

彩云之前也分享過一篇關(guān)于數(shù)據(jù)可視化的干貨,《如何做好數(shù)據(jù)可視化設(shè)計,國外大神給出了十條實用建議》,今天的這篇算是更加系統(tǒng)和完善了。

應(yīng)用設(shè)計越來越依賴數(shù)據(jù)驅(qū)動,對高質(zhì)量的數(shù)據(jù)可視化需求也越來越高。然而我們身邊卻充斥著令人困惑和誤導(dǎo)的數(shù)據(jù)圖表,但我們其實可以通過遵循一些簡單的規(guī)則來改變這個情況。

一、選擇一個正確的圖表可視化類型

選擇錯誤的圖表類型,或默認為最常見的數(shù)據(jù)可視化類型,可能會讓用戶感到困惑或?qū)е聦?shù)據(jù)的誤解。根據(jù)用戶希望看到的內(nèi)容,可以用多種方式表示相同的數(shù)據(jù)集。盡量做到每一次做數(shù)據(jù)可視化時都能從數(shù)據(jù)集類型分析和用戶訪談開始。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

二、根據(jù)正負值使用正確的繪圖方向

當(dāng)使用水平條時,在基線的左側(cè)繪制負值,在右側(cè)繪制正值。不要在基線的同一側(cè)繪制負值和正值。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

三、條形圖總是以0基線開始

刪數(shù)據(jù)起點會導(dǎo)致曲解。在下面的例子中,看左邊的圖表可以很快的得出結(jié)論,值B比D大3倍多,而實際上,兩者的差異要小得多。從0開始可以確保用戶獲得更準(zhǔn)確的數(shù)據(jù)表示。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

四、折線圖應(yīng)該要清晰體現(xiàn)y軸上的趨勢變化

對于折線圖,總是限制y軸比例從0開始可能會使圖表幾乎平坦。由于折線圖的主要目標(biāo)是表示趨勢,因此根據(jù)給定時期的數(shù)據(jù)集調(diào)整比例并保持直線占據(jù)y軸范圍的三分之二是很重要的。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

五、使用折線圖時要考慮時間連貫性

折線圖是由線連接的“標(biāo)記”組成,通常用于可視化時間間隔內(nèi)的數(shù)據(jù)趨勢。這有助于說明數(shù)值是如何隨時間變化的,并且對于較短的時間間隔非常有效,但當(dāng)數(shù)據(jù)更新不頻繁時,這可能會導(dǎo)致混淆。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

例如: 使用折線圖來代表年度收入,如果數(shù)據(jù)是每月更新的,則每個月在圖表中會生成一個個孤立的標(biāo)記點。用戶可能會假設(shè)連接“標(biāo)記”的線代表實際值,而在特定時間實際的收入數(shù)字是未知的,所以可能會產(chǎn)生誤會。在這種情況下,使用垂直條形圖可能是一個更好的選擇。

六、不把折線圖強行“平滑”

平滑的折線圖可能在視覺上很好看,但它們錯誤地反映了背后的實際數(shù)據(jù),而且過粗的線會模糊真正的“標(biāo)記”位置。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

七、避免使用比例不同的雙軸折線圖

通常,為了節(jié)省可視化空間,當(dāng)有兩個具有相同度量但大小不同的數(shù)據(jù)系列時,可能傾向于使用雙軸圖。但這些圖表不僅難以閱讀,而且它們還以完全誤導(dǎo)的方式代表了兩個數(shù)據(jù)系列之間的比較。大多數(shù)用戶不會密切關(guān)注比例,只是瀏覽圖表,然后就得出了錯誤的結(jié)論。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

八、限制餅圖中顯示的切片數(shù)量

餅狀圖是最流行的也是經(jīng)常被誤用的圖表之一。在大多數(shù)情況下,條形圖是更好的選擇。但如果你決定做一個餅狀圖,有2個比較好的建議:

  1. 不要超過5-7片,保持簡單;
  2. 可以將額外的最小段分組到“其他”切片。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

九、在圖表上直接標(biāo)注

如果沒有適當(dāng)?shù)臉?biāo)簽,無論你的圖表有多好,它都不會有意義。直接在圖表上標(biāo)注對所有用戶都非常有幫助。查閱圖例需要時間和精力來理清數(shù)據(jù)和對應(yīng)的部分。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

十、不要在切片上貼數(shù)據(jù)

將數(shù)據(jù)放在切片上可能會導(dǎo)致多個問題,在可讀性問題上和窄切片上都會有挑戰(zhàn)。相反,添加黑色標(biāo)簽?zāi)芮逦逆溄拥矫總€部分。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

十一、保持餅圖切片秩序以提升閱讀效率

在確定餅片秩序時,有幾種常用的方法:

  1. 將最大的切片放在12點的位置,然后將下一片切片順時針降序排列;
  2. 把最大的切片放在12點的位置,第二大的放在順時針相鄰位置,第三大的放在11點的位置,其余的切片按順時針降序排列。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

十二、避免隨機排列

同樣的建議也適用于其他許多圖表。不要默認采用字母排序,將最大的數(shù)值放在頂部(對于水平條形圖)或左側(cè)(對于垂直條形圖),以確保最重要的數(shù)值占據(jù)最突出的空間,減少眼球運動和閱讀圖表所需的時間。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

十三、窄的餅圖是難閱讀的

餅圖通常不是最容易閱讀的圖,因為比較相似的值非常困難。當(dāng)我們把中間部分去掉,創(chuàng)建一個圓圈圖表時,我們騰出了空間來顯示額外的信息,但這樣犧牲了清晰度,極端情況下,圖表就會變得毫無用處。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

十四、視覺效果不要搶了數(shù)據(jù)風(fēng)頭

不必要的造型不僅會分散注意力,還可能導(dǎo)致對數(shù)據(jù)的誤解和用戶的錯誤印象。你應(yīng)該避免:

  1. 3D元素,明暗面;
  2. 陰影、漸變和其他扭曲的多彩色;
  3. 斑馬圖案,過多的網(wǎng)格線;
  4. 過度裝飾,斜體,粗體或襯線字體。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

十五、選擇與數(shù)據(jù)性質(zhì)相匹配的調(diào)色板

顏色是有效的數(shù)據(jù)可視化的組成部分,在設(shè)計時考慮以下3種顏色類型:

一個定性調(diào)色板最適合顯示分類變量。為確保易用性,所分配的顏色應(yīng)該是不同的。

連續(xù)調(diào)色板最適合需要按特定順序放置的數(shù)字變量。使用色相或亮度或兩者的組合,可以創(chuàng)建一個連續(xù)的顏色集。

發(fā)散調(diào)色板是兩個連續(xù)調(diào)色板的組合,中間有一個中心值(通常為0)。通常不同的調(diào)色板將傳達積極和消極的價值。確保顏色也與“消極”和“積極”表現(xiàn)的概念相匹配。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

看看一個方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3,它可以幫助你生成各種調(diào)色板。

十六、設(shè)計的可訪問性

根據(jù)美國國家眼科研究所(National Eye Institute)的數(shù)據(jù),大約每12人中就有1人是色盲。你的圖表只有在廣泛的受眾可以訪問時才會成功。

  1. 在調(diào)色板中使用不同的飽和度和亮度;
  2. 把現(xiàn)有配色去色然后檢查對比度和可讀性。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

十七、關(guān)注易讀性

確保排版能夠準(zhǔn)確傳達信息,幫助用戶專注于數(shù)據(jù),而不是分散用戶的注意力。

  1. 選擇易讀的字體,避免襯線和裝飾過度的字體;
  2. 避免使用斜體、粗體和全部大寫;
  3. 確保與背景有高對比度;
  4. 不要旋轉(zhuǎn)文字。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

十八、使用水平條形圖代替旋轉(zhuǎn)標(biāo)簽

這個簡單的技巧將確保用戶能夠更有效地閱讀圖表,而不會扭傷他們的脖子。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

十九、事先選擇合適的圖表庫

如果你的任務(wù)是在web和移動項目中添加交互式圖表,你應(yīng)該問的第一個問題是我們將使用什么圖表庫?現(xiàn)代圖表庫包含了許多前面提到的交互和規(guī)則?;谝讯x庫的設(shè)計將確保易于實現(xiàn),并能提供大量交互想法。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

二十、做成動態(tài)圖表

幫助用戶通過改變參數(shù),可視化數(shù)據(jù)進行探索。然后得出結(jié)論,最大化價值和洞察力。在下面的示例中,你可以看到IOS Health應(yīng)用使用了各種數(shù)據(jù)表示的組合。

天吶,國外大佬總結(jié)的這20條B端圖表設(shè)計原則,簡直太實用了!

原文作者:Taras Bakusevych(本文翻譯已獲得作者的正式授權(quán))

原文地址:https://uxdesign.cc/20-ideas-for-better-data-visualization-73f7e3c2782d

譯者:彩云Sky,公眾號:彩云譯設(shè)計;人人都是產(chǎn)品經(jīng)理專欄作家,騰訊高級視覺設(shè)計師。

本文由@彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 謝謝,學(xué)習(xí)了

    來自廣東 回復(fù)
  2. 來自安徽 回復(fù)
  3. 棒,做PPT時候當(dāng)工具書用

    來自天津 回復(fù)