數據可視化中組件的應用研究

宋紫嫣 張開智 郭仕銳

摘? 要：人的視覺系統具有強大的信息處理能力，數據可視化的方式使我們能夠快速高效地獲取分析并理解大量的數據信息。數據可視化中組件的應用也就顯得尤為重要，數據可視化組件在處理和傳遞信息時具有精準、生動等優勢，它比語言和文字更直觀。在這樣一個大數據的信息時代，數據可視化中組件提供了一種便捷高效的視覺信息傳遞方式，不僅滿足了人們對信息的需求，還增強了人們對大量數據信息的理解認知能力。在數據可視化中組件的應用研究基礎上，采用文獻研究法和歸納分析法，對數據可視化中組件進行設計，理論的成立建立在實踐之中，如何正確地使用組件來展示信息，使大量復雜的數據信息經過篩選、歸納并進行視覺化處理之后，使其具有科學、準確且更易于理解的基礎，將數據信息以生動形象的方式展示在用戶面前。對數據可視化中組件的應用研究，是本文重點關注的研究與設計的意義所在。

關鍵詞：數據可視化? 組件? 視覺形態? 數據信息

中圖分類號：TM73 ? ? ? ? ? 文獻標識碼：A 文章編號：1674-098X（2020）07（c）-0143-06

Abstract： The human visual system has powerful information processing capabilities， and the way of data visualization allows us to quickly and efficiently obtain analysis and understand a large amount of data information. The application of components in data visualization is particularly important. The data visualization component has the advantages of accuracy and vividness in processing and transmitting information. It is more intuitive than language and text. In such an information era of big data， components in data visualization provide a convenient and efficient way of visual information transmission， which not only meets people's needs for information， but also enhances people's ability to understand large amounts of data. Based on the application research of components in data visualization， the literature research method and the inductive analysis method are used to design the components in data visualization. The establishment of the theory is established in practice. How to use components to display information correctly makes a large number of complex. After the data information is screened， summarized， and visualized， it has a scientific， accurate， and easier-to-understand foundation， and the data information is presented to the user in a vivid and vivid manner. The research on the application of components in data visualization is the significance of the research and design that the article focuses on.

Key Words： Data visualization;Components;Visual form;Ata information

1? 數據可視化及組件概述

1.1 數據可視化概述

“數據可視化的目的，是要對數據進行可視化處理，以使得能夠明確地、有效地傳遞信息?！薄猇italy Friedman。一般來說，以圖形方式顯示復雜數據信息，旨在使用戶更容易從一堆雜亂的數據中更有效地理解或分析，將需要花費1h的數據信息匯總到可以一目了然的數據組件中。

數據可視化主要旨在通過圖形方式清晰有效地傳達和傳遞信息。然而，這并不意味著數據可視化因其功能性使用而必須枯燥乏味，或者看起來色彩極其復雜。讓用戶更容易了解信息所傳達的意義，設計美感和體驗功能都需要兼顧，通過關鍵信息點的直接解讀，實現用戶對龐大且復雜信息的理解。簡而言之，數據可視化的目的是使數據說話，從而更準確地以視覺的形式快速傳達出復雜和抽象的數據。

1.2 組件概述

組件是基于數據用幾何圖形和地圖繪制的各種圖形。它具有直觀、形象、生動、具體等特點。組件可以使復雜數據變得簡單，使其易于理解和比較。因此，組件在統計數據整理和分析中起重要作用，并且被廣泛使用。

可視化中的重要領域是組件設計，組件是對復雜數據的模式化處理，通過統計方式情景化展示的一種設計。數據是通過對客觀真實信息的歸納，進行邏輯上的整理匯總，以具體數字代替模糊信息的方式能讓用戶獲得更直觀的體驗，更具有說服力，可信度更高。與單純的文本相比，大腦可以更輕松地處理圖形內容。每個漢字都可以視為一個圖形符號，在閱讀文本時，將這些形狀與存儲在腦海中的記憶相匹配，以了解它的含義。在一段文本中，漢字的解碼過程是按順序線性執行的，并且組件是作為一個完整的圖形同步進行解碼，因此它比文本快得多。

1.3 組件設計過程

