文章結(jié)合案例對儀圖表設計的幾個關(guān)鍵問題展開分享，希望能夠給你一些參考。

數(shù)據(jù)類儀表盤是多個數(shù)據(jù)在單個網(wǎng)頁中的可視化呈現(xiàn)，目的在于提供用戶快速采取行動的信息聚合。儀表盤是網(wǎng)頁、應用程序以及商業(yè)環(huán)境中的常用工具，用于顯示日常監(jiān)控的信息。高效的圖表類儀表盤可視化是按照人類認知，基于長度、寬度、2D位置等屬性傳遞信息。

數(shù)據(jù)類“儀表盤”與汽車“儀表盤”相似，汽車儀表盤是方便司機快速直觀了解當下的駕駛情況，類似的Web或APP中的儀表盤也相仿，不會作為復雜數(shù)據(jù)呈現(xiàn)。它們應該是用最小成本的交互提供信息，比如用戶第一眼看到儀表盤，便立即知道我是否已經(jīng)超速運行，天然氣是否用盡，銷售額是否增加了，本周郵件推送的量同比如何？當然物理化的儀表盤和web中的還是有一大區(qū)別，網(wǎng)站是一個單點介入提供綜合服務的場所，而真實的儀表盤則專注于傳遞關(guān)鍵信息助力完成單個任務。

操作類儀表盤VS分析類儀表盤

數(shù)據(jù)類儀表盤按照使用目的劃分通常可以分為兩類，其一操作類儀表盤:用于將關(guān)鍵信息傳遞給從事即時性任務的用戶；其二分析類儀表盤：為用戶提供用于分析和決策的一覽信息，但不需要操作儀表盤一樣的即時性。

案例分析：ArcGIS面板屬于操作類儀表盤，為城市提供應急管理服務。面板顯示的信息方便調(diào)度員能夠查看救援小組的狀況，底下的條形圖表示各個事件的類型，調(diào)度員可快速甄別和跟蹤哪類緊急服務。

操作類儀表盤向用戶提供信息幫助其快速決策，執(zhí)行即時的任務，如監(jiān)控服務器的可用性，手術(shù)期間患者的生命體征，客戶服務電話或飛行交通監(jiān)控。操作類儀表盤通常呈現(xiàn)不斷更新和更改的數(shù)據(jù)，雖然并不是所有的操作類儀表盤應用于高風險的環(huán)境，比如醫(yī)院和應急管理，但是都具有一個共同特征，就是快速向用戶提供數(shù)據(jù)，幫助識別數(shù)據(jù)中的不可接受的偏差或是可視化可用資源便于協(xié)同。

分析類儀表盤則是為了幫助用戶進行深層次的思考、調(diào)查、分析。每日更新銷售類儀表盤的數(shù)據(jù)不需要銷售經(jīng)理立即進行緊急的干預，他只是讓經(jīng)理知道波動的銷售數(shù)據(jù)，這些數(shù)據(jù)為后期的深入分析提供了依據(jù)。

兩類儀表盤都有一個特征，那就是向用戶提供重要而關(guān)鍵的信息，并一目了然的總覽呈現(xiàn)。

預處理與定量屬性關(guān)系

為了讓用戶快速了解數(shù)據(jù)間的關(guān)系，設計要符合人類視知覺的原理。

首先看下在哪些原理中，用戶是不需要耗散精力就可以快速察覺，業(yè)界專有名詞為“預處理”，用戶在下意識狀態(tài)下就可以知曉信息。下圖中多條線多行顯示，用戶不需要耗散精力甄別，較長的一條會自動進入眼簾。當然除了長度外，面積、角度、2D位置和顏色等屬性都具有這樣的功效。雖然使用了預處理屬性的圖表都容易甄別，但是無法精確到尺寸級別，比如我們可以從很多小的長方形中識別出最大的那個，但是無法說出大多少。

案例分析：線狀圖表，基于視知覺屬性，即使沒有完全注意到圖表，透過長度的比較，很容易甄別出最長的那條線。

案例分析：數(shù)據(jù)分析，利用2D位置的屬性。左側(cè)折線圖方便人們快速甄別突出的小圓點以及點之間的聯(lián)系，我們很容易看出周三發(fā)生的數(shù)據(jù)有所下滑。右側(cè)條狀圖使用長度去表示單類指標變量，用戶很容易識別條C是最長，大約是條B的兩倍。

另一個預處理屬性-顏色也是常用的，比如紅色小圓點在眾多藍色點中很容易脫穎而出。但是有個問題是，人們無法將顏色按照特定的順序排列，所以顏色不應該用來傳達定量的信息。（備注：高達4.5%的普通人群患有某種形式的色盲）

線與面的圖表對比

從上我們可以看到，2D位置和長度可支持定量分析，基于這些屬性的可視化圖表通常是有效和易于理解的。比如長度在條狀圖中的使用，對比每個欄的長度，從而容易地比較值的多與少（特別是升序或降序排列）。比如2D位置的圖像，如散點圖或線圖，都是利用了預處理的2D屬性。

案例分析：散點圖是數(shù)據(jù)點在直角坐標系的分布圖，是對于兩個變量之間關(guān)系的有效可視化。在該圖中，由于2D位置是帶有預處理屬性，您可以立即注意每個軸上面那些最高和最低數(shù)據(jù)點，并且還可以容易地注意到數(shù)據(jù)之間潛在關(guān)聯(lián)或其他關(guān)系。

圓形、環(huán)狀圖、面積圖難以快速準確地獲得信息

