層次數(shù)據(jù)可視化在網(wǎng)絡(luò)媒體中的視覺呈現(xiàn)研究

閆永亮 王彩燕 翟藝晴 王豐

摘要：5G時(shí)代，信息可視化設(shè)計(jì)產(chǎn)品數(shù)量激增，用戶需求不斷增加，海量網(wǎng)絡(luò)用戶的認(rèn)知心理和行為習(xí)慣決定了未來可視化設(shè)計(jì)的發(fā)展趨勢(shì)。文章針對(duì)層次數(shù)據(jù)可視化的五個(gè)案例在視覺設(shè)計(jì)中呈現(xiàn)的不同特點(diǎn)，逐一進(jìn)行論述、分析與比較，根據(jù)研究結(jié)果提出優(yōu)化用戶感知和視覺體驗(yàn)的可視化設(shè)計(jì)新模式以及符合信息布局的交互設(shè)計(jì)創(chuàng)新策略，為未來的可視化應(yīng)用提供有價(jià)值的參考。

關(guān)鍵詞：層次數(shù)據(jù)可視化；直覺體驗(yàn)；視覺呈現(xiàn)；網(wǎng)絡(luò)媒體；用戶需求

中圖分類號(hào)：G210.7 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1004-9436（2022）10-00-03

隨著5G時(shí)代的到來，數(shù)字化成為構(gòu)建現(xiàn)代社會(huì)的基礎(chǔ)力量，推動(dòng)著社會(huì)走向深度變革的時(shí)代。IDC發(fā)布的《數(shù)據(jù)時(shí)代2025》報(bào)告顯示［1］，全球每年產(chǎn)生的數(shù)據(jù)將從2018年的33ZB增長到2025年的175ZB，平均每天產(chǎn)生491EB的數(shù)據(jù)。信息時(shí)代，人們無時(shí)無刻不在網(wǎng)絡(luò)媒體的虛擬環(huán)境中獲取和處理各類信息。網(wǎng)絡(luò)媒體的點(diǎn)對(duì)點(diǎn)、點(diǎn)對(duì)面的個(gè)性化、即時(shí)性、共享性等傳播特點(diǎn)，使用戶在信息傳遞過程中擁有高效的互動(dòng)手段。對(duì)網(wǎng)絡(luò)媒體而言，面對(duì)擁有如此龐大信息量的網(wǎng)絡(luò)環(huán)境，不僅要有強(qiáng)大的后臺(tái)運(yùn)算支撐，其前端網(wǎng)站頁面設(shè)計(jì)同樣重要，缺乏視覺特色的信息頁面極有可能被用戶忽略。眼動(dòng)儀測(cè)試的相關(guān)結(jié)果顯示，用戶在訪問數(shù)字界面時(shí)的第一印象只停留0.2秒，這充分驗(yàn)證了信息時(shí)代是一個(gè)情感化的時(shí)代，人們的心理、行為更多受直覺驅(qū)使［2］。如何吸引用戶眼球并滿足用戶的需求，使其產(chǎn)生情感共鳴并沉浸其中，是當(dāng)前可視化設(shè)計(jì)的研究重點(diǎn)和亟須思考的問題。

1 層次數(shù)據(jù)可視化的概念及特點(diǎn)

可視化設(shè)計(jì)是一門跨多項(xiàng)學(xué)科領(lǐng)域和多方位的綜合研究，囊括了數(shù)據(jù)可視化、信息圖形設(shè)計(jì)、科學(xué)可視化等。5G時(shí)代的信息傳播技術(shù)得到迅速發(fā)展，面向廣義數(shù)據(jù)的層次關(guān)系表達(dá)成為設(shè)計(jì)領(lǐng)域的嶄新研究方向［3］。層次數(shù)據(jù)可視化在表達(dá)事物間的從屬關(guān)系上，展現(xiàn)出了巨大的層次邏輯優(yōu)勢(shì)。另外，其在整體可讀性、距離相關(guān)性和穩(wěn)定性等相關(guān)屬性上，都顯示出了特殊的研究價(jià)值。

