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

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

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

操作類(lèi)儀表盤(pán)VS分析類(lèi)儀表盤(pán)

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

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

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

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

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

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

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

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

案例分析：線狀圖表，基于視知覺(jué)屬性，即使沒(méi)有完全注意到圖表，透過(guò)長(zhǎng)度的比較，很容易甄別出最長(zhǎng)的那條線。

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

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

線與面的圖表對(duì)比

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

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

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

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

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

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

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

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

3D圖表

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

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

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

使用顏色、形狀和分組來(lái)顯示類(lèi)別

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

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

結(jié)論

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

譯者：agileyang

作者：PAGE LAUBHEIMER

譯文來(lái)源：https://www.nngroup.com/articles/dashboards-preattentive/

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

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