條形圖和圓環圖數據占比映射的比較研究

李茂寧，玄穎雙

（1.廣州大學，廣州 510006；2.廣州番禺職業技術學院，廣州 511483）

數據可視化用圖形來映射數據，揭示事物之間的內在關系，廣泛應用于信息呈現和界面設計。數據可視化常使用條形圖和圓環圖來中介數據的比值關系，應用于終端界面的設計。先前的大量研究基于靜態環境，在動態、交互環境下，2 種形態的圖形映射效率并未明確。為了探明在時空受限的條件下兩者的映射優勢，研究設計了條形圖和圓環圖比值判斷實驗，用E-prime 來收集數據，使用SPSS 進行數據的統計，分析和比較2 種形態映射的差異，探索的結論將有助應用于動態交互場景，或有助于數據可視化設計時減少因數據堆集而導致的信息過載。

1 數據可視化機制和圖形感知

映射是一個從數理理論借用而來的術語，表示兩組事物要素之間的關系[1]。唐納德·A·諾曼認為設計中的映射應該符合人的自然認知和直接經驗，反饋具有快速準確的特點，這樣形成的一個交互過程才具有良好的體驗，他的觀點在界面設計和交互體驗中起到了重要的作用。數據可視化即是利用圖形的形狀、色相、亮度、紋理或多個特征聯合的差異來表示抽象的數據。

數據可視化基于圖形感知的研究多集中在形狀方面，其中諸多方形與圓形的感知規律對數據可視化有直接的指導意義。圓形具有示能、意指作用[2-3]，圓環具有較小的面積，在圓形界面中具有組織視覺秩序的優勢。拋開視覺審美的因素，不同形態的圖形在映射數據時，效率有較大的差異。先前的研究表明被測試對象在比較不同圖形映射數據一致性時，圓環和實心圓的正確率最高（正確率64.5%），比實心圓和正方形（正確率43.5%）或實心圓和三角形（正確率38.5%）明顯更好[4]，換句話說，在數據可視化呈現時，實心圓、三角形和正方形之間映射的準確性有較大差異，圓環和實心圓的差異不大。

雖然圓環和實心圓在映射數據時差異不大，但是圓環圖能更好地呈現多維群集數據。Arcs 等人測試了實心圓和圓環視覺編碼，認為圓環和實心圓主要依賴于弧長和面積編碼，在判斷占比時圓環和實心圓具有同等的優勢。[5]圓環圖可視化利用多個同心圓環的組合，用色彩特征映射數據，可用于反映水文地質和環境的規律[6]；環形圖可用于識別多種疾病診斷率的時空趨勢，分析疾病與性別、種族和社會因素的關聯[7]，以及用于多元流行病學數據的空間可視化[8]。在使用環形圖映射的眾多案例中，數據大多呈現集群和多維度特征，由于圓環比圓形占有更少的面積和更易于組合，而且圓環的這一特征更容易闡釋數據間的抽象關系。

基于形狀差異映射的研究還表明，條形圖和圓環圖在數據映射的效率上各有優劣。Heer 等[9]的實驗表明，比較正方形的大小不如比較具有不同長寬比的矩形準確。Hollands 等[10]發現，隨著條形圖中組件數量的增加，它們在傳達比例上的有效性也會降低。Frederick 在研究個體與總體比例關系的映射時，發現在50%、25%百分比時，圓形圖的判斷比條形圖準確，在12%、33%百分比時條形圖的判斷比圓形圖準確；在40%百分比時，圓形圖的判斷與條形圖的判斷沒有顯著差異[11]，造成這種差異與被分割的圖形特征有關，與前注意加工（Preattentive）[12]有關。Frederick E.C 后續研究中關于個體間關系的映射時，發現基于條形圖的估計比基于正方形，圓形或立方體的估計更加準確[13]。有些研究認為條形圖的修飾會嚴重影響圖表內數據的傳遞程度[14]，但還有些研究認為在認知負荷較低，認知適應后，可視化圖形中的標簽可以提高信息提取的速度和準確性[15]。條形圖利用AR 技術，可在室外環境中以沉浸式傳遞地理空間的數據[16]，條形圖也可以通過轉換而生成其他原型圖[17]。

雖然上述的研究側重和上下文不盡相同，但都是基于靜態環境，對比較的時間也并沒有明確的限定。在某些特定的條件下，數據反饋的速度比數據反饋的精度更重要，例如行駛中汽車的儀表盤，或者大量群集的數據陣列，需要對映射的比值做快速的判斷，同時與動態環境做交互處理。在控制時間的條件下，條形圖和圓環圖映射的差異性可能會加劇。先前的數據可視化研究主要關注靜態環境下的數據映射的準確性，而排除了時間和空間的限制。而在某些動態場景中數據可視化的觀察受到時間、終端物理界面、或數據量群集等因素的限制，速度非常重要，而數據映射的精度則相對次要。

