信息可視化在界面設(shè)計中的應(yīng)用研究

吳辛迪 吳冬原 鄭凱明

摘要：為了能夠在全球抗“疫”期間為用戶提供高速、高質(zhì)、高準的新型冠狀病毒肺炎疫情信息，也為了能夠提升界面和信息傳遞的關(guān)聯(lián)性、可用性與準確性。文章基于信息可視化和視覺思維理論，對主流平臺的“新冠肺炎疫情實時動態(tài)”界面設(shè)計聚類分析，分別從信息的結(jié)構(gòu)層，內(nèi)容與表達等方面研究了可視化的應(yīng)用。得到信息可視化在新型冠狀病毒肺炎疫情動態(tài)界面設(shè)計中的應(yīng)用方式。實現(xiàn)了信息可視化在戰(zhàn)“疫”期間為人服務(wù)，為社會服務(wù)的實際意義，同時旨在為更多的信息化產(chǎn)品提供設(shè)計參考。

關(guān)鍵詞：信息可視化 ;動態(tài)界面?;界面設(shè)計?;視覺元素

中圖分類號：G642

文獻標識碼：A

文章編號：1003-0069 （2020） 04-0093-03

引言

新冠肺炎（COVID-19）發(fā)展至2020年3月11日，已被世界衛(wèi)生組織評估為全球大流行，全球危險級別為最高級，這代表它具有可怕的傳播速度和感染率。為了有效地進行新型冠狀病毒肺炎疫情治愈，通過信息全民化達到國家級防控目的，降低更多國民感染率，全國互聯(lián)網(wǎng)平臺自主開發(fā)了“新冠肺炎疫情實時動態(tài)”系統(tǒng)（以下簡稱“疫情動態(tài)”）。

疫情動態(tài)系統(tǒng)依托萬物互聯(lián)的大數(shù)據(jù)，連接國內(nèi)與各地的衛(wèi)健委、新聞媒體、社交平臺、醫(yī)療系統(tǒng)等發(fā)布的信息，利用互聯(lián)網(wǎng)相關(guān)技術(shù)形成原始數(shù)據(jù)，最后依靠程序前后端開發(fā)上線了疫情動態(tài)信息。疫情動態(tài)系統(tǒng)的出現(xiàn)旨在為用戶發(fā)布權(quán)威信息，提高自主防護意識，避免人民群眾恐慌發(fā)生過激的行為。將信息可視化應(yīng)用于疫情實時動態(tài)系統(tǒng)和界面中能夠滿足用戶需求和符合用戶心理，并能準確、快速地傳遞相關(guān)信息內(nèi)容，能更優(yōu)質(zhì)地保證信息傳達的速度與廣度，這樣疫情動態(tài)系統(tǒng)才能對疫情的判斷、決策、防控和治療起到更積極和更有效的作用[1]。

一、疫情動態(tài)界面設(shè)計中的信息結(jié)構(gòu)可視化

信息結(jié)構(gòu)是疫情動態(tài)系統(tǒng)的框架，信息可視化的界面設(shè)計是結(jié)合視知覺，邏輯學的特點對信息進行羅列與排布。優(yōu)秀的信息結(jié)構(gòu)設(shè)計能夠引導用戶獲取信息的行為，避免用戶出現(xiàn)認知障礙[2]。

符合用戶視覺思維的疫情動態(tài)系統(tǒng)結(jié)構(gòu)層主要體現(xiàn)在清晰完善的功能類信息，所以文章分別對中國網(wǎng)絡(luò)傳播率和信息準確度都頗高的11個平臺發(fā)布的疫情動態(tài)界面進行了范圍層聚類分析[3]，建立了關(guān)于11個平臺的疫情動態(tài)界面功能表，如表1。其中所有平臺都有的功能是：疫情地圖，疫情的實時數(shù)據(jù)和與疫情相關(guān)的權(quán)威性的新聞。七成以上平臺具有疫情知識和辟謠的功能，八成以上的平臺具有關(guān)注與分享的功能，五成以上平臺具備同行信息的相關(guān)功能。有少部分平臺為了匹配自身品牌價值還附加了一些與疫情相關(guān)聯(lián)的其他功能。

