基于增強(qiáng)視覺傳達(dá)效果的信息圖形化交互技術(shù)應(yīng)用

陳 昊

（山東協(xié)和學(xué)院,山東 濟(jì)南 250107）

隨著計(jì)算機(jī)網(wǎng)絡(luò)的飛速發(fā)展，互聯(lián)網(wǎng)信息的可視化途徑愈加豐富，在視覺傳達(dá)與設(shè)計(jì)領(lǐng)域，除了傳統(tǒng)的文本、圖像、動畫外，視覺信息的傳達(dá)主要依靠可視化界面中的圖形元素。以網(wǎng)頁設(shè)計(jì)為例，網(wǎng)頁是各類視覺元素的集合體，網(wǎng)頁內(nèi)色彩、圖像及文字等關(guān)鍵視覺元素的設(shè)計(jì)，都需遵循視覺傳達(dá)的基礎(chǔ)規(guī)律，關(guān)注視覺信息的沖擊力和人機(jī)交互環(huán)境的人性化構(gòu)建[1]。在傳統(tǒng)的互聯(lián)網(wǎng)信息視覺傳達(dá)設(shè)計(jì)方式中，一般以用戶的認(rèn)知心理為設(shè)計(jì)基礎(chǔ)，而較少關(guān)注視覺元素與用戶之間的情感交流和內(nèi)容互動，導(dǎo)致用戶僅將App界面、網(wǎng)頁內(nèi)容作為獲取信息的入口，忽視了信息載體本身的價(jià)值。

信息圖形化交互技術(shù)（information graphical interactive technology）是基于圖形美化技術(shù)的一種個(gè)性化的視覺元素技術(shù)手段，旨在通過增強(qiáng)視覺元素設(shè)計(jì)中的圖形交互性，提升用戶對視覺元素信息的關(guān)注度，進(jìn)而增強(qiáng)圖形視覺表達(dá)效果。信息圖形作為信息視覺傳達(dá)的重要媒介，與普通的裝飾圖形有著明顯差別，其在不同的App、網(wǎng)頁等界面設(shè)計(jì)中，呈現(xiàn)出圖標(biāo)、UI、引導(dǎo)符號等不同形式，有著信息傳遞的作用。目前，關(guān)于圖形化交互技術(shù)在計(jì)算機(jī)視覺中的研究已經(jīng)取得一定的成果，如國外學(xué)者奧圖·鈕拉特所創(chuàng)造的ISOTYPE可視化交流法，為信息圖形化交互中的圖形元素使用界定了一般規(guī)則[2]，漢斯·羅斯林研發(fā)了信息可視化交互統(tǒng)計(jì)軟件Trendalyzer，利用信息圖形為數(shù)據(jù)統(tǒng)計(jì)可視化提供新的方案。筆者以界面設(shè)計(jì)中各類視覺元素的圖形化設(shè)計(jì)為例，分析圖形化交互技術(shù)在增強(qiáng)視覺傳達(dá)效果中的具體應(yīng)用。

1 信息圖形化交互技術(shù)概述

1.1 信息圖形化技術(shù)的“編解碼”過程

對于界面設(shè)計(jì)而言，視覺信息的傳達(dá)主要依靠編解碼轉(zhuǎn)換[3]，界面的設(shè)計(jì)者將網(wǎng)頁需要承載的初始信息數(shù)據(jù)編碼作為視覺語言，再通過用戶側(cè)的解碼過程，將視覺語言中的設(shè)計(jì)元素轉(zhuǎn)換為便于用戶接受的信息。設(shè)計(jì)者與界面之間的互動過程是初始數(shù)據(jù)向視覺信息轉(zhuǎn)變的過程，用戶與界面之間的互動過程，是視覺信息轉(zhuǎn)變?yōu)樽陨硭私獾降闹R的過程，因此，信息圖形化的過程可以看作是符號學(xué)中編解碼理論的實(shí)際應(yīng)用。利用交互界面的圖形，設(shè)計(jì)者可以將初始數(shù)據(jù)的組織與加工作為圖形化交互的基礎(chǔ)，并對用戶的界面互動動作進(jìn)行精準(zhǔn)定義，完成重要視覺信息的傳達(dá)、轉(zhuǎn)化與接收。在用戶端，用戶的信息接收屬于解碼后的“譯碼”過程，用戶根據(jù)自身的認(rèn)知方式和理解能力，對圖形所包含的信息進(jìn)行視覺翻譯，在出現(xiàn)心理活動后對信息內(nèi)容進(jìn)行選擇性接收。由此可見，信息圖形在交互過程中實(shí)質(zhì)起著引導(dǎo)作用，合理的圖形化交互技術(shù)應(yīng)用，能夠激發(fā)用戶興趣，協(xié)助用戶完成信息的高效辨識。

