基于用戶體驗(yàn)的界面信息可視化設(shè)計(jì)研究

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

基于用戶體驗(yàn)的界面信息可視化設(shè)計(jì)研究

靳曉曉 （上海出版印刷高等?？茖W(xué)校 200093）

體驗(yàn)經(jīng)濟(jì)時(shí)代，如何將信息可視化從簡(jiǎn)單的傳遞信息轉(zhuǎn)換為值得用戶關(guān)注和消費(fèi)并符合信息美學(xué)的視覺產(chǎn)品，是當(dāng)下信息可視化發(fā)展階段中具有現(xiàn)實(shí)意義的課題。本文以用戶體驗(yàn)為出發(fā)點(diǎn)，以數(shù)字界面載體的信息傳播特點(diǎn)為依據(jù)，分別從信息構(gòu)架、視覺秩序、互動(dòng)體驗(yàn)三個(gè)方面探討了新媒體環(huán)境下界面信息可視化設(shè)計(jì)的建議和方案，從而提高界面信息可視化的傳播效率和服務(wù)質(zhì)量

界面信息可視化；用戶體驗(yàn)；信息構(gòu)架；視覺表現(xiàn)；交互體驗(yàn)

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

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

一、信息構(gòu)架

信息構(gòu)架是界面信息可視化設(shè)計(jì)的首要環(huán)節(jié)。信息構(gòu)架是對(duì)所采集到的數(shù)據(jù)信息進(jìn)行合理的結(jié)構(gòu)化分類、組織、管理和處理的過(guò)程，其核心是組合信息表述的要素、設(shè)定信息表述的路徑、編輯信息表達(dá)的內(nèi)容。信息的組織結(jié)構(gòu)是否合理，直接影響著信息可視化的傳達(dá)效果。

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

線性結(jié)構(gòu)：一般采用單一的視覺流程，以時(shí)間流的方式呈現(xiàn)信息內(nèi)容。在表現(xiàn)形式上通常采用水平線、垂直線、弧線來(lái)體現(xiàn)信息在時(shí)間維度上的變化。在時(shí)間軸上，也可以通過(guò)調(diào)整單元信息的位置關(guān)系和空間關(guān)系表達(dá)信息在單元時(shí)間內(nèi)的趨勢(shì)變化。

矩陣結(jié)構(gòu)：其單元結(jié)構(gòu)以矩形或其他簡(jiǎn)單的幾何圖形為主，主要表現(xiàn)為單元信息的重復(fù)式的自由排列。在特定的框架結(jié)構(gòu)中，利用網(wǎng)格系統(tǒng)對(duì)其空間結(jié)構(gòu)進(jìn)行合理編排，通過(guò)調(diào)整區(qū)域面積的大小、位置、距離關(guān)系，使不同層級(jí)的信息根據(jù)其重要程度逐次呈現(xiàn)，在整體上形成一個(gè)能夠映射信息結(jié)構(gòu)的視覺結(jié)構(gòu)形式。

樹型結(jié)構(gòu)：其信息結(jié)構(gòu)的類型與樹木形態(tài)相似，采用蔓延的形式呈現(xiàn)信息，這種形式易于表示信息的層級(jí)關(guān)系、并列關(guān)系和從屬關(guān)系。適合表現(xiàn)需要不斷擴(kuò)展的信息內(nèi)容。

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

二、視覺表現(xiàn)

信息可視化的設(shè)計(jì)過(guò)程也是用視覺思維對(duì)抽象信息進(jìn)行視覺化的譯碼、轉(zhuǎn)換、重組、搭建關(guān)聯(lián)信息的過(guò)程。其重點(diǎn)在于如何將抽象的數(shù)據(jù)信息準(zhǔn)確地轉(zhuǎn)化為具有代表性的視覺語(yǔ)言，利用圖形、文字、色彩、符號(hào)等視覺元素完善信息框架，并建立合理的視覺秩序，實(shí)現(xiàn)信息與視覺的有效結(jié)合，幫助用戶快速理解信息。

1.視覺轉(zhuǎn)換

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

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

2.視覺秩序

在界面信息可視化設(shè)計(jì)的視覺表現(xiàn)層面，視覺秩序表現(xiàn)為信息結(jié)構(gòu)與圖形、文字、符號(hào)、色彩等視覺元素之間的整體關(guān)系，是可視化信息的有序識(shí)讀和有效呈現(xiàn)。良好的視覺秩序有利于用戶快速的閱讀并理解信息，視覺秩序的營(yíng)造需要通過(guò)合理規(guī)劃視覺流程和強(qiáng)化界面視覺統(tǒng)一性來(lái)實(shí)現(xiàn)。