具體到時空環境中，Blascheck 等[18]做了條形圖、圓環圖和徑向條形圖在智能手表中數據比較的實證研究，結果表明，在需要快速比較數據的情況下，條形圖和圓環圖比徑向條形圖更具有優勢。先前研究的成果對數據可視化的比較關系設計具有重要的指導意義，但是目前沒有明確的研究證明，在控制時間的條件下數據占總體比值關系時，條形圖與圓環圖的差異和優勢。

比較此情境下的條形圖與圓環圖映射的效率和優勢，探索其判斷感知的依據，是對界面設計的有益補充，或有助于減少因數據堆集而產生的信息過載。為了探索這一問題，研究設計了映射判斷實驗，比較二者的判斷速度和準確性。

2 實驗設計

研究的目標是探索在速度優先，精度次之的場景下，條形圖與圓環圖的映射效率。因此研究假設在此條件下，條形圖的映射比圓環圖更為快速而準確。為了驗證這一假設，本文使用數字化行為實驗的方法收集數據，通過比較反應時間來判斷速度，通過比較錯誤的頻率來判斷準確性，結合兩者數據來分析映射的效率。

2.1 刺激物

實驗的刺激物是條形圖和圓環圖。為了得到相對客觀的數據，規避可能的其他干擾因素，對條形圖和圓環圖的基本形態做了一些考慮和限定。構成條形圖的線可能存在多種方向，由于線的傾斜會產生方向錯誤感，而感知速度會隨著線的角度而變化[19]，所以實驗設計的條形圖使用常用的水平狀直線，映射的取值也按照由左到右的閱讀習慣，以灰度差異來判斷數值，從而規避因閱讀方向會導致空間偏差[20]。

圓環圖不封閉，開口在右下角，構成圓環圖的線占整個圓環的75%。閱讀的方向由上至下。由于感知判斷基于圓環圖的線的面積和條形圖線的面積一致性，2 根線的2 個端點間的粗細沒有變化，但是面積相同的2 根線的粗細有差異。2 根線都不含任何裝飾和刻度。

2.2 參與者

實驗被測對象來自廣州的高校，一共51 名。他們的年齡在18～24 歲之間，平均年齡是20.3 歲（SD為175 cm），其中男性27 人，女性24 人，裸眼視力或矯正視力正常，無色盲色弱，全部是右利手。

2.3 實驗裝置

映射判斷的實驗用計算機化實驗生成系統E-prime 2.0 編制。條形圖和圓環圖隨機出現在屏幕中央，被測對象通過按鍵反應來判斷映射的數值，計算機記錄反應的時間和判斷的數值，從而獲得映射判斷的速度和判斷的錯誤率。刺激呈現在68.5 cm 彩色Led 顯示器上（屏幕分辨率是1920 PX ×1200 PX）。條形圖線長度有3 個取值，分別是143PX、287PX（20視角）和430PX，圓環圖的半徑取值分別是23PX、61PX 和68PX。由于實驗對判斷時間的限制，并未強調映射取值的精度，條形圖和圓環圖的映射取值分別設置為占總體的1、1/2 和1/3。

2.4 實驗程序

為了控制時間條件，被測對象被告知如果超過2秒沒有反應被視為錯誤判斷，在確保判斷正確的前提下，快速按鍵反應。正式實驗前需要進行練習，如果正確率高于95%且平均反應時低于1 000 ms 才可以正式開始實驗。單次實驗流程見圖1。

圖1 單次實驗流程Fig.1 Single experiment flow

實驗開始時首先會在屏幕中央呈現一個十字形的灰色注視點，實驗過程中空屏間隔的屏幕中央都有注視點。實驗過程中，被測對象手指放在“1”“2”“3”鍵位置，使用這些鍵映射數值并快速按鍵判斷，記錄正確率與反應時。被測對象按鍵反應后畫面隨即消失，判斷任務結束（如被測對象2s 內未作出反應，視為一次錯誤反應），隨機間隔500 ms～800 ms 后再次開始。單次畫面判斷完成后，刺激消失，屏幕中央出現提示，繼續進入下一畫面。

正式實驗包括36 次測試，每18 次測試完畢被測對象休息片刻，之后按確認鍵繼續操作。

3 實驗結果

在這個實驗中共采集到1 836 條數據。采集到的反應時數據做了篩選處理，將被測對象的反應時數據以Z值區間（–2.0,+2.0）為標準去除離群值，保留了1776 條數據。采集的數據使用SPSS 25 軟件進行統計分析。

球形度檢驗P=0.000<0.05，不符合球形性，采用多變量檢驗結果，見表1。多變量檢驗2 種形狀的映射（Form）F=218.385，P=0.000<0.05，表明2 種形狀的映射判斷有差異，見表2。

表1 莫奇來球形度檢驗Tab.1 W sphericity test

表2 多變量檢驗Tab.2 Multivariate test

成對比較數據表明，在3 種大小取值和3 種映射取值下，條形圖的映射判斷速度與圓環狀的映射判斷速度均有顯著差異（P<0.05），見表3。

表3 成對比較Tab.3 Pairwise comparison

續表3

