政務可視化設計經驗——圖表習慣

編輯導語：隨著互聯網的不斷發展，政務方面的業務也在不斷的朝著互聯網方向靠近，比如政務系統的頁面設計，需要有很多表格以及圖形化表示，并且設計需要嚴謹；本文作者分享了關于政務可視化設計經驗的圖標習慣，我們一起來了解一下。

頁面視覺只是表現層的組成之一。

作為政務可視化的設計師，需要站在用戶的角度去面向業務理解數據。數據可視化主要旨在借助于圖形化手段，清晰有效地傳達與溝通信息，因此合理的表述才是我們的核心；我們聽過無數的道理，但真正意義上面向業務理解數據是很多設計師都邁不過去的坎，這就是C端設計師進入B端市場的現象。

通過復盤設計師參與過的項目時，發現仔細研究圖表的選擇和組成元素的行為，可以有效提升設計師對于業務和數據的滲透。和客戶敲定指標內容，其實也就是鉆研業務的過程。

凡事有個過程，敲定指標內容往往伴隨的都是陣痛。時間久了就能總結自己的方法論和技巧，面對客戶的時候也不會生澀，與君同勉。

本章主要講一下有關制作圖表的一些習慣和偏好，希望鉆研業務的過程中這些內容能有所幫助。

以下內容收集了Ant對于數據的處理和互聯網上成功的案例。自己看的時候感覺比較凌亂，所以重新梳理總結了一遍，加上了自己平時工作中的理解，和大家分享；特別建議剛剛起步的同學去看下G2Plot的系統性介紹，有助于對于基礎知識的了解。

一、圖表布局

可視化的大屏主要是讓使用的人快速、準確、清晰地理解數據的意義，即而進行分析趨勢、驅動決策。

政務可視化的大屏傾向觀賞展示型，針對的對象也是偏向決策者的，重點是描述型的指標結果頁面；因此，確定核心指標間的聯系和優先級，合理并有層級的進行圖表布局，把結論和最重要的指標放在醒目的位置。

我們之前說過獲取信息點取決于用戶需求，而傳播信息點又受傳播媒介影響，圖表就是這個媒介之一。

雖然我們傾向觀賞展示型，決定使用數據概覽。政務的數據有許多方面，當業務不斷下鉆時也會經常出現需要數據分析，那么如何合理并且有層級的進行圖表布局？

我們總結了一些經驗：① 概述第一，突出重點，表達準確；②先具體再趨勢，信息粒度從大至小。

• 第一梯隊：大指標區域；
• 第二梯隊：趨勢圖（折線圖）+排行類圖表（條形圖）；
• 第三梯隊：細分類型圖表（這個梯隊如果數據支持，建議從大到小，一目了然）；
• 第四梯隊：表格+大量文本；

由于匯報的特殊性，又要講成果又要細分下去講過程做新意。可能這邊講的有點玄，我打算這么解釋——你細想你們的項目是怎么接到，你們的客戶過往都是拿PPT匯報的啊！細想怎么接到項目就是在鉆研客戶的需求，客戶為啥想要過程，是因為要背書自己的成果，有理有據。你的可視化大屏就是客戶不滿意以前的ppt，想要再往上走一步，但是也要保留以前ppt匯報的習慣。

PS：同一信息面中的圖表數量5-9（7±2）個，避免用戶在使用過程中的記憶出錯。

這四個梯隊如此安排，其實是觀察客戶在使用大屏的習慣而得。層層遞進過程中，第一梯隊講重點，第二梯隊一眼看出趨勢和排名。等到需要展開重點了，再用第三第四梯隊詮釋，往往這步就是看看而已，優先級最高的還是前面的重點、趨勢、排名。

沒人能在短時間內記住那么多詮釋的資料，最有印象的還是前面的內容。經過我在現場維穩的觀察，客戶其實使用大屏是介于Infographic還是Visualization之間的。

知道圖表的布局原則了，接下來告訴你怎么挑選對應的圖表。下面是一張多篇文章都引用過的，來自設計師Abela對圖表的各種特征進行了大致的概括總結，這邊借花獻佛，留個印象。

上述圖表選擇器還是比較專業的，我們最經常使用的還是六件套— 柱狀圖、條形圖、折線圖、餅圖、散點圖、地圖。經常翻閱的還是Echart和AntV上的具體圖表，因為已經實現了，所以靠譜且生動。

二、標題與注釋