1.2 信息圖形化交互技術(shù)的基礎(chǔ)圖形格式

傳統(tǒng)界面設(shè)計(jì)中所采用的常見Web圖形主要為柵格化圖像，一般格式包括GIF、JPEG、PNG等。柵格化圖像在用戶交互中有著一定的局限性。首先，柵格圖像必須包含像素點(diǎn)的每個(gè)點(diǎn)信息才能顯示圖像，且對網(wǎng)絡(luò)傳輸速度有著明確的要求；其次，柵格化圖像只能記錄單屬性的數(shù)據(jù)結(jié)構(gòu)，無法存儲多圖層、多變量疊加的數(shù)據(jù)；最后，柵格化圖像在交互過程中的伸縮變換容易影響到圖像的分辨率和顏色，導(dǎo)致圖形失真。在信息圖形化交互技術(shù)下，通用的矢量圖形采用SVG（scalable vector graphics，可伸縮矢量圖形）格式，該格式適配范圍較廣，與瀏覽器、Web應(yīng)用、移動App有著較強(qiáng)的兼容性，能夠適應(yīng)各類分辨率下的屏幕顯示，同時(shí)在伸縮變換時(shí)不會影響本身的圖形質(zhì)量，且文件體積較小，動態(tài)可交互性更強(qiáng)，在圖標(biāo)應(yīng)用、文字效果處理和圖形蒙版處理中都能結(jié)合不同的技術(shù)工具滿足設(shè)計(jì)需求，基于SVG格式的信息圖形化交互技術(shù)，能夠顯著提高用戶對圖形信息的解碼效率和對界面視覺的認(rèn)知水平[4]。

1.3 信息圖形化交互的基本要素與交互要素

信息圖形化交互主要體現(xiàn)用戶與界面之間的關(guān)系，分為基本要素與交互要素，在代碼的控制下，信息圖形化借助這些元素的變化與用戶形成交互關(guān)系?；疽刂饕ń缑娴奈谋驹亍⑸试?、點(diǎn)線面的組合元素與嵌入圖片的安排，屬于信息傳遞性視覺元素，其中，文本元素的技術(shù)應(yīng)用包括自動調(diào)節(jié)字體、字號、間距關(guān)系與整體版面的設(shè)置，色彩結(jié)構(gòu)則通過圖形的動態(tài)明度、對比度、色相等參數(shù)的調(diào)整，以簡潔的方式引導(dǎo)用戶行為，點(diǎn)、線、面三者作為最基本的設(shè)計(jì)組合則用于劃分信息圖形在界面視覺中所占據(jù)的比例，標(biāo)識其重要程度。交互要素則較為復(fù)雜，承擔(dān)的圖形交互功能更為明顯，屬于操作功能性視覺元素，常隨著界面交互出現(xiàn)或消失，如交互元素的位移、閃爍、漸變等，用醒目的動態(tài)過渡效果提示用戶交互的結(jié)果。

2 信息圖形化技術(shù)在增強(qiáng)視覺傳達(dá)效果中的重要作用

2.1 提示與反饋

