大家好，我是Clippp蠢护。今天為大家分享的是「圖表」設(shè)計雅宾。越來越多的公司以數(shù)據(jù)驅(qū)動產(chǎn)品進(jìn)行迭代，從中我們能看出數(shù)據(jù)的重要性葵硕。
日常工作中眉抬，無論是匯報還是設(shè)計，都離不開圖表的使用懈凹。但令人困惑的可視化圖表無處不在蜀变，往往給人帶來誤導(dǎo)性，通過遵循下面這些簡單的思路和方法可以有效改善這些問題介评。
1.選擇正確的圖表類型
選擇錯誤的圖表類型库北，或默認(rèn)使用最常見的類型，可能會混淆用戶對數(shù)據(jù)產(chǎn)生誤解们陆。
一組數(shù)據(jù)可以有多種表示方式寒瓦，具體類型取決于用戶希望看到的內(nèi)容。
2.根據(jù)正負(fù)值確定方向
當(dāng)數(shù)據(jù)中出現(xiàn)正負(fù)值時坪仇，要先確定基線的位置杂腰，再確定數(shù)據(jù)位置，將正值分布在基線上側(cè)(X軸)或右側(cè)(Y軸)椅文，負(fù)值分布在下側(cè)(X軸)或左側(cè)(Y軸)喂很。
避免在基線的同一側(cè)同時添加正值和負(fù)值，造成用戶對圖表信息理解錯誤。
3.始終從零開始繪制條形圖
單看左側(cè)的條形圖，能發(fā)現(xiàn)B的值比D的值要多3倍以上祟偷，但在右側(cè)從零開始的條形圖中，實際差異要小得多。從零開始可確保用戶獲得更準(zhǔn)確的數(shù)據(jù)展示望伦。
4.折線圖使用自適應(yīng)Y軸
對折線圖來說林说，如果始終將Y軸的比例限制為從零開始，一旦數(shù)據(jù)波動幅度很小屯伞，那整個折線圖會看起來很平坦腿箩，效果不明顯。
折線圖主要用來表現(xiàn)趨勢劣摇，根據(jù)給定時間的數(shù)據(jù)調(diào)整比例珠移，并保持折線區(qū)域能占到Y(jié)軸范圍的三分之二。
5.使用折線圖時考慮時間間隔
折線圖是由一條條小線段連接組成，這些線段展示了在短時間內(nèi)數(shù)據(jù)是如何變化的钧惧。當(dāng)時間間隔很大或數(shù)據(jù)更新不頻繁時暇韧，就要慎重考慮是否使用折線圖。
例如想表示年收入浓瞪，左側(cè)的兩個折線圖樣式都不太合適懈玻，每個月的收入是固定的數(shù)字，而折線圖展現(xiàn)的數(shù)據(jù)更像是收入的變化乾颁，相反右側(cè)的條形圖更適合來展示每月具體的收入涂乌。
6.不要使用平滑的折線
平滑的折線圖可能看著很舒服，但它們歪曲了背后的實際數(shù)據(jù)英岭，而且過粗的線條掩蓋了真正的節(jié)點湾盒。
7.謹(jǐn)慎使用雙軸折線圖
當(dāng)兩組數(shù)據(jù)出現(xiàn)X軸代表的信息相同但Y軸不同時，為節(jié)省空間我們可能會考慮用雙軸圖诅妹。
但大部分雙軸圖難以閱讀罚勾，只是感覺圖表上有很多數(shù)據(jù)，但遠(yuǎn)遠(yuǎn)沒有單個圖表展示的清晰漾唉。
8.限制餅圖的切片數(shù)量
餅圖是最受歡迎但經(jīng)常被誤用的圖表之一荧库。在使用餅圖時，首先要注意切片的數(shù)量最好保持在5-7片赵刑。
如果還有很多占比很小的切片分衫，可以將這些全部歸到“其他”切片中。
9.直接在圖表上標(biāo)注
如果沒有正確的標(biāo)注般此，無論圖表設(shè)計的多好看都沒有意義蚪战。
直接在圖表上標(biāo)注數(shù)據(jù)或信息對使用者來說更直觀，更節(jié)省時間和精力铐懊。
10.不要在切片上標(biāo)注
將數(shù)值放在切片上雖然很直觀邀桑，但可能會導(dǎo)致很多問題，例如左側(cè)餅圖數(shù)值的可讀性問題科乎、切片太薄無法添加數(shù)值等壁畸，對比來看，右側(cè)餅圖添加標(biāo)注的方式更合適茅茂。
11.餅圖切片的排序
餅圖切片的排序是一個很容易忽略的問題捏萍，將餅圖切片只是一個開始，通過合理的排序保證用戶清晰觀看圖表才是關(guān)鍵空闲。
常見的排序方法是將面積最大的切片放在12點鐘位置令杈，然后按順時針降序放置第二大的切片，以此類推碴倾。
12.避免隨機性
同樣的建議適用于其他類型的圖表逗噩。盡量不要默認(rèn)按字母順序排序掉丽，將最大值放在頂部(水平條形圖)或左側(cè)(對于垂直條形圖)，以確保最重要的值占據(jù)最突出的空間异雁，減少視線運動和閱讀圖表所需的時間捶障。
13.避免極端的環(huán)形圖
環(huán)形圖,又稱為甜甜圈圖,是餅圖的一種變體,本質(zhì)是餅圖將中間區(qū)域挖空，用在多樣品間的多種數(shù)據(jù)的比較中片迅。
雖然環(huán)形圖騰出中間區(qū)域來顯示額外的信息残邀，但犧牲清晰度走極端會讓圖表變得毫無用處。
14.讓數(shù)據(jù)自己說話
不必要的設(shè)計樣式不僅會分散注意力柑蛇，還可能導(dǎo)致用戶對數(shù)據(jù)誤解并產(chǎn)生錯誤印象芥挣，圖表在設(shè)計上應(yīng)避免：
3D元素、陰影耻台、漸變空免；
斑馬紋、過多的網(wǎng)格線盆耽；
裝飾性過強的斜體蹋砚、粗體或襯線字體。
15.選擇與數(shù)據(jù)性質(zhì)匹配的調(diào)色板
顏色是保持?jǐn)?shù)據(jù)可視化有效的組成部分摄杂，在設(shè)計時考慮3種調(diào)色板類型：
分類色板(左)適合顯示分類數(shù)據(jù)坝咐，當(dāng)你想?yún)^(qū)別不連續(xù)且內(nèi)在沒有順序關(guān)系的數(shù)據(jù)時可以使用這種類型；
連續(xù)色板(中)適用于需要按特定順序放置的變量中析恢，使用色調(diào)/亮度或兩者組合創(chuàng)建色板墨坚。
離散色板(右)是兩個連續(xù)色板的組合，中間有一個中心值(通常為零)映挂。不同的調(diào)色板會傳達(dá)正值和負(fù)值泽篮。
16.無障礙設(shè)計
根據(jù)眼科研究中心的數(shù)據(jù)，大約每12個人中就有1個色盲柑船，圖表只有在廣泛受眾可以訪問的情況下才是成功的：
在調(diào)色板中使用不同的飽和度帽撑、亮度；
黑白打印可視化圖表鞍时，檢查對比度和可讀性亏拉。
17.注重易讀性
確保圖表排版在傳達(dá)信息并幫助用戶專注于數(shù)據(jù)，而不是分散注意力：
選擇字跡清晰的字體逆巍，避免使用襯線和裝飾性很強的字體及塘；
避免使用斜體、粗體和全部大寫蒸苇；
確保文本與背景形成高對比度磷蛹；
不要旋轉(zhuǎn)文本吮旅。
18.使用水平條形圖代替旋轉(zhuǎn)標(biāo)注
這個簡單的技巧可以確保用戶能夠更有效地瀏覽圖表溪烤，而不會使他們感到緊張味咳。
19.建立圖表庫
如果你的任務(wù)是將交互式圖表添加到Web和移動項目中，那么首要考慮問題是將使用什么樣的圖表檬嘀？
基于定義的庫(Highcharts)進(jìn)行設(shè)計將確保易于實現(xiàn)槽驶，并為我們提供大量的交互想法。
20.超越靜態(tài)報告
通過更改參數(shù)鸳兽、可視化類型掂铐、時間線幫助用戶進(jìn)行探索，得出最大價值化的結(jié)論揍异。例如IOS Health結(jié)合使用了各種數(shù)據(jù)表示來發(fā)揮優(yōu)勢全陨。
最后
為大家收集整理了一波創(chuàng)意性的可視化圖表，來激發(fā)創(chuàng)作靈感衷掷，創(chuàng)造更多的可能性～
慢慢來比較快辱姨，希望對你有幫助～
精彩推薦：
