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

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

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

1. 信息可視化

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

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

2. 信息可視化載體

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

2.1 平面類(lèi)信息圖表

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

2.2 多維類(lèi)信息圖表

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

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

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

3.1 設(shè)計(jì)原則

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

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

3.1.2 交互設(shè)計(jì)

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

3.1.3 視覺(jué)元素的選擇

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

3.1.4 色彩

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

3.1.5 圖形

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

結(jié)論

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

參考文獻(xiàn)：

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

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

[3]許世虎，宋方.基于視覺(jué)思維的信息可視化設(shè)計(jì)[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ì)場(chǎng)景差異研究[J].美與時(shí)代（上），2021， 912（10）：76-78.

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

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