互聯(lián)網(wǎng)B端背景下信息可視化圖表的交互設(shè)計研究

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

關(guān)鍵詞：數(shù)據(jù)可視化；交互設(shè)計：可視化圖表；互聯(lián)網(wǎng)B端

引言

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

1. 信息可視化

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

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

2. 信息可視化載體

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

2.1 平面類信息圖表

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

2.2 多維類信息圖表

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

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

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

3.1 設(shè)計原則

3.1.1 構(gòu)建符合用戶心智模型的設(shè)計

1940年，蘇格蘭心理學(xué)家Kenneth Craik提出用于研究某個特定用戶行為的心智模型理論。心智模型是經(jīng)由人們?nèi)粘Ｉ钪袑W(xué)習(xí)的經(jīng)驗，形成固定的下意識反應(yīng)。在設(shè)計中，心智模型被應(yīng)用于挖掘用戶需求，從而真正做出以用戶為中心的設(shè)計。信息可視化圖表的設(shè)計呈現(xiàn)形式越接近用戶心智模型，組件的易用性和用戶體驗就會越好。因此在進行數(shù)據(jù)可視化系統(tǒng)設(shè)計的過程中，應(yīng)當盡量使用用戶所熟悉的視覺呈現(xiàn)方式或者交互操作方式。在競爭激烈的市場環(huán)境中，產(chǎn)品設(shè)計需要在一定程度上高于用戶、超越用戶期待[6]。

3.1.2 交互設(shè)計

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

3.1.3 視覺元素的選擇

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

3.1.4 色彩

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

3.1.5 圖形

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

結(jié)論

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

參考文獻：

[1]余瑩瑩.互聯(lián)網(wǎng)環(huán)境下信息可視化的交互設(shè)計研究[J].黑河學(xué)院學(xué)報，2019，10（3）：2.

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

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

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

[5]龔帥.互聯(lián)網(wǎng)C端與B端產(chǎn)品的交互設(shè)計場景差異研究[J].美與時代（上），2021， 912（10）：76-78.

[6]徐菲.用戶心智模型在產(chǎn)品設(shè)計中的研究現(xiàn)狀與發(fā)展趨勢[J].藝術(shù)與設(shè)計（理論），2022，2（4）：84-86.

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