數(shù)據(jù)的層次關(guān)系，既可以是事物本身固有的整體與局部的關(guān)系，又可以是人們?cè)谡J(rèn)識(shí)世界時(shí)賦予的類別與子類別的關(guān)系或邏輯上的承接關(guān)系。其特點(diǎn)為：一是結(jié)構(gòu)特點(diǎn)表現(xiàn)得更為抽象，是廣泛存在的一種關(guān)系順序，既不拋開時(shí)間順序、空間順序的因素，又更強(qiáng)調(diào)數(shù)據(jù)間的關(guān)系層次，研究對(duì)象也從單一類別轉(zhuǎn)向多種對(duì)象間錯(cuò)綜復(fù)雜的關(guān)系網(wǎng)，同時(shí)能夠兼顧時(shí)間線、情感化的因素和數(shù)據(jù)內(nèi)在關(guān)聯(lián)性；二是視覺特點(diǎn)更加強(qiáng)調(diào)空間排布的合理性，避免空間浪費(fèi)和視覺混淆等問題，在信息傳達(dá)的有效性上展現(xiàn)其非凡的能力，能提高用戶在單位時(shí)間內(nèi)對(duì)海量信息的理解效率，建立起人與信息、人與人、人與社會(huì)之間的關(guān)系紐帶。

2 層次數(shù)據(jù)可視化的視覺呈現(xiàn)分析

層次數(shù)據(jù)可視化設(shè)計(jì)，強(qiáng)調(diào)信息個(gè)體與信息群體間的層級(jí)關(guān)系和信息的傳遞次序，在信息傳遞的有效性、合理性等方面起到關(guān)鍵性作用。此外，在視覺呈現(xiàn)上注重信息內(nèi)涵與視覺要素之間的邏輯關(guān)系，有效地解決了設(shè)計(jì)過程中三個(gè)方面的問題，即再現(xiàn)（對(duì)數(shù)據(jù)進(jìn)行視覺化處理）、展示（有效展示數(shù)據(jù)）和交互（讓用戶從各種角度觀察數(shù)據(jù)）。本文將摘取五個(gè)案例，從數(shù)據(jù)、單文本、多文檔、內(nèi)容分類、圖形圖像等方面逐一進(jìn)行分析，探究目前主流網(wǎng)絡(luò)媒體層次數(shù)據(jù)可視化的結(jié)構(gòu)差異和視覺呈現(xiàn)。

2.1 “@文本弧形”

“@文本弧形”由紐約交互設(shè)計(jì)師W.布拉德·帕里研發(fā)。作為大數(shù)據(jù)交流領(lǐng)域的重要專家，他所提出的無障礙互動(dòng)文本解決方案，可以幫助人們運(yùn)用“杠桿原理”發(fā)現(xiàn)任意文本內(nèi)容的結(jié)構(gòu)模式和中心概念?！癅文本弧形”是一款以單文本為內(nèi)容的可視化工具，該設(shè)計(jì)主要是以“圓”的形式來編排每一個(gè)文本行，當(dāng)用戶對(duì)文本進(jìn)行分析和處理時(shí)，不同信息的出現(xiàn)頻率和重要性都一目了然。并且，該研究還發(fā)現(xiàn)人們對(duì)較明亮的單詞會(huì)產(chǎn)生“優(yōu)先注意”意識(shí)。當(dāng)眼睛伴隨大腦逐一閱讀時(shí)，這一自動(dòng)掃描的過程，能激發(fā)某些思想火花，跟隨思維概念深入文章，并與曾出現(xiàn)過的單詞產(chǎn)生關(guān)聯(lián)。通過此類無意識(shí)設(shè)計(jì)的理念注入，有效提升了人們?cè)诙虝r(shí)間內(nèi)的閱讀水平，同時(shí)也對(duì)自然神經(jīng)元的開發(fā)有了新的突破。

2.2 隨意線形

由美國人布蘭登·道斯設(shè)計(jì)的“嗡嗡涂鴉”，是一款用來查找和消化網(wǎng)絡(luò)信息的實(shí)驗(yàn)性界面，該界面是隨意線形的典型代表作品。當(dāng)用戶在界面上隨意畫出單根或多根線條后，與之特定檢索項(xiàng)相關(guān)的標(biāo)題就會(huì)順著用戶畫線方向排列。用戶可以自由地閱讀摘錄、搜索圖上相關(guān)話題，或直接連接原創(chuàng)文章。信息的陳列可以是線性、手寫體等任意形式，強(qiáng)調(diào)用戶的個(gè)人感覺和體驗(yàn)，設(shè)計(jì)形式更為人性化。應(yīng)用視覺化的語言程序，展現(xiàn)出極高的空間利用率和良好的交互趣味性。其動(dòng)態(tài)效果有效暗示和指引了用戶操作，維持了整個(gè)系統(tǒng)的連續(xù)性體驗(yàn)過程。

