基于增強視覺傳達效果的信息圖形化交互技術應用

陳 昊

（山東協和學院,山東 濟南 250107）

隨著計算機網絡的飛速發展，互聯網信息的可視化途徑愈加豐富，在視覺傳達與設計領域，除了傳統的文本、圖像、動畫外，視覺信息的傳達主要依靠可視化界面中的圖形元素。以網頁設計為例，網頁是各類視覺元素的集合體，網頁內色彩、圖像及文字等關鍵視覺元素的設計，都需遵循視覺傳達的基礎規律，關注視覺信息的沖擊力和人機交互環境的人性化構建[1]。在傳統的互聯網信息視覺傳達設計方式中，一般以用戶的認知心理為設計基礎，而較少關注視覺元素與用戶之間的情感交流和內容互動，導致用戶僅將App界面、網頁內容作為獲取信息的入口，忽視了信息載體本身的價值。

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

1 信息圖形化交互技術概述

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

對于界面設計而言，視覺信息的傳達主要依靠編解碼轉換[3]，界面的設計者將網頁需要承載的初始信息數據編碼作為視覺語言，再通過用戶側的解碼過程，將視覺語言中的設計元素轉換為便于用戶接受的信息。設計者與界面之間的互動過程是初始數據向視覺信息轉變的過程，用戶與界面之間的互動過程，是視覺信息轉變為自身所了解到的知識的過程，因此，信息圖形化的過程可以看作是符號學中編解碼理論的實際應用。利用交互界面的圖形，設計者可以將初始數據的組織與加工作為圖形化交互的基礎，并對用戶的界面互動動作進行精準定義，完成重要視覺信息的傳達、轉化與接收。在用戶端，用戶的信息接收屬于解碼后的“譯碼”過程，用戶根據自身的認知方式和理解能力，對圖形所包含的信息進行視覺翻譯，在出現心理活動后對信息內容進行選擇性接收。由此可見，信息圖形在交互過程中實質起著引導作用，合理的圖形化交互技術應用，能夠激發用戶興趣，協助用戶完成信息的高效辨識。

1.2 信息圖形化交互技術的基礎圖形格式

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

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

信息圖形化交互主要體現用戶與界面之間的關系，分為基本要素與交互要素，在代碼的控制下，信息圖形化借助這些元素的變化與用戶形成交互關系。基本要素主要包括界面的文本元素、色彩元素、點線面的組合元素與嵌入圖片的安排，屬于信息傳遞性視覺元素，其中，文本元素的技術應用包括自動調節字體、字號、間距關系與整體版面的設置，色彩結構則通過圖形的動態明度、對比度、色相等參數的調整，以簡潔的方式引導用戶行為，點、線、面三者作為最基本的設計組合則用于劃分信息圖形在界面視覺中所占據的比例，標識其重要程度。交互要素則較為復雜，承擔的圖形交互功能更為明顯，屬于操作功能性視覺元素，常隨著界面交互出現或消失，如交互元素的位移、閃爍、漸變等，用醒目的動態過渡效果提示用戶交互的結果。

2 信息圖形化技術在增強視覺傳達效果中的重要作用

2.1 提示與反饋

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

2.2 情感體驗

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

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

3 信息圖形化交互技術在增強視覺傳達效果中的應用思路

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

3.1 宏觀到微觀

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

圖2 Photoshop 2023的“宏觀到微觀”技術思路應用

3.2 動態顯隱的交互式信息提示

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

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

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

3.3 動態查詢

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

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

圖4 動態查詢交互技術的整體運行邏輯

3.4 數據刷

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

3.5 多維信息可視化

多維信息可視化呈現是信息圖形化技術在5G時代大數據云技術的發展與物聯網設備普及下的新應用思路，主要用于在單一的交互式界面中動態展示多維的數據信息，常見的大屏數據交互界面如圖5所示，可以看出信息圖形化技術在多維數據可視化的應用中發揮著重要作用，界面中不同的信息圖形根據大數據的變動實時變化，使信息展示更為靈動。

圖5 大屏多維數據可視化

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

圖6 NewsMap網站的樹狀地圖技術

4 結語

信息圖形化交互技術使互聯網時代的界面信息語言不再局限于文字、圖片和音視頻，在應用程序和網頁界面中，為動態的圖形變化賦予了充分的信息價值，拓展了人機交互的空間與自由度，增強了視覺傳達設計的效果，進一步優化了用戶的信息獲取體驗。在未來，大數據、云計算等技術的發展將日新月異，為信息圖形化帶來更多的可能性，同時也為視覺語言的傳達提供更加堅實的科技基礎。