文章通過將11個平臺發(fā)布的“疫情動態(tài)”功能表中功能類信息所占比的數(shù)據(jù)結(jié)合界面設(shè)計視覺層級[3]，建立了疫情動態(tài)界面核心信息結(jié)構(gòu)層，如圖1。

疫情動態(tài)界面核心信息結(jié)構(gòu)層（以下簡稱“信息結(jié)構(gòu)層”）從用戶的視覺思維角度決定了界面視覺層次的表達[4]。其中所有平臺都具備的功能是核心功能，其中所包含的信息則為核心信息，對核心信息的獲取是用戶最迫切的需求，也是信息可視化過程中最直接與最重要的組成部分。在圖1結(jié)構(gòu)層中通過把核心功能信息進行界面設(shè)計視覺分層，再將實時地圖，實時數(shù)據(jù)，權(quán)威新聞等功能類信息列為疫情動態(tài)界面的一級界面。

疫情動態(tài)界面中二級界面（圖1）是基于一級界面展開的相關(guān)內(nèi)容的具體信息。其中實時地圖的二級界面信息主要有：確診病例，死亡病例，治愈病例，各地分布，圖形標注等內(nèi)容。實時數(shù)據(jù)的二級界面信息主要有：確診病例，疑似病例，治愈病例，死亡病例，累計情況，數(shù)據(jù)圖表等內(nèi)容，如圖2。權(quán)威新聞中的二級界面中的信息主要包含：重要政策措施與實時播報內(nèi)容，如圖3。

疫情動態(tài)系統(tǒng)將界面設(shè)計中的視覺層次進行信息結(jié)構(gòu)層的可視化，可以讓用戶最快速地掌握疫情期間的核心信息，同時讓疫情信息的區(qū)域與內(nèi)容結(jié)構(gòu)一目了然，讓用戶對掌握疫情動態(tài)系統(tǒng)界面有著良好的整體感知性[5]。

二、疫情動態(tài)界面設(shè)計中的信息內(nèi)容可視化

信息可視化在界面設(shè)計中的應(yīng)用率極高，因為信息內(nèi)容依附于界面載體才能進行有效傳播，致使信息需要進行有效的組織、篩選、排列，從而才能高效率地、準確地將內(nèi)容信息傳達出來[6]。界面設(shè)計中的信心內(nèi)容泛指通過界面?zhèn)鞑サ乃袃?nèi)容，疫情動態(tài)界面中的信息內(nèi)容主要指三大核心信息內(nèi)容：實時地圖內(nèi)容，實時數(shù)據(jù)內(nèi)容與權(quán)威新聞內(nèi)容。

（一）實時地圖內(nèi)容

實時地圖的原理是：發(fā)布疫情動態(tài)系統(tǒng)的平臺特約了線上地圖軟件后，通過關(guān)聯(lián)各地衛(wèi)健委上傳的疫情相關(guān)數(shù)據(jù)信息，再結(jié)合地圖的圖形形式來進行信息發(fā)布。當各省份疫情數(shù)值不斷發(fā)生變化時，地圖中以省為單位的區(qū)域也隨著數(shù)值的變化而產(chǎn)生顏色變化。實時地圖的可視化主要應(yīng)用了信息可視化中六大圖表類型[6]中的地圖形式進行數(shù)據(jù)和分布類信息的可視化。從而讓疫情實時地圖實現(xiàn)了最主要的兩個功能，一是描述疫情中確診、治愈與死亡病例數(shù)據(jù)所在區(qū)域和空間位置分布;二是可定位用戶所在區(qū)域的疫情數(shù)據(jù)分布情況，如在疫情地圖中點擊湖北省會顯示定位后的湖北省信息內(nèi)容。

疫情實時地圖的信息可視化應(yīng)用，將復雜的空間信息與大數(shù)據(jù)的數(shù)值變化簡單明了化，帶給用戶更直觀、更友好、更輕便的感知信息的方式，同時也能大大縮短用戶的認知時間[2]，縮小用戶之間的認知差距。實時地圖信息內(nèi)容的可視化還因為地圖可根據(jù)疫情數(shù)值的變化“逐步染紅”的獨特交互方式，能夠自帶傳播功效，為疫情帶來更多的話題熱度。