講這個前面我們先了解一下圖表完整的樣子是怎樣的：

一個完整的圖表是由標題、副標題、注釋、圖例、X軸標題（單位）、X軸標簽、X軸刻度線、Y軸標題（單位）、Y軸標簽、Y軸刻度線、網格線、提示信息等構成的。

在平常使用的過程中，會根據場景去修飾刪減一些內容。我在此列出來的原因是希望各位在使用圖表的時候能把這12個組成元素在大腦中輪一遍，確保修飾刪減的時候是為更好的展示信息去處理，而不是因為遺忘。

標題為了言簡意賅的對圖表主題進行闡述。注釋則是表明數據來源，給數據背書用的。均是用來更直觀的了解圖表主題和內容來源。那么舉兩個例子來解釋這塊內容是如何進行修飾刪減的。

1. 標題中文案修飾刪減的案例

通常圖表的標題是根據圖表需要表達的內容決定，大多數同學可能認為命名沒有太多問題。

根據概述第一、突出重點、表達準確的原則，我們建議將概括的標題中加入結論性的信息點；這樣讓閱讀者在最初接觸信息的時候就能通曉圖表說明了什么，不過前提是這個圖表的結論是單一且唯一的。

2. 標題區域強化重點信息的案例

我們前面說過第一梯隊是大指標區域，第二梯隊才是趨勢圖。如下的圖表在表達上只能一眼看出趨勢，并不能直接有效的傳遞信息。

在對數據進行高度概括時，展示指示卡+數值，比圖表更直接更有效。提煉出圖表中的有效信息，將其層級放大，重點突出這些信息點。

三、坐標軸

軸呢 ，是用來定義坐標系中數據在方向和值的映射關系的。一般存在的就是二維笛卡爾坐標系或者極坐標軸，前面我們講過主要是軸線、軸刻度線、軸標簽、軸標題（單位）以及網格線。

政務可視化中，這塊容易弱化，主要弱化方向Y軸的功能。因為信息被提煉了，所以很多時候Y軸對應的映射功能就弱化了；比如軸標題很多情況下是會被省略的，軸標簽數據的意義能在提煉信息里找到。

軸呢，根據存在的數據，主要分為分類軸，時間軸，連續軸。刻度線的使用就是加強映射關系，快速的對應到數據點。分類軸較多出現在柱狀、條形中，對于映射有天然的對應關系，故在分類軸習慣隱藏軸上的刻度線。

1. 軸上標簽內容過多的優化案例

在政務可視化的設計中，總會碰到軸標簽內容過長的情況，而且你還不得不考慮尺寸的問題。

我們的建議的是不到萬不得已千萬不要略寫，哪怕真的要略寫，一定要在略寫的指標名稱后面跟上一個小問號，鼠標hover時能立即顯示全稱。政務里的數據講究一數一源，精確對應責任單位責任人。這些都是吃過虧的小細節，請慎重。

其實面對優化軸標簽內容過多的問題，我們有以下兩類常用辦法。

1）推薦連續軸、時間軸保留頭尾進行抽樣；不推薦軸標簽旋轉來縮短顯示寬度。

2）推薦分類軸轉變為條形圖，單行或者兩行以保留全部軸標簽內容；不推薦軸標簽旋轉來縮短顯示寬度。

這兩類都提及了不希望軸標簽旋轉來解決顯示寬度不夠的情況，其實不只是軸標簽旋轉，軸標簽的上下排列、換行排列都不推薦。

盡管有些響應式方案有這類的推薦，我打算這么解釋這個問題。在政務類設計中，我們初期做適配方案的時候，充分調研了用戶可能的使用場景和用途。用戶的樣本容量小并且定制化程度高，需要適配的尺寸也是定的下來的。

設計中向視覺效果緯度有過多的傾斜，優先保障視覺體驗，因此就不推薦響應度更好、適配性更佳的方案。

當然做數據型后臺解決辦法的時候，我們還是將傾斜方案納入我們的選擇。畢竟兩種使用場景和設計目標是不一樣的，希望看到這邊的同學不要混淆這兩類的概念。

2. 圖表顯示標簽優化映射的案例

在繪制的圖表的時候，我們傾向將標簽直接打在圖形上。這樣做會有個后果，當數據特別多并且密的時候會造成全部標簽擠在一起的情況；因此在設計的時候需要對這塊圖表表達的信息有著充足的了解，明白其中可能會碰到的問題。