2.3 新聞地圖形式

新聞地圖使用樹圖布局方式將新聞文本歸類與可視化，有效梳理了不同主題在文檔集合中的分布以及多文檔間的相互關(guān)系。從谷歌新聞采集來的信息包含了多個(gè)文檔，內(nèi)容豐富、關(guān)系復(fù)雜。界面中每個(gè)矩形代表一類主題，其大小和長寬比決定了與該主題相關(guān)新聞報(bào)道的數(shù)量。矩形的顏色用于編碼主題的類別，而亮度則用于編碼該主題出現(xiàn)的時(shí)間，亮度越高表明該主題出現(xiàn)的時(shí)間越近。新聞地圖形式以層次結(jié)構(gòu)整合了大量的新聞文本，并對(duì)主題進(jìn)行抽取和歸類，為用戶提供高效獲取熱點(diǎn)新聞的方法。與傳統(tǒng)滾動(dòng)式新聞網(wǎng)站相比，等比邊距分割方式，不僅使信息間產(chǎn)生關(guān)聯(lián)性，其視覺化的感官體驗(yàn)也更具動(dòng)態(tài)性。

2.4 點(diǎn)狀圓環(huán)形式

點(diǎn)狀圓環(huán)形式的可視化設(shè)計(jì)，以各色的點(diǎn)為視覺呈現(xiàn)方法，拓展了用戶的色彩認(rèn)知心理空間和提高了可視化閱讀率，加深和強(qiáng)調(diào)了每個(gè)記憶點(diǎn)間的聯(lián)系。以英國衛(wèi)報(bào)周刊網(wǎng)頁為例，該網(wǎng)頁為由無數(shù)個(gè)點(diǎn)組成圓環(huán)的動(dòng)態(tài)界面，顏色各異的點(diǎn)將衛(wèi)報(bào)一周的信息量分門別類與可視化，所有的標(biāo)題都按字母從A到Z的順序分類排布，兩點(diǎn)間交集成的線越密，信息量就越大。從視覺呈現(xiàn)上看，通過結(jié)點(diǎn)間相互交錯(cuò)的連接，既能保持原有圖文的信息量，又能提高整個(gè)頁面的可識(shí)別度，這種刪繁就簡的效果使信息間的層次關(guān)系趨于明朗。此外，協(xié)調(diào)的色彩搭配、合理的空間利用，不失為一種高效的可視化設(shè)計(jì)。

2.5 有序正等分樹圖形式

有序正等分樹圖形式主要以精確的網(wǎng)格版式構(gòu)圖為基準(zhǔn)，根據(jù)數(shù)據(jù)的層次結(jié)構(gòu)將屏幕空間劃分成多個(gè)子空間，并對(duì)各區(qū)域加以相應(yīng)的顏色匹配或必要說明。以德國哈勒藝術(shù)院校官網(wǎng)為例，該網(wǎng)站以發(fā)布日的設(shè)計(jì)師作品作為元素，當(dāng)鼠標(biāo)滑動(dòng)到圖片位置時(shí)，被選中的圖片會(huì)按等比邊距自動(dòng)展開，占據(jù)頁面的中心位置，用戶的注意力被迅速鎖定在屏幕內(nèi)的指定區(qū)域，單個(gè)獨(dú)立圖像的動(dòng)態(tài)化處理，可增強(qiáng)對(duì)用戶視覺神經(jīng)的刺激。瀏覽該網(wǎng)站時(shí)，用戶視線由左上至右下移動(dòng)，不僅符合日常閱讀的視線習(xí)慣，還能通過圖文大小來判定時(shí)間呈現(xiàn)的先后關(guān)系。圖像所具有的動(dòng)態(tài)交互性和強(qiáng)烈視覺沖擊，體現(xiàn)了數(shù)字化的形式美感，不僅釋放了原有的空間，還給用戶帶來了強(qiáng)烈的新鮮感和沉浸感。

