H5技術支持下的醫療科普交互設計

陳婉佳 吳小璞 陳夢妍 陳瀟航

（南京藝術學院,江蘇南京 210000 ）

一、設計背景

（一）醫療科普的需求

根據中國科普數據報告顯示，我國有82.7%的公民對“醫學和健康”科普話題十分關注。這表明隨著生活質量和文化素質的提高，人們開始逐漸關注和重視健康和醫療層面、了解醫療相關的知識，提高自身對健康信息的認知。在國家“健康中國”的健康發展策略支持下，社會對健康信息的需求增加，市場上健康科普信息平臺層出不窮。但由于網絡上信息混雜，信息質量錯落不齊，難以分辨出正確、專業、科學的健康訊息，這使公眾對醫療科普產生了迷茫與不信任，亟待提供一個正確科普知識的宣傳窗口，搭建醫學科普平臺，簡單、便利地傳達專業知識，加強記憶，讓公眾形成科學、正確的醫療觀念，提高對疾病預防的意識，從而提升全民的健康素養，進一步促進健康中國的實現。

（二）H5技術的發展

在互聯網的高速發展影響醫療科普的傳播方式，由最初傳統的統一以靜態媒體進行醫療科普傳播的方式（如報刊或醫院畫廊），轉變為靜態媒體與互聯網協同發展，大眾通過自己隨身攜帶的手機就可以獲取各種資訊，不受場景、呈現方式的限制，在任何地點都可以獲取醫療信息，同時互聯網的發展使得大眾獲得信息的途徑多樣化，伴隨著基于微信平臺H5傳播工具的出現，它改變了傳統傳播方式的局限性與復雜性，融合了移動app、ppt、微信網頁、動畫等多方特色，通過多媒介結合交互，豐富展現形式，提升頁面趣味感，使用者更能參與其中，促使人們掌握理解更多內容。

H5是超媒體發展的表現，不僅打破古板傳統的傳播枷鎖，還擁有可跨平臺傳播的兼容性。通過H5技術讓信息在更廣泛的社交媒體上傳播交流，令公眾更便捷地獲取知識。

二、設計價值

（一）HPV疫苗的設計背景及意義

2016年，三種類型的HPV疫苗獲批上市，但作為新興產物，公眾對其知之甚少，存在諸多疑問。如圖1，公眾對HPV疫苗及相關信息的了解訴求不斷增加；在2017年至2020年間，HPV疫苗的關注度也表現出了大幅度的增長。

本次設計內容以“HPV疫苗”為主題展開，針對各大平臺官方發布的排行信息，選取高價值、低普及度的問題，系統地解讀接種疫苗的效用和深遠意義，旨在強調衛生保健意識，提高人民的文明衛生素質，達到衛生保健、預防疾病的最終效果。

圖1 HPV疫苗需求圖譜 圖片來源：百度指數

（二）設計醫療科普H5的意義

本次設計使用新媒體手段代替傳統傳播模式，由于醫療科普主要面向大眾群體，然而公共衛生信息普遍存在邏輯復雜、專業名詞晦澀難懂等問題難以調節，考慮到受眾的年齡、文化程度等因素，所建立的用戶模型類型復雜多樣，故需在內容的表達方式上提取重難點，改變傳統晦澀難懂的閱讀模式，結合圖文、動態及交互，讓傳播內容兼具趣味性、互動性、科學性。

通過大眾更易理解的方式，將醫療認知內容傳播出去，形成健康醫療觀念，提升自身防護意識，增加醫療科普的精準性，這對于預防疾病、改善預后等方面有重要作用，從而進一步向移動終端方向拓展醫學科普生態，推動醫學科普移動終端發展，促使生態向更加有利的方向推進。

三、設計實現

（一）內容設計

隨著科學醫療技術水平的不斷發展，越來越多的重大疾病得到了有效的預防及診治。其中對宮頸癌及相關疾病具有一定預防功效的HPV疫苗的出現引起大眾強烈關注。本次科普、內容結構分為以下部分：