圓形圖，如餅圖，儀表盤和雷達圖并不能直觀的去傳遞數(shù)據(jù)之間的量化關(guān)系，原因主要是它們依靠面積和角度來傳達定量信息。雖然區(qū)域和角度也是具有預處理屬性，但是讓人們分辨區(qū)域之間的大小比較相對較難。

案例分析：微軟Power BI 儀表盤，環(huán)形圖1和樹形圖2顯示數(shù)據(jù)。環(huán)形圖和餅圖類似，它們使用區(qū)域和角度來表達定量信息，但是中空使得每個切片的面積更小，所以可識別效果更差，從而使圖表中每個選項的定量值確定更為復雜困難。樹形圖也是使用不同大小的矩形來表達不同城市的銷售額，但是比較可惜的是人是無法快速而精確的識別區(qū)域的大小，所以相對來說樹形圖不是一個高效傳遞數(shù)據(jù)大小信息的方式。

我們可以看到與數(shù)量相比，基于面積顯示的報表相對來說缺少表達的高效性與精確性，所以通常不推薦用戶使用餅圖和樹形圖之類的來表達復雜關(guān)系的數(shù)據(jù)集。餅圖和環(huán)形圖在需要傳遞復雜數(shù)據(jù)信息傳遞中使用較少（當然它們在簡單地顯示各部分百分比之間的關(guān)系具有壓倒性差異，例如表達公司收入來源的各個部分的比例關(guān)系）。

其次看到樹形圖，樹形圖指的是將分層數(shù)據(jù)集顯示為不同大小的一系列嵌套矩形，其中每個矩形的大小對應不同數(shù)字值。樹形圖的優(yōu)點就是可以在緊湊的空間中顯示復雜的數(shù)據(jù)信息，它允許用戶以放松狀態(tài)查詢數(shù)據(jù)并尋求更多的細節(jié)，所以樹形圖不是特別適合使用在簡單、操作性強的儀表盤上。同理角度類的儀表盤也只能傳遞少量的量化信息，模擬測試發(fā)現(xiàn)在現(xiàn)有汽車上占據(jù)大量空間的儀表圓環(huán)鐘表式儀表盤其實還不如簡單的線狀儀表盤來得高效。

案例分析：Klipfolio儀表盤使用徑向量規(guī)來顯示特定范圍內(nèi)的度量值。圖環(huán)狀可視化是大空間傳遞少信息的典型（在此前提及的文章里面也是屬于預處理效果較差的那種），而角度成為了傳達關(guān)鍵數(shù)據(jù)的主要手段。在下面，同一個儀表盤使用明顯更好的線性子彈圖來傳遞類似的信息。

3D圖表

用3D的圖表在平面中去表示兩種變量通常是為了展現(xiàn)上更為好看，但是會使得傳達的信息不容易快速、準確獲取，因為它打破了常規(guī)顯示數(shù)據(jù)的視覺形狀和對齊方式，容易受到3D可視化的扭曲影響，相對于2D圖表，3D更難以正確解讀，用戶更難看出條狀圖的頂部和哪個刻度是對齊的？對應的值是多少？

案例分析：3D化后的圖表因為打破了常規(guī)的形狀呈現(xiàn)，給讀取數(shù)值帶來了一定的難度。在3D的柱狀圖中去分辨哪條柱子更短變得比之前更為困難，但是其實在2D圖表中，對于長度的分辨是最高效的。例如確定上述3D圖表中第3和第4季度之間的具體關(guān)系比相同數(shù)據(jù)的2D版本困難多。

案例分析：在3D餅圖中，區(qū)域相對是透視存在的，透視圖在平面上呈現(xiàn)，通常是近大遠小，因此底部傾斜靠近觀察者比遠端部分的看上去更大。這樣的可視化會誤導數(shù)據(jù)的解析，觀者很難通過面積或體塊的大小來辨別占比的多少。

使用顏色、形狀和分組來顯示類別

雖然顏色和形狀不擅長展示數(shù)量關(guān)系，但是它們可以用于表示分類。根據(jù)格式塔心理學-相似度原理，具有相似形狀或顏色的項目通常被認為是相關(guān)的。此外空間的鄰近也可以表示分組情況。由于色覺障礙患者眾多，所以一般顏色屬性如色調(diào)或飽和度作為次要分組提示，而不是作為顯示團體或類別的主要方式。選擇形狀或清晰的視覺分組是相關(guān)性更可靠的信號，使用顏色屬性是幫助加強這些關(guān)系。顏色可以增加關(guān)系的視覺重量，但在大多數(shù)情況下，只能用來加強已經(jīng)以不同的方式傳達的信息（例如使用接近或類似的形狀），顏色和形狀的組合能形成更明顯的信號。

案例分析：Dundas呼叫中心儀表盤使用形狀和邊框來指示不同類別的數(shù)據(jù)。形狀區(qū)分了哪些是來自網(wǎng)絡聊天的呼叫，邊界則區(qū)分了不同的客服。通過顏色的強弱來顯示工作中的重疊事件，這個屬性再次強調(diào)了此信息的重要性。

結(jié)論

數(shù)據(jù)儀表板旨在快速傳達重要信息，而不需要大量的時間或認知資源進行解釋。因此，我們的目標是把關(guān)鍵信息融入到圖表中，然后讓用戶第一眼，在無感知可視化的情況下，就可以知曉數(shù)據(jù)中的關(guān)鍵信息。

譯者：agileyang

作者：PAGE LAUBHEIMER

譯文來源：https://www.nngroup.com/articles/dashboards-preattentive/

本文由 @agileyang 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議