信息可視化在界面設計中的應用研究

吳辛迪 吳冬原 鄭凱明

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

關鍵詞：信息可視化 ;動態界面?;界面設計?;視覺元素

中圖分類號：G642

文獻標識碼：A

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

引言

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

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

一、疫情動態界面設計中的信息結構可視化

信息結構是疫情動態系統的框架，信息可視化的界面設計是結合視知覺，邏輯學的特點對信息進行羅列與排布。優秀的信息結構設計能夠引導用戶獲取信息的行為，避免用戶出現認知障礙[2]。

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

文章通過將11個平臺發布的“疫情動態”功能表中功能類信息所占比的數據結合界面設計視覺層級[3]，建立了疫情動態界面核心信息結構層，如圖1。

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

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

疫情動態系統將界面設計中的視覺層次進行信息結構層的可視化，可以讓用戶最快速地掌握疫情期間的核心信息，同時讓疫情信息的區域與內容結構一目了然，讓用戶對掌握疫情動態系統界面有著良好的整體感知性[5]。

二、疫情動態界面設計中的信息內容可視化

信息可視化在界面設計中的應用率極高，因為信息內容依附于界面載體才能進行有效傳播，致使信息需要進行有效的組織、篩選、排列，從而才能高效率地、準確地將內容信息傳達出來[6]。界面設計中的信心內容泛指通過界面傳播的所有內容，疫情動態界面中的信息內容主要指三大核心信息內容：實時地圖內容，實時數據內容與權威新聞內容。

（一）實時地圖內容

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

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

（二）實時數據內容

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

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

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

（三）權威新聞內容

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

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

三、疫情動態界面中信息可視化的視覺表達

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

（一）文字

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

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

（二）圖形

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

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

（三）色彩

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

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

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

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

結論

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

參考文獻

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

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

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

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

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

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

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

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

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