基于用戶體驗的界面信息可視化設計研究

靳曉曉 （上海出版印刷高等專科學校 200093）

基于用戶體驗的界面信息可視化設計研究

靳曉曉 （上海出版印刷高等專科學校 200093）

體驗經濟時代，如何將信息可視化從簡單的傳遞信息轉換為值得用戶關注和消費并符合信息美學的視覺產品，是當下信息可視化發展階段中具有現實意義的課題。本文以用戶體驗為出發點，以數字界面載體的信息傳播特點為依據，分別從信息構架、視覺秩序、互動體驗三個方面探討了新媒體環境下界面信息可視化設計的建議和方案，從而提高界面信息可視化的傳播效率和服務質量

界面信息可視化；用戶體驗；信息構架；視覺表現；交互體驗

新媒體環境下，隨著互聯網技術和信息科學的不斷發展，數字化信息革命浪潮的到來使得信息可視化得以迅速的發展和傳播。近年來，信息可視化已滲透到教育、新聞媒體、信息科技等各個領域。信息可視化是一個實現“信息的搜索、過濾、整理和呈現、并使其清晰而又有效傳遞”的過程，為我們提供了一種新的思維方式去處理信息和解讀信息。高質量的信息可視化設計可以在用戶和信息之間構架有效溝通的橋梁，把復雜的信息描繪得直觀、生動、清晰并易于理解。

體驗經濟時代，用戶作為信息的接收對象，具有關鍵性作用。平板電腦、智能手機等移動終端設備不僅是信息發布的平臺，更是用戶體驗的媒介。我們需要從用戶體驗的角度進行可視化設計，不斷更新信息環境以及信息可視化的呈現方式，從而提高信息可視化的傳播效率和服務質量。在界面信息可視化中影響用戶體驗的因素主要有：1.信息構架：即信息構架是否合理；2.視覺表現：信息可視化所呈現的整體視覺效果；3.交互體驗：即用戶在瀏覽信息過程中的參與度與體驗值。如何構建科學合理的以用戶為中心的界面信息可視化系統，將信息可視化從簡單明確的傳遞信息轉換為值得用戶關注和消費并符合信息美學的視覺產品，是當下信息可視化發展階段中具有現實意義的課題。

一、信息構架

信息構架是界面信息可視化設計的首要環節。信息構架是對所采集到的數據信息進行合理的結構化分類、組織、管理和處理的過程，其核心是組合信息表述的要素、設定信息表述的路徑、編輯信息表達的內容。信息的組織結構是否合理，直接影響著信息可視化的傳達效果。

搭建合理的信息秩序需要首先對信息內容及信息層級進行劃分，找到有效信息的關鍵點，根據信息的重要程度以及信息內容之間的關系，對各維度信息進行分類、分層、排序，利用空間布局或時間順序來界定信息的層次和關系，完成信息的有效表達。其次，需要準確定位目標受眾群體，了解用戶的心智模型、信息需求和閱讀習慣。相對于傳統的信息可視化，數字界面的信息可視化的信息模型構架還需要考慮信息傳播環境的特點以及數字界面的呈現方式。比如：以手機為主要呈現載體的界面可視化設計就需要根據手機的尺寸、畫面的比例、人體工程學、手機用戶的閱讀習慣來構建合理的信息結構。當今人們所獲取的信息大多是扁平化的，扁平化設計是一種橫向平鋪的信息表達方式，可以通過減少信息的層級，縮短與受眾的溝通距離，在短時間內被受眾快速識別。適合于界面信息可視化的信息結構類型主要有：線性結構、矩陣結構、樹狀結構（如圖1）。

線性結構：一般采用單一的視覺流程，以時間流的方式呈現信息內容。在表現形式上通常采用水平線、垂直線、弧線來體現信息在時間維度上的變化。在時間軸上，也可以通過調整單元信息的位置關系和空間關系表達信息在單元時間內的趨勢變化。