在用戶進(jìn)行界面元素的互動后，提示與反饋就成為界面輸出給用戶的第一結(jié)果，負(fù)責(zé)給出警告或確認(rèn)等內(nèi)容，在此基礎(chǔ)上用戶處理進(jìn)階操作，可以從圖表、鏈接等互動元素處獲取可視化信息。合理使用圖形可以幫助用戶高效獲取反饋信息，減少操作失誤，如手機(jī)App、門戶網(wǎng)站的用戶注冊界面，通常會對用戶輸入的信息進(jìn)行實(shí)時(shí)的后臺校驗(yàn)，如郵箱、昵稱和密碼的安全性等，當(dāng)用戶輸入的信息未通過指定條件的校驗(yàn)時(shí)，則會在輸入框的右側(cè)以紅色圖形加文本的形式描述錯(cuò)誤，并給予警告或建議，要求用戶及時(shí)進(jìn)行檢查、修改輸入信息，在信息校驗(yàn)滿足條件后，則以綠色圖形加文本的形式提示用戶信息可用。圖形的動態(tài)提示與反饋功能可以幫助用戶快速地確認(rèn)并采集信息，降低操作難度。

2.2 情感體驗(yàn)

圖形化的人機(jī)交互方式更關(guān)注用戶的實(shí)際情感體驗(yàn)，從技術(shù)角度保證用戶在進(jìn)行交互時(shí)有著愉悅心情，尤其是在用戶交互出現(xiàn)如網(wǎng)絡(luò)斷開連接、服務(wù)器錯(cuò)誤等問題，圖形化交互能夠接續(xù)產(chǎn)品與用戶之間的交流，減輕用戶的失落情緒。以Google的Chrome瀏覽器為例，當(dāng)用戶在使用中出現(xiàn)網(wǎng)絡(luò)無法連接的問題時(shí)，除了提示無法連接互聯(lián)網(wǎng)外，還為用戶設(shè)計(jì)了一只可動態(tài)交互的小恐龍（見圖1），用戶只需按下空格鍵或在移動端單擊恐龍，就可以進(jìn)入一個(gè)簡單的恐龍?zhí)S躲避障礙的小游戲，小恐龍游戲的圖形代碼較為簡單，只需在本地預(yù)置固定的圖形內(nèi)容，定義一個(gè)滾動地圖類，設(shè)置恐龍圖形的跳躍坐標(biāo)、移動像素值、障礙物的隨機(jī)數(shù)和積分顯示，用戶被圖形元素吸引，甚至多次嘗試以獲取較高的分?jǐn)?shù)。在娛樂性交互元素的引導(dǎo)下，網(wǎng)絡(luò)斷開連接所帶來的不適感明顯降低，盡管簡單的交互圖形所構(gòu)成的小游戲本身未包含充分的可視化信息，但在細(xì)節(jié)方面大幅提升了用戶的信息獲取體驗(yàn)，這也是圖形化人機(jī)交互在關(guān)注用戶情感方面的經(jīng)典案例。

圖1 Google的Chrome瀏覽器中預(yù)置的圖形交互小游戲

3 信息圖形化交互技術(shù)在增強(qiáng)視覺傳達(dá)效果中的應(yīng)用思路

信息圖形化交互技術(shù)的技術(shù)要素包括基礎(chǔ)要素（信息傳遞性視覺元素）和交互要素（操作功能性元素）,分別負(fù)責(zé)不同的功能范圍，信息傳遞性元素負(fù)責(zé)準(zhǔn)確、合理的信息表達(dá)，提供精確的全局性信息，體現(xiàn)信息結(jié)構(gòu)、信息對比，突出重點(diǎn)信息，完善信息的上下文提示；操作功能性視覺元素則負(fù)責(zé)自然、便捷的交互方式，旨在通過后臺的代碼與技術(shù)手段，引導(dǎo)用戶進(jìn)行信息導(dǎo)航和瀏覽、信息過濾、信息輸入、信息提示與反饋、視圖轉(zhuǎn)換等。兩者以不同的展示方式呈現(xiàn)信息，共同完成增強(qiáng)視覺傳達(dá)效果的任務(wù)，在實(shí)際的技術(shù)應(yīng)用中，一般包含宏觀到細(xì)節(jié)、動態(tài)顯隱的交互式信息提示、動態(tài)查詢、數(shù)據(jù)刷、多維數(shù)據(jù)呈現(xiàn)等思路。