之前也說過了，政務類的定制化程度更高，我們傾向優先保障視覺體驗。那么為了保障用戶能夠快速對應這個指標的映射關系，就需要鉆研面對的業務。

需要提一句的是，標簽的文本和圖形經常需要交疊展示，所以可讀性要足夠良好，故在使用標簽的顏色請謹慎。

3. 標簽有關時間概念注明的案例

翻資料的時候，發現AntV對于相對時間有著一些定義，覺得有意思就一直沿用下來了。相對時間的精確度對于用戶并不十分重要，重要的是信息的即時性。相對時間一般用于消息、通知類功能，用戶往往更關注于書面形式的時間單位，而不必去往前推算出發布的具體時間點。

具體用法如下：

4. 標簽對于明確缺省狀態的案例

之前講過政務里的數據講究一數一源，精確對應責任單位責任人。以前有個老朋友講的一句話一直讓我記到現在，那就是“沒有數據也是一種數據”，因此在缺省狀態的標識中要做到清晰明確。

細想也是，如果沒有客戶的主觀干預，純粹在客觀上談這個問題 ，缺省狀態下也是一種價值導向。如今政務中講究打破信息孤島的概念，打通各個部委的渠道，缺少數據確實是一種有問題的情況。

• 推薦無數據的標識應該用“——”，不推薦使用“**”。
• 推薦圖表缺省是直接用中性的符號配合文字描述為“暫無”，不推薦描述為“故障”。

5. 圖表刻度線顯示的主次優化案例

圖表中的刻度線就是上面標出的網格線，由于刻度線是從軸線衍生出來的，所以將兩個一起記憶。根據主次原則，刻度線是用來輔助圖表優化映射關系的，因此圖表中的信息才是重點。那么我們習慣軸線為主，刻度線為輔，并且視覺層級上不能搶圖表中的信息。

6. 軸上選擇合適上下限的優化案例

之前說過獲取信息點取決于用戶需求，而傳播信息點又受傳播媒介影響，因此表達目的決定了上下限選取；比如數據本身沒有那么起伏變化，處理上下限的顆粒度，把刻度拉長，一樣能顯得“長勢感人”。

從上面就能明白看圖表的時候千萬不要被表面給欺騙，設計師的小心思還是要注意的。需要注意上下限有沒有被處理過，特別是沒有Y軸的直接在圖標上打標簽的（dog臉）。

存在即合理，對于處理上下限不做過多評價。只是介紹一個我們常用優化顯示效果的辦法：

折線圖或者柱狀圖的Y軸使用動態計算，這個很多輪子都實現了，例如Echart或者AntV。舉個明顯的例子就是，對于Y軸圖表中的最大值進行動態計算，比如一排數字中最大的為1790，那么軸標簽最高位為1800；一排數字中最大的是1810，那么軸標簽最高位為2100。1800還是2100是根據軸上的分段數決定的。

我記得我曾經在一篇文章中看到有些把折線的高度控制在圖表高度的2/3，或者將柱狀的高度控制在圖表高度的85%左右。我并不是很明確當時設計師的立意在哪，但是得承認這樣子確認會顯的好看，做案例可以做真實數據不行。

思前想后我認為這種方式太刻意，并且規則定制的比較細，需要每種圖表按照這樣的目標制定規則，不僅僅是優化幾張圖表就夠的。

（PS：實際數據有的時候會出現極限情況，比如有些特別大有些特別小，這種情況也適用，請不要處理數據，因為這樣的數據就是實際情況。）

四、圖例與提示信息

圖例解釋圖表區域所有視覺元素的含義，用來映射圖形的尺寸、顏色、數值等，是輔助用戶進行理解的，由映射圖形形狀和文本組成。提示信息一般是tap或者hover的時候，圖表以交互的方式吐出該位置的數據，幫助用戶更深入的了解數據。

老實說，圖例會用的比較多，畢竟需要標識信息。提示信息在可視化大屏上就比較用的少，當然我不是說不重要，只是由于人為介入比較多，表達數據的時候對數據進行了初篩。能展示出來的一般也伴隨著標簽，所以提示信息就顯得沒那么強需要，可能當層級做的比較深，數據量大的時候會使用來幫助用戶了解數據。

當然提示信息作為一種交互方式存在，我們借鑒了這種方式，比如在核心區中用來給結果數據提供詳細的背書過程，或者長又長的數據簡寫后跟上一個小問號。

