基于信息可視化的健康APP設計研究

潘夢琪

摘要：隨著新媒體技術以及新媒體平臺的崛起，人們的信息獲取方式也隨之發生變化。直觀、生動的信息傳達方式獲得越來越多受眾的青睞。通過提高信息可視化，讓設計滿足受眾碎片化的快速閱讀需求，實現信息的直觀傳達、生動轉譯。分析研究信息可視化相關概念及其研究現狀與趨勢，以信息可視化為理論基礎，從色彩、交互、圖形、界面等方面探討健康 App 設計的原則與方法，構建信息結構模型框架，將之付諸于健康App設計中。讓健康App設計在信息可視化指導下，更能適應當今社會需求以及當代時代發展潮流。為界面與交互可視化設計提了供參考和借鑒。

關鍵詞：新媒體技術 信息可視化 健康App 交互 界面設計

中圖分類號：J524 文獻標識碼：A文章編號：1003-0069（2023）11-0142-05

引言

在當下的時代中，信息的影響力越來越顯著。無論是信息的體量或者是信息的傳播方式、信息的應用領域都呈現出迅速增長的發展趨勢。互聯網的出現推動數字化閱讀的發展，也進一步讓信息閱讀有了新的方式和方法。在這種趨勢下，信息解讀也面臨著一個新的問題：如何快速過濾信息，獲取有效信息。一方面，信息的來源和信息的類型極為豐富，意味著從中篩選出有效信息的難度更高；另一方面，信息來源于多個渠道，在整合的過程中，往往會無法分辨其重要層級，導致信息閱讀無法達到期望中的獲取效果。整體而言，從信息接收的路徑、時間、內容、質量等方而來看，現代信息獲取模式促使我們形成多元化、碎片化、日常化的閱讀方式，也導致了專注力缺失和認知淺薄的閱讀習慣。

一、信息可視化概述與研究現狀

（一）信息可視化

可視化技術起源于20世紀80年代出現的科學計算可視化。這一時期的可視化技術指的是數據呈現效果的可視化，將數據輸入到生成器之后，可以產生相應的圖表來增強其呈現的效果，讓用戶對于數據的觀察和瀏覽有更加便捷、更加直觀的交互方式，也能夠迅速獲取數據的對比結果。但是這一時期，可視化技術在信息中的應用仍然不能稱之為“設計”，其以工具形式出現的特征更為顯著。隨著互聯網技術的迅速發展、藝術設計領域的影響力增加，信息與藝術設計的交集越來越多，信息可視化設計的概念才得以明確。梳理其發展歷程可知，隨著信息設計這一概念的提出，信息的整合與表現問題得到了人們重視。而可視化技術的出現，讓信息設計有了可實現的工具和方法。互聯網技術的發展，增長了信息可視化的設計需求，并且逐漸確立了信息可視化設計這一概念及其必要性。數據可視化包括信息可視化、圖形信息、知識可視化、科學可視化和視覺設計的所有發展和進步。在這個層次上，對信息數據進行視覺化的處理，一切事物都能是一種組織良好的信息：表格、圖表、地圖，甚至文本。無論是靜態信息還是動態信息，都會給我們一種理解事物、找到問題答案和找到關系的方式。也許還能幫助人們理解在其他情況下不容易察覺的東西。信息可視化就是利用人眼在大腦中的闊帶寬優勢，創造直觀的方式來表現抽象的信息，讓用戶能夠立即看到、理解并探索出大量原本十分抽象的信息。

（二）信息可視化設計研究現狀