（二）實時數(shù)據(jù)內(nèi)容

實時數(shù)據(jù)主要包含的內(nèi)容有：確診、治愈、死亡、累計、現(xiàn)增、重癥病例等數(shù)值，這些病例數(shù)值應(yīng)用的信息可視化的信息圖標方式有兩類，其中一類是具有疫情病例數(shù)據(jù)數(shù)字化具體顯示的表格形式（如圖4），另一類是表現(xiàn)疫情數(shù)據(jù)變化趨勢的統(tǒng)計圖，如圖2。

實時數(shù)據(jù)內(nèi)容的表格可視化主要功能是將具體的數(shù)據(jù)數(shù)值以數(shù)字化的形式展現(xiàn)，并且根據(jù)特定的項目內(nèi)容進行歸納。疫情動態(tài)界面中的病例數(shù)值通過表格可視化，一是對病例數(shù)值來源進行準確的分類，讓用戶清晰掌握疫情新增、累計、治愈、死亡等不同類型的病例數(shù)據(jù);二是保存原生數(shù)據(jù)，將原生數(shù)據(jù)直接顯示不僅可以增強辨識性，同時通過精準的數(shù)字化顯示更增加疫情數(shù)據(jù)內(nèi)容可視化的可信度。

實時數(shù)據(jù)內(nèi)容的統(tǒng)計圖可視化主要功能是展示疫情各種病例的發(fā)展趨勢，其中主要使用的統(tǒng)計圖樣式為曲線圖樣式。曲線圖是根據(jù)數(shù)據(jù)在坐標軸中標識不同節(jié)點來顯示數(shù)據(jù)數(shù)值再依次連接成曲線，通過圖中曲線可以讓用戶充分地感受到不同時期數(shù)據(jù)所產(chǎn)生的變化，所以曲線圖最適應(yīng)以時間這一抽象概念為數(shù)值變化單位的數(shù)據(jù)內(nèi)容可視化中。疫情趨勢通過曲線圖來進行數(shù)據(jù)可視化，可以將疫情的病例數(shù)值的變化情況直觀地呈現(xiàn)出來，具有數(shù)據(jù)的追溯性，也能為用戶了解特定節(jié)點的數(shù)據(jù)提供快速入口。

（三）權(quán)威新聞內(nèi)容

新聞信息內(nèi)容主要是以圖文的形式組成，顯示一篇新聞內(nèi)容都需要占據(jù)一屏或多屏的界面屏幕，而疫情期間的新聞量非常大，所以如何將權(quán)威新聞信息內(nèi)容進行輕量化、權(quán)威化和重點化的展示是信息可視化在權(quán)威新聞版塊中應(yīng)用的重點。在疫情動態(tài)界面設(shè)計中權(quán)威新聞內(nèi)容主要采用豎向時間軸線圖表的可視化方式，再將實時播報與重要政策的信息內(nèi)容進行重點提取，然后結(jié)合每個時間節(jié)點來進行展示（如圖3）。通過可視化的方式將用戶的視覺重點從數(shù)字化信息轉(zhuǎn)移到了文字信息，也讓用戶逐步放慢了閱讀速度，提高用戶對具體信息內(nèi)容獲取的能效性。

權(quán)威新聞通過應(yīng)用豎向時間軸線圖表指引用戶閱讀權(quán)威新聞的順序，能夠保證權(quán)威新聞的時效性，也能夠追溯信息內(nèi)容的歷史發(fā)展;通過對重點信息提煉能幫助用戶快速選擇信息內(nèi)容和幫助用戶快速查找回顧具體信息內(nèi)容。

三、疫情動態(tài)界面中信息可視化的視覺表達

信息可視化的視覺表達是指將造型、色彩、字體和圖形等視覺設(shè)計元素應(yīng)用于可視化的過程[7]。成功的可視化視覺表達能通過視覺表現(xiàn)形式吸引用戶，引發(fā)用戶的興趣和好奇心從而抓取用戶關(guān)注，達到依靠視覺設(shè)計能夠提高用戶傳遞數(shù)據(jù)譯碼的速度和效率嘲的目的。疫情動態(tài)界面中信息可視化的視覺表達是功能與美學關(guān)系的統(tǒng)一，也是視覺元素的應(yīng)用[8]，疫情動態(tài)界面通過對文字、圖形、色彩等視覺元素進行設(shè)計，形成信息之間的形態(tài)、大小、對比的調(diào)節(jié)，提高信息在界面表達中的視覺刺激，從而將信息功能內(nèi)容與可視化視覺效果相統(tǒng)一，達到提高用戶獲取信息內(nèi)容的友好體驗的目的。