著重介紹下圖例，根據數據類型不同，分為連續型圖例和分類型圖例；根據狀態不同，圖例可以被設置為靜態或可交互態。其中帶交互態：分類圖例我們使用的最多，能夠有效的區分信息。

1. 順從用戶視覺本能導向的案例

這條是我翻Ant的時候的一個驚喜，從原來的技術支持的12個位置，最后克制收斂為2種方式。不僅遵從的用戶的視覺導向，并且對于設計者也更好記憶。整體顯得比較“巧”，因此一直沿用下來了。

2. 順從用戶閱讀習慣的案例

對于人來說，四舍五入后的整數比零散的數字更加容易接受；因此我們傾向于一些取整的數字，同樣的，這不僅僅適用于圖例中的數字，同樣適用于坐標軸上下限的數字。

圖例中也有豎直圖例和水平圖例，區分這兩種的一般是：帶有連續性的傾向于使用水平圖例、帶有分類屬性的傾向于使用豎直圖例。

五、圖形

人類從圖形中獲取信息的效率遠遠比文本，可以說如今人類早已進入了讀圖時代。圖形是統計圖表的視覺通道在形狀上映射的視覺展現，是圖表的主體部分。

按照組件原子化的思路來定義現在千奇百怪的圖表，大致可以分為六種基礎樣式：折線，面積，散點，氣泡，餅/環，柱形，條形。

其實我們在工作中一直有個想法，較早之前利用原子理論結合自身業務并借助AntD的開源力量實現了公司內部的后臺組件庫。大屏可視化這塊確實因為組件比較多樣，多樣在每個組件有顏色、體飾、基礎樣式等多個緯度的變化，目前暫時做到內部源文件整理了多套組件庫。但是實際研發中，成本還是比較高，高在組件重復使用，并且做出來的源文件比較大。

與DataV不同的是我們的項目均是高定制化，我目前想的是每個項目單獨成立自己的組件庫，組件庫中自我維護自我升級，視覺稿定義整體色調、響應方案、組件容器塊等。通過分鏡、腳本來定義核心區交互方式，前期定義規則，減少重復制作成本，這套方案已經慢慢推動，看到這邊的同學有好的想法也可以聯系我。

1. 強化圖表信息表達的案例

強化圖表信息表達的過程就是體現主次順序，處理層次關系，簡化用戶獲取信息的成本。主要通過大小、明暗、標識三種方式來處理這部分需求。但是同時得注意“數據油墨比”的處理，在合適的場合使用合適的技巧。

在政務可視化中，人為干預強化圖表信息表達，不做假的情況下，給人最直接的傳達。

1）大小對比

通過大小對比是最直接的一種方式，之前我們也說過如果數據支持，一般都會處理成這樣，便于用戶理解信息。

比如柱狀圖和條形圖以分類軸為主、餅狀圖從大至小等這些場景。

2）明暗對比

通過明暗對比可以有效的區分信息，在視覺層級上也是明顯的處理了視覺噪音，便于用戶區分信息。

3）標識對比

通過標識對比，人為去干預信息的表達，多用于一前一后的標識，便于用戶識別信息。

2. 折線圖圖表習慣的相關案例

折線圖用于表示連續時間跨度內的數據，它通常用于顯示數據在一個連續的時間間隔或者時間跨度上的變化。相對于獨立的數據點，折線圖關注的是全局趨勢，反映事物隨時間或有序類別而變化，是上升了？還是下降了？針對數據做傳達。

1）折線圖適合用于時序數據，使用合適的時間間隔，使鋸齒狀的線條平滑

折線圖適合在一個連續的時間上顯示數據，而不是在不同類型的分類上。使用合適的時間間隔只是讓折線更加容易觀賞，但是如果有強需求說是一定要在某個范圍，這條略過。注意平滑并不是圓滑的曲線，并且注意慎用曲線，先不說樣本量的問題，就單單說曲線在一定程度上削減折線的變化程度。

2）善用數據點標記、標記、輔助區域，注意數據油墨比，重點是反應變化

全部標清數據點在大多數情況下標記出來的意義不大，從視覺上來看會顯得非常瑣碎。標記、輔助區域也是，一般都是伴隨交互觸發出來的，大規模的顯示會擠占數據表達的層級，數據的變化會被遮蓋。

3）添加“比較”的數據，加強線與線直接的對比，提高重要性層級

折線表達的是趨勢，單獨的一條線是比較單薄的，通過加入比較的信息，可以加強這塊內容的表達。但是同時得注意元素與元素間的層級關系，避免信息繁雜。