隨著信息技術的不斷發展，信息可視化領域也在隨之不斷深入，不少學者與時俱進，開始探索信息可視化在設計中的運用研究。周生源[1]等人基于信息可視化，對大學生交互平臺App界面進行了設計創新，解決了當代大學生在App界面上普遍存在的問題，方便了大學生的校園生活。陳蓓蓓[2]將信息可視化原理運用在了傳統手工藝保護研究中，通過融合信息可視化，促進傳統手工藝的繼承與發展，達到喚醒人們對傳承與傳統手工藝的關注與保護，傳統手工藝向大眾科普傳播的目的，讓越來越多的年輕人喜歡上傳統手工藝。李嶸[3]對新媒體時代下的信息可視化包裝設計進行了相關研究，促進了信息可視化設計在包裝設計中的應用，為可視化設計提供了相關的依據及方法。倪世明[4]對移動醫療App設計進行了信息可視化研究，結合用戶體驗，提出了適用于移動醫療App信息可視化應用的設計思路，適應當今醫療軟件的需求，充分傳遞信息，達到可視化目的，給用戶良好的體驗感，促進移動醫療應用蓬勃健康發展。綜上所述，對信息可視化相關理論進行研究并付諸于設計生產活動中，是科學合理的，是符合時代需求的。

二、信息可視化設計中的圖形語言類型

（一）色彩語言

信息圖形設計即對于信息、數據、知識進行視覺表現的轉換手段[5]。設計的過程就是基于信息可視化的基本元素，對于信息編碼整理后轉變為能夠具備更加豐富的意義的視覺形象，實現對于抽象文本的精準傳播。在信息可視化設計的過程中，圖形作為其中最為重要的構成要素，所具備的語言最為直觀，首先引起受眾注意的便是色彩語言。塑造多個元素時，視覺反應最靈敏的就是色彩，隨著人類社會不斷演進，色彩能夠表達人們的情意，其屬于一種比較重要的敘事語言。

色彩的合理應用，讓圖形擁有更強的表現力，其中包含更多的維度。信息可視化設計環節中，色彩的表現力和合理搭配是其中比較重要的組成部分。不同的色彩有著不同的語義，例如藍色讓人感到冷靜和沉穩、橙色讓人感到生機和活力、綠色讓人聯想到環保和希望等。

對于色彩的選擇，是圖形傳達其含義和內容的首先問題。其次，對于色彩的選擇還包括色彩關系之間的語言。在同一個信息可視化設計作品中，飽和度更高的色彩往往會更吸引受眾的注意；飽和度更低的色彩則對受眾的吸引力相對較弱。當信息圖形設計中的信息需要區分不同的重要層級，首先便可以使用不同色彩的圖形來引導受眾的視線，根據色彩的排列按照重要次序進行信息的閱讀；隨后再基于色彩的整體色調和感受，傳達出更為抽象的符號含義。

（二）形態語言

信息圖表設計更重視描繪信息圖形，使得之前比較抽象的信息，能夠轉變成為比較具體的圖形，讓人看起來更直觀一些，對人的視覺感官產生直接刺激的作用，屬于一種重要的外在表現形式，進而能夠將知識傳播出去[6]。信息可視化形對于解釋原理、說明經驗，表達意見以及總結資訊等都會產生很重要的作用，另外，對于人們重構知識也發揮了很重要的作用。

根據人類認知度不一樣，對信息進行劃分時，具體可以分成知識、信息以及數據三種。數據能夠從客觀角度出發，對現象以及事物進行表述；信息是對數據進行處理獲得的結果，主要對人類某種需要起到滿足的效果；知識是對信息驗證之后獲得的知識，在傳統的認知體系中融入人的學習。所以，圖解類信息設計結合受眾的審美要求以及認知習慣，使得比較抽象的知識變得更加具體，以圖形的方式呈現給受眾者，使得人們對其更加理解，促使之前的認知體系變得更加完善，進而能夠對新的知識內容形成正確的認識。在這個轉變過程中，圖形的形態決定了所傳達信息是否與信息本身具有較高的一致性，例如商業、市場類數據使用規則幾何形態能展現出沉穩的視覺感受；而趣味、興趣類信息和數據使用不規則形態能夠展現出活潑、趣味的視覺感受。從一定程度上，圖形的形態語言決定了信息可視化的整體風格與信息本身是否趨于一致。

（三）組織語言