3.1 宏觀到微觀

宏觀到微觀（Macro to Micro）是處理界面中復(fù)雜圖形的常用技術(shù)思路之一，由信息設(shè)計(jì)領(lǐng)域先驅(qū)者愛德華·塔夫特提出，開始用來形容印刷地圖、紙質(zhì)報(bào)表等其他靜態(tài)信息圖的信息處理邏輯，根據(jù)宏觀需求選擇微觀細(xì)節(jié)，旨在“濃縮、減緩個(gè)性化可視化的步調(diào)”。界面視圖從宏觀上看是抽象的，需要用戶放大抽象界面，執(zhí)行滾動、跳轉(zhuǎn)、移動操作，并進(jìn)行對照比較，才能觀察到所需細(xì)節(jié)，回到宏觀的界面視圖后，用戶閱讀的微觀區(qū)域會出現(xiàn)標(biāo)記，如Matlab中的信號處理軟件，會在用戶標(biāo)記的信號波段設(shè)置矩形選框，提示用戶當(dāng)前觀察的具體波段在整體信號波段中所處的位置。宏觀到微觀的具體技術(shù)呈現(xiàn)形式，是在信息界面總視圖的基礎(chǔ)上，內(nèi)嵌一個(gè)新面板或是一個(gè)新窗口，如圖2所示，Photoshop 2023內(nèi)置的窗口導(dǎo)航器是宏觀到微觀技術(shù)思路的應(yīng)用典例，紅色的矩形視野框以動態(tài)交互圖形的方式協(xié)助用戶定義當(dāng)前的視圖位置，為用戶提供了較大便利，新窗口的矩形視野框負(fù)責(zé)詳細(xì)總體視圖的定位，詳細(xì)視圖的內(nèi)容與總體視圖之間保持位置和比例的動態(tài)同步，一般同步的刷新響應(yīng)時(shí)間會控制在0.1 s內(nèi)，以保證交互體驗(yàn)?？紤]到圖形辨識度的問題，在其他類似的界面交互中，矩形視野框也會根據(jù)視圖的顏色進(jìn)行調(diào)整，保證與視圖內(nèi)容的區(qū)分度，這也體現(xiàn)出圖形色彩的重要性。

圖2 Photoshop 2023的“宏觀到微觀”技術(shù)思路應(yīng)用

3.2 動態(tài)顯隱的交互式信息提示

大量分層數(shù)據(jù)在界面交互中如何嵌套呈現(xiàn)也是圖形化交互技術(shù)所要解決的重點(diǎn)問題之一。針對有組織結(jié)構(gòu)的分層數(shù)據(jù)信息，一般采取的技術(shù)方案為，將針對性的低層級次要信息隱藏于主信息界面中，而非加入主交互界面中，當(dāng)用戶瀏覽到指定位置時(shí)，根據(jù)用戶的鼠標(biāo)指針或觸摸點(diǎn)進(jìn)行定位，彈出針對性的次級信息。如維基百科的彈出式信息界面（見圖3），即采用這種技術(shù)思路，當(dāng)用戶對頁面上某個(gè)標(biāo)記為藍(lán)色下劃線的詞條超鏈接感興趣時(shí)，將鼠標(biāo)移至該處，即可快速觀看相關(guān)詞條概覽，鼠標(biāo)移開時(shí)概覽消失，無須為了解詞條信息而進(jìn)行界面交互的二次點(diǎn)擊和冗余跳轉(zhuǎn)。

圖3 維基百科的彈出式信息交互

