圖表設計總結┃資料視覺化的精益之道
資料視覺化是傳達資訊的最好的方法之一，它可以直觀地呈現資料，快速吸引使用者的注意力。但是如果設計師對圖表設計的理解有偏差，在介面呈現上可能會對使用者產生錯誤的引導，因此筆者結合自己的工作經驗對圖表設計進行總結，希望每位設計師都能成為優秀的資料搬運工。
下面我將從功能、互動和UI深挖圖表設計的各個知識點，敲黑板劃重點咯～
前言
1。概念
圖表泛指在螢幕中顯示的，可直觀展示統計資訊屬性（時間性、數量性等），對知識挖掘和資訊直觀生動感受起關鍵作用的圖形結構，是一種很好的將物件屬性資料直觀、形象地“視覺化”的手段。
如果說表格可以承載資料的全面性，那麼圖表可以完美展現資料的特點和變化，它對資料的解讀能力是表格無法做到的。
2。使用場景
（1）比較資料差異情況。基於分類的資料，可以透過比較資料來了解不同分類的差異，比如柱狀圖。基於流程的資料，可以透過比較資料瞭解資料的變化趨勢，比如折線圖。
（2）分析資料關聯情況。展現資料間相互關係和資料的流向。比如桑葚圖。
（3）檢視資料分佈情況。對於錯綜複雜的變數之間關係，可以透過圖表來找出規律。比如利用氣泡圖進行迴歸分析。
（4）瞭解資料構成情況。發現各變數的佔比情況，比如餅圖。
3。原則
（1）輕量。眾所周知表格是可以承載資料的全面性，但將相同的資料用視覺化展示時，設計師總想將所有的資訊堆砌在圖表上，顯得圖表非常笨重，因此增加了使用者的思考時間。在此建議明確你圖表型別的特點，將主要資訊呈現在圖表上或者分層展示圖表，比如資料鑽取功能。
（2）直觀。設計師應該將資料資訊清晰而直觀地表達出來，使使用者一眼就能洞察事實，更快地發掘商業價值並作出決策。
（3）美感。缺乏美感的資料視覺化僅僅是資料展示。美感包括兩個部分，第一個部分是整體協調美，比如對圖表中的各個元素（標題、網格、座標軸、縮略軸、圖例、提示資訊、預警線和輔助線等）進行合理的排版和使用協調的配色。第二部分是區域性細節美，比如設計師根據流行趨勢給圖表加上漸變色。
功能
我將用一種最複雜的圖表型別-雙軸圖當作示範。
1。標題。包括左對齊、居中對齊和右對齊。在選擇某種對齊方式前，請兼顧圖例的擺放位置。
2。柵格。包含點狀、線狀和斑馬線。
（1）根據資料特點選擇橫縱向輔助線，橫向引導線增強水平方向的導視。縱向引導線增強垂直方向的導視。
（2）線狀建議用虛線，因為不是使用者確定指向值。
3。座標軸。座標軸包括X座標軸、Y座標軸和次座標軸。
（1）X軸刻度方向的改變，如果維度過多，則橫向刻度的展示範圍有限。在沒有縮略軸的情況下，需要適當改變刻度的角度（0~90度為宜）節省空間，但是要遵從人的閱讀習慣是從左到右的規則。
（2）Y軸初始值定為0，如果不是，則無法體現資料的全面性。如果資料的波動比較小有意義的（例如，在股票市場資料中），你可以截斷刻度以顯示這些差異。
（3）Y軸刻度值儘量轉化為千位分隔符，如K，M，B。
（4）Y軸最大值取值要恰當，保證圖表佔據2/3以上。
4。縮略軸。包括滑面和滑柱。
（1）拖動滑柱滑動，增加或較少滑面，從而改變檢視密度。
（2）拖動滑面滑動，保持滑面長度，進行前後移動。不改變檢視密度，只改變檢視範圍。
5。圖例。離散型資料包括橫向排列和縱向排列，連續型資料包括連續圖例。
（1）所有圖表型別的排列方式要統一，所以要考慮整體的圖表空間是適合橫向排列，還是縱向排列。
（2）所有形式總長度超過內容區換行或換列。
（3）雙軸圖包含了2種圖表型別，不同型別的圖例樣式要有所區分。
（4）連續型資料透過漸變色來展示資料大小的變化。
6。提示資訊。包括檢視單個數據點和多個數據點。
（1）單變數的浮層提示內容為相同維度下選擇的變數。多變數的浮層提示內容為相同維度下所有的變數。
（2）提示內容遵從表單規範，按照冒號對齊。
（3）拓展：直聯表的圖例是展示所有變數，但是交叉表不是，是“變數+列維度”的排列組合。
7。預警線。資料超過閾值就會報警，幫助使用者監控資料。
（1）預警線建議用實線，並用警示的顏色引起使用者的注意，最好用郵件或簡訊通知使用者。
8。輔助線。使用者設定某值作為資料參考進行比較，比如設定平均分為參考數值。
（1）輔助線建議用虛線，僅起參考作用。
互動
1。載入方式。載入動畫建議使用和圖表相關的樣式。
2。排除異常值。允許使用者剔除高度異常點，因為異常值會影響使用者對整個圖表的分析。
3。資料鑽取。單擊某個資料可以看到該資料的詳細資訊，變換分析的粒度。
4。適配
（1）增減留白。圖表大小固定不變，只是增減留白空間。
（2）等比縮放。圖表的長寬都以相同比例縮放。
UI
1。顏色
（1）顏色主題
1）深色背景。適合較少資訊內容。
優點：可以透過佈局建立良好的視覺層次，深層次地反映內容，而且視覺吸引力強，給人以高階的視覺感受。
缺點：可讀性低。頁面太過聚焦所以對留白的平衡要求較高。
2）淺色背景。適合較多資訊內容。
優點：可讀性高，增加了頁面空間。
缺點：內容不聚焦，資訊過少則頁面顯得太空。
（2）配色方案。首先要確保顏色數量足夠滿足資料系列在圖表中的展示。
1）使用成熟的色板，比如Flat UI Colors和Material Design Colors。
2）使用流行的元素，比如漸變色。
3）使用情緒板，情緒板是一種藉助於影象，啟發和探索使用者的體驗，然後再作用於視覺設計的研究方法。 可以調查並形成具有指導意義的“風格感受”和“設計元素”。
（3）顏色生成規則。一個變數統一用一種顏色，再按配色方案依次出每個變數的顏色。 使得同一圖表的色彩搭配和諧且具有美感。
（4）視覺缺陷。世界上有一部分人群有視覺缺陷，他們無法透過顏色來得到來精準地區分圖表的維度和變數。作為設計師不能忽略這部分較為龐大的特殊群體。
設計師常用的PS和AI提供了模擬紅色盲和綠色盲的校樣設定，選擇“檢視—校樣設定—紅色盲型/綠色盲型”。
想要從根本上解決這個問題，推薦一篇騰訊設計師的文章資訊圖形中的顏色探討—面向色盲人士友好的設計解決方案。
2。佈局
視覺層級要符合邏輯層級，利用資訊深度引導使用者閱讀。每個元素要保持一致，保證佈局的整體協調。
3。插畫
符合主題和整體基調，簡單易懂，資料視覺化具有一定的認知門檻，有時候需要插畫來提高使用者的理解力。
4。留白
資訊過多容易造成視覺壓力，合理的留白可以增強使用者對資訊的吸收能力。
5。字型
避免有個性的襯線字型，字型要保證清晰可見。字型大小適中，太小影響閱讀，太大容易佔用圖表控制元件。普通字型大概12px，標題用14px。
工具
1。使用大廠開放的圖表庫
圖表庫的圖表型別豐富且統一，而且大大節省了開發時間，比如百度的Echart和阿里的G2。
2。在專業資料分析網站獲取靈感
筆者剛開始學習資料視覺化就是拿著資料表格不停地在競品上摸索，作為一名使用者去感受這些圖表的互動體驗。這裡推薦一份資料視覺化網站名單。
總結
1。先懂資料，再談視覺化
為此我們要了解圖表型別的適用場景和侷限，可以看33種經典圖表型別總結，輕鬆玩轉資料視覺化。瞭解這些可以幫助大家透過UI設計更好地展現圖表的特點。比如展示各地區的人口密度，可以用柱狀圖來展示，但是我們發現用地圖會更加接近使用者的期望。
2。為了資料，過度視覺化
很多時候設計師在圖表上很難展現自己的設計功力，從而會給圖表增加過多的視覺效果，比如3D效果。
3。真實資料，友好視覺化
資料產品不要試圖去掩蓋問題，而要反映真實資料，暴露問題，並且和使用者一同解決。比如對資料閾值進行監測，預警線就是很友好的視覺化方式。
參考資料
1。
http：//www。
199it。com/wp-content/up
loads/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。
jianshu。com/p/2f34821b0
e9d
（注：本文示例圖表圖片來自於BDP，我不是託~）
