宋紫嫣 張開智 郭仕銳
摘? 要:人的視覺系統(tǒng)具有強(qiáng)大的信息處理能力,數(shù)據(jù)可視化的方式使我們能夠快速高效地獲取分析并理解大量的數(shù)據(jù)信息。數(shù)據(jù)可視化中組件的應(yīng)用也就顯得尤為重要,數(shù)據(jù)可視化組件在處理和傳遞信息時(shí)具有精準(zhǔn)、生動(dòng)等優(yōu)勢,它比語言和文字更直觀。在這樣一個(gè)大數(shù)據(jù)的信息時(shí)代,數(shù)據(jù)可視化中組件提供了一種便捷高效的視覺信息傳遞方式,不僅滿足了人們對信息的需求,還增強(qiáng)了人們對大量數(shù)據(jù)信息的理解認(rèn)知能力。在數(shù)據(jù)可視化中組件的應(yīng)用研究基礎(chǔ)上,采用文獻(xiàn)研究法和歸納分析法,對數(shù)據(jù)可視化中組件進(jìn)行設(shè)計(jì),理論的成立建立在實(shí)踐之中,如何正確地使用組件來展示信息,使大量復(fù)雜的數(shù)據(jù)信息經(jīng)過篩選、歸納并進(jìn)行視覺化處理之后,使其具有科學(xué)、準(zhǔn)確且更易于理解的基礎(chǔ),將數(shù)據(jù)信息以生動(dòng)形象的方式展示在用戶面前。對數(shù)據(jù)可視化中組件的應(yīng)用研究,是本文重點(diǎn)關(guān)注的研究與設(shè)計(jì)的意義所在。
關(guān)鍵詞:數(shù)據(jù)可視化? 組件? 視覺形態(tài)? 數(shù)據(jù)信息
中圖分類號(hào):TM73 ? ? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼:A 文章編號(hào):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? 數(shù)據(jù)可視化及組件概述
1.1 數(shù)據(jù)可視化概述
“數(shù)據(jù)可視化的目的,是要對數(shù)據(jù)進(jìn)行可視化處理,以使得能夠明確地、有效地傳遞信息。”——Vitaly Friedman。一般來說,以圖形方式顯示復(fù)雜數(shù)據(jù)信息,旨在使用戶更容易從一堆雜亂的數(shù)據(jù)中更有效地理解或分析,將需要花費(fèi)1h的數(shù)據(jù)信息匯總到可以一目了然的數(shù)據(jù)組件中。
數(shù)據(jù)可視化主要旨在通過圖形方式清晰有效地傳達(dá)和傳遞信息。然而,這并不意味著數(shù)據(jù)可視化因其功能性使用而必須枯燥乏味,或者看起來色彩極其復(fù)雜。讓用戶更容易了解信息所傳達(dá)的意義,設(shè)計(jì)美感和體驗(yàn)功能都需要兼顧,通過關(guān)鍵信息點(diǎn)的直接解讀,實(shí)現(xiàn)用戶對龐大且復(fù)雜信息的理解。簡而言之,數(shù)據(jù)可視化的目的是使數(shù)據(jù)說話,從而更準(zhǔn)確地以視覺的形式快速傳達(dá)出復(fù)雜和抽象的數(shù)據(jù)。
1.2 組件概述
組件是基于數(shù)據(jù)用幾何圖形和地圖繪制的各種圖形。它具有直觀、形象、生動(dòng)、具體等特點(diǎn)。組件可以使復(fù)雜數(shù)據(jù)變得簡單,使其易于理解和比較。因此,組件在統(tǒng)計(jì)數(shù)據(jù)整理和分析中起重要作用,并且被廣泛使用。
可視化中的重要領(lǐng)域是組件設(shè)計(jì),組件是對復(fù)雜數(shù)據(jù)的模式化處理,通過統(tǒng)計(jì)方式情景化展示的一種設(shè)計(jì)。數(shù)據(jù)是通過對客觀真實(shí)信息的歸納,進(jìn)行邏輯上的整理匯總,以具體數(shù)字代替模糊信息的方式能讓用戶獲得更直觀的體驗(yàn),更具有說服力,可信度更高。與單純的文本相比,大腦可以更輕松地處理圖形內(nèi)容。每個(gè)漢字都可以視為一個(gè)圖形符號(hào),在閱讀文本時(shí),將這些形狀與存儲(chǔ)在腦海中的記憶相匹配,以了解它的含義。在一段文本中,漢字的解碼過程是按順序線性執(zhí)行的,并且組件是作為一個(gè)完整的圖形同步進(jìn)行解碼,因此它比文本快得多。
1.3 組件設(shè)計(jì)過程
組件設(shè)計(jì)的目的是通過組件的視覺表現(xiàn)形式,清晰且準(zhǔn)確地顯示已知多個(gè)數(shù)據(jù)或單個(gè)數(shù)據(jù)的聯(lián)系。首先,需要獲得已知數(shù)據(jù),對其進(jìn)行整理分類,找到想要了解的內(nèi)容,確定該數(shù)據(jù)之間的關(guān)系,選擇視覺的表現(xiàn)形式,最后輸出所需的組件。
2? 數(shù)據(jù)可視化中組件的分類
我們通常理解的組件就是柱狀圖、餅圖、趨勢圖等。這是對圖形的初級分類解讀.這樣的解讀方式會(huì)導(dǎo)致對組件的誤解讀,組件的作用,是幫助我們更好地看懂?dāng)?shù)據(jù)。選擇什么組件,需要回答的首要問題是“我有什么數(shù)據(jù),需要用組件做什么”,而不是“組件長成什么樣”。因此我們從數(shù)據(jù)出發(fā),從功能角度對組件進(jìn)行分類,如圖3所示。
2.1 比較類
可視化的方式可以讓對比值顯示得更直觀,差異化的信息更容易被理解。通過圖形的幾何形態(tài)以及色彩劃分對比數(shù)值信息的差異,可以有效地展示出數(shù)據(jù)信息的對比狀態(tài)和差異數(shù)值。
比較型組件用于比較值的大小。使用該類型組件可以輕易地找出數(shù)據(jù)的最大值和最小值,也可以用于查看當(dāng)前數(shù)值和過去的數(shù)值相比是增加還是減少。適用組件:柱狀圖、氣泡圖、直方圖、雷達(dá)圖、文本圖、瀑布圖等。
2.2 分布類
頻率以可視化展示,數(shù)據(jù)分布在一個(gè)區(qū)間或組中。數(shù)據(jù)的分布由圖形的位置,大小和顏色的漸變程度表示,并且通常用于顯示連續(xù)數(shù)據(jù)上的值的分布。適用組件:盒須圖、散點(diǎn)圖、氣泡圖、直方圖等。
2.3 占比類
用視覺方法顯示相同維度的比例值。該比例值是指個(gè)數(shù)據(jù)占總數(shù)的比例,以百分比的形式表現(xiàn)。適用組件:餅圖等。
2.4 趨勢類
分析數(shù)據(jù)趨勢的可視化方法。以圖形的位置來顯示連續(xù)區(qū)域上的數(shù)據(jù)分布,通常顯示連續(xù)區(qū)域上數(shù)據(jù)大小的變化幅度。適用組件:面積圖、折線圖等。
2.5 時(shí)間類
以時(shí)間為特定維度的數(shù)據(jù)顯示方式。用圖表的位置顯示數(shù)據(jù),以時(shí)間的分布展現(xiàn),通常用于表示數(shù)據(jù)維度的趨勢和變化。適用組件:折線圖、面積圖、時(shí)序圖等。
2.6 地圖類
可視方法顯示地理區(qū)域上的數(shù)據(jù)。使用地圖作為背景,數(shù)據(jù)的地理位置由圖表的位置表示,通常顯示不同地理區(qū)域的數(shù)據(jù)分布。適用組件:2D地圖等。
3? 數(shù)據(jù)可視化中組件的原則
3.1 輕量原則
表格可以承載數(shù)據(jù)的全面性,但是在做數(shù)據(jù)可視化的時(shí)候,如果設(shè)計(jì)師將所有的信息堆砌在組件上,組件將變得復(fù)雜且不容易被理解,增加了用戶辨識(shí)數(shù)據(jù)的時(shí)間。本著輕量的原則,將主要信息呈現(xiàn)在組件上或分層展示組件。
3.2 直觀原則
數(shù)據(jù)需要被直觀便捷地展示出來,這就需要設(shè)計(jì)師的精巧設(shè)計(jì),讓用戶能夠準(zhǔn)確明了地讀取數(shù)據(jù)值,提取數(shù)據(jù)中的商業(yè)價(jià)值。
3.3 美學(xué)原則
大數(shù)據(jù)信息時(shí)代來臨,圖形化的數(shù)據(jù)處理方式更高效便捷,作為數(shù)據(jù)信息的表現(xiàn)載體,其表現(xiàn)形式可以是多樣化的,既具有美感更被賦予了趣味,通過簡單的幾何圖形展現(xiàn)已經(jīng)不能滿足如今數(shù)據(jù)信息發(fā)展趨勢。為了更加準(zhǔn)確直觀地展示數(shù)據(jù)信息,讓用戶解讀數(shù)據(jù),以多媒體的設(shè)計(jì)方式設(shè)計(jì),從靜態(tài)到動(dòng)態(tài)再到交互的設(shè)計(jì)方式讓數(shù)據(jù)可視化組件的表現(xiàn)形式發(fā)生了質(zhì)的變化。
4? 數(shù)據(jù)可視化中組件的視覺形態(tài)
4.1 數(shù)據(jù)可視化中組件的構(gòu)成
一般情況下,組件包含坐標(biāo)軸、幾何標(biāo)記、提示信息、圖例等,另外還可以包括輔助標(biāo)記、數(shù)據(jù)標(biāo)簽等。如圖4所示。
4.2 數(shù)據(jù)可視化中組件的基本形態(tài)
組件,指為表明某種數(shù)據(jù)的趨勢而繪制的組件。根據(jù)組件的分類,具有以下幾種基本形態(tài):線形圖、條形圖、柱形圖、點(diǎn)圖、餅圖、區(qū)域圖、特殊圖。
4.3 數(shù)據(jù)可視化中組件的色彩運(yùn)用
在顏色與人的交互當(dāng)中,一種顏色的確立主要由其所處的色彩關(guān)系來決定,一種顏色要通過另一種顏色強(qiáng)調(diào)或多種顏色共同來強(qiáng)調(diào)。假如我們想讓界面中某個(gè)元素引起用戶的注意力,我們可以借由色彩對比來使這一元素從界面中凸顯出來,吸引用戶的目光。對于組件的色彩設(shè)計(jì),同樣也遵循上述原則。
通過視覺元素中色彩的運(yùn)用,使圖形更生動(dòng)有趣,信息更準(zhǔn)確,更直觀。對信息進(jìn)行深度分類,強(qiáng)調(diào)和淡化可以通過不同色彩來區(qū)分,生動(dòng)有趣的可視化形式,給用戶體驗(yàn)帶來了視覺效果上的享受。企業(yè)品牌文化的視覺效果和企業(yè)品牌形象要保持高度的一致。
5? 數(shù)據(jù)可視化中組件的靜態(tài)表現(xiàn)
常見的數(shù)據(jù)可視化組件形式有柱狀圖、餅圖、折線圖和面積圖等。在數(shù)據(jù)報(bào)表中,數(shù)據(jù)組件形式具有清晰、便捷的優(yōu)點(diǎn)且信息表現(xiàn)力強(qiáng)。在界面中,數(shù)據(jù)組件形式展示信息其表現(xiàn)力就顯得不足了,簡單的表現(xiàn)形式有其局限性。在大數(shù)據(jù)時(shí)代,人機(jī)交互的體驗(yàn)式界面效果都需要數(shù)據(jù)可視化具有豐富的表現(xiàn)形式,要更具有交互情感。
靜態(tài)組件的數(shù)據(jù)可視化呈現(xiàn)方式,不能只具備傳達(dá)信息的功能,還要具有與用戶溝通的功能。組件形式的數(shù)據(jù)可視化相對簡單,把復(fù)雜的分散的數(shù)據(jù)以圖片的形式展現(xiàn),通過組件的色彩效果展現(xiàn),讓數(shù)據(jù)進(jìn)行對比、比較,這樣有益于用戶理解其傳遞的信息,更符合用戶的心理需求。
組件色彩效果展現(xiàn)。讓顏色和組件相得益彰。在一個(gè)組件中使用太多的顏色會(huì)造成混亂和過度修飾。應(yīng)該選擇和諧的組合,比如同一顏色的不同色調(diào)或者是顏色輪同一側(cè)的顏色。選擇顏色不可過于隨意。顏色的變化可以讓數(shù)據(jù)信息有差異化有對比。
5.1 相同顏色
分類數(shù)據(jù)可以設(shè)置顏色增強(qiáng)分類的區(qū)分度,使用相同的顏色代表同一變量,這樣用戶就可以集中注意力比較數(shù)據(jù)。
5.2 同一顏色不同色調(diào)
分類數(shù)據(jù)可以設(shè)置顏色增強(qiáng)分類的區(qū)分度,使用同一顏色不同色調(diào)或者輪相同面的顏色以使多條形組件簡潔、清晰。這樣用戶就可以將注意力集中在重要數(shù)據(jù)上了。
5.3 強(qiáng)調(diào)顏色
分類數(shù)據(jù)可以設(shè)置顏色增強(qiáng)分類的區(qū)分度,在黑白色的多線圖中,最黑的折線應(yīng)該代表最重要的數(shù)據(jù)系列。在彩色圖中,最重要的應(yīng)該是一種顏色,比如說紅色,其他則用另一種顏色,比如說藍(lán)色。這樣用戶就可以將注意力集中在重要數(shù)據(jù)上了。
5.4 多種顏色
分類數(shù)據(jù)可以設(shè)置顏色增強(qiáng)分類的區(qū)分度,可以使用不同的顏色來區(qū)分分類數(shù)據(jù)或者其他的數(shù)值數(shù)據(jù)。這樣用戶就可以將注意力集中在重要數(shù)據(jù)上了。
5.5 顏色帶有一定的透明度
用顏色強(qiáng)度區(qū)分分類數(shù)據(jù),可以凸顯趨勢信息,此時(shí)顏色具有透明度,透明度的顏色關(guān)系可以幫助用戶清晰地分清楚數(shù)據(jù)序列之間的關(guān)系,這樣用戶就可以將注意力集中在重要數(shù)據(jù)上了。
5.6 不同色級
不同色級劃分主要是區(qū)分地圖上的分區(qū)數(shù)量,常用的區(qū)分方式有:(1)一個(gè)顏色到另一個(gè)顏色混合漸變;(2)單一的色調(diào)漸變;(3)透明到不透明;(4)明到暗;(5)用一個(gè)完整的色譜變化。
6? 數(shù)據(jù)可視化中組件的動(dòng)態(tài)表現(xiàn)
組件中動(dòng)態(tài)效果的使用已經(jīng)呈現(xiàn)出多樣化的趨勢,數(shù)據(jù)可視化的表現(xiàn)形式不能一成不變靜止不動(dòng)。被賦予動(dòng)畫效果的可視化數(shù)據(jù)提升了界面效果,增強(qiáng)了用戶體驗(yàn)。動(dòng)態(tài)效果可以很好地引導(dǎo)用戶關(guān)注到界面中的重要信息,使用戶處理數(shù)據(jù)更加便捷高效。更重要的是設(shè)計(jì)精美的動(dòng)效可以帶給用戶意想不到的驚喜,帶給用戶有趣、美好的情感體驗(yàn)。組件樣式如下。
6.1 上下浮動(dòng)
動(dòng)態(tài)組件的設(shè)計(jì)中的基礎(chǔ)組成部分是動(dòng)態(tài)柱狀組件,簡單的幾何圖形已經(jīng)無法滿足用戶的體驗(yàn)感需求。因此在表現(xiàn)形式上的創(chuàng)新,是提高用戶體驗(yàn)感的關(guān)鍵。采用上下浮動(dòng)效果的柱狀圖設(shè)計(jì),配以色彩的區(qū)分,可以使數(shù)據(jù)表現(xiàn)形式來呈現(xiàn)多種變化效果。
橫向與縱向的坐標(biāo)區(qū)的柱狀圖可以變化長短,使得量與量之間對比關(guān)系更加明顯,因此組件的完整性與有序性就得以保證。數(shù)據(jù)與視覺要素結(jié)合,讓動(dòng)態(tài)柱狀組件具有了歸納與整合的效果,在視覺上又強(qiáng)調(diào)了有效性。
6.2 發(fā)散、漸變
動(dòng)態(tài)組件中線元素由發(fā)散、漸變等方法構(gòu)成。設(shè)計(jì)形態(tài)的不同,如粗細(xì)、虛實(shí)、疏密等帶給用戶的視覺效果也是多樣化的。在線元素的使用中,斜線與圓形的線表現(xiàn)力具有很強(qiáng)的張力,與橫豎線對比,斜線與圓形的線更具有感染力。線元素的變化在應(yīng)用的過程中,利用不同的變化形式,使組件具有了幾何立體感。不同的空間層次具有不同的比例關(guān)系,這種比例關(guān)系打破了傳統(tǒng)動(dòng)態(tài)組件的設(shè)計(jì)方式,使線元素的使用具有更強(qiáng)的設(shè)計(jì)感。在動(dòng)態(tài)組件比例的設(shè)計(jì)中,線元素具有多樣化的設(shè)計(jì)形態(tài)。
直線與曲線是傳統(tǒng)的動(dòng)態(tài)組件表現(xiàn)形式,以線的長短和線的疏密程度區(qū)分不同信息內(nèi)容的關(guān)系,直線代表嚴(yán)謹(jǐn),曲線更具親和力,富有靈動(dòng)性。動(dòng)態(tài)組件的設(shè)計(jì)帶有設(shè)計(jì)師的主觀意識(shí),通過不同形態(tài)的線元素來設(shè)計(jì)組件,使得整個(gè)動(dòng)態(tài)信息組件更簡潔、高效。
地圖地理位置中動(dòng)態(tài)圓點(diǎn)元素要突出,突出的元素以波紋的樣式擴(kuò)散,會(huì)被視覺焦點(diǎn)最快的捕捉,完成信息的傳達(dá)。
7? 數(shù)據(jù)可視化中組件的交互表現(xiàn)
數(shù)據(jù)可視化中的核心要素是用戶交互。交互是用戶通過與系統(tǒng)之間的對話和互動(dòng)來操縱與理解數(shù)據(jù)的過程。無法互動(dòng)的組件結(jié)果,例如靜態(tài)組件,雖然在一定程度上能幫助用戶理解數(shù)據(jù),但其效果有一定的局限性。特別是當(dāng)數(shù)據(jù)尺寸大、結(jié)構(gòu)復(fù)雜時(shí),有限的數(shù)據(jù)可視化空間大大地限制了其有效性。
其實(shí),即使用戶在解讀一個(gè)靜態(tài)組件時(shí),也常常會(huì)通過靠近或者拉遠(yuǎn),甚至旋轉(zhuǎn)組件以便理解,這些動(dòng)作相當(dāng)于用戶的交互操作。具體而言,交互在如下兩個(gè)方面讓數(shù)據(jù)可視化中的組件展現(xiàn)更有效。
7.1 數(shù)據(jù)提示
在可視化設(shè)計(jì)中經(jīng)常遇到,非常多的數(shù)據(jù)信息需要展示在一個(gè)大屏幕上,有限的數(shù)據(jù)可視化空間不足以顯示海量的數(shù)據(jù)。此時(shí)我們需要?dú)w納信息,對數(shù)據(jù)信息進(jìn)行整理并以動(dòng)畫的方式來展現(xiàn),讓用戶在有限的屏幕空間抓住重點(diǎn),獲取重要的數(shù)據(jù)信息。
當(dāng)鼠標(biāo)滑過圖形上一個(gè)興趣點(diǎn),顯示該點(diǎn)的數(shù)據(jù)信息。
7.2 組件焦點(diǎn)形態(tài)變化
數(shù)據(jù)可視化中組件設(shè)計(jì)有時(shí)存在一定的交互操作,需要對其操作的部分進(jìn)行突出顯示。表現(xiàn)在焦點(diǎn)的形態(tài)大小變化,焦點(diǎn)形態(tài)色彩變化。
7.2.1 焦點(diǎn)形態(tài)大小變化
為了數(shù)據(jù)特征加以區(qū)分,當(dāng)鼠標(biāo)滑過圖形上一個(gè)數(shù)據(jù)點(diǎn),其數(shù)據(jù)點(diǎn)形態(tài)大小特征發(fā)生變化。
7.2.2 焦點(diǎn)形態(tài)色彩變化
為了數(shù)據(jù)特征加以區(qū)分,當(dāng)鼠標(biāo)滑過圖形上一個(gè)數(shù)據(jù)點(diǎn),其數(shù)據(jù)點(diǎn)形態(tài)色彩特征發(fā)生變化。
8? 結(jié)語
本文以數(shù)據(jù)可視化中組件為研究對象,通過對數(shù)據(jù)可視化中組件的概念、分類、視覺形態(tài)、應(yīng)用的理解,提出了數(shù)據(jù)可視化中組件有效性的設(shè)計(jì),將其中的設(shè)計(jì)方法應(yīng)用到實(shí)踐中,其研究結(jié)果如下:
在互聯(lián)網(wǎng)行業(yè)的高速發(fā)展的今天,數(shù)據(jù)可視化中組件的應(yīng)用已經(jīng)受到越來越多的關(guān)注,數(shù)據(jù)可視化中組件的重要性已經(jīng)不言而喻。將復(fù)雜的數(shù)據(jù)信息轉(zhuǎn)化成成簡潔易懂的可視化組件,需要有更多的更好的設(shè)計(jì)方案。大數(shù)據(jù)時(shí)代信息豐富,這就給可視化中組件設(shè)計(jì)提供了豐富的素材。數(shù)據(jù)可視化不僅僅是對數(shù)據(jù)的美化,還增強(qiáng)了用戶在讀取數(shù)據(jù)時(shí)的體驗(yàn)感。這種體驗(yàn)感的提升最重要的就是信息功能與組件外觀之間的平衡關(guān)系。使用戶獲得高效便捷的數(shù)據(jù)信息讀取體驗(yàn),才是數(shù)據(jù)可視化組件設(shè)計(jì)的成功,才能獲得用戶的好評。
如果說以前的數(shù)據(jù)可視化只需要處理少量的靜態(tài)組件,那么越來越多的數(shù)據(jù)可視化可能需要面對的是:實(shí)時(shí)變化、包含了動(dòng)態(tài)和交互的組件??梢韵胂瘢@些都對數(shù)據(jù)可視化帶來了新挑戰(zhàn)。
參考文獻(xiàn)
[1] 劉波.淺談報(bào)紙編輯中圖表新聞的運(yùn)用[J].中國地市報(bào)人,2019(12):95-97.
[2] 何萍.信息可視化圖表架構(gòu)設(shè)計(jì)與創(chuàng)意表達(dá)[J].現(xiàn)代經(jīng)濟(jì)信息,2019(22):321-322.
[3] 張璇.《數(shù)據(jù)之美遼寧》網(wǎng)站——數(shù)據(jù)可視化動(dòng)態(tài)圖形信息的創(chuàng)新設(shè)計(jì)研究[J].大眾文藝,2018(12):52-53.
[4] 阿里巴巴1688用戶體驗(yàn)部.U一點(diǎn)料[M].北京:中國電影出版社,2017.
[5] 周小舟.基于用戶認(rèn)知的大數(shù)據(jù)可視化視覺呈現(xiàn)方法研究[D].南京:東南大學(xué),2018.
[6] 朱朋飛.基于數(shù)據(jù)可視化的專題應(yīng)用分析研究[D].北京:北京郵電大學(xué),2019.