1) 顏色的運(yùn)用

顏色的巧妙運(yùn)用能為數(shù)據(jù)提供更加豐富的內(nèi)涵。以最常見的紅、黃、綠三種顏色為例，分別代表了不好、中性、好的意思。

現(xiàn)在越來越多的產(chǎn)品愿意使用品牌色作為圖表的主色調(diào)，通過調(diào)整品牌色的深淺程度，做成一組同色系的色板供圖表使用，其中顏色越深代表數(shù)值越大，顏色越淺代表數(shù)值越小。

如果覺得紅黃綠這些顏色太普通，還可以考慮使用藍(lán)色和橙色這類互補(bǔ)色作為調(diào)色板。

藍(lán)橙色的搭配相較于紅綠色更具有活力，用藍(lán)色表示正值，橙色表示負(fù)值，對(duì)用戶來說也容易理解。

對(duì)于顏色的運(yùn)用，最重要的是考慮可訪問性，不僅是圖表本身顏色的對(duì)比，還要考慮圖表與背景色之間也要具有足夠高的對(duì)比度。

2) 線條和紋理

除了使用不同的顏色，還可以在圖表中添加線條或者紋理效果來構(gòu)建多種多樣的圖表樣式。

▲選擇一個(gè)基礎(chǔ)色，在基礎(chǔ)色的基礎(chǔ)上添加點(diǎn)、橫線、豎線、斜線、網(wǎng)格等多種填充樣式，構(gòu)成一套顏色統(tǒng)一但內(nèi)容差異化的柱狀圖系統(tǒng)。

▲線條也可以添加不同的紋理效果。由多種不同顏色的實(shí)線組成的折線圖往往很難讓用戶快速理解其中的意思，我們可以為折線添加各種樣式的虛線，來提高圖表的可用性。

3) 響應(yīng)性設(shè)計(jì)

如果要在手機(jī)上展示圖表信息，需要考慮手機(jī)屏幕的尺寸對(duì)于圖表的適配性。例如PC端屏幕寬度更大，更適合展示多個(gè)豎向的柱狀圖。

同樣一組圖表如果放到手機(jī)端展示，采用橫向的條形圖會(huì)更合適且合理。

▲手機(jī)屏幕寬度小，如果PC端的圖表直接照搬過來，在一屏上只能顯示幾個(gè)圖表，而且還需要用戶左右滑動(dòng)來查看更多圖表。

這樣的照搬不僅無法一下展示所有圖表，缺少直觀性和對(duì)比性，還會(huì)增加用戶操作負(fù)擔(dān)，顯然是不可取的。

▲如果覺得在手機(jī)上使用橫向的條形圖成本太高，又想讓用戶一下看到圖表的所有內(nèi)容，可以考慮使用“屏幕旋轉(zhuǎn)”提示，告知用戶把手機(jī)橫過來看圖表效果會(huì)更好。

4) 標(biāo)簽

標(biāo)簽是圖表重要的組成部分，標(biāo)簽的長度、大小都會(huì)影響圖表整體的效果。

比如有的圖表尺寸很小，空間有限，但是標(biāo)簽卻很長，如果盡可能在有限的空間中將標(biāo)簽展示清楚，值得我們?nèi)ニ伎肌?/span>

▲在圖表中并非所有內(nèi)容都要始終可見，圖表中的數(shù)據(jù)圖就可以傳達(dá)大部分的信息。如果覺得圖表中展示的標(biāo)簽過多，可以隱藏次要的信息，通過鼠標(biāo)懸浮或點(diǎn)擊來觸發(fā)這些內(nèi)容。

▲懸停狀態(tài)是隱藏次要數(shù)據(jù)同時(shí)避免圖表在視覺上看著太復(fù)雜的解決方法。在懸停時(shí)透露更多信息是漸進(jìn)式披露的重要用途，用戶可以在需要時(shí)進(jìn)行交互，并且默認(rèn)情況下不會(huì)造成頁面混亂。

另外設(shè)計(jì)圖表的時(shí)候，要做到提前規(guī)劃標(biāo)簽導(dǎo)航，確定長標(biāo)簽的展示方式，考慮怎么放置不會(huì)讓圖表顯得太臃腫。

5) 排版和層級(jí)結(jié)構(gòu)

現(xiàn)在有很多儀表盤設(shè)計(jì)得很簡約、很現(xiàn)代，這類儀表盤使用超大字號(hào)的加粗字體展示幾項(xiàng)最重要的信息，既突出重點(diǎn)，又讓整個(gè)頁面有層次和對(duì)比。

▲類似的排版能夠吸引用戶的注意力，通過前期研究確定幾個(gè)用戶最關(guān)心的內(nèi)容，然后將這些內(nèi)容重點(diǎn)展示，起到強(qiáng)調(diào)作用。

最后

最后設(shè)計(jì)夾整理了深淺兩套數(shù)據(jù)圖表源文件, 文件已打包好, 大家后臺(tái)回復(fù)關(guān)鍵詞即可領(lǐng)取。

領(lǐng)取方式：關(guān)注公眾號(hào)，后臺(tái)回復(fù)【數(shù)據(jù)圖表】獲取源文件

慢慢來比較快，希望對(duì)你有幫助！

原文地址：CLip設(shè)計(jì)夾（公眾號(hào)）