數(shù)據(jù)可視化是傳達(dá)信息的最好的方法之一躬柬，它可以直觀地呈現(xiàn)數(shù)據(jù)蠢箩，快速吸引用戶的注意力。但是如果設(shè)計(jì)師對圖表設(shè)計(jì)的理解有偏差请祖，在界面呈現(xiàn)上可能會對用戶產(chǎn)生錯誤的引導(dǎo)，因此筆者結(jié)合自己的工作經(jīng)驗(yàn)對圖表設(shè)計(jì)進(jìn)行總結(jié)脖祈，希望每位設(shè)計(jì)師都能成為優(yōu)秀的數(shù)據(jù)搬運(yùn)工肆捕。

下面我將從功能、交互和UI深挖圖表設(shè)計(jì)的各個(gè)知識點(diǎn)盖高，敲黑板劃重點(diǎn)咯～

前言

1.概念
圖表泛指在屏幕中顯示的慎陵，可直觀展示統(tǒng)計(jì)信息屬性（時(shí)間性、數(shù)量性等）喻奥，對知識挖掘和信息直觀生動感受起關(guān)鍵作用的圖形結(jié)構(gòu)席纽，是一種很好的將對象屬性數(shù)據(jù)直觀、形象地“可視化”的手段撞蚕。

如果說表格可以承載數(shù)據(jù)的全面性润梯，那么圖表可以完美展現(xiàn)數(shù)據(jù)的特點(diǎn)和變化，它對數(shù)據(jù)的解讀能力是表格無法做到的甥厦。

2.使用場景

(1)比較數(shù)據(jù)差異情況纺铭。基于分類的數(shù)據(jù)刀疙，可以通過比較數(shù)據(jù)來了解不同分類的差異舶赔，比如柱狀圖∏恚基于流程的數(shù)據(jù)竟纳，可以通過比較數(shù)據(jù)了解數(shù)據(jù)的變化趨勢，比如折線圖油够。
(2)分析數(shù)據(jù)關(guān)聯(lián)情況蚁袭。展現(xiàn)數(shù)據(jù)間相互關(guān)系和數(shù)據(jù)的流向征懈。比如桑葚圖石咬。
(3)查看數(shù)據(jù)分布情況。對于錯綜復(fù)雜的變量之間關(guān)系卖哎，可以通過圖表來找出規(guī)律鬼悠。比如利用氣泡圖進(jìn)行回歸分析删性。
(4)了解數(shù)據(jù)構(gòu)成情況。發(fā)現(xiàn)各變量的占比情況焕窝，比如餅圖蹬挺。

3.原則

(1)輕量。眾所周知表格是可以承載數(shù)據(jù)的全面性它掂，但將相同的數(shù)據(jù)用可視化展示時(shí)巴帮，設(shè)計(jì)師總想將所有的信息堆砌在圖表上，顯得圖表非常笨重虐秋，因此增加了用戶的思考時(shí)間榕茧。在此建議明確你圖表類型的特點(diǎn)，將主要信息呈現(xiàn)在圖表上或者分層展示圖表客给，比如數(shù)據(jù)鉆取功能用押。
(2)直觀。設(shè)計(jì)師應(yīng)該將數(shù)據(jù)信息清晰而直觀地表達(dá)出來靶剑，使用戶一眼就能洞察事實(shí)蜻拨，更快地發(fā)掘商業(yè)價(jià)值并作出決策。
(3)美感桩引。缺乏美感的數(shù)據(jù)可視化僅僅是數(shù)據(jù)展示缎讼。美感包括兩個(gè)部分，第一個(gè)部分是整體協(xié)調(diào)美坑匠，比如對圖表中的各個(gè)元素（標(biāo)題休涤、網(wǎng)格、坐標(biāo)軸笛辟、縮略軸功氨、圖例、提示信息手幢、預(yù)警線和輔助線等）進(jìn)行合理的排版和使用協(xié)調(diào)的配色捷凄。第二部分是局部細(xì)節(jié)美，比如設(shè)計(jì)師根據(jù)流行趨勢給圖表加上漸變色围来。

功能

我將用一種最復(fù)雜的圖表類型-雙軸圖當(dāng)作示范跺涤。
1.標(biāo)題。包括左對齊监透、居中對齊和右對齊桶错。在選擇某種對齊方式前，請兼顧圖例的擺放位置胀蛮。

