起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線(xiàn)下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專(zhuān)項(xiàng)技能課
1300+專(zhuān)題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專(zhuān)業(yè)技能直播
會(huì)員專(zhuān)屬社群
榮耀標(biāo)識(shí)讓數(shù)據(jù)更有趣！全面總結(jié)圖表設(shè)計(jì)的思路和方法
編輯導(dǎo)語(yǔ)：數(shù)據(jù)成為了日常工作的一大重要角色，越來(lái)越多的公司以數(shù)據(jù)驅(qū)動(dòng)產(chǎn)品進(jìn)行迭代。但令人困惑的是可視化圖表無(wú)處不矮，但卻給大家?guī)?lái)了誤導(dǎo)。作者分享了一些簡(jiǎn)單的思路與方法，以此來(lái)改善這些問(wèn)題，希望對(duì)你有所幫助。
越來(lái)越多的公司以數(shù)據(jù)驅(qū)動(dòng)產(chǎn)品進(jìn)行迭代，從中我們能看出數(shù)據(jù)的重要性。
日常工作中，無(wú)論是匯報(bào)還是設(shè)計(jì)，都離不開(kāi)圖表的使用。但令人困惑的可視化圖表無(wú)處不在，往往給人帶來(lái)誤導(dǎo)性，通過(guò)遵循下面這些簡(jiǎn)單的思路和方法可以有效改善這些問(wèn)題。
一、選擇正確的圖表類(lèi)型
選擇錯(cuò)誤的圖表類(lèi)型，或默認(rèn)使用最常見(jiàn)的類(lèi)型，可能會(huì)混淆用戶(hù)對(duì)數(shù)據(jù)產(chǎn)生誤解。
一組數(shù)據(jù)可以有多種表示方式，具體類(lèi)型取決于用戶(hù)希望看到的內(nèi)容。
二、根據(jù)正負(fù)值確定方向
當(dāng)數(shù)據(jù)中出現(xiàn)正負(fù)值時(shí)，要先確定基線(xiàn)的位置，再確定數(shù)據(jù)位置，將正值分布在基線(xiàn)上側(cè)（X軸）或右側(cè)（Y軸），負(fù)值分布在下側(cè)（X軸）或左側(cè)（Y軸）。
避免在基線(xiàn)的同一側(cè)同時(shí)添加正值和負(fù)值，造成用戶(hù)對(duì)圖表信息理解錯(cuò)誤。
三、始終從零開(kāi)始繪制條形圖
單看左側(cè)的條形圖，能發(fā)現(xiàn)B的值比D的值要多3倍以上，但在右側(cè)從零開(kāi)始的條形圖中，實(shí)際差異要小得多。從零開(kāi)始可確保用戶(hù)獲得更準(zhǔn)確的數(shù)據(jù)展示。
四、折線(xiàn)圖使用自適應(yīng)Y軸
對(duì)折線(xiàn)圖來(lái)說(shuō)，如果始終將Y軸的比例限制為從零開(kāi)始，一旦數(shù)據(jù)波動(dòng)幅度很小，那整個(gè)折線(xiàn)圖會(huì)看起來(lái)很平坦，效果不明顯。
折線(xiàn)圖主要用來(lái)表現(xiàn)趨勢(shì)，根據(jù)給定時(shí)間的數(shù)據(jù)調(diào)整比例，并保持折線(xiàn)區(qū)域能占到Y(jié)軸范圍的三分之二。
五、使用折線(xiàn)圖時(shí)考慮時(shí)間間隔
折線(xiàn)圖是由一條條小線(xiàn)段連接組成，這些線(xiàn)段展示了在短時(shí)間內(nèi)數(shù)據(jù)是如何變化的。當(dāng)時(shí)間間隔很大或數(shù)據(jù)更新不頻繁時(shí)，就要慎重考慮是否使用折線(xiàn)圖。
例如想表示年收入，左側(cè)的兩個(gè)折線(xiàn)圖樣式都不太合適，每個(gè)月的收入是固定的數(shù)字，而折線(xiàn)圖展現(xiàn)的數(shù)據(jù)更像是收入的變化，相反右側(cè)的條形圖更適合來(lái)展示每月具體的收入。
六、不要使用平滑的折線(xiàn)
平滑的折線(xiàn)圖可能看著很舒服，但它們歪曲了背后的實(shí)際數(shù)據(jù)，而且過(guò)粗的線(xiàn)條掩蓋了真正的節(jié)點(diǎn)。
七、謹(jǐn)慎使用雙軸折線(xiàn)圖
當(dāng)兩組數(shù)據(jù)出現(xiàn)X軸代表的信息相同但Y軸不同時(shí)，為節(jié)省空間我們可能會(huì)考慮用雙軸圖。
但大部分雙軸圖難以閱讀，只是感覺(jué)圖表上有很多數(shù)據(jù)，但遠(yuǎn)遠(yuǎn)沒(méi)有單個(gè)圖表展示的清晰。
八、限制餅圖的切片數(shù)量
餅圖是最受歡迎但經(jīng)常被誤用的圖表之一。在使用餅圖時(shí)，首先要注意切片的數(shù)量最好保持在5-7片。
如果還有很多占比很小的切片，可以將這些全部歸到“其他”切片中。
九、直接在圖表上標(biāo)注
如果沒(méi)有正確的標(biāo)注，無(wú)論圖表設(shè)計(jì)的多好看都沒(méi)有意義。
直接在圖表上標(biāo)注數(shù)據(jù)或信息對(duì)使用者來(lái)說(shuō)更直觀(guān)，更節(jié)省時(shí)間和精力。
十、不要在切片上標(biāo)注
將數(shù)值放在切片上雖然很直觀(guān)，但可能會(huì)導(dǎo)致很多問(wèn)題，例如左側(cè)餅圖數(shù)值的可讀性問(wèn)題、切片太薄無(wú)法添加數(shù)值等，對(duì)比來(lái)看，右側(cè)餅圖添加標(biāo)注的方式更合適。
十一、餅圖切片的排序
餅圖切片的排序是一個(gè)很容易忽略的問(wèn)題，將餅圖切片只是一個(gè)開(kāi)始，通過(guò)合理的排序保證用戶(hù)清晰觀(guān)看圖表才是關(guān)鍵。
常見(jiàn)的排序方法是將面積最大的切片放在12點(diǎn)鐘位置，然后按順時(shí)針降序放置第二大的切片，以此類(lèi)推。
十二、避免隨機(jī)性
同樣的建議適用于其他類(lèi)型的圖表。盡量不要默認(rèn)按字母順序排序，將最大值放在頂部(水平條形圖)或左側(cè)(對(duì)于垂直條形圖)，以確保最重要的值占據(jù)最突出的空間，減少視線(xiàn)運(yùn)動(dòng)和閱讀圖表所需的時(shí)間。
十三、避免極端的環(huán)形圖
環(huán)形圖，又稱(chēng)為甜甜圈圖,是餅圖的一種變體,本質(zhì)是餅圖將中間區(qū)域挖空，用在多樣品間的多種數(shù)據(jù)的比較中。
雖然環(huán)形圖騰出中間區(qū)域來(lái)顯示額外的信息，但犧牲清晰度走極端會(huì)讓圖表變得毫無(wú)用處。
十四、讓數(shù)據(jù)自己說(shuō)話(huà)
不必要的設(shè)計(jì)樣式不僅會(huì)分散注意力，還可能導(dǎo)致用戶(hù)對(duì)數(shù)據(jù)誤解并產(chǎn)生錯(cuò)誤印象，圖表在設(shè)計(jì)上應(yīng)避免：
- 3D元素、陰影、漸變；
- 斑馬紋、過(guò)多的網(wǎng)格線(xiàn)；
- 裝飾性過(guò)強(qiáng)的斜體、粗體或襯線(xiàn)字體。
十五、選擇與數(shù)據(jù)性質(zhì)匹配的調(diào)色板
顏色是保持?jǐn)?shù)據(jù)可視化有效的組成部分，在設(shè)計(jì)時(shí)考慮3種調(diào)色板類(lèi)型：
- 分類(lèi)色板（左）適合顯示分類(lèi)數(shù)據(jù)，當(dāng)你想?yún)^(qū)別不連續(xù)且內(nèi)在沒(méi)有順序關(guān)系的數(shù)據(jù)時(shí)可以使用這種類(lèi)型；
- 連續(xù)色板（中）適用于需要按特定順序放置的變量中，使用色調(diào)/亮度或兩者組合創(chuàng)建色板。
- 離散色板（右）是兩個(gè)連續(xù)色板的組合，中間有一個(gè)中心值(通常為零)。不同的調(diào)色板會(huì)傳達(dá)正值和負(fù)值。
十六、無(wú)障礙設(shè)計(jì)
根據(jù)眼科研究中心的數(shù)據(jù)，大約每12個(gè)人中就有1個(gè)色盲，圖表只有在廣泛受眾可以訪(fǎng)問(wèn)的情況下才是成功的：
- 在調(diào)色板中使用不同的飽和度、亮度；
- 黑白打印可視化圖表，檢查對(duì)比度和可讀性。
十七、注重易讀性
確保圖表排版在傳達(dá)信息并幫助用戶(hù)專(zhuān)注于數(shù)據(jù)，而不是分散注意力：
- 選擇字跡清晰的字體，避免使用襯線(xiàn)和裝飾性很強(qiáng)的字體；
- 避免使用斜體、粗體和全部大寫(xiě)；
- 確保文本與背景形成高對(duì)比度；
- 不要旋轉(zhuǎn)文本。
十八、使用水平條形圖代替旋轉(zhuǎn)標(biāo)注
這個(gè)簡(jiǎn)單的技巧可以確保用戶(hù)能夠更有效地瀏覽圖表，而不會(huì)使他們感到緊張。
十九、建立圖表庫(kù)
如果你的任務(wù)是將交互式圖表添加到Web和移動(dòng)項(xiàng)目中，那么首要考慮問(wèn)題是將使用什么樣的圖表？
基于定義的庫(kù)(Highcharts)進(jìn)行設(shè)計(jì)將確保易于實(shí)現(xiàn)，并為我們提供大量的交互想法。
二十、超越靜態(tài)報(bào)告
通過(guò)更改參數(shù)、可視化類(lèi)型、時(shí)間線(xiàn)幫助用戶(hù)進(jìn)行探索，得出最大價(jià)值化的結(jié)論。例如IOS Health結(jié)合使用了各種數(shù)據(jù)表示來(lái)發(fā)揮優(yōu)勢(shì)。
#專(zhuān)欄作家#
作者：Clippp，微信公眾號(hào)：Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章，專(zhuān)注分享關(guān)于產(chǎn)品、交互、UI視覺(jué)上的設(shè)計(jì)思考。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于CC0協(xié)議。
哇噻，這篇文章簡(jiǎn)直是我的夢(mèng)中情帖了，必需給老師贊一個(gè)，寫(xiě)的太好了，分析講解非常到位。直接解決了我半年多的圖表疑惑，就一直奇怪我的圖表怎么老是土了吧唧的，今年找到原因了，困擾我半年的心病醫(yī)治好了，再次感謝??
太棒了。
這篇寫(xiě)的很棒，受教了
最近正在研究圖表怎么能做到清晰、美觀(guān)，作者的這篇文章寫(xiě)的真棒，讓我知道了在不同情景下運(yùn)用哪種圖表，怎么用比較好。學(xué)到了，謝謝作者。
一起學(xué)習(xí)！
這些圖表看的好清楚啊，讓觀(guān)眾看得懂挺重要的，簡(jiǎn)化、簡(jiǎn)潔、適合場(chǎng)景的圖表比那種美觀(guān)化的圖表要適合給觀(guān)眾看。
將信息展示清楚這個(gè)本質(zhì)核心最重要，可惜很多的圖表都是華而不實(shí)
用戶(hù)能否看得懂是挺重要的，但往往沒(méi)有那么簡(jiǎn)單能做到唉，還是需要點(diǎn)小技術(shù)和心思啊
是的，讓用戶(hù)看得懂是首要考慮的事情，在這個(gè)基礎(chǔ)上再考慮樣式和呈現(xiàn)方式會(huì)更好，更具有針對(duì)性！
我做數(shù)據(jù)圖表最大的挑戰(zhàn)是在不知道具體數(shù)據(jù)的情況下設(shè)計(jì)，只能基于預(yù)測(cè)數(shù)據(jù)進(jìn)行設(shè)計(jì)，但是實(shí)際數(shù)據(jù)偏差較大時(shí)就會(huì)導(dǎo)致圖表變得不那么好看，但是目前還沒(méi)有圖表組件能夠根據(jù)數(shù)據(jù)自適應(yīng)改變圖表類(lèi)型和樣式。
動(dòng)態(tài)可視化圖表？
一直想學(xué)習(xí)數(shù)據(jù)分析相關(guān)知識(shí)，收藏了，感謝作者！
有用就好！