矩陣結構：其單元結構以矩形或其他簡單的幾何圖形為主，主要表現為單元信息的重復式的自由排列。在特定的框架結構中，利用網格系統對其空間結構進行合理編排，通過調整區域面積的大小、位置、距離關系，使不同層級的信息根據其重要程度逐次呈現，在整體上形成一個能夠映射信息結構的視覺結構形式。

樹型結構：其信息結構的類型與樹木形態相似，采用蔓延的形式呈現信息，這種形式易于表示信息的層級關系、并列關系和從屬關系。適合表現需要不斷擴展的信息內容。

圖1.界面可視化信息路徑

二、視覺表現

信息可視化的設計過程也是用視覺思維對抽象信息進行視覺化的譯碼、轉換、重組、搭建關聯信息的過程。其重點在于如何將抽象的數據信息準確地轉化為具有代表性的視覺語言，利用圖形、文字、色彩、符號等視覺元素完善信息框架，并建立合理的視覺秩序，實現信息與視覺的有效結合，幫助用戶快速理解信息。

1.視覺轉換

視覺轉換是將抽象的信息數據轉換成為可理解的視覺符號，同時盡量保持數據信息內容的特性和關聯性。視覺轉換的準確性直接影響著可視化信息的傳達質量。在視覺轉換過程中需要對信息數據進行梳理和分析，剔除繁雜的信息，提煉數據中的關鍵信息，探尋數據和圖形之間的關系，如利用圖形符號的有序性、關聯性和對比性表達數據之間的關系。同一個數據集可以有多種視覺轉換形式，選擇恰當的視覺編碼是視覺轉換的關鍵步驟，視覺編碼需要考慮圖形符號元素的視覺變量在信息傳達中所呈現的不同效果，即通過調整視覺元素的形狀、大小、位置、方向、明度、色彩、填充紋樣等視覺屬性，使其準確表達信息之間的微妙關聯（如圖2）。

圖2.信息可視化中視覺元素變量

2.視覺秩序

在界面信息可視化設計的視覺表現層面，視覺秩序表現為信息結構與圖形、文字、符號、色彩等視覺元素之間的整體關系，是可視化信息的有序識讀和有效呈現。良好的視覺秩序有利于用戶快速的閱讀并理解信息，視覺秩序的營造需要通過合理規劃視覺流程和強化界面視覺統一性來實現。

用戶在瀏覽信息時具有特定的視覺習慣，即從上至下，從左到右。界面信息可視化需要在對信息組織與分層的基礎上，合理規劃視覺流程，實現主次信息的合理安排。比如：將主要信息放在視覺焦點的位置，充分利用視覺元素的對比關系，弱化干擾信息，強化目標信息的表現力度。此外，還可以在可視化界面中適當加入提示和引導符號，以強化信息的秩序感。尤其在人機交互的可視化界面，合理的信息引導可以縮短信息傳播路徑，提高信息傳播效率。只有簡約、高效符合用戶視覺流程的可視化設計才能在信息傳播中占據優勢。

數字界面的可視化具有動態性和交互性，過于多樣化的視覺信息會加重用戶的閱讀負擔，不利于信息的有效傳播。因此在進行信息可視化設計時，需要盡量使用統一的視覺元素和合理的布局，借助于圖形的序列、比例、量級等組織結構來建立數據之間的關系。首先需要保持可視化界面中的圖形、符號、文字等視覺元素在表現形式及風格上的統一性（如圖3）。其次，需要保持色彩的統一性，色彩是最具有表現力的視覺語言，要把握色彩的設計原理、視覺特性和色彩的情感因素，利用色彩來強化或削弱視覺對比，營造和諧統一的視覺畫面。最后還需要從全局把握整個信息圖的視覺流程和信息分布，確保信息組織結構、交互方式等要素在視覺上和操作上的一致性，盡量使用符合邏輯的視覺語言設定合理的布局。

圖3.界面信息可視化設計案例

圖4.手機界面信息可視化設計案例

三、交互體驗