對于包含信息量較多的信息圖表來說，用戶通常會在總體的信息圖中查找特定的數(shù)據(jù)，在一些交互界面的信息圖表中，交互式信息提示的技術(shù)應(yīng)用思路更加寬泛，不僅信息提示本身可以動態(tài)顯隱，提示框中的內(nèi)容也可以根據(jù)用戶的操作進(jìn)行實(shí)時(shí)變化，提示框本身亦可以作為一個(gè)窗口固定下來，當(dāng)用戶在某個(gè)窗口中執(zhí)行移動、點(diǎn)擊的操作時(shí)，動態(tài)提示窗口則以內(nèi)容的顯隱為用戶提供實(shí)時(shí)的動態(tài)信息展示。

3.3 動態(tài)查詢

動態(tài)查詢（Dynamic Queries）主要為了滿足用戶在大量信息中的精準(zhǔn)查詢需求，以標(biāo)簽查詢的方式快速過濾信息數(shù)據(jù)。在界面中，常使用標(biāo)準(zhǔn)的操作控件如滑塊、復(fù)選框等信息圖形，輔以動態(tài)生成的查詢建議、查詢歷史等，用戶操作控件定義數(shù)據(jù)信息的顯示范圍。動態(tài)數(shù)據(jù)的技術(shù)應(yīng)用思路基于布爾表達(dá)式，如在音樂軟件中，用戶按歌曲發(fā)布年代查詢20世紀(jì)80年代到90年代的歌曲信息，則控件背后的布爾表達(dá)式為“years＞1980 and years＜1999”。

動態(tài)查詢的前端邏輯對于用戶來說較為清晰，所有可視化控件均由用戶自主控制，信息獲取的主導(dǎo)權(quán)被完全讓渡給用戶，通過高效的即時(shí)交互反饋縮短用戶的信息探索時(shí)間。后端的動態(tài)查詢引擎則相當(dāng)于一個(gè)黑箱（見圖4），其查詢方式主要包括SQL數(shù)據(jù)庫、HQL數(shù)據(jù)庫和接口。以SQL的動態(tài)查詢?yōu)槔?，接收到用戶在前端的查詢請求后，動態(tài)查詢引擎首先組裝分頁信息和查詢條件，傳入值空時(shí)跳過，否則根據(jù)操作符邏輯（between、like、in、or）等，在SQL中組裝傳入值和排序信息，執(zhí)行查詢指令，解析參數(shù)，搜索配置，查詢類型判定，再進(jìn)入三種查詢方式，獲取信息數(shù)據(jù)與分頁，將數(shù)據(jù)對象化、格式化為CommonGrid控件所能接收的json格式信息列表，由CommomGrid控件獲取數(shù)據(jù)并渲染，最終以json格式傳回用戶界面[5]。

圖4 動態(tài)查詢交互技術(shù)的整體運(yùn)行邏輯

3.4 數(shù)據(jù)刷

數(shù)據(jù)刷（Data Brushing）是一種進(jìn)階的數(shù)據(jù)信息處理交互技術(shù)，一般多在數(shù)據(jù)量較大的軟件界面中實(shí)現(xiàn)，當(dāng)用戶選中某一列信息數(shù)據(jù)后，在另一界面視圖中對這些選中的數(shù)據(jù)進(jìn)行詳細(xì)展示。首先，將信息交互圖形作為CSS選擇器，每個(gè)信息圖形選擇器背后都設(shè)置對應(yīng)的數(shù)據(jù)點(diǎn)，再為信息數(shù)據(jù)設(shè)置變量索引，用戶在多個(gè)信息圖形中選中數(shù)據(jù)，即可在另外的信息圖形中觀察數(shù)據(jù)的上下文，還可在不同的數(shù)據(jù)空間中借助變量索引快速跳轉(zhuǎn)[6]。從視覺效果上看，用戶可以快速全選、反選一個(gè)或若干個(gè)零散的圖形對象，或使用慢增、遞增的數(shù)據(jù)篩選方式，這使信息數(shù)據(jù)的呈現(xiàn)較為靈活。數(shù)據(jù)刷的交互呈現(xiàn)方式主要包括框選、點(diǎn)選、范圍選擇、套索選擇、工具切換選擇等，用戶“刷”過的數(shù)據(jù)點(diǎn)在不同的數(shù)據(jù)視圖中以共同的可視化特征顯示。以項(xiàng)目管理軟件CornerStone為例，用戶借助軟件提供的數(shù)據(jù)刷，能夠保留具有某一特征的數(shù)據(jù)點(diǎn)，并在切換圖表信息時(shí)仍能看到這些數(shù)據(jù)點(diǎn)的變化，業(yè)務(wù)數(shù)據(jù)清晰，對管理決策起到了智能化的輔助作用。

