互聯網B端背景下信息可視化圖表的交互設計研究

摘要：信息可視化圖表越來越多地應用在互聯網B端項目中，信息可視化通過視覺化的處理將大量抽象、復雜的信息數據用圖形、圖表等具體的形式表達出來。圖表作為信息可視化設計中一種主要的可視化形式，既是展示數據的過程，也在引導受眾接收數據和分析數據，如何讓用戶體驗更好值得研究。本文主要以信息可視化圖表設計為出發點，通過案例分析，從信息可視化圖表類型、設計原則和視覺元素的選擇等方面梳理互聯網B端場景中信息可視化設計的特點，探討更適合B端項目場景的信息可視化圖表設計的方法。

關鍵詞：數據可視化；交互設計：可視化圖表；互聯網B端

引言

如今的互聯網產品，已從單體產品發展成為模式化、形態化的復雜系統，SaaS（software as? a service，軟件即服務）模式成熟，形成了互聯網的復雜系統。社會需求不斷增多，互聯網各式系統所面向的受眾呈多樣化發展趨勢。互聯網與傳統行業經過多年深度融合發展，推動實現了產業數字化升級。互聯網行業也從多關注于C（customer，客戶）端產品，到如今B（business，企業）端產品規模已逐漸擴展和成熟。B端產品交互設計不斷升級，信息可視化圖表越來越多地應用在互聯網B端產品中，能夠幫助B端用戶整合數據并創建可復用的信息可視化組件。在B端產品場景中的信息可視化圖表設計，如何提高信息傳遞效率、信息處理效率，如何讓B端用戶更快、更便捷高效地接收、分析并運用信息可視化圖表中的關鍵信息，是設計關注重點。只有明確了B端場景中信息可視化圖表設計的需求，才能進行深入的研究，從而有效地提高用戶體驗。

1. 信息可視化

信息可視化涉及多個相關學科，如圖形設計、心理學、計算機、人工智能和社會學科等交叉學科，是將抽象信息到可視化模式的映射過程[1]。《不只是美：信息圖表設計原理與經典案例》[2]中對信息可視化的定義：“任何圖表與可視化的首要和最終目的是作為協助我們的眼睛和大腦發掘現象背后隱藏信息的一種工具。”在設計中，主要是用具體的圖形化語言來表示抽象的信息，因此視覺元素在信息可視化設計中顯得尤為重要，其中信息圖形包括但不限于插圖、符號、地圖、圖表等一系列視覺信息。信息可視化可以提高信息傳遞效率，有助于人們更好、更準確地掌握信息，從而提高人們獲得數據、辨別數據、處理數據的整體效率。

信息可視化思想的發展是人類歷史發展的趨勢之一，信息可視化圖表的誕生是記錄信息方式進步的象征。20世紀60年代，圖像傳播速度提高，通過具體的視覺元素快捷高效地呈現大量抽象信息，當代文化開始呈現視覺化發展，有人把這個時代稱為“讀圖時代”，信息可視化技術得到進一步發展，并成為不可取代的信息呈現方式之一。

2. 信息可視化載體

信息可視化圖表要有可讀性、易用性和動態交互性，呈現出的信息內容要精練并具有易讀取的視覺效果，方便數據的傳播，使得用戶更高效地獲取信息和分析信息[3]。由于信息類型龐雜，不同類型的信息需要結合其特定的內容與相對應的視覺化表達方式，常用信息圖標類型可分為平面類、多維類。ECharts是國內百度公司推出的一款開源大數據可視化工具，渲染能力強，支持多種可視化類型，為數據可視化提供了更加快捷的實現方式，以ECharts中的圖標組件為例截圖數據可視化圖表表達形式。

2.1 平面類信息圖表

平面類信息圖表較為傳統，設計都是以指示信息為核心，傳遞數據信息和圖形通常有方向性、地域性、時效性的特點，如雨量流量關系圖地圖、路線圖、柱狀圖、堆疊面積圖等，如圖1所示。

2.2 多維類信息圖表

多維類信息圖表設計可以從兩個角度出發。一類是從視覺層面出發，三維立體效果的設計形式，如3D地球圖、3D柱狀圖等三維立體效果的圖表，具有引人入勝的特點，能夠更加直觀地展示對象的漸變。第二類是在信息表現維度方面，將高維的數據展示在二維的平面中。1980年，Alfred Inselberg[4]提出的平行坐標系（parallel coordinates）是經典的多維數據可視化技術之一，平行坐標系方法能夠簡潔、快速地展示多維數據。經過發展，平行坐標系可以進一步擴展到三維可視化的方式，以展示高維動態的數據，在Echarts軟件中就可以找到三城市AQI分布平行指標系，如圖2所示。

3. B端背景下信息可視化圖表的設計分析

在互聯網B端場景設計應用中，B端產品面對的多是商家或企業，其本質是滿足用戶工作需求，將傳統的線下工作轉化為更系統化、信息化的線上工作，從而提高企業協同效率，降低辦公成本。與C端產品圍繞“用戶”為唯一受眾目標的交互設計不同的是，B端產品因其業務體系的復雜，最為突出的則是“鏈接”屬性，B端產品所謂的“用戶”在組織架構中往往不是獨立的存在，必然與其他部門、層級的組織內用戶產生鏈接[5]。B端產品中的信息可視化圖表的核心目的是有效提升工作效率，這就要求信息可視化圖表組件化，必須要信息精練且傳達效率高效、干凈簡潔的界面設計、交互邏輯性強、復用性高和協作性功能強。