綜合網(wǎng)絡(luò)媒體中數(shù)字界面的發(fā)展進(jìn)程來看，層次數(shù)據(jù)可視化在視覺呈現(xiàn)上應(yīng)根據(jù)不同的信息內(nèi)容來劃分，富有藝術(shù)性和情感性的可視化設(shè)計(jì)是未來信息界面發(fā)展的總體趨勢(shì)。從設(shè)計(jì)學(xué)科的角度來看，目前可視化設(shè)計(jì)領(lǐng)域亟須解決的問題包含信息分類、組織結(jié)構(gòu)、屏幕空間利用率、操作路徑的難易度、認(rèn)知效率、信息關(guān)聯(lián)性等方面。通過對(duì)五個(gè)層次數(shù)據(jù)可視化的視覺呈現(xiàn)案例進(jìn)行比較分析可以看出，“@文本弧形”、隨意線形和點(diǎn)狀圓環(huán)這三種形式在操作路徑的難易度和信息關(guān)聯(lián)度上較占優(yōu)勢(shì)，新聞地圖、有序正等分樹圖形式在屏幕空間的利用率和認(rèn)知效率上較有優(yōu)勢(shì)（見表1）。

3 網(wǎng)絡(luò)媒體可視化設(shè)計(jì)建議

3.1 強(qiáng)化動(dòng)態(tài)化圖形表現(xiàn)

信息內(nèi)容的動(dòng)態(tài)圖形化設(shè)計(jì)，即可順著時(shí)間流動(dòng)或交互發(fā)生而產(chǎn)生形態(tài)變化的圖形［4］。憑借時(shí)間與空間的架構(gòu)，利用線性或非線性的敘事手段，整合文字、圖形、視頻等元素，將原本無序和難以傳達(dá)的信息轉(zhuǎn)化成易懂的可視化語言，對(duì)其內(nèi)部所傳達(dá)的信息進(jìn)行感知和管理，幫助用戶篩選有用信息。從信息交互和信息管理的角度來看，需考慮用戶的認(rèn)知負(fù)荷、認(rèn)知結(jié)構(gòu)、視覺思維習(xí)慣和心智模型，通過橫向線性和縱向?qū)蛹?jí)的設(shè)計(jì)，引導(dǎo)用戶逐步感知和記憶圖形傳達(dá)的信息，提升用戶的感知和信息獲取能力［5］。

3.2 提升界面設(shè)計(jì)的視覺美感

層次數(shù)據(jù)可視化設(shè)計(jì)需遵循美學(xué)原則，精美的可視化設(shè)計(jì)能給用戶帶來意想不到的驚喜，達(dá)到增強(qiáng)用戶黏性和提升產(chǎn)品競(jìng)爭力的目的。為了更好地優(yōu)化用戶視覺美感體驗(yàn)，可從構(gòu)圖、布局和色彩三個(gè)角度出發(fā)。從構(gòu)圖的角度出發(fā)，可通過畫面的合理組織和設(shè)計(jì)元素自身平衡的屬性，共同構(gòu)建起平衡的畫面感，使用戶產(chǎn)生安定和舒適感。從布局的角度出發(fā)，合理的信息布局可以借鑒格式塔原則，即接近、相似、閉合、連續(xù)、簡單、對(duì)稱等［6］，幫助用戶迅速鎖定自己想要的信息，快速了解信息的具體內(nèi)容。從色彩的角度出發(fā)，合理利用色彩的情感表現(xiàn)可優(yōu)化感知效果，調(diào)動(dòng)用戶情緒。簡潔優(yōu)美、顏色搭配協(xié)調(diào)的視覺環(huán)境，能夠有效幫助用戶理解信息。

3.3 增強(qiáng)用戶體驗(yàn)的沉浸感

優(yōu)化網(wǎng)絡(luò)媒體的沉浸式用戶體驗(yàn)非常重要。從感官層面出發(fā)，簡化頁面，合理構(gòu)建整體框架，優(yōu)化空間布局，充分考慮信息的空間分布特征，全屏展示數(shù)據(jù)內(nèi)容［7］。從交互設(shè)計(jì)角度來看，減少首頁功能模塊，將信息組織歸納為不同層次；減少累贅操作，優(yōu)化交互方式，降低數(shù)據(jù)展示成本和觀覽成本。從心理體驗(yàn)來看，創(chuàng)新推送機(jī)制，確保信息的真實(shí)性，保障用戶對(duì)信息內(nèi)容的信任度、期待感和新鮮感，激發(fā)用戶不斷沉浸觀看的熱情［8］。從認(rèn)知心理和行為習(xí)慣來看，強(qiáng)化無意識(shí)設(shè)計(jì)理念，注重直覺體驗(yàn)，做到人機(jī)間的自然溝通。此外，可將虛擬現(xiàn)實(shí)和人工智能等技術(shù)與可視化設(shè)計(jì)結(jié)合，給用戶帶來良好的體驗(yàn)感。

