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