組件設計的目的是通過組件的視覺表現形式，清晰且準確地顯示已知多個數據或單個數據的聯系。首先，需要獲得已知數據，對其進行整理分類，找到想要了解的內容，確定該數據之間的關系，選擇視覺的表現形式，最后輸出所需的組件。

2? 數據可視化中組件的分類

我們通常理解的組件就是柱狀圖、餅圖、趨勢圖等。這是對圖形的初級分類解讀.這樣的解讀方式會導致對組件的誤解讀，組件的作用，是幫助我們更好地看懂數據。選擇什么組件，需要回答的首要問題是“我有什么數據，需要用組件做什么”，而不是“組件長成什么樣”。因此我們從數據出發，從功能角度對組件進行分類，如圖3所示。

2.1 比較類

可視化的方式可以讓對比值顯示得更直觀，差異化的信息更容易被理解。通過圖形的幾何形態以及色彩劃分對比數值信息的差異，可以有效地展示出數據信息的對比狀態和差異數值。

比較型組件用于比較值的大小。使用該類型組件可以輕易地找出數據的最大值和最小值，也可以用于查看當前數值和過去的數值相比是增加還是減少。適用組件：柱狀圖、氣泡圖、直方圖、雷達圖、文本圖、瀑布圖等。

2.2 分布類

頻率以可視化展示，數據分布在一個區間或組中。數據的分布由圖形的位置，大小和顏色的漸變程度表示，并且通常用于顯示連續數據上的值的分布。適用組件：盒須圖、散點圖、氣泡圖、直方圖等。

2.3 占比類

用視覺方法顯示相同維度的比例值。該比例值是指個數據占總數的比例，以百分比的形式表現。適用組件：餅圖等。

2.4 趨勢類

分析數據趨勢的可視化方法。以圖形的位置來顯示連續區域上的數據分布，通常顯示連續區域上數據大小的變化幅度。適用組件：面積圖、折線圖等。

2.5 時間類

以時間為特定維度的數據顯示方式。用圖表的位置顯示數據，以時間的分布展現，通常用于表示數據維度的趨勢和變化。適用組件：折線圖、面積圖、時序圖等。

2.6 地圖類

可視方法顯示地理區域上的數據。使用地圖作為背景，數據的地理位置由圖表的位置表示，通常顯示不同地理區域的數據分布。適用組件：2D地圖等。

3? 數據可視化中組件的原則

3.1 輕量原則

表格可以承載數據的全面性，但是在做數據可視化的時候，如果設計師將所有的信息堆砌在組件上，組件將變得復雜且不容易被理解，增加了用戶辨識數據的時間。本著輕量的原則，將主要信息呈現在組件上或分層展示組件。

3.2 直觀原則

數據需要被直觀便捷地展示出來，這就需要設計師的精巧設計，讓用戶能夠準確明了地讀取數據值，提取數據中的商業價值。

3.3 美學原則

大數據信息時代來臨，圖形化的數據處理方式更高效便捷，作為數據信息的表現載體，其表現形式可以是多樣化的，既具有美感更被賦予了趣味，通過簡單的幾何圖形展現已經不能滿足如今數據信息發展趨勢。為了更加準確直觀地展示數據信息，讓用戶解讀數據，以多媒體的設計方式設計，從靜態到動態再到交互的設計方式讓數據可視化組件的表現形式發生了質的變化。

4? 數據可視化中組件的視覺形態

4.1 數據可視化中組件的構成

一般情況下，組件包含坐標軸、幾何標記、提示信息、圖例等，另外還可以包括輔助標記、數據標簽等。如圖4所示。

4.2 數據可視化中組件的基本形態

組件，指為表明某種數據的趨勢而繪制的組件。根據組件的分類，具有以下幾種基本形態：線形圖、條形圖、柱形圖、點圖、餅圖、區域圖、特殊圖。

4.3 數據可視化中組件的色彩運用

在顏色與人的交互當中，一種顏色的確立主要由其所處的色彩關系來決定，一種顏色要通過另一種顏色強調或多種顏色共同來強調。假如我們想讓界面中某個元素引起用戶的注意力，我們可以借由色彩對比來使這一元素從界面中凸顯出來，吸引用戶的目光。對于組件的色彩設計，同樣也遵循上述原則。

