編輯導讀：在B端可視化中，往往會涉及到圖表設計，它能夠更直觀地展現數據，洞悉數據背後的真相。但是，很多人在工作中對圖表的設計並不了解。本文作者基於自身工作經驗，梳理了一些圖表設計的知識點，希望對你有幫助。
隨著大數據的興起，數據價值的不斷挖掘，圖表作為數據呈現與分析的有效手段，正扮演著越來越重要的角色。我們在進行B端平臺設計時也在思考：如何讓圖表清晰的傳達信息，同時帶來美觀的視覺感受。
為了達到清晰傳達和視覺美觀的目標，我們結合實際項目，進行大量探索及思考，梳理總結了一套適用於B端後臺類產品的圖表設計思路及方法，涵蓋了曲線圖、柱狀圖、餅圖、雷達圖、漏鬥圖等各類常用圖表類型。
01 圖表視覺層級
圖表能夠承載大量數據信息，同時視覺元素較多，如果只是憑藉設計師的審美喜好進行視覺設計，沒有整體信息讀取考量，可能會導致重要信息未能凸顯，降低用戶讀取效率。
為清晰傳達信息，進一步提升讀取效率，我們採用元素重要程度與視覺強度相綁定的方法。依據元素重要程度，將圖表元素分為三類，分別為「底層元素」、「中層元素」和「頂層元素」，並依據不同視覺強度分別設計三類元素。底層元素最弱，頂層元素最強。通過這種方法，梳理圖表元素的前後關係，能夠清晰把握元素視覺層次，保證信息傳遞效率。
1. 底層元素設計
在各類圖表中，我們把輔助說明數據的軸線、刻度等定義為底層元素。為了減少視覺幹擾，最大程度突出主圖形，底層元素全部使用淺灰色進行設計。
我們發現，當元素與背景顏色的明度對比在1.2:1時，人眼較難看到元素；當對比度在2.0:1時，視覺強度過強，易吸引用戶注意力。
通過元素視覺強度的調研及視覺嘗試，最終確定元素與背景對比度在1.6:1左右，視覺強度偏弱但人眼能夠看清的程度。以保證元素視覺不突兀，只在需要查看時可以被發現。
2. 中層元素設計
中層元素的內容包括數據圖形、數據線段等承載主要數據信息的元素，是圖表中表達數據的關鍵元素。
與底層元素相比，中層元素採用更低明度與更高飽和度的數據色來表現，使元素從頁面中凸顯出來，保證可讀性。同時在樣式上適當加入漸變、描邊等樣式，豐富視覺層次，帶來美觀的視覺感受。
3. 頂層元素設計
我們把頂層元素定義為圖表高亮信息，內容包括懸停樣式、懸停後的詳細數據說明等。在設計上為保證視覺樣式突出，使用深灰色、強調色等強對比度樣式，並輔以動畫、投影等手法保證明顯的視覺強調效果，保證頂層信息最有效的傳達給用戶。
4. 最終效果
通過層級梳理，並綁定元素重要程度和視覺強度的方法，設計後圖表主次信息均按重要程度進行對應視覺強度的展示，讓用戶能夠在第一時間接收到最重要的信息，提升信息讀取效率。
02 圖表排版設計
圖表排版是指各元素在圖表中的尺寸及布局等，對於B端後臺類產品來說，不同排版對用戶使用體驗造成較大影響。
如何建立一套合理的規範保證用戶的使用體驗？
我們經過大量討論推敲，梳理出一套針對B端後臺類產品的排版規則，力求保證用戶圖表的使用體驗。
1. 圖表尺寸
圖表尺寸指圖表整體長寬高。在項目中我們發現不同尺寸的圖表對數據展現效果影響巨大，例如巨量數據的圖表擠在名片大小的區域例顯示，這使得信息讀取的效率大打折扣。為此我們收集並提取出「全貌概覽」、「多角度環視」、「詳情分析」三類典型場景，並制定了「迷你圖」、「中號圖表」、「大號圖表」三類尺寸，針對不同尺寸優化圖表的信息展示密度，以達到高效讀取信息的目的。
「迷你圖」尺寸最小，捨棄了Y軸等不必要信息，利用小面積展示最關鍵的圖表信息，並控制數據密度，保證信息高效讀取。「中號圖表」尺寸受限，限制坐標軸刻度數量和數據的密度，例如曲線圖數據點不高於每4像素1個數據點，Y軸坐標刻度不超過5個，以確保信息密度不過載，這類圖表尺寸通常用在針對某大類內容進行多方面檢視時。「大號圖表」尺寸最大，不限制數據信息密度，給予最全最詳細的展示，這類尺寸通常用在數據詳情頁等詳細分析場景中。最後考慮到多圖表混合排列時，餅圖、地圖等大面積填色圖表，相較折線圖等描邊型圖表，視覺感受更加膨脹。我們縮小了填色類圖表的實際高度，保證多種圖表混合排列時，視覺感受的均衡。
2. 坐標軸
坐標軸在圖表中出現的頻率較高，那麼坐標軸常見的設計問題有哪些呢？
第一是橫縱坐標軸的刻度出現過密情況。
如果坐標軸所承載的是連續數據（連續數據指可量化的，連續不斷的，在區間內可任意取值的數據，如時間、金額、人數等），設計師可自行增減刻度數量以保證視覺舒適度。如果承載是離散數據（離散數據指不可量化的，無關聯的，不可在區間內任意取值的數據，如分類、軟體版本、省份等），可採取增加坐標軸縮放功能以解決.
第二個常見問題是刻度的說明文字過長。
如果是X軸（橫軸）文字過長，除了在可控範圍內減少刻度，還可採取文字傾斜45°~90°的辦法(如文字全部為中文，可用豎排代替傾斜90°)，緩解信息過密看不清的情況。
如果是Y軸（縱軸）文字過長，需聯合研發一起調整數據的單位，比如把「元」調整為「百萬元」。
如果不能調整，那就要根據所使用的圖表庫有針對性調整。例如常用的Echarts圖表、D3圖表等開源圖表庫，需要提前預估刻度文字長度並預留出來，否則刻度文字可能會被頁面裁掉而不能完全顯示。如你是用的是AntV等可自適應的圖表庫，則不必提前處理，圖表庫會自動按刻度長度進行整體調整。
3. 圖例
圖例作為圖表中不可或缺的部分，在各類圖表庫中位置不盡相同，由於不同圖表樣式差異很大，圖例的位置需整體考慮並適當布局擺放，但在同一產品或頁面內，過於隨意的擺放圖例，會導致頁面統一性較差，同時增加用戶的瀏覽成本。
我們團隊所負責的B端商業產品矩陣，作為面向用戶的產品集合，產品間聯繫非常緊密。過於靈活隨意的圖例擺放不利於用戶對於圖表的瀏覽。為解決此問題，我們基於業務特點，針對B端商業產品矩陣制定了圖例布局指導原則。
我們以提升屏幕信息密度為目標，分析不同場景的頁面排布，制定了頂部和右側兩種較為寬鬆的指導原則，供設計師在沒有明確的更優方案時選用。
當圖表是左右兩端對齊的類型，例如折線圖、柱狀圖時，建議將圖例放置在圖表頂部。這樣能結合標題等其他元素進行統一排布，減少佔用空間。當圖表本身左右都有空餘空間時，例如餅圖，建議將圖例放置於圖表的右側。也能夠節省頁面的空間。
03 數據色板設計
色板作為常見的數據表達手段，能夠利用不同顏色明確體現分類信息、數值高度、狀態信息等。但目前市面上鮮有專業用途圖表的配色工具。我們經過大量探索嘗試，梳理總結出圖表色彩的兩個關鍵維度：辨識度與統一性。既需要顏色間突出強烈可清晰辨別，又需要顏色整體能形成統一風格，以達到清晰傳遞和美觀的目標。如何平衡辨識度與統一性，是我們遇到的難題。
1. 辨識度
辨識度在圖表中有兩方面：顏色與頁面底色的辨識度，各顏色之間的辨識度。對於第一種，我們採用控制顏色的明亮程度來確保色彩辨識度，尤其對於黃色、青色等本身較亮的顏色，降低顏色的明度，確保在淺色背景下顏色可辨識。
對於第二種也就是各顏色之間的辨識度，通過實驗發現單純的顏色色相變化，例如紅色與橙色的區分，人眼不容易分辨。所以採用了色相變化+明度變化的方法，既深紅色與亮橙色，深藍色與亮紫色等，這樣用戶能在第一眼就明確分辨，保證顏色間的辨識度。
最終把顏色映射到色彩空間的三維坐標中，運用歐幾裡得距離公式測算顏色間的距離長短，來衡量各顏色間色差數值。顏色間距離越遠代表色差越大，利用數據輔助衡量辨識效果。
2. 統一性
色彩統一性的作用在於確保圖表整體風格一致，色彩搭配舒適，從而帶來美觀、統一的視覺感受。為達目的，我們首先提煉商業產品設計風格為明亮、強對比，其次把設計風格轉化為色彩數值。
經過實驗，把顏色明度限制在50%-70%，把飽和度限制在75%-85%，並在區間內不斷波動。這樣既保證了色彩視覺感受的統一，各顏色間又能夠有清晰的辨識度。
3. 顏色量化與工具
量化顏色，將色彩轉化為數值，利用數值來驗證設計師的「感覺」，能夠保證方案合理性，保證設計質量。但通過嘗試，我們常用的色彩模式均不能科學合理的量化顏色。
通過查閱大量資料，我們最終決定以小眾的HCL色彩模式來衡量色彩。其中H表示色相、C表示飽和度、L表示明度。HCL區別於傳統的RGB或HSB模式，它能夠將人眼對顏色的感知精確的量化為數值，例如黃色相比藍色明度更高，都能如實的反饋到數值上。也由於此特性，HCL模式在誕生距今不到20年間，已被一些先鋒設計師用於數據可視化的呈現中。
但是HCL作為小眾色彩模式，目前設計軟體鮮有支持，造成了HCL色彩不直觀、不方便調色等的問題。為解決此問題，我們已初步完成智能配色程序，只需輸入品牌色，就能自動生成圖表色版，並在風格上與品牌色匹配，達到整體色彩的統一。我們也將一套調配好的色板及HCL實用小工具附在文末，幫助大家直觀的查看和使用HCL模式顏色。
04 結語
數據價值就像不為人知的寶藏，隱藏在一條條枯燥晦澀的數據背後。而圖表則是開啟寶藏的鑰匙，是發掘數據價值的強有力武器。
通過對圖表的不斷探索優化，我們希望能夠最大化數據的價值。通過圖表，讓數據最直觀的展現；通過圖表，讓其背後的規律浮出水面被人探知；通過圖表，讓B端不再有難懂的數據。
附：色板及HCL工具
HCL調色Sketch插件：https://github.com/petterheterjag/chromatic-sketchHCL顏色生成器：http://medialab.github.io/iwanthue/色彩可用性檢查工具：https://color.review/作者：百度MEUX，百度移動生態用戶體驗設計中心，負責百度移動生態體系的用戶/商業產品的全鏈路體驗設計。
本文由@百度MEUX 原創發布於人人都是產品經理，未經許可，禁止轉載。
題圖來自pexels，基於CC0協議