3. 面積圖圖表習慣的相關案例

面積圖又叫區域圖，和折線圖有相似的地方。但是與折線有區分的是多了一個面積概念，顏色的填充可以更好的突出趨勢信息。面積圖用于強調數量隨時間而變化的程度，也可用于引起人們對總值趨勢的注意。他們最常用于表現趨勢和關系，而不是傳達特定的值。

與折線相比，面積圖多了面積的元素會更好表達趨勢，而折線則是強調數據對于的值以及數據之間的變化。

1）面積顏色的樣式對應不同的場景和表達，同一系統需要準確的使用

面積圖主要是表達趨勢和關系，在這個基礎上有實底、透明、漸變三種樣式。實底面積圖為基礎樣式，旨在表達趨勢，透明面積圖旨在表達趨勢的對比，漸變旨在表達累計。

2）當面積圖中趨勢太多或者太少，請使用其他圖表去表達數據

當面積圖的x軸過于少量，不如使用堆疊柱狀圖更容易表達數據間的關系；當面積圖的趨勢種類過多（大于3），不如使用折線圖更適合表達數據間的關系。

4. 柱條圖圖表習慣的相關案例

柱狀圖用于描述分類數據之間的對比，條形圖即是橫向柱狀圖，相比基礎柱狀圖，條形圖的分類文本可以橫向排布，因此條形圖適合用于分類較多的場景。

政務可視化中我們依循7±2規則，柱狀圖總數不超過5類，條狀圖總數不超過7類，餅狀圖不超過9類。種類過多情況使用隱藏手法。

1）使用合適的寬度去適配柱條的寬度，太窄或太寬只有特定的表達目的中會使用。

習慣使用柱子寬度在整體寬度的60%，基礎示意如下：柱子寬度3N、柱子間的寬度2N、柱子離邊界寬度N。

當然更寬的柱寬以及窄間距會給人更有力量靠譜的感覺，更窄的柱寬以及寬間距會給人細膩高端的感覺，遵從排版原則。

2）分組柱狀圖/條狀圖需要強調組的概念，故組和組之間的間距要大于元素與元素之間的間距。

3）分組柱狀圖的數值是要差異不大的，如果數值差很大或者不在同一個度量衡中，建議使用雙軸圖。

4）堆疊條狀圖的數值建議在圖形之間，居中對齊。居左會產生誤解。

5. 餅狀圖圖表習慣的相關案例

餅圖主要是用來表達不同分類的占比情況，一個扇形區域就是一個分類。環圖與餅圖類似，一個弧形切片就是一個類型，都是根據面積的大小來判斷占比情況。

餅圖和環圖都是受爭議的圖表，從視覺上去比對面積的大小情況是很難確定了，因此非常依靠標簽來輔助。

相對于餅圖更加推薦使用環圖，弧長比面積和角度更有效，且環圖中心留白區域可以做文章。

1）餅圖和環圖的分類數不超過9類

2）餅圖和環圖的多個極小值可以合并展示

3）餅圖和環圖的起始依循表盤，從12點開始并順時針方向排列

6. 散點氣泡圖圖表習慣的相關案例

散點和氣泡通過變化形狀、顏色來互相轉換，比如散點本來是包含兩個緯度的坐標軸散點打點，通過變化散點的形狀和顏色可以進行更多緯度的劃分，這時候散點就轉變為氣泡了。

1）在圖上添加輔助信息幫助用戶獲取信息

比如點的趨勢可以使用趨勢線進行標明，或者標明坐標軸的四個象限用來顯示點的分布，人們不會愿意接受未處理的數據，往往傾向于接受已經被處理好的數據結果。

六、總結

所有列舉的圖表習慣皆是為了梳理業務、直截了當的表達內容，加快用戶對于信息的閱讀和理解。確定核心指標間的聯系和優先級，合理并有層級的進行圖表布局，把結論和最重要的指標放在醒目的位置。

所有的目的皆是從“概述第一，突出重點，表達準確”這條原則出發，準確來說有條件請將圖表習慣量化寫入圖表的規則中，人畢竟會出錯程序不會。

人為干預強化圖表信息表達，不做假的情況下，給人最直接的傳達；同時得注意“數據油墨比”的處理，在合適的場合使用合適的技巧。

 

作者：王亮亮，微信公眾號：曉之以厘

本文由 @王亮亮同學 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。