通過視覺元素中色彩的運用，使圖形更生動有趣，信息更準確，更直觀。對信息進行深度分類，強調和淡化可以通過不同色彩來區分，生動有趣的可視化形式，給用戶體驗帶來了視覺效果上的享受。企業品牌文化的視覺效果和企業品牌形象要保持高度的一致。

5? 數據可視化中組件的靜態表現

常見的數據可視化組件形式有柱狀圖、餅圖、折線圖和面積圖等。在數據報表中，數據組件形式具有清晰、便捷的優點且信息表現力強。在界面中，數據組件形式展示信息其表現力就顯得不足了，簡單的表現形式有其局限性。在大數據時代，人機交互的體驗式界面效果都需要數據可視化具有豐富的表現形式，要更具有交互情感。

靜態組件的數據可視化呈現方式，不能只具備傳達信息的功能，還要具有與用戶溝通的功能。組件形式的數據可視化相對簡單，把復雜的分散的數據以圖片的形式展現，通過組件的色彩效果展現，讓數據進行對比、比較，這樣有益于用戶理解其傳遞的信息，更符合用戶的心理需求。

組件色彩效果展現。讓顏色和組件相得益彰。在一個組件中使用太多的顏色會造成混亂和過度修飾。應該選擇和諧的組合，比如同一顏色的不同色調或者是顏色輪同一側的顏色。選擇顏色不可過于隨意。顏色的變化可以讓數據信息有差異化有對比。

5.1 相同顏色

分類數據可以設置顏色增強分類的區分度，使用相同的顏色代表同一變量，這樣用戶就可以集中注意力比較數據。

5.2 同一顏色不同色調

分類數據可以設置顏色增強分類的區分度，使用同一顏色不同色調或者輪相同面的顏色以使多條形組件簡潔、清晰。這樣用戶就可以將注意力集中在重要數據上了。

5.3 強調顏色

分類數據可以設置顏色增強分類的區分度，在黑白色的多線圖中，最黑的折線應該代表最重要的數據系列。在彩色圖中，最重要的應該是一種顏色，比如說紅色，其他則用另一種顏色，比如說藍色。這樣用戶就可以將注意力集中在重要數據上了。

5.4 多種顏色

分類數據可以設置顏色增強分類的區分度，可以使用不同的顏色來區分分類數據或者其他的數值數據。這樣用戶就可以將注意力集中在重要數據上了。

5.5 顏色帶有一定的透明度

用顏色強度區分分類數據，可以凸顯趨勢信息，此時顏色具有透明度，透明度的顏色關系可以幫助用戶清晰地分清楚數據序列之間的關系，這樣用戶就可以將注意力集中在重要數據上了。

5.6 不同色級

不同色級劃分主要是區分地圖上的分區數量，常用的區分方式有：（1）一個顏色到另一個顏色混合漸變;（2）單一的色調漸變;（3）透明到不透明;（4）明到暗;（5）用一個完整的色譜變化。

6? 數據可視化中組件的動態表現

組件中動態效果的使用已經呈現出多樣化的趨勢，數據可視化的表現形式不能一成不變靜止不動。被賦予動畫效果的可視化數據提升了界面效果，增強了用戶體驗。動態效果可以很好地引導用戶關注到界面中的重要信息，使用戶處理數據更加便捷高效。更重要的是設計精美的動效可以帶給用戶意想不到的驚喜，帶給用戶有趣、美好的情感體驗。組件樣式如下。

6.1 上下浮動

動態組件的設計中的基礎組成部分是動態柱狀組件，簡單的幾何圖形已經無法滿足用戶的體驗感需求。因此在表現形式上的創新，是提高用戶體驗感的關鍵。采用上下浮動效果的柱狀圖設計，配以色彩的區分，可以使數據表現形式來呈現多種變化效果。

橫向與縱向的坐標區的柱狀圖可以變化長短，使得量與量之間對比關系更加明顯，因此組件的完整性與有序性就得以保證。數據與視覺要素結合，讓動態柱狀組件具有了歸納與整合的效果，在視覺上又強調了有效性。

6.2 發散、漸變