此外，在平面設計中運用信息可視化，其不是把平面設計作品轉換為功能性圖表，也不是為了能夠呈現出美的畫面，而是從客觀角度出發，將相關信息呈現給受眾者。如此，設計師可以和事實情況相結合，將各種信息準確地傳達出去。人腦信息加工機制是在對比事務之后形成的認知，如果想要對某一事物形成全面了解，只是掌握相關信息是遠遠不夠的，由于事物不是孤立存在的，其和環境密切相關[7]。

在轉換信息時，圖形信息圖的設計語言主要是與信息圖形相結合，然后用文本進行設計，科學劃分主次信息，運用編排技術，可以引導觀眾的視覺流動[8]。信息圖形具備直觀性特征，同時比較醒目，很容易受到視覺的感知，并且記憶起來比較簡單。雖然追溯文字的發展歷程可以發現是從最早的象形符號演變來的，但是相較于圖形而言，文字的抽象性更加顯著。對于數據中的諸多面積長度等變量的展示并不夠具體，也無法將不同數據之間的關系闡述出來。

圖形的組織語言指的是將不同圖形進行重新組織后完成信息的加工，讓用戶二次利用信息時能夠清楚地進行辨認。首先，信息粗加工，設計師在粗加工的階段，主要工作內容是將重點信息轉變成圖形，完成圖形的整理；其次是信息的細加工階段，根據不同數據之間的關系、順序等，進行圖形元素的有機組織。還需要注意的是，設計師要認真地篩選和過濾信息，確保信息的真實性，將客觀真實的信息保存下來，使得后面加工信息的工作量有所下降。

三、信息可視化設計案例研究

信息可視化設計是基于符號學原理以及心理學原理，根據圖形語言接受者的視覺特性，對復雜、抽象的文本信息進行重構和轉換，然后，信息接收者對信息符號進行接收并解釋[9]。“圖像語言”所傳達的信息能不能夠被受眾準確、快速地接受，就需要設計師充分地運用符號學與人類心里學的原理，將其運用于可視化的設計中，并整合多種視覺表現方式。

到了二十世妃，“信息設計”作為全新的概念被提了出來。英國平面設計師特格拉姆首次采用“信息設計”這一術語。圖1為中國古代狀元分布對比可視化。將不同的朝代、不同的地區的狀元人數作了可視化分析。該可視化設計在某種程度上獎中國古代歷史知識直觀而有趣地展現給受眾，有助于學習者的理解和記憶。讓復雜的歷史知識跟上信息時代的步伐，探索一種更容易接受的歷史視覺呈現形式，見圖1。

見圖2，設計師分別對糕點類與果蔬類食品的加工過程進行了可視化設計，從圖可以非常清晰直觀地了解果蔬食品加工的整個流程，果蔬類需要經過采收-運輸-檢測-沖洗-切分-脫水-包裝等過程。

這種可視化設計既能幫助人們快速地了解并學習相應的加工工藝，還能直觀地讓人們認識到加工流程的安全性與系統化，讓人們更安心地飲用。

微信小程序——騰訊健康，對當今國內外疫情趨勢作了可視化設計，并獲得了強烈的反響，極大方便了用戶獲取疫情動態，見圖3。

騰訊健康分別采用3種不同的可視化方式，分別為：樹狀圖、線性圖以及可視化模塊圖。通過可視化模塊圖可以清晰地看清世界疫情的局勢，顏色從淺到深，也代表了疫情感染人數從少到多。通過樹狀圖可以直觀的看到當今世界各國的感染人數排序，從高到低對各個國家進行了排序。從線性圖可以直觀的看出全球新冠疫情感染的總人數每日增減的趨勢。騰訊健康小程序的設計將疫情相關信息進行了全面又詳細的可視化設計，極大地幫助了用戶快速直觀地獲取疫情信息，見圖3。