用戶在瀏覽信息時(shí)具有特定的視覺習(xí)慣，即從上至下，從左到右。界面信息可視化需要在對(duì)信息組織與分層的基礎(chǔ)上，合理規(guī)劃視覺流程，實(shí)現(xiàn)主次信息的合理安排。比如：將主要信息放在視覺焦點(diǎn)的位置，充分利用視覺元素的對(duì)比關(guān)系，弱化干擾信息，強(qiáng)化目標(biāo)信息的表現(xiàn)力度。此外，還可以在可視化界面中適當(dāng)加入提示和引導(dǎo)符號(hào)，以強(qiáng)化信息的秩序感。尤其在人機(jī)交互的可視化界面，合理的信息引導(dǎo)可以縮短信息傳播路徑，提高信息傳播效率。只有簡(jiǎn)約、高效符合用戶視覺流程的可視化設(shè)計(jì)才能在信息傳播中占據(jù)優(yōu)勢(shì)。

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

圖3.界面信息可視化設(shè)計(jì)案例

圖4.手機(jī)界面信息可視化設(shè)計(jì)案例

三、交互體驗(yàn)

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

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

交互式界面信息可視化的實(shí)現(xiàn)過(guò)程需要數(shù)據(jù)分析師、軟件編程人員以及視覺設(shè)計(jì)師的密切合作。技術(shù)人員通過(guò)對(duì)信息的整理和組織，尋找信息之間的關(guān)聯(lián)性，創(chuàng)建信息路徑；設(shè)計(jì)師則需要對(duì)數(shù)據(jù)信息進(jìn)行視覺編碼，通過(guò)圖形、文字、色彩、聲音、動(dòng)畫等元素傳達(dá)信息；用戶作為信息的接收者根據(jù)需求和可視化界面產(chǎn)生交互，同時(shí)也可以產(chǎn)生新的用戶數(shù)據(jù)儲(chǔ)備在數(shù)據(jù)庫(kù)，以此形成人機(jī)交互數(shù)據(jù)的循環(huán)利用。

四、結(jié)論

體驗(yàn)經(jīng)濟(jì)的到來(lái)以及信息技術(shù)的飛速發(fā)展，信息可視化的未來(lái)將會(huì)呈現(xiàn)更加多樣化的形式。界面的信息可視化設(shè)計(jì)應(yīng)以用戶需求和用戶體驗(yàn)為中心，通過(guò)大數(shù)據(jù)挖掘，分析不同類型的用戶需求、行為習(xí)慣和審美特點(diǎn)，以此為基礎(chǔ)設(shè)定合理的信息構(gòu)架，選擇恰當(dāng)?shù)男畔⒖梢暬晥D的設(shè)計(jì)風(fēng)格和表現(xiàn)手法，并融入動(dòng)態(tài)交互技術(shù)，使用戶擁有全方位的感官體驗(yàn)。基于數(shù)字界面的信息可視化實(shí)現(xiàn)了信息在傳播過(guò)程中由靜態(tài)到動(dòng)態(tài)，由用戶被動(dòng)接收到主動(dòng)選擇的轉(zhuǎn)變。未來(lái)的界面信息可視化設(shè)計(jì)需要更加注重信息傳達(dá)的高效性、便捷性、精準(zhǔn)性，強(qiáng)化可視化界面的情感性、趣味性和藝術(shù)性，將信息溝通以人性化的視覺導(dǎo)向的方式直觀呈現(xiàn)，從而引導(dǎo)公眾的行為，提升數(shù)據(jù)信息的價(jià)值。

[1]派恩二世.B.約瑟夫，體驗(yàn)經(jīng)濟(jì)[M].夏業(yè)良，魯煒，譯，北京，機(jī)械工業(yè)出版社，2008,32-33.

[2]斯提芬.斯莫尼克；魯?shù)挛?娜塔莎；托斯特.尼普，組織記憶中的心理表征和可視化進(jìn)程[C].第七屆國(guó)際信息可視化教育會(huì)議，2013 I E E E.

[3]呂陽(yáng)，基于視覺思維的用戶界面信息可視化設(shè)計(jì)研究[D].華東理工大學(xué)，2014.11.

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

[5]楊煥，智能手機(jī)移動(dòng)互聯(lián)網(wǎng)應(yīng)用的界面設(shè)計(jì)研究[D].武漢理工大學(xué)，2013.05.

[6]靳曉曉；陳晨，分形思維在數(shù)字化圖形設(shè)計(jì)中的應(yīng)用[J].包裝工程，2013，34（22）.

項(xiàng)目來(lái)源：上海市科研創(chuàng)新項(xiàng)目基金資助, 課題名稱《新媒體時(shí)代信息可視化的視覺傳達(dá)與應(yīng)用研究》，項(xiàng)目編號(hào)：（D0002130016）

靳曉曉（1982.08- ），女，漢族，籍貫（河南），碩士，上海出版印刷高等?？茖W(xué)校講師，主要從事視覺傳達(dá)設(shè)計(jì)、數(shù)字藝術(shù)設(shè)計(jì)方向的教學(xué)與研究。