3.1 設計原則

3.1.1 構建符合用戶心智模型的設計

1940年，蘇格蘭心理學家Kenneth Craik提出用于研究某個特定用戶行為的心智模型理論。心智模型是經由人們日常生活中學習的經驗，形成固定的下意識反應。在設計中，心智模型被應用于挖掘用戶需求，從而真正做出以用戶為中心的設計。信息可視化圖表的設計呈現形式越接近用戶心智模型，組件的易用性和用戶體驗就會越好。因此在進行數據可視化系統設計的過程中，應當盡量使用用戶所熟悉的視覺呈現方式或者交互操作方式。在競爭激烈的市場環境中，產品設計需要在一定程度上高于用戶、超越用戶期待[6]。

3.1.2 交互設計

交互設計是信息可視化圖表設計至關重要的一步，交互設計是用戶與界面之間的互動式設計，直接導向了用戶的操作邏輯，在交互環節用戶從被動接受信息轉為主動，交互形式與用戶決策、信息分析的聯系十分緊密。交互的存在能夠在一定程度上緩解大量數據與有限的屏幕尺寸之間的矛盾。秉持尼爾森十大可用性原則，在設計中以用戶為中心，設計師應該理解并尊重群體性用戶的背景差異所帶來的各種需求，兼顧B端用戶特有的多樣化背景，在B端產品中提供更加簡約、直接的交互形式，幫助用戶理解和分析信息，以完成信息交互傳遞的功能。

3.1.3 視覺元素的選擇

在信息可視化圖表中，信息的傳遞依賴于視覺化的表現。麥克米克（Mc Cormick）認為，信息可視化就是用我們自身的視覺機制獲得新的洞見，人們通過圖表中的圖形來感知更多的信息內容。現在的信息可視化圖表設計呈多樣化發展趨勢，創造性地融合了多種圖表形式進行表達與信息傳遞，藝術表達結合可視化技術，降低用戶對數據、信息的承受力并減少工作壓力。信息的傳遞主要依賴于視覺元素的應用。視覺元素的表現不僅能傳遞信息，某些視覺元素還能對用戶起引導作用，作為視知覺的重要媒介，色彩和圖形是信息可視化的重要元素。

3.1.4 色彩

色彩可以在圖表中形成一定的視覺效果，并可以對人體心理產生較為直接的影響。將色彩運用到圖表組件設計過程中，可以有效豐富界面，強化信息層級展示效果，利用視知覺來有效吸引用戶、加深印象并提升用戶獲得信息的速度。根據B端業務場景特點與色彩心理學的內容，不同的色系可以用于針對各行業的主題色。例如能讓人感到冷靜、理性的藍色就常用于針對科技、醫療等領域的主題中；橙色、黃色以及紅色等鮮艷亮麗的顏色寓意速度、生機，常用于電商行業；粉色、杏色和果綠色等明度高而飽和度低的顏色，則常用于針對女性的化妝品行業。在B端產品中要求用色不能刺眼、不能過于炫目。確定主色之后，在圖表中結合輔助色和背景色能夠強調信息的層級關系，并注意保證不使用過多的色彩，過于繁雜的圖像會給用戶分析工作帶來負擔，影響協同工作。

3.1.5 圖形

圖形語言在信息可視化圖表的設計中的應用，是將信息直接轉化為視覺可視化表達的表現方式之一。圖形語言可以將抽象、復雜的信息以簡潔且直觀的圖形進行形象化的表達。在信息可視化圖表設計過程中，應當考慮到圖形語言的共識性原則、簡潔性原則、趣味性原則，圖形語言可以有助于提升視覺體驗、增強信息的可讀性。此外，在設計中要考慮到視覺障礙的用戶。視覺障礙用戶有色覺異常，通常不能夠辨別某些顏色或全部顏色，在圖表設計過程中對于這一類用戶在顏色的使用上只能夠采用灰度處理，或是從圖形的角度入手，使用無障礙花紋的方式，如圖3所示。

結論

設計信息可視化是把大量抽象復雜的信息、數據進行可視化處理，以更易獲取信息、分析信息的方式呈現信息。在讀圖時代，信息可視化圖表能夠高效地傳遞信息集群，B端產品中的信息可視化圖表設計應該為了避免視覺化而設計，在設計過程中應該考慮B端用戶的特點和業務需求，遵循交互設計原則，將圖表以簡潔高效的形式呈現給用戶，在設計中推進信息的傳遞、提高效率，加快互聯網與傳統行業深度融合。

參考文獻：

[1]余瑩瑩.互聯網環境下信息可視化的交互設計研究[J].黑河學院學報，2019，10（3）：2.

[2]Cairo A，開羅，羅輝，等.不只是美：信息圖表設計原理與經典案例[M].北京：人民郵電出版社，2015.

[3]許世虎，宋方.基于視覺思維的信息可視化設計[J].包裝工程，2011，32（16）：11-14，34.

[4]Inselberg A.The plane with parallel coordinates[J].Visual Computer，1985，1（2）：69-91.

[5]龔帥.互聯網C端與B端產品的交互設計場景差異研究[J].美與時代（上），2021， 912（10）：76-78.

[6]徐菲.用戶心智模型在產品設計中的研究現狀與發展趨勢[J].藝術與設計（理論），2022，2（4）：84-86.

作者簡介：史曉曼，在讀碩士研究生，研究方向：工業設計；通信作者：池寧駿，碩士，副教授，研究方向：工業設計。