（一）文字

文字是信息進行交流的工具之一，文字作為界面中重要的視覺設(shè)計元素，它的字體、大小和色彩都將影響整個信息內(nèi)容的傳遞效率。

疫情動態(tài)界面中文字字體必須滿足不同顯示系統(tǒng)默認字體要求，符合界面設(shè)計字體規(guī)范即可，如中文字體選擇宋體、黑體與蘋方;英文和數(shù)字字體則選擇無襯線字體來進行信息內(nèi)容顯示。界面中的字體大小的設(shè)計則依據(jù)信息內(nèi)容權(quán)重關(guān)系，比如在2020年3月20日的疫情動態(tài)圖的中國“現(xiàn)有確診”信息中（如圖5），文字大小比為：“6764”>（大于）“現(xiàn)有確診”>（大于）“較上日”=（等于）“-674”，從中推出疫情動態(tài)系統(tǒng)可傳達給用戶的信息權(quán)重為：確診病例的原生數(shù)據(jù)數(shù)值與數(shù)據(jù)含義較昨日的數(shù)據(jù)更重要。這樣將不同文字信息通過不同字體與大小的形式進行可視化表達能夠幫助用戶理解數(shù)據(jù)信息的含義，減少用戶的認知時間。

（二）圖形

圖形是信息進行視覺交流中最早出現(xiàn)的工具，既能輔助文字信息的傳達，也能作為信息載體被高校識別，具有傳播快，信息量簡化，認知障礙少等特點。圖形元素的可視化表達，能夠縮短用戶之間的認知差距，美化界面，提高用戶的審美情趣，同時還能統(tǒng)一信息在界面設(shè)計中的功能與形式。

疫情動態(tài)界面中的圖形元素不多，主要的表達形式是具有按鈕功能的圖標、但是每一種圖標的使用恰好是點睛之筆。如圖4中“現(xiàn)有確診”模塊中的問號圖標，問號圖標在界面設(shè)計中的含義是解釋、說明與幫助。在現(xiàn)有確診模塊中放置問號圖標，一是對現(xiàn)有數(shù)據(jù)來源進行說明，二是對現(xiàn)有數(shù)據(jù)算法進行說明，三是指引用戶數(shù)據(jù)詳情可通過點擊問號國標的交互方式進行了解以上詳情。

（三）色彩

信息可視化表達的視覺元素中色彩能夠使界面達到視覺一致性，具有強烈的視覺效果，能夠有效增強用戶感知刺激，并且影響用戶對整個界面的體驗。疫情動態(tài)界面中的色彩元素可視化表達的功能主要分為三類：

色彩元素可視化表達的第一種功能是，平臺品牌色彩在疫情動態(tài)界面中的應(yīng)用。如騰訊對于其品牌中淺黃色的應(yīng)用（如圖5），黃色部分是包含騰訊品牌價值識別的顏色，而在此界面中的藍色則代表疫情信息的內(nèi)容。其中品牌色彩的使用不僅可以區(qū)別平臺主題信息與疫情信息，還能擴大平臺自身品牌信息的有效傳播，界面設(shè)計中藍色與黃色中性屬性除了能調(diào)和界面視覺效果以外，最主要的功能是幫助用戶準確地區(qū)分信息類型。

色彩元素可視化表達的第二種功能是，通過色彩對比區(qū)分信息數(shù)據(jù)變化的目的，這種色彩對比形式的可視化表達在疫情地圖內(nèi)容中最典型的應(yīng)用就是疫情實時地圖的“逐步染紅”的交互展示方式。如騰訊實時地圖中（如表2），利用同類紅色系的搭配，以省份為單位直觀性地展示了每個省份感染疫情的情況，通過紅色的深淺代表疫情感染的嚴重程度，紅色越深則疫情越重，紅色越淺則代表疫情越輕，當?shù)貓D省份成為地圖背景色時則代表疫情清零。這樣同類色彩的應(yīng)用不僅能夠統(tǒng)一視覺效果，還能通過省份分布幫助用戶快速建立共情達到范圍類布信息數(shù)據(jù)傳遞的效果。

