層次數據可視化在網絡媒體中的視覺呈現研究

閆永亮 王彩燕 翟藝晴 王豐

摘要：5G時代，信息可視化設計產品數量激增，用戶需求不斷增加，海量網絡用戶的認知心理和行為習慣決定了未來可視化設計的發展趨勢。文章針對層次數據可視化的五個案例在視覺設計中呈現的不同特點，逐一進行論述、分析與比較，根據研究結果提出優化用戶感知和視覺體驗的可視化設計新模式以及符合信息布局的交互設計創新策略，為未來的可視化應用提供有價值的參考。

關鍵詞：層次數據可視化；直覺體驗；視覺呈現；網絡媒體；用戶需求

中圖分類號：G210.7 文獻標識碼：A 文章編號：1004-9436（2022）10-00-03

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

1 層次數據可視化的概念及特點

可視化設計是一門跨多項學科領域和多方位的綜合研究，囊括了數據可視化、信息圖形設計、科學可視化等。5G時代的信息傳播技術得到迅速發展，面向廣義數據的層次關系表達成為設計領域的嶄新研究方向［3］。層次數據可視化在表達事物間的從屬關系上，展現出了巨大的層次邏輯優勢。另外，其在整體可讀性、距離相關性和穩定性等相關屬性上，都顯示出了特殊的研究價值。

數據的層次關系，既可以是事物本身固有的整體與局部的關系，又可以是人們在認識世界時賦予的類別與子類別的關系或邏輯上的承接關系。其特點為：一是結構特點表現得更為抽象，是廣泛存在的一種關系順序，既不拋開時間順序、空間順序的因素，又更強調數據間的關系層次，研究對象也從單一類別轉向多種對象間錯綜復雜的關系網，同時能夠兼顧時間線、情感化的因素和數據內在關聯性；二是視覺特點更加強調空間排布的合理性，避免空間浪費和視覺混淆等問題，在信息傳達的有效性上展現其非凡的能力，能提高用戶在單位時間內對海量信息的理解效率，建立起人與信息、人與人、人與社會之間的關系紐帶。

2 層次數據可視化的視覺呈現分析

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

2.1 “@文本弧形”

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

2.2 隨意線形

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

2.3 新聞地圖形式

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

2.4 點狀圓環形式

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

2.5 有序正等分樹圖形式

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

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

3 網絡媒體可視化設計建議

3.1 強化動態化圖形表現

信息內容的動態圖形化設計，即可順著時間流動或交互發生而產生形態變化的圖形［4］。憑借時間與空間的架構，利用線性或非線性的敘事手段，整合文字、圖形、視頻等元素，將原本無序和難以傳達的信息轉化成易懂的可視化語言，對其內部所傳達的信息進行感知和管理，幫助用戶篩選有用信息。從信息交互和信息管理的角度來看，需考慮用戶的認知負荷、認知結構、視覺思維習慣和心智模型，通過橫向線性和縱向層級的設計，引導用戶逐步感知和記憶圖形傳達的信息，提升用戶的感知和信息獲取能力［5］。

3.2 提升界面設計的視覺美感

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

3.3 增強用戶體驗的沉浸感

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

4 結語

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

參考文獻：

［1］ IDC全球數據圈.數據時代2025［EB/OL］.中國存儲

網，https：//www.chinastor.com/market/12214001R018.Html，2018-12-21.

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

［3］ 許彥如，王長波，劉玉華，等.多維網絡論壇數據的層次可視化［J］.計算機科學，2011，38（2）：206-209.

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

［5］ 楊勐荷，鄭雷.利用計算機交互技術的網頁界面文本視覺優化設計［J］.現代電子技術，2020，43（24）：92-95，101.

［6］ 楊潔.格式塔理論在移動終端APP界面布局設計中的應用［J］.美與時代，2018（1）：70-73.

［7］ 朱明怡.信息可視化視覺設計的反思與創新［J］.藝術科技，2017，30（7）：278.

［8］ 殷俊，王婉晴.基于注意和視知覺的移動端界面設計應用［J］.包裝工程，2019（10）：68-72.

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

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

翟藝晴（2003—），女，江蘇徐州人，本科在讀，研究方向：視覺傳達設計。

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

向：實驗動畫、信息可視化。