數據可視化是傳達信息的最好的方法之一，它可以直觀地呈現數據，快速吸引用戶的注意力。但是如果設計師對圖表設計的理解有偏差，在界面呈現上可能會對用戶產生錯誤的引導，因此筆者結合自己的工作經驗對圖表設計進行總結，希望每位設計師都能成為優秀的數據搬運工。

下面我將從功能、交互和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/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.jianshu.com/p/2f34821b0e9d

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

本文作者：安琪Angela

本文出自：图表设计总结┃数据可视化的精益之道

責任編輯：BFA 簡報小聚 編輯部

簡報小聚 #30 2018 年 1 月聚會

1 月 25 日｜職場對話的秘密

BFA 簡報小聚是一個以簡報溝通為主題的交流聚會，每次聚會由「主題分享」與「自由交流」兩個環節組成。「主題分享」將由三位講者 (Before, After, Pro Speaker) 依次帶來 20 分鐘的簡報溝通故事、經驗或技巧分享。

而在下個月的聚會，Before Speaker 將在與三位駐場簡報人一對一交流 #邏輯結構 #視覺設計 #訊息溝通 後再次登台，成為 After Speaker。我們希望通過定期的聚會讓每一位參與的夥伴們都能看到簡報溝通力提升後，帶來的改變力量。

歡迎各領域朋友一起來聽三位講者分享簡報溝通經驗及技巧，並與現場的職場人士交流，渡過不同體驗的夜晚。