色彩元素可視化表達的第三種功能是，因用戶群體受認知體系的影響，色彩具有情感傳遞的功能。所以疫情地圖將不同色彩帶來的心理感受進行界面設(shè)計的合理利用能夠引起用戶心理共鳴，從而抓住用戶的關(guān)注熱點來傳遞有效信息。如上文圖5“騰訊疫情實時數(shù)據(jù)截圖”中顯示，“累計確診”數(shù)據(jù)信息采用深紅色，代表疫情數(shù)量的龐大，同時深紅色會讓用戶產(chǎn)生疫情情況嚴重等感受?！艾F(xiàn)有確診”數(shù)據(jù)信息采用的是紅色，一是與累計確證數(shù)據(jù)進行區(qū)分，第二則是數(shù)據(jù)的減少，顏色飽和度提高一定程度上能夠緩和用戶緊張情緒。“累計死亡”數(shù)據(jù)信息采用的是黑灰色，傳遞出深深的孤獨、悲傷、無助與緬懷等情緒?！袄塾嬛斡睌?shù)據(jù)信息采用的是綠色，它帶給用戶的心理體驗是有希望的，安全的，樂觀積極的。所以當信息可視化應(yīng)用在界面設(shè)計中時，通過不同色彩的應(yīng)用既能夠契合信息內(nèi)涵，還能借用色彩的情感化特點與用戶產(chǎn)生共鳴，從而達到精準傳遞信息內(nèi)容的目的。

結(jié)論

信息可視化是數(shù)字化時代中代表著信息發(fā)展的前沿學科，具有極廣泛的應(yīng)用領(lǐng)域。信息可視化最主要的目的就是為了讓不同認知程度的群體都能夠清晰、快速、準確地獲取信息，在疫情動態(tài)界面中信息可視化的應(yīng)用主要目的也是為了確保疫情信息能夠被更多用戶識別、理解和應(yīng)用，也為更多的用戶群體提供了數(shù)據(jù)挖局和決策服務(wù)。通過分析信息可視化在疫情動態(tài)界面設(shè)計中的信息結(jié)構(gòu)，信息內(nèi)容與信息可視化的視覺表達等方面的應(yīng)用，既實現(xiàn)了信息可視化在戰(zhàn)“疫“期間為人服務(wù)，為社會服務(wù)的目的，同時旨在為更多的信息化產(chǎn)品提供參考。.

參考文獻

[1]趙序茅，李欣海，聶常虹，基于大數(shù)據(jù)回溯新冠肺炎的擴散趨勢及中國對疫情的控制研究[J]中國科學院院刊，2020，35（03）：248-255

[2]張欣，朱長永，黃蓉，視覺圖形在信息可視化信息設(shè)計中的應(yīng)用[J]科技視界，2017（04）：317

[3]吳辛迪，林麗，侗族文化素材庫構(gòu)建思路與展示——以增沖鼓樓為例[J]社會科學（全文版）2018 （04）：00384-00385。

[4]呂陽，于煒，基于視覺思維的用戶界面設(shè)計[J]設(shè)計2015（04）：109-111

[5]郭弈妤，張凌浩，面向老年患者的疼痛評估工具界面信息可視化設(shè)計研究[J]設(shè)計2019，32（19）：28-30

[6]張倩，圖表在信息可視化中的設(shè)計研究[J]設(shè)計2018（02）：122-123

[7]陳婭雯，許懋琦，數(shù)字閱讀界面視覺設(shè)計分析與優(yōu)化[J]設(shè)計 2018 （17）：132-135

[8]戴文瀾，美學角度的信息可視化概述[J]設(shè)計'2013（11）：126-128

[9]熊瑛，尤斐。信息可視化與視覺設(shè)計[J]藝術(shù)與設(shè)計俚論）2012，2（05）：40-42