4 結(jié)語

5G時(shí)代為網(wǎng)絡(luò)媒體提供了良好的發(fā)展條件，同時(shí)產(chǎn)品間日趨激烈的競(jìng)爭和日益增加的用戶需求，對(duì)可視化設(shè)計(jì)發(fā)起了新挑戰(zhàn)。文章通過對(duì)五種層次數(shù)據(jù)可視化設(shè)計(jì)案例進(jìn)行對(duì)比分析，結(jié)合用戶的認(rèn)知心理和行為習(xí)慣，提出可視化設(shè)計(jì)建議。應(yīng)加強(qiáng)信息圖形動(dòng)態(tài)化設(shè)計(jì)，強(qiáng)調(diào)自然交互原則，注重界面與用戶間的情感共鳴。了解層次數(shù)據(jù)的應(yīng)用特性，掌握不斷增加的用戶核心需求，優(yōu)化用戶體驗(yàn)，增強(qiáng)產(chǎn)品用戶黏性，提升產(chǎn)品持久競(jìng)爭力。此外，隨著數(shù)字移動(dòng)界面的普遍使用，用戶在處理和傳達(dá)海量信息時(shí)，遇到的認(rèn)知負(fù)荷大、單位頁面的信息過多、頁面間切換頻繁、操作步驟復(fù)雜等問題，都是可視化設(shè)計(jì)領(lǐng)域研究的重點(diǎn)。

參考文獻(xiàn)：

［1］ IDC全球數(shù)據(jù)圈.數(shù)據(jù)時(shí)代2025［EB/OL］.中國存儲(chǔ)

網(wǎng)，https：//www.chinastor.com/market/12214001R018.Html，2018-12-21.

［2］ 李洋，韓海燕，謝繼武，等.基于眼動(dòng)儀的手機(jī)游戲APP圖標(biāo)視覺度提升策略［J］.包裝工程，2020，41（18）：258-263.

［3］ 許彥如，王長波，劉玉華，等.多維網(wǎng)絡(luò)論壇數(shù)據(jù)的層次可視化［J］.計(jì)算機(jī)科學(xué)，2011，38（2）：206-209.

［4］ 楊璇.影響信息可視化動(dòng)畫表征效果的關(guān)鍵因素［J］.裝飾，2018，297（1）：114-117.

［5］ 楊勐荷，鄭雷.利用計(jì)算機(jī)交互技術(shù)的網(wǎng)頁界面文本視覺優(yōu)化設(shè)計(jì)［J］.現(xiàn)代電子技術(shù)，2020，43（24）：92-95，101.

［6］ 楊潔.格式塔理論在移動(dòng)終端APP界面布局設(shè)計(jì)中的應(yīng)用［J］.美與時(shí)代，2018（1）：70-73.

［7］ 朱明怡.信息可視化視覺設(shè)計(jì)的反思與創(chuàng)新［J］.藝術(shù)科技，2017，30（7）：278.

［8］ 殷俊，王婉晴.基于注意和視知覺的移動(dòng)端界面設(shè)計(jì)應(yīng)用［J］.包裝工程，2019（10）：68-72.

作者簡介：閆永亮（1990—），男，安徽亳州人，碩士，講師，研究方向：數(shù)字媒體藝術(shù)設(shè)計(jì)、交互設(shè)計(jì)。

王彩燕（2002—），女，江蘇揚(yáng)州人，本科在讀，研究方向：數(shù)字媒體技術(shù)。

翟藝晴（2003—），女，江蘇徐州人，本科在讀，研究方向：視覺傳達(dá)設(shè)計(jì)。

王豐（1978—），女，江蘇無錫人，碩士，副教授，研究方

向：實(shí)驗(yàn)動(dòng)畫、信息可視化。