1.宮頸癌的定義；

2.宮頸癌的危害、世界發病率；

3.引發宮頸癌的主要原因，簡單介紹HPV病毒；

4.HPV病毒的分類、傳播方式；

5.HPV疫苗相關信息，鼓勵積極診療；

6.提醒人們注意防范HPV病毒，建議提高自身免疫力，注意性衛生、保持定期體檢。

（二）色彩運用

通過明確闡述內容，比較相關設計案例，進一步優化設計原型。

本次H5設計主背景色為紫紅色，色彩在視覺可視化中占據很重要的位置，色彩能夠調動人們的感官，吸引觀看者的注意力。在本次設計中充分運用紫色作為主色調，以黃色作為輔助色。設計的過程中主要色彩的選擇主要考慮到以下幾點：

第一，“HPV疫苗科普”是以科普為主，紫色可以讓人們聯想到治療、沉思與思考，在自然紫中含有紅色，觸動觀看者內在熱情并間接化為行動力；

第二，小面積使用黃色作為輔色，高明度黃色在界面中可以吸引到大眾的注意力，作為標題背景色更加吸引大眾的眼球，其次輔助色在H5界面設計中可以豐富頁面顏色，突出主要內容。

（三）動畫效果

本次設計中加入人物插畫，選取女性形象進行繪制，主要考慮到如下幾點：

第一，宮頸癌婦科疾病中是最常見，并且也是惡性腫瘤之一，在女性惡性腫瘤的發病和死亡順位中均位列第四；

第二，在2013年到2017年這過去的四年時間，中國女性宮頸癌的死亡率呈現出不斷的上升趨勢，在設計中選取女性卡通化形象更加能貼切科普對象，其科普過程中使得主題更加貼切及情感化越加凸顯。

在根據內容呈現不同狀態，使畫面層次更加豐富，添加趣味性的同時更易于接受，除此之外，其他相關內容的元素也使用統一風格的插畫，豐富內容，輔助理解。在一些圖表數據中，通過二次圖表繪制，篩選關鍵數據進行繪制，結合內容突出重點，并且對圖表的顏色進行設計，使得圖表數據更加貼切整個設計的風格，如圖2所示。

圖2 “HPV疫苗科普”效果圖一

（四）交互設計

本次設計中，在設計中添加了動效，其作用有以下幾點：

第一，增加用戶對科普內容的興趣；

第二，提供用戶交互反饋；

第三，更加形象地表達題材內容在敘述過程中的方式。

用戶在“HPV疫苗科普”中主要通過長按頁面向上滑動的手勢進行頁面跳轉，使得用戶在操作的同時更加貼切手指的運動，降低用戶的學習成本。在交互的動效設計中，通過用戶簡易的手指操作實現頁面跳轉、動畫動效、頁面內容拓展等系列交互流程。在用戶操作的過程中區別僅提供文字與圖片的科普方式，本次設計中相關的頁面插畫出現動效，及時給予用戶操作反饋，提高用戶的興趣并感受到畫面中空間元素的變化，并通過文字或動畫提示用戶去注意那些可以操作的內容，吸引更多的用戶瀏覽、交互。

四、結語

本次設計主要以HPV疫苗的相關知識內容進行公共醫療信息科普，并以H5多媒體設計的方式呈現，從科普內容的資料收集與篩選，提煉出主要信息進行設計，并且設計中考慮用戶界面中的圖畫形式、文字內容、動態效果、互動交流，保留信息的科學性，內容架構的邏輯性，頁面文字和數據圖表的通俗性，插畫動效的交互性及趣味性，符合設計的交互原則。

需要明確的是，借助網絡平臺將信息以寓教于樂的方式傳遞出去。通過改善傳統的內容傳遞形式，將醫療科普更加生動的融入大眾的生活中去，提高醫療科普信息的傳播，減少缺乏科學性的謠言，規范醫療健康知識，使醫療知識能夠更好地傳播與普及。