2.柵格院刁。包含點(diǎn)狀、線狀和斑馬線粪狼。
(1)根據(jù)數(shù)據(jù)特點(diǎn)選擇橫縱向輔助線退腥，橫向引導(dǎo)線增強(qiáng)水平方向的導(dǎo)視任岸。縱向引導(dǎo)線增強(qiáng)垂直方向的導(dǎo)視狡刘。
(2)線狀建議用虛線享潜，因?yàn)椴皇怯脩舸_定指向值。

3.坐標(biāo)軸嗅蔬。坐標(biāo)軸包括X坐標(biāo)軸剑按、Y坐標(biāo)軸和次坐標(biāo)軸。
(1)X軸刻度方向的改變澜术，如果維度過多吕座，則橫向刻度的展示范圍有限。在沒有縮略軸的情況下瘪板，需要適當(dāng)改變刻度的角度(0~90度為宜)節(jié)省空間吴趴，但是要遵從人的閱讀習(xí)慣是從左到右的規(guī)則。
(2)Y軸初始值定為0侮攀，如果不是锣枝，則無法體現(xiàn)數(shù)據(jù)的全面性。如果數(shù)據(jù)的波動比較小有意義的（例如兰英，在股票市場數(shù)據(jù)中）撇叁，你可以截?cái)嗫潭纫燥@示這些差異。
(3)Y軸刻度值盡量轉(zhuǎn)化為千位分隔符畦贸，如K陨闹，M，B薄坏。
(4)Y軸最大值取值要恰當(dāng)趋厉，保證圖表占據(jù)2/3以上。

4.縮略軸胶坠。包括滑面和滑柱君账。
(1)拖動滑柱滑動，增加或較少滑面沈善，從而改變查看密度乡数。
(2)拖動滑面滑動，保持滑面長度闻牡，進(jìn)行前后移動净赴。不改變查看密度，只改變查看范圍罩润。

5.圖例玖翅。離散型數(shù)據(jù)包括橫向排列和縱向排列，連續(xù)型數(shù)據(jù)包括連續(xù)圖例。
(1)所有圖表類型的排列方式要統(tǒng)一烧栋，所以要考慮整體的圖表空間是適合橫向排列，還是縱向排列拳球。
(2)所有形式總長度超過內(nèi)容區(qū)換行或換列审姓。
(3)雙軸圖包含了2種圖表類型，不同類型的圖例樣式要有所區(qū)分祝峻。
(4)連續(xù)型數(shù)據(jù)通過漸變色來展示數(shù)據(jù)大小的變化魔吐。

6.提示信息。包括查看單個(gè)數(shù)據(jù)點(diǎn)和多個(gè)數(shù)據(jù)點(diǎn)莱找。
(1)單變量的浮層提示內(nèi)容為相同維度下選擇的變量酬姆。多變量的浮層提示內(nèi)容為相同維度下所有的變量。
(2)提示內(nèi)容遵從表單規(guī)范奥溺，按照冒號對齊辞色。
(3)拓展：直聯(lián)表的圖例是展示所有變量，但是交叉表不是浮定，是“變量+列維度”的排列組合相满。

7.預(yù)警線。數(shù)據(jù)超過閾值就會報(bào)警桦卒，幫助用戶監(jiān)控?cái)?shù)據(jù)立美。
(1)預(yù)警線建議用實(shí)線，并用警示的顏色引起用戶的注意方灾，最好用郵件或短信通知用戶建蹄。

8.輔助線。用戶設(shè)置某值作為數(shù)據(jù)參考進(jìn)行比較裕偿，比如設(shè)置平均分為參考數(shù)值洞慎。
(1)輔助線建議用虛線，僅起參考作用嘿棘。

交互

1.加載方式拢蛋。加載動畫建議使用和圖表相關(guān)的樣式。

2.排除異常值蔫巩。允許用戶剔除高度異常點(diǎn)谆棱，因?yàn)楫惓Ｖ禃绊懹脩魧φ麄€(gè)圖表的分析。

4.適配
(1)增減留白坪郭。圖表大小固定不變个从，只是增減留白空間。
(2)等比縮放。圖表的長寬都以相同比例縮放嗦锐。

UI

1.顏色
(1)顏色主題
1)深色背景嫌松。適合較少信息內(nèi)容。
優(yōu)點(diǎn)：可以通過布局建立良好的視覺層次奕污，深層次地反映內(nèi)容萎羔，而且視覺吸引力強(qiáng)，給人以高端的視覺感受碳默。
缺點(diǎn)：可讀性低贾陷。頁面太過聚焦所以對留白的平衡要求較高。

2)淺色背景嘱根。適合較多信息內(nèi)容髓废。
優(yōu)點(diǎn)：可讀性高，增加了頁面空間该抒。
缺點(diǎn)：內(nèi)容不聚焦慌洪，信息過少則頁面顯得太空。