反應時間平均值見圖2，條形圖在映射取值為1時，平均值為573 ms；在映射取值為1/2 時，平均值為657 ms；在映射取值為1/3 時，平均值為744 ms；圓環圖在映射取值為1 時，平均值為614 ms；在映射取值為1/2 時，平均值為689 ms；在映射取值為1/3時，平均值為 752 ms；橫線狀映射判斷平均值為658 ms，圓環狀映射判斷平均值為685 ms。條形圖的3 個尺寸的均值在不同映射取值時的反應時均低于圓環圖的反應時。

圖2 反應時間平均值Fig.2 Average reaction time

條形圖和圓環圖映射判斷錯誤數據見表4，圓環圖映射判斷錯誤率是4.03%，條形圖的映射判斷錯誤率是2.51%。數據表明相同條件下，條形圖在判斷映射數值時更準確。

表4 映射判斷錯誤率Tab.4 Mapping judgment error rate

4 分析與討論

實驗結果表明，條形圖的映射判斷無論是速度還是準確性都比圓環圖要高，綜合這2 個方面，條形圖在此條件下具有更高的效率和優勢。

條形圖和圓環圖都具有簡潔的知覺特征，掌握二者的映射效率，不僅有助于速度優先的場景下提高交互的效率，而且在呈現大量的數據時，有助于提升界面視覺組織的秩序，減少信息加工負荷。過濾器模型和注意衰減模型表明大腦處理信息的能力有限，為了避免信息過載，大腦選擇部分信息進入高級分析階段，雖然人們有選擇性注意的能力，但是由于認知的中樞瓶頸（bottleneck）效應而導致數據判斷的失誤。所以，在這種場景下映射判斷的速度比映射取值的精度更重要，當注意力在多個注視點間轉換時，某一焦點的信息過載會增加認知的負荷，從而導致專注于另一注視點注意力下降。因此從知覺的維度來看，數據可視化時，映射的速度越快，對其他場景的影響越小。

兩者比較判斷，在映射取值為1 時，條形圖和圓環圖的反應時差距最大；在映射取值為1/2 時次之；在映射取值為1/3 時差距最小。從目前僅有的3 個映射取值來看，映射取值與兩者反應時差距是一種正相關關系。但是Frederick E.C 在比較圓形圖和條形圖的占比關系時，發現判斷的準確性受到映射取值的影響，而這種影響是離散型的，比如取值為1/2、1/4時，圓形圖的判斷比條形圖準確，取值為3/25、1/3時，條形圖的判斷比圓形圖準確。由于實驗設計時未將映射取值的精度作為第一條件，映射取值只設置了3 個最簡單的值，其結果表明了差距連續減少的趨勢，如果增加映射取值的精度，是否仍然保持此趨勢有待進一步的驗證。

條形圖的3 個尺寸的均值在映射1，1/2，1/3 時的反應時均低于圓環圖的反應時，并在映射取值趨于精細時這種差距逐漸減少，無論是條形圖還是圓環圖，判斷所需要的時間都隨著取值的精細化而越來越長，兩者之間的反應時間差距趨向于0。這也符合人們的主觀猜測，同時也說明在速度優先，精度次之的場景下，兩者的比較才有現實意義。

實驗中設定的條形圖是水平狀的，雖然重力不會影響視線平分任務[21]，但是重力對垂直狀的條形圖的映射判斷是否產生疊加效應并未明確。

實驗中設定的圓環圖不封閉，開口在右下角，構成圓環圖的線占整個圓環的75%。實驗中的映射判斷基于刺激中黑色部分和灰色部分亮度上的差異，由于一階特征的圖形會產生前注意效應[12]，為了消除影響，條形圖和圓環圖需要保持一致的面積。所以實驗設計圓環圖的線占整個圓環的75%，并縮小了圓環的半徑，以保持一致的面積。Frederick 發現在判斷圓形圖占比關系時，部分判斷來自扇形的面積，部分判斷來自扇形的角度。雖然在視覺搜索任務中，閉合形狀的搜索比開放形狀的搜索更快[22]，但是由于圓環不能形成實質的角度分割，判斷的依據還是面積的特征，所以條形圖更具有競爭優勢。

由于實驗被測對象的數量相對較少，雖然在實驗過程中嚴格遵循實驗的程序和方法，并嚴格控制被測對象的視角和實驗狀態，但實驗結果仍然會具有一定程度的泛化，要獲得更為客觀的數據，最好的解決方法還是增加被測對象的數量。

5 結語

上述實驗數據反映了條形圖和圓環圖在3 種尺寸下和3 種取值下的判斷時間均值和2 種圖形判斷的錯誤率，無論是何種尺寸，條形圖的映射判斷速度始終比圓環圖的要快。判斷的錯誤率數據也表明，條形圖的映射判斷比圓環圖映射判斷更加準確，更不容易出錯。實驗證明了人們的假設，在時間優先，精度次之的場景下，條形圖的映射比圓環圖的更為快速而準確，條形圖在占比的映射判斷中，具有更好的優勢。

綜上所述，在占比的數據映射中，條形圖的映射判斷速度和準確性比圓環圖更具有優勢，更適合應用于時空受限制的場景，有助于數據可視化設計時減少因數據堆集而導致的信息過載。