圖4為小紅書App筆記數據分析。在小紅書App中，每發布一篇筆記，App都會對該筆記的各方面數據進行匯總分析。小紅書App的數據分析同樣以線性圖，餅狀圖與樹狀圖為主要可視化工具。其中線形圖是用來表示該筆記7日內觀看趨勢，餅狀圖表示了該筆記的觀眾來源，樹狀圖表示了觀眾的年齡分布、城市分布以及觀眾興趣分布。小紅書App將觀眾信息數據進行可視化設計，讓用戶能更加直觀明了地明確自己發布的筆記受眾數據。

四、基于信息可視化的健康App設計

從用戶的需求出發，為醫療小程序界面進行可視化設計。根據唐納德·諾曼教授的“三層次理論”（即本能層次、行為層次、反思層次）強調在設計中應該將人作為主體與出發點，為用戶界面設計提供指導，提高用戶界面的認知體驗。站在情感化設計的角度下去考慮醫療小程序界面設計，可以更加明確設計目標與用戶需求，見表1。

信息可視化設計包括：信息模型的構建和信息表達的設計。構建以信息處理為核心的信息模型，建立信息關系結構，實現角色合理化[10]。可視化設計的表現主要是基于信息處理并信息傳遞，并結合文字表現、色彩篩選、圖形排版、動態效果、等元素進行視覺設計，實現信息可視化。

（一）信息結構模型的構建框架

信息結構模型是表達數據和信息之間關系的工具。可以幫助設計師更好地理解和組織信息，處理數據和信息之間的關系特征。通過信息處理和分析，對不必要的數據進行分類與取舍，最后確定其結構類型。根據用戶需求與自定義數據信息的特點，通過元素之間的關系（即圖元關系）建立相應的視覺結構模型，形成基礎單元結構，根據視覺認知的特點，合理構建信息可視化模型，見圖5。

（二）信息結構模型的構建框架

筆者基于可視化相關原理，對健康App進行了框架構建。根據構建的模型框架，對健康App進行了模塊化設計。該App以健康為主要內容，通過對用戶的各項健康數據信息進行篩選分類，并將其可視化。在保證健康App的界面信息結構準確無誤的同時，從用戶需求出發，進一步明確健康App界面設計中元素與元素之間的關聯性，其中主要元素包括健康App的文字排版、色彩搭配、圖標設計、圖形設計等在健康App界面設計中的呈現。因此，將健康App界面主要分為時間記錄、心率監測、補水記錄、運動記錄、步數記錄、睡眠記錄、能量記錄，及其五大附加功能板塊。各項功能以模塊化的塊面呈現給用戶，讓用戶能夠快速找到自己想要了解的的單元格，極大地提高了用戶的使用效率。基于用戶習慣的視覺感知，構建了應用界面的基本模塊結構和界面層次信息結構。構建健康App的信息結構模型，可以有效地指導后續具體的界面設計，進而將其轉化為可視化界面設計，進一步實現可視化界面信息轉換與設計，見圖6。

（三）健康App方案設計

可視化設計的排版設計主要體現在兩方面：一是模型布局的主導作用，有必要明確信息的組織結構和層級關系。其次，在閱讀過程中，用戶視覺順序通常是從左到右，從上到下，水平運動比垂直運動快。結合用戶對界面設計的要求，采用視覺設計的手段，并使用色彩、圖形、布局、文字等因素。通過將抽象的信息數據轉換成用戶可以識別的視覺信息，建立更加完整、美觀、流暢的界面風格，提高信息傳輸的準確性和效率。采用灰色為背景色，橙色與黃色作為按鍵的顏色，為可視化界面提供輕松活躍的主體色彩。圖7為登陸界面。

在健康App設計中，圖形應用的首要目的就是為了提升用戶定義和理解的數據和信息。信息圖形主要由主體圖、符號圖、圖形等組成，它們在信息設計和可視化中扮演著不同的角色與功能，見圖 8。

