圖表的基本構成(來源網易 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. 規劃設計,輸出方案
前三步更多會由產品經理、運營人員去思考并輸出結果,最后兩步則由我們設計師來完成,這兩步也正是這兩篇系列文章的主題所在。
在學習過程中,我們每個人可有不同的思考方式和側重點,以我個人的角度出發:能夠讀懂常見的數據可視化圖表,并從圖表中能獲取到關鍵信息。當有一堆數據擺在面前,能根據業務目標選擇合適的數據展示類型,并運用設計手段完整的表達給用戶。有了這些沉淀,我就能更好的和產品、運營打交道,更多的關注鏈路上游的信息,從而進一步提升設計的產出質量。
歡迎交流、批評和指正。
作者:又彬
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( 91whvog3.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司