吳辛迪 吳冬原 鄭凱明

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

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

中圖分類號(hào)：G642

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069 （2020） 04-0093-03

引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（一）文字

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

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

（二）圖形

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

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

（三）色彩

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

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

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

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

結(jié)論

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

參考文獻(xiàn)

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

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

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

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

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

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

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

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

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