健康App通過信息轉換，結合健康的主題，利用簡潔明了的幾何體塊來進行圖形設計，將用戶的健康信息更直觀更明了地傳達給用戶，極大程度減輕了用戶在讀取自己健康信息時的視覺壓力。基于健康App的框架模塊，為該App設計了主界面。對時間記錄、心率監測、補水記錄、運動記錄、步數記錄、睡眠記錄、能量記錄等用戶數據嵌入模塊框架中，是用戶打開App就能實時受到自己的健康數據，所有的數據都以表格、數字、圖形、環形線狀圖等方式呈現給用戶，實現健康App信息可視化，見圖8。

健康App設計附加功能設計中，采用同樣的色彩設計、板式設計與操作邏輯，對用戶課程歷史、用戶數據詳細頁面、用戶健康商場、用戶個人文檔進行相應的可視化設計，見圖9。其中用戶課程觀看歷史的功能在于讓用戶能直觀有效率地打開自己已經購買或者觀看過的課程教學，極大地方便了用戶的使用體驗；用戶數據詳細頁面用來查詢用戶自己身體狀況各項數據，比如：步數、心率、進水量、運動時間、睡眠時間等，以及對用戶每日的數據進行匯總，以線性圖的方式進行可視化設計呈現給用戶；用戶健康商場用來搭建一個用戶與授課商家的交易平臺，商家可以在商場里上架并銷售自己的課程產品，用戶可以從海量的搜課產品中挑選出最適合自己的產品；用戶個人檔案用來上傳并保存用戶的個人檔案，對用戶每日訓練作一個歷史記錄，可以上傳用戶個人照片、視頻等來構建一個用戶檔案庫，為用戶留下一些美好的回憶。與此同時用戶可以關注別人，也可以讓別人關注自己，構建一個互動的社交平臺。

結語

如今，信息時代取得快速發展，相比較之前，人們接觸到的信息量比較大，并且信息更深、更廣[12]。伴隨信息可視化設計的出現，能夠對人們接觸到的信息進行處理，借助設計師的組織構建，同時充分應用數字技術，用比較直觀的方式將信息呈現在大眾面前，其采用的呈現方式為視覺方式。在采集和處理信息時，因為受眾參與度、信息種類以及可視化目標存在一定的區別，使得作品能夠以不同的形式呈現在大眾面前。本文通過對信息可視化相關理論進行詳細的分析與論述，將其運用于健康App設計中，改變傳統的App設計，實現信息可視化。為信息可視化在App設計中的運用提供參考。

參考文獻

[1]周生源，鄧幀.基于信息可視化的大學生交互平臺App界面設計[J].大觀，2022（01）：99-101.

[2]陳蓓蓓.基于信息可視化設計的傳統手工藝保護研究[J].天工，2021（11）：78-79.

[3]李嶸.新媒體時代下信息可視化設計特征及發展研究[J].綠色包裝，2021（11）：79-81.

[4]倪世明.基于用戶體驗的移動醫療APP信息可視化設計研究[J].工業設計，2021（07）：121-122.

[5]李曉英，周大濤. 面向智能制造服務的產品設計需求信息可視化方法[J]. 中國機械工程，2020，31（7）：871-881.

[6]孫海旻. 從Data到Capta ——信息可視化設計的人文性技術美學策略探究[J]. 美術大觀，2021（3）：128-131.

[7]劉永紅，劉帆宇，宋一鳴. 基于生態資源信息反饋的可視化設計研究與應用[J]. 生態經濟，2021，37（10）：222-229.

[8]姚豐，楊曄. 信息可視化在視覺傳達中的應用 ——信息圖表設計[J]. 西部皮革，2021，43（8）：102-103.

[9]何修傳，孫嵐. 規劃館信息的可視化生成與傳播體驗設計策略[J]. 包裝工程，2020，41（22）：297-300.

[10]華培. 視覺的隱喻 ——敘事式信息可視化設計方法研究[J]. 美術大觀，2021（3）：168-169.

[11]李拓. 信息可視化：讓公眾“看得見”疫情的設計方法[J]. 裝飾，2020（2）：38-45.

[12]曹向暉. 看見“看不見”——信息可視化設計實踐趨勢與例析[J]. 美術觀察，2020（5）：56-59.