(2)配色方案凑保。首先要確保顏色數(shù)量足夠滿足數(shù)據(jù)系列在圖表中的展示蒋譬。
1)使用成熟的色板，比如Flat UI Colors和Material Design Colors愉适。
2)使用流行的元素犯助，比如漸變色。
3)使用情緒板维咸，情緒板是一種借助于圖像剂买，啟發(fā)和探索用戶的體驗(yàn)，然后再作用于視覺設(shè)計(jì)的研究方法癌蓖。 可以調(diào)查并形成具有指導(dǎo)意義的“風(fēng)格感受”和“設(shè)計(jì)元素”瞬哼。

(3)顏色生成規(guī)則。一個(gè)變量統(tǒng)一用一種顏色租副，再按配色方案依次出每個(gè)變量的顏色坐慰。 使得同一圖表的色彩搭配和諧且具有美感。

(4)視覺缺陷用僧。世界上有一部分人群有視覺缺陷结胀，他們無法通過顏色來得到來精準(zhǔn)地區(qū)分圖表的維度和變量。作為設(shè)計(jì)師不能忽略這部分較為龐大的特殊群體责循。

想要從根本上解決這個(gè)問題院仿，推薦一篇騰訊設(shè)計(jì)師的文章信息圖形中的顏色探討—面向色盲人士友好的設(shè)計(jì)解決方案秸抚。

2.布局
視覺層級要符合邏輯層級速和，利用信息深度引導(dǎo)用戶閱讀。每個(gè)元素要保持一致剥汤，保證布局的整體協(xié)調(diào)颠放。

3.插畫
符合主題和整體基調(diào)，簡單易懂吭敢，數(shù)據(jù)可視化具有一定的認(rèn)知門檻碰凶，有時(shí)候需要插畫來提高用戶的理解力。

4.留白
信息過多容易造成視覺壓力省有，合理的留白可以增強(qiáng)用戶對信息的吸收能力痒留。

5.字體
避免有個(gè)性的襯線字體谴麦，字體要保證清晰可見蠢沿。字體大小適中，太小影響閱讀匾效，太大容易占用圖表控件舷蟀。普通字體大概12px，標(biāo)題用14px面哼。

工具

1.使用大廠開放的圖表庫
圖表庫的圖表類型豐富且統(tǒng)一野宜，而且大大節(jié)省了開發(fā)時(shí)間，比如百度的Echart和阿里的G2魔策。

2.在專業(yè)數(shù)據(jù)分析網(wǎng)站獲取靈感
筆者剛開始學(xué)習(xí)數(shù)據(jù)可視化就是拿著數(shù)據(jù)表格不停地在競品上摸索匈子，作為一名用戶去感受這些圖表的交互體驗(yàn)。這里推薦一份數(shù)據(jù)可視化網(wǎng)站名單闯袒。

總結(jié)

1.先懂?dāng)?shù)據(jù)虎敦，再談可視化
為此我們要了解圖表類型的適用場景和局限，可以看33種經(jīng)典圖表類型總結(jié)政敢，輕松玩轉(zhuǎn)數(shù)據(jù)可視化其徙。了解這些可以幫助大家通過UI設(shè)計(jì)更好地展現(xiàn)圖表的特點(diǎn)。比如展示各地區(qū)的人口密度喷户，可以用柱狀圖來展示唾那，但是我們發(fā)現(xiàn)用地圖會更加接近用戶的期望。

2.為了數(shù)據(jù)褪尝，過度可視化
很多時(shí)候設(shè)計(jì)師在圖表上很難展現(xiàn)自己的設(shè)計(jì)功力闹获，從而會給圖表增加過多的視覺效果，比如3D效果河哑。

3.真實(shí)數(shù)據(jù)昌罩，友好可視化
數(shù)據(jù)產(chǎn)品不要試圖去掩蓋問題，而要反映真實(shí)數(shù)據(jù)灾馒，暴露問題茎用，并且和用戶一同解決。比如對數(shù)據(jù)閾值進(jìn)行監(jiān)測，預(yù)警線就是很友好的可視化方式轨功。

參考資料

1.http://www.199it.com/wp-content/uploads/2014/06/Data_Visualization_101_How_to_Design_Charts_and_Graphs.pdf
2.http://www.woshipm.com/ucd/199509.html
3.https://antv.alipay.com/vis/doc/design/principle/color.html
4.http://www.woshipm.com/ucd/653066.html
5.http://www.reibang.com/p/2f34821b0e9d

(注：本文示例圖表圖片來自于BDP旭斥，我不是托~)