伴隨著可視化軟件的不斷升級以及虛擬現實（VR/AR）技術的日益成熟，界面信息可視化的交互性和動態性特征將會愈發明顯，良好的交互體驗可以在信息的受眾和傳播者之間建立互動，增加信息的趣味性和探索性，激發用戶的創造力。設計師需要結合信息特點與用戶需求，將交互技術運用到信息可視化界面設計中，利用圖片、音頻、動畫等多樣化的信息資源，將聽、說、讀、寫等多重感官的交互體驗技術融合到信息可視化界面中，在信息的受眾和傳播者之間建立互動。

界面信息可視化的交互體驗主要通過界面操作工具和操控信息元素進行實施。可以在可視化界面中嵌入箭頭、返回、翻頁、放大縮小等圖標工具，讓用戶在瀏覽過程中根據需求靈活操控信息，通過工具圖標隨意縮放、移動、切換信息，或通過點擊信息節點探索深層信息內容，靈活地控制可視化頁面（如圖4）。但需要注意的是，可視化界面分布、交互方式和操作方式的設置需要依據用戶的行為習慣和行為動機。并不是交互行為越多效果就越好，設計者需要判斷何時需要呈現靜態信息，何時需要運用動態交互模式，而判斷的依據就是用戶的行為習慣以及可視化信息的傳達目的。因此特定環境下需要為用戶行為創建某種約束機制，盡量縮短用戶的適應過程，使用戶的活動范圍限定在簡單操作的范圍，以避免用戶產生錯誤路徑。此外，還需要考慮數字載體的界面尺寸，以便于約束和限制信息的展示維度和空間分布。

交互式界面信息可視化的實現過程需要數據分析師、軟件編程人員以及視覺設計師的密切合作。技術人員通過對信息的整理和組織，尋找信息之間的關聯性，創建信息路徑；設計師則需要對數據信息進行視覺編碼，通過圖形、文字、色彩、聲音、動畫等元素傳達信息；用戶作為信息的接收者根據需求和可視化界面產生交互，同時也可以產生新的用戶數據儲備在數據庫，以此形成人機交互數據的循環利用。

四、結論

體驗經濟的到來以及信息技術的飛速發展，信息可視化的未來將會呈現更加多樣化的形式。界面的信息可視化設計應以用戶需求和用戶體驗為中心，通過大數據挖掘，分析不同類型的用戶需求、行為習慣和審美特點，以此為基礎設定合理的信息構架，選擇恰當的信息可視化視圖的設計風格和表現手法，并融入動態交互技術，使用戶擁有全方位的感官體驗。基于數字界面的信息可視化實現了信息在傳播過程中由靜態到動態，由用戶被動接收到主動選擇的轉變。未來的界面信息可視化設計需要更加注重信息傳達的高效性、便捷性、精準性，強化可視化界面的情感性、趣味性和藝術性，將信息溝通以人性化的視覺導向的方式直觀呈現，從而引導公眾的行為，提升數據信息的價值。

[1]派恩二世.B.約瑟夫，體驗經濟[M].夏業良，魯煒，譯，北京，機械工業出版社，2008,32-33.

[2]斯提芬.斯莫尼克；魯德文.娜塔莎；托斯特.尼普，組織記憶中的心理表征和可視化進程[C].第七屆國際信息可視化教育會議，2013 I E E E.

[3]呂陽，基于視覺思維的用戶界面信息可視化設計研究[D].華東理工大學，2014.11.

[4]Na t h a n Y a u，鮮活的數據：數據可視化指南[M].人民郵電出版社，2012（10）.

[5]楊煥，智能手機移動互聯網應用的界面設計研究[D].武漢理工大學，2013.05.

[6]靳曉曉；陳晨，分形思維在數字化圖形設計中的應用[J].包裝工程，2013，34（22）.

項目來源：上海市科研創新項目基金資助, 課題名稱《新媒體時代信息可視化的視覺傳達與應用研究》，項目編號：（D0002130016）

靳曉曉（1982.08- ），女，漢族，籍貫（河南），碩士，上海出版印刷高等專科學校講師，主要從事視覺傳達設計、數字藝術設計方向的教學與研究。