圖表的基本構成（來源網易 UEDC）
圖表標題
標題一般居中或居左對齊，但是布局時，需要綜合考慮副標題、圖例甚至篩選器控件等元素的位置。
坐標軸
坐標軸包括 X 坐標軸和 Y 坐標軸，有時還會出現次坐標軸。
1. X 軸刻度方向的改變，如果維度過多，則橫向刻度的展示范圍會非常有限，為了展示更多內容，通常會用其他替代圖表（比如橫向柱狀圖），不能替代的情況下，可以考慮將標注文案進行傾斜（不鼓勵）。
2. 數據類刻度值盡量轉化為千位分隔符（如 K，M，B），保持簡潔，以節省空間。坐標軸上的最大值取值要恰當，保證圖表占據 2/3 以上，畫面更飽滿。
3. 還需考慮坐標軸上的極值。
坐標軸
圖例
離散型數據包括橫向排列和縱向排列，連續型數據包括連續圖例。
1. 所有圖表類型的排列方式要統一，所以要考慮整體的圖表空間是適合橫向排列，還是縱向排列。
2. 所有形式總長度超過內容區換行或換列。
3. 雙軸圖包含了 2 種圖表類型，不同類型的圖例樣式要有所區分。
4. 連續型數據通過漸變色來展示數據大小的變化，具體漸變顏色定義在下文中有詳細介紹。
圖例
背景柵格
背景柵格主要用來幫助用戶快速讀取數據值，方便參考和對比。背景柵格一般有網格線、虛線、點陣、斑馬紋等。在設計柵格時，應該盡可能減少對數據的干擾，在合適的場景下，甚至可以去掉背景柵格。
柵格
Hover 態（或點擊態）
用戶在查看某一項數據指標時，給出明確的反饋和提示。數據詳情多時，還會通過浮窗的形式展現。此時該狀態下數據可以突出顯示，可以變化顏色、增加背景元素（線/面）、或者增加動態變化等。
字體
數據圖表的字體一般采用無襯線體，另外需要考慮字體的辨識度，防止在顯示上產生歧義。多數情況下，數據圖表會運行在不同分辨率的大小屏中，所以在文字排版上。
做到以上幾條，我們在設計圖表時就可以避免掉絕大多數的坑，不過畢竟圖表類型這么多，在實際場景中也會遇到各種情況。總之有這么幾條總的原則
1. 保持數據圖表簡潔、清晰、易讀
2. 強調用戶關注的數據，幫助用戶快速聚焦
3. 弱化次要元素，如柵格、圖例等
4. 刪除不必要的元素，陰影效果、酷炫動畫
5. 合理布局圖表的間距、留白等
6. 充分考慮頁面的適配效果
7. 最好使用真實的數據進行設計排版
第二部分： 圖表配色
考慮到圖表顏色在設計中至關重要，我把它單獨分出來討論。由于數據的復雜性和趨勢變化，配色方案需要考慮非常多的因素，比如可辨識度、舒適性，還需要考慮特殊人群（色盲色弱人士等）對顏色的可讀性等等。在配色過程中我們需要區分背景色和圖表配色。
背景配色
背景色一般分為深色、淺色、彩色。在很多 LED 大屏上展現數據時，多采用深色背景，比如即將到來的天貓雙十一活動，官方數據展示基本上會用深藍色作為背景，這樣可以減少屏幕拖尾，觀看時也不會過于刺眼。深色背景中的圖表配色一般不會采用太多的色彩，且圖表也不會設計得過于復雜。
中小屏幕的背景選擇性更大，中小屏幕背景色選擇范圍就比較廣，淺色、彩色、深色均可以做出很好的設計。在 Web 端，大多數場景下，我們會采用淺色甚至白色作為背景，淺色背景更適合展示大量的數據信息，而且識別度更高。
圖表配色
圖表配色最關鍵的一點，就是要有辨識度。
我們可以通過明度上的變化增加辨識度，也可以采用大跨度的不同色相來增加辨識度，另外這兩者也可以有機結合，常用于色彩較多的圖表中。
明度變化
當我們需要使用單一色相配色時，勢必要用明度差來進行設計，明度的跨度也要盡可能大才能更清晰。我們可以通過在灰度模式下配色的辨識度來判斷明度差是或否合適。
（Google Material Colors 中的 Light Blue 色卡）
需要注意的是，采用單一色相的配色種類不宜太多，建議不超過 6 種。一旦種類過多，色彩之間的明度差異勢必會變小，因而影響辨識度。
色相跨度變化
通過色相跨度來增加顏色辨識度也是我們常用的方式。
色環
需要的顏色較少時，我們盡量避免使用相近的色相，比如同類色和相近色。盡量選擇對比色或互補色，這樣可以使不同屬性數據在圖表中展示更加清晰。
美國大選圖
所需顏色較多時，建議最多不超過 12 種色相。
通常情況下人在不連續的區域內可以分辨 6?12 種不同色相。過多的顏色對傳達數據是沒有作用的，反而會讓人產生迷惑。
三種常用的取色方法
01. 色環提取
可以采用色環中同一明度下的不同色調作為圖表顏色。前面提到的單色相內取色，也可以在這個色環中進行采集，此外 Google Material Colors 是一個不錯的色板，可以結合使用。
02. 借鑒自然界中的色彩
自然界中有非常豐富的漸變色彩，而且被大家所熟知，這些色彩更容易給人們帶來愉悅感。
自然界中的色彩
在借鑒過程中，我們需要注意，比如天空經常會出現紅、藍、紫的漸變色，但這顏色的明度會有其規律，通常是淺黃到深紫，但絕對不會出現淺紫到深黃色。還有一些自然界其他的經驗配色，比如淺綠色到紫藍色，淺黃色到深綠色，橙棕色到冷灰色。
03. 漸變與明度疊加取色
在正常漸變色的基礎上疊加一層只有明度變化的灰色漸變，形成既有明度差異也有色相跨度變化的配色。
漸變與明度疊加取色
漸變色應用案例
好了，配色部分就探討到這里。除了以上關鍵內容以外，我們平時還需要注意數據圖表的適配效果、交互細節、以及動畫設計方面的問題，由于篇幅的關系暫不展開，以后有機會進一步探討。
說在最后
我們在參與此類項目設計時，通常會通過以下的流程去思考：
1. 為誰設計，用戶想要什么
2. 明確設計目標和價值
3. 明確數據指標
4. 選擇最合適的數據圖表
5. 規劃設計，輸出方案
前三步更多會由產品經理、運營人員去思考并輸出結果，最后兩步則由我們設計師來完成，這兩步也正是這兩篇系列文章的主題所在。
在學習過程中，我們每個人可有不同的思考方式和側重點，以我個人的角度出發：能夠讀懂常見的數據可視化圖表，并從圖表中能獲取到關鍵信息。當有一堆數據擺在面前，能根據業務目標選擇合適的數據展示類型，并運用設計手段完整的表達給用戶。有了這些沉淀，我就能更好的和產品、運營打交道，更多的關注鏈路上游的信息，從而進一步提升設計的產出質量。
歡迎交流、批評和指正。
作者：又彬
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.newchinaweekly.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司