動態組件中線元素由發散、漸變等方法構成。設計形態的不同，如粗細、虛實、疏密等帶給用戶的視覺效果也是多樣化的。在線元素的使用中，斜線與圓形的線表現力具有很強的張力，與橫豎線對比，斜線與圓形的線更具有感染力。線元素的變化在應用的過程中，利用不同的變化形式，使組件具有了幾何立體感。不同的空間層次具有不同的比例關系，這種比例關系打破了傳統動態組件的設計方式，使線元素的使用具有更強的設計感。在動態組件比例的設計中，線元素具有多樣化的設計形態。

直線與曲線是傳統的動態組件表現形式，以線的長短和線的疏密程度區分不同信息內容的關系，直線代表嚴謹，曲線更具親和力，富有靈動性。動態組件的設計帶有設計師的主觀意識，通過不同形態的線元素來設計組件，使得整個動態信息組件更簡潔、高效。

地圖地理位置中動態圓點元素要突出，突出的元素以波紋的樣式擴散，會被視覺焦點最快的捕捉，完成信息的傳達。

7? 數據可視化中組件的交互表現

數據可視化中的核心要素是用戶交互。交互是用戶通過與系統之間的對話和互動來操縱與理解數據的過程。無法互動的組件結果，例如靜態組件，雖然在一定程度上能幫助用戶理解數據，但其效果有一定的局限性。特別是當數據尺寸大、結構復雜時，有限的數據可視化空間大大地限制了其有效性。

其實，即使用戶在解讀一個靜態組件時，也常常會通過靠近或者拉遠，甚至旋轉組件以便理解，這些動作相當于用戶的交互操作。具體而言，交互在如下兩個方面讓數據可視化中的組件展現更有效。

7.1 數據提示

在可視化設計中經常遇到，非常多的數據信息需要展示在一個大屏幕上，有限的數據可視化空間不足以顯示海量的數據。此時我們需要歸納信息，對數據信息進行整理并以動畫的方式來展現，讓用戶在有限的屏幕空間抓住重點，獲取重要的數據信息。

當鼠標滑過圖形上一個興趣點，顯示該點的數據信息。

7.2 組件焦點形態變化

數據可視化中組件設計有時存在一定的交互操作，需要對其操作的部分進行突出顯示。表現在焦點的形態大小變化，焦點形態色彩變化。

7.2.1 焦點形態大小變化

為了數據特征加以區分，當鼠標滑過圖形上一個數據點，其數據點形態大小特征發生變化。

7.2.2 焦點形態色彩變化

為了數據特征加以區分，當鼠標滑過圖形上一個數據點，其數據點形態色彩特征發生變化。

8? 結語

本文以數據可視化中組件為研究對象，通過對數據可視化中組件的概念、分類、視覺形態、應用的理解，提出了數據可視化中組件有效性的設計，將其中的設計方法應用到實踐中，其研究結果如下：

在互聯網行業的高速發展的今天，數據可視化中組件的應用已經受到越來越多的關注，數據可視化中組件的重要性已經不言而喻。將復雜的數據信息轉化成成簡潔易懂的可視化組件，需要有更多的更好的設計方案。大數據時代信息豐富，這就給可視化中組件設計提供了豐富的素材。數據可視化不僅僅是對數據的美化，還增強了用戶在讀取數據時的體驗感。這種體驗感的提升最重要的就是信息功能與組件外觀之間的平衡關系。使用戶獲得高效便捷的數據信息讀取體驗，才是數據可視化組件設計的成功，才能獲得用戶的好評。

如果說以前的數據可視化只需要處理少量的靜態組件，那么越來越多的數據可視化可能需要面對的是：實時變化、包含了動態和交互的組件?？梢韵胂?，這些都對數據可視化帶來了新挑戰。

參考文獻

[1] 劉波.淺談報紙編輯中圖表新聞的運用[J].中國地市報人，2019（12）：95-97.

[2] 何萍.信息可視化圖表架構設計與創意表達[J].現代經濟信息，2019（22）：321-322.

[3] 張璇.《數據之美遼寧》網站——數據可視化動態圖形信息的創新設計研究[J].大眾文藝，2018（12）：52-53.

[4] 阿里巴巴1688用戶體驗部.U一點料[M].北京：中國電影出版社，2017.

[5] 周小舟.基于用戶認知的大數據可視化視覺呈現方法研究[D].南京：東南大學，2018.

[6] 朱朋飛.基于數據可視化的專題應用分析研究[D].北京：北京郵電大學，2019.