3.5 多維信息可視化

多維信息可視化呈現(xiàn)是信息圖形化技術(shù)在5G時(shí)代大數(shù)據(jù)云技術(shù)的發(fā)展與物聯(lián)網(wǎng)設(shè)備普及下的新應(yīng)用思路，主要用于在單一的交互式界面中動態(tài)展示多維的數(shù)據(jù)信息，常見的大屏數(shù)據(jù)交互界面如圖5所示，可以看出信息圖形化技術(shù)在多維數(shù)據(jù)可視化的應(yīng)用中發(fā)揮著重要作用，界面中不同的信息圖形根據(jù)大數(shù)據(jù)的變動實(shí)時(shí)變化，使信息展示更為靈動。

圖5 大屏多維數(shù)據(jù)可視化

在多維數(shù)據(jù)可視化中，信息化圖形交互技術(shù)的應(yīng)用思路主要包括多Y值圖形、大量小對象、樹狀地圖（Tree Map）等，多Y值圖形指在單個(gè)圖表上形成不同類型的數(shù)據(jù)堆疊，有助于幫助用戶自由定義圖表的Y軸顯示范圍，在數(shù)據(jù)集中找到各類型數(shù)據(jù)信息間的橫向關(guān)聯(lián)[7]；大量小對象適用于兩種或兩種維度以上的界面信息展示，多維數(shù)據(jù)中的每種數(shù)據(jù)僅保留最重要的展示維度，比較不同信息類型之間的變化，如在同一數(shù)據(jù)可視化界面中的展示游客信息的性別動態(tài)比對和年齡動態(tài)比對，能夠幫助信息觀看者對游客的實(shí)際構(gòu)成進(jìn)行心理畫像。樹狀地圖技術(shù)是以對動態(tài)的矩形信息圖形進(jìn)行大小、顏色的編碼定義，使矩形的視覺信息包含信息優(yōu)先級、數(shù)值大小、信息類別等，如NewsMap網(wǎng)站在新聞上的樹狀地圖技術(shù)（見圖6）應(yīng)用，最大、顏色最顯眼的矩形代表優(yōu)先級較高的新聞信息，較小、較暗的信息矩形則表示該新聞信息的流行度較低。而且用戶在瀏覽新聞界面時(shí)，還會發(fā)現(xiàn)這些矩形會根據(jù)實(shí)時(shí)的新聞大數(shù)據(jù)，以服務(wù)器端云計(jì)算自動調(diào)整信息矩形的形狀和顏色，形成了動態(tài)、鮮明的視覺層次。

圖6 NewsMap網(wǎng)站的樹狀地圖技術(shù)

4 結(jié)語

信息圖形化交互技術(shù)使互聯(lián)網(wǎng)時(shí)代的界面信息語言不再局限于文字、圖片和音視頻，在應(yīng)用程序和網(wǎng)頁界面中，為動態(tài)的圖形變化賦予了充分的信息價(jià)值，拓展了人機(jī)交互的空間與自由度，增強(qiáng)了視覺傳達(dá)設(shè)計(jì)的效果，進(jìn)一步優(yōu)化了用戶的信息獲取體驗(yàn)。在未來，大數(shù)據(jù)、云計(jì)算等技術(shù)的發(fā)展將日新月異，為信息圖形化帶來更多的可能性，同時(shí)也為視覺語言的傳達(dá)提供更加堅(jiān)實(shí)的科技基礎(chǔ)。