基于體驗設計的健身類App信息可視化設計研究

曾盛旗

摘要：在體驗設計視角下探討提升用戶體驗的健身類APP可視化設計方法。從無序到有序、從無形到有形兩方面對內容和形式兩方面進行有效分析，探討了數據整理、視覺層次與視覺流向的構建，剖析了健身類APP視覺元素中的圖形、字體、色彩等元素。提出健身類App信息可視化設計方法。該方法為設計內容與形式結合獨特、具有良好使用體驗的健身類APP帶來新的思路與借鑒。

關鍵詞：體驗設計健身類APP信息可視化設計界面設計交互

中圖分類號：TP391.9

文獻標識碼：A

文章編號：1003-0069（2021）01-0142-04

引言

隨著移動互聯網的發展與人們物質生活水平的提高，諸多廣泛的健康問題也隨之而來，這促使大眾的健康意識越來越強烈，對身材和體形的重視程度也越來越高，健身訓練類APP地開發設計與使用呈爆發式增長。在移動生活的時代背景下，信息可視化以清晰的視覺邏輯和簡單的視覺形式來傳達運動數據信息和訓練計劃，能夠幫助用戶快速識別并理解信息，提高健身效率與表現，減少犯錯的概率。為了讓用戶取得良好的健身體驗，此類APP信息可視化設計的研究迫在眉睫。作為一名健身愛好者，筆者每當打開健身訓練類APP開始訓練時，總是因數據、信息傳達不直觀、視覺表現不清晰以及視覺流向不明確等各種問題增加閱讀和理解負擔，影響合理的訓練進程與良好的健身體驗。本文便來談談這個問題。

一、健身類APP定義與體驗概述

（一）健身類APP概念與分類

健身訓練類APP是指根據用戶場景與需求，線上指導用戶健身訓練，記錄訓練、飲食與睡眠數據等為主要功能的智能手機或穿戴設備等第三方應用平臺。在體驗個體化、智能化和融合化趨勢下，各種功能與品種的健身訓練類APP應運而生，但總的來說可分為兩類，如表1。

1.健身指導類：此類APP提供真人演示的健身訓練視頻課程指導，用戶可以根據時間長短、場地條件和器械條件選擇合適的課程，也可以根據當前階段訓練目的和強度進行選擇。此類APP熱門的有Keep、NikeRunClub、Fit私人健身教練等。

2.數據記錄類：這類APP能夠精準記錄用戶與健身訓練相關的數據，并實時進行整理與分析，包含用戶體重、體脂、維度等多維數據，步數、健身項目、負重數據、耗時、距離等運動數據，心率、睡眠、血壓等生理數據。這些數據能夠快速幫助用戶快捷建立健康檔案、輔助設定健身訓練目標與制訂合適的飲食方案，幫助用戶更高效地獲得健身訓練成果。這類軟件熱門的有薄荷健康、健身記錄（APPleActivity）、小米運動、咕咚、悅跑圈等。

（二）健身類APP的功能與體驗

經過篩選從APPStore中國健康健美排行榜中篩選出排名靠前的健身訓練類品牌進行功能對比，如表2，各類健身訓練類APP主要功能側重不同，但可以歸納為以下幾點：

1.量體裁衣，制訂合理的健身訓練計劃：健身訓練類APP依據用戶填寫的個人數據與信息，能為用戶提供合理、多樣的健身訓練課程，幫助訓練者有目標循序漸進地進行訓練。

2.選擇多樣，提供多種視頻教學以及在線教練實時指導：用戶可以根據階段目標、有無器械情況、健身訓練場景選擇合適的教學視頻，根據動作演示和同步語音指導同步完成訓練計劃。

3.精準記錄，幫助健身訓練者系統記錄健身數據：健身訓練類APP會根據訓練者的訓練軌跡自動記錄數據，同步進行數據分析和管理。系統的數據記錄能夠幫助訓練者合理地安排下階段健身訓練的計劃。

4.社交分享，論壇互動：用戶能夠在APP社交圈內拍照分享每日的訓練打卡，分享好友相互互勉，探討健身訓練的經驗以及詢問相關問題。用戶通過社交平臺之間的互動往來使健身訓練不再是一個人孤單的堅持。

（三）健身訓練類APP體驗特點

相對于傳統健身，線上健身訓練類APP能夠給用戶提供不同的用戶體驗。總結主要有以下特征：

1.便捷的數據記錄體驗：用戶能夠使用手機或健身手環等便攜式智能設備，在不受時間、場地條件的限制下記錄相關健身訓練和身體數據。通過APP后臺進行數據分析與整理，用戶能夠直觀地了解健身訓練計劃的強度以及身體狀況。

2.科學的健身指導體驗：按照健身場景、訓練計劃、是否有健身器械等條件，量體裁衣的為用戶提供合適的健身訓練計劃。標準的動作演示和精確的語言描述能夠幫助用戶安全、正確完成訓練。

3.社交性與個性化體驗：健身訓練類APP提供的社交平臺能夠讓用戶在線上拍照記錄每天的變化，分享給好友自己健身訓練的心得和成果相互勉勵，社區點贊、評論等功能能夠有效地激勵用戶堅持健身訓練計劃，加強社交體驗，擴充自身的交友圈。此外，由于用戶的目標和訓練計劃的不同，健身訓練類APP會根據用戶自身數據情況給予不同的健身訓練建議與指導，提供給用戶更多的選擇。

二、體驗設計下健身訓練類APP信息可視化設計發展

“用戶體驗”概念首先由美國認知心理學家唐納德諾曼（DonaldArthurNorman）在上世紀90年代中期提出和推廣，2014年辛向陽在IXDC（國際體驗設計大會）和UXAustralia（澳大利亞用戶體驗大會）上首次提出了“體驗作為設計對象”和“從用戶體驗到體驗設計”范式轉變的學術觀點，體驗作為特殊人群在特定場景的一段特殊的經歷成為設計對象”。

隨著體驗設計理念的興起與傳播，體驗設計呈現出個體化、智能化和融合化三個發展新趨勢。個體化體驗是指由用戶主動驅動、預設、參與和規劃的專屬體驗;智能化體驗通過智能技術創新交互方式，將使語音交互、動作識別等自然交互手段為用戶提供更自然便捷的使用體驗、認知體驗、行為體驗、情感體驗和互動體驗;融合化體驗借助多平臺融合，確保在移動端、PC端、平板甚至可穿戴設備幫助用戶獲得高效統一的無縫體驗【2】。

健身類APP應遵循使用第一的原則。體驗設計需要依據產品應用場景的綜合情況，統籌內容與形式兩方面的因素來處理問題。此理念改變了以物作為設計對象的傳統，深刻影響了健身訓練類APP信息可視化設計。當我們使用此類APP時，我們既體驗內容，也體驗其傳達形式，兩者共同構成了我們的使用體驗【3】。然而目前市面上絕大多數健身訓練類APP更偏重于內容，擁有更多的信息內容和不斷膨脹的產品功能導致APP變得越來越復雜難以使用，形式的體驗也很不友好。而從體驗角度看，可視化對內容與形式設計結合，能夠反映健身用戶思路，以直觀的方式傳達抽象內容，幫助訓練者快速識別和理解信息，并支持他們高效率地完成訓練任務和目標。

基于體驗設計的發展趨勢，用戶自身的心理感受和行為決定了今天健身訓練類APP內容和形式的呈現，使用者更加青睞從更快地看見信息到更快地看懂信息。然而此類APP作為一個自助式產品，面對大量的信息和選擇，用戶只能自己想辦法，依靠自己的感性和經驗獨自摸索使用這個軟件。健身訓練類APP越復雜，向用戶提供良好體驗就越艱難，每一個新增的文字、圖像，都加大了不友好用戶體驗的可能性【4】。

要想幫助健身訓練APP的使用者提高訓練效率，減少犯錯概率，獲得更好的健身體驗，需要將運動數據、圖文等進行設計，合理巧妙地把數據語言轉化為視覺語言進行展現，有效地傳達信息。

三、健身類APP信息可視化設計方法

（一）從無序到有序

1.整理數據，呈現有序信息：運動信息主要包括運動數據、視頻、圖文、測試等【5】。鑒于健身訓練APP使用場景的特殊性和移動設備屏幕尺寸的局限性，數據信息混亂與無序的呈現會嚴重影響用戶的使用體驗，更可能造成場景下痛點的缺失。

使信息有序是指根據數據間的關系和規律對數據進行篩選和分類。想要呈現有序信息，首先是搜集數據，只有完整、準確的數據才能夠幫助設計師更好地整理數據。設計師將完整、準確卻繁雜的數據篩選和分類，變成簡潔有序的信息，能幫助用戶更便捷地找到視覺焦點，降低認知負荷，直達當前場景下的功能需求，提高功能使用效率，幫助此類APP的用戶擁有良好的體驗。

從此類APP的訓練數據記錄界面來看，Keep的年、月健身數據過于繁冗瑣碎，且信息表達不明確，如圖1。視覺中心以分鐘為單位記錄每年和每月用戶健身的累積時長，所有信息沒有進行分類、分組與有序地呈現。比如說，用戶想對比每月的訓練時長和消耗熱量，將會無所適從，在APP中找不到相應的分類統計數據。而每次的訓練數據也毫無重點，導致用戶認知負荷過載。

蘋果Activity運動數據記錄頁面則清晰有序、內容適量，三個頁面，分別記錄了每月、每天和每次的訓練數據，如圖2。第一個頁面有序記錄了每月訓練的累積和平均時間，以及累積和平均熱量，用戶能夠快速知曉每月平均鍛煉時間和消耗的熱量，又可以清晰地對比每個月的總訓練時間和消耗的熱量。第二個頁面則以月為單位記錄著每天訓練消耗的熱量，方便用戶得知自己每天消耗的熱量。每天訓練的具體數據則分組有序地顯示在第三個頁面中，其中訓練名稱和時間段為一組，累積時間、總熱量、動態熱量和平均心率四項訓練數據為一組，地圖、天氣、濕度三項信息為一組，遵循了記憶的“四項事物法則”，信息容量合適，又合理有序地進行了信息分類，大大提高了用戶閱讀與接受信息的效率。

2.運用規律，使視覺層次有序：視覺層次是在整理數據，使信息有序陳列后，將信息語言轉化為符合大眾認知的視覺語言。構建視覺層次有序，是利用視覺語言將信息進行分類、組合或對比，為讀者尋找信息提供清晰的視覺層次與路徑，幫助用戶對信息的輕重緩急進行判斷，促使用戶快速發生行為反饋。視覺語言的表達需要用嚴謹的思維尋找并運用信息間的規律，如色彩規律、形狀規律、群組規律、節奏規律等，才能建立有序并符合邏輯的視覺層次。

蘋果Activity運用紅、綠、藍三色以及不同形態的箭頭構成的甜圈圖來呈現活動、鍛煉、站立三項數據的完成進度，如圖3。色彩和圖形規律的運用，明確、有序的視覺層次的表達代替了復雜、冗長的文字表意，讓每次、每日、每月的完成進度以及當前趨勢一目了然。此外，蘋果Activity還利用群組和節奏規律，來展現心率數據的變化，圖4可以看到密集的紅色圖形代表著運動進行時偏高的心率，舒緩的、松散的紅點則代表心率恢復，運用群組與節奏規律使得視覺層次有序地展現，這樣的設計方法大大降低了用戶的閱讀負荷，提高了信息傳達的效率。

3.整理視覺流向，使其符合用戶瀏覽習慣：用戶瀏覽頁面時的視線路徑叫作視覺流向。良好的視覺流向設計能夠引導讀者流暢地依照順序進行閱讀。通常，人們習慣從上往下、從左往右閱讀圖文信息，且水平瀏覽速度快于垂直瀏覽速度。

健身訓練類APP用戶的完整體驗是基于APP目標和用戶需求的理解之上的，良好體驗的重要標準不是苛求整個過程一共需要多少步驟，而是用戶知道從哪里開始瀏覽操作，每一個步驟是否自然流暢地延續了上一個步驟中的任務，擁有自然舒適的視線流和操作流。毫無疑問，一個混亂的、令人困惑的視覺流向和操作步驟會使用戶束手無策，大大降低體驗感受。

即刻運動APP的訓練界面用垂直瀏覽的形式展示了“跟著計劃”、“跟著視頻練”、“自由訓練”三大塊內容，又用水平瀏覽的形式展示了具體信息，無序的視覺流向大大增加了用戶的閱讀時間和操作負擔，如圖5。

Nike+RunningAPP展示頁內容簡潔，布局劃分合理明確，遵循從上往下的有序視覺流向，讓用戶可以有序、高效地瀏覽APP的內容，簡單快捷地找到適合自己的訓練計劃并開啟訓練，取得良好的學習體驗，如圖6。此外，線條、箭頭等指示性的圖形符號能夠有效引導用戶閱讀，避免用戶視覺流混亂。

（二）從無形到有形

1.顯著視覺圖形，使數據信息有形化：顯著視覺圖形是指合理地設計圖文大小、顏色、位置等形態和視覺元素，這些元素的占比多少能夠幫助用戶有效地分配注意資源，形成和諧統一的視覺效果【6】。數據與信息有形化將復雜繁瑣的數據建立聯系，發現規律和特征，運用計算機圖形學和圖像處理技術將不易理解的數據變為有形的視覺圖形，協助個體或組織簡短有效地向受眾傳達信息【7】。健身類APP需要將無形的數據轉化為顯著的視覺圖形，才能給用戶帶來良好的視覺與使用體驗，具體來說需要注意以下三點：

（1）避免大面積重復信息：大面積重復信息會增加用戶接受信息的時間，在瀏覽Keep完成課程界面時，圖7展現了所有健身項動作項目的名稱、組數與完成時間，且相同動作的名稱反復多次重復展現，使得用戶不僅浪費了閱讀時間，又不得不花費精力去尋找所需的重要信息，大大降低了體驗效果。

Nike+RunningAPP的訓練計劃則將動作計劃說明單獨列于一行，且對每個動作匹配了相應圖片，每段時間的字體加粗、有形化處理，避免大面積文字的出現，如圖8。信息有形化，結構精簡化，合理地設計文字信息權重能夠有效分配用戶的注意力，減少視覺負擔。

（2）合理設定字體、字號、字距和行距：合理設定字體、字號、字距和行距對數據信息有形化非常重要。健身訓練類APP的字體最常用的是黑體，筆畫較粗的中黑、粗黑字體適合用于標題和重要提醒信息，正文則適合使用細黑字體，此外，英文文字要用等線英文字體，不宜使用中文字體。對于字號大小也要嚴格地遵守規范，通常在健身類APP中，導航主標題字號默認字號為34px-36px，32px-34px大小的正文字號與28px-24px大小的副文能夠便于用戶識別與閱讀。不建議使用小與20px大小的字號，會影響文字內容的識別。除了文字大小，字間距、行間距也十分重要。可以適度放大字距，營造疏松寧靜的版面，加強文字圖形化表現，但要注意大面積段落文字的字距大于行距是很難閱讀的。此外，行間距為行高的1/2-1倍更能夠給人以視覺上的舒適感，有效引導閱讀，顯著文字信息。

（3）排除視覺噪音干擾：視覺噪音是指妨礙用戶接收、理解、選擇信息的視覺元素。如色彩、形態各異的文字背景，均可稱為視覺噪音。在健身APP中，文字背景界面的過分裝飾以及反差過小的色彩搭配，會導致用戶花費更多時間和精力，在基于語境，排除干擾的情況下對信息進行識別，從而獲得有效信息。

受背景圖的干擾，用戶閱讀圖9Keep的課程名稱和信息的難度大大增加，只能逐字逐句地在受背景圖干擾的文字信息中尋找有用信息，比如課程名稱、時間與課程強度。

Fit的課程庫頁面則擁有清晰的視覺呈現，將運動項目的圖片統一至于左側，右側在白底的空間上用加粗的黑體字展現運動項目的名稱與時間，避免了視覺噪音的干擾，從而給用戶帶來更好更直觀的閱讀體驗，而不是增加用戶的認知負荷，影響用戶理解與使用APP的效率，如圖10。

2.運用視覺修辭，使抽象信息變得具體：抽象的信息往往很難讓用戶在短暫的時間內識別并接受。運用視覺修辭，如比喻、對比、夸張、放大、解剖、顯微等手法，結合受眾、意圖與語境，能夠對抽象信息進行生動具體的視覺展現。

視覺修辭整合抽象的信息為創新的視覺元素，以視覺為引導讓抽象的信息變得形象具體，提升信息的視覺表現力、感染力和傳播力，激發用戶的視覺注意與視覺互動【9】，幫助用戶減輕閱讀負擔，提高使用效率和體驗效果。

3.構建色彩反差，提高信息識別度：色彩是可視化設計的重要元素之一，健身類APP的色彩使用不僅要遵循色彩理論提升配色美感，更重要的是需要運用色彩策略構建色彩反差，幫助用戶快速注意到需要閱讀與接受的信息。可視化設計通過構建色彩反差能夠提升信息的差異性、突顯性與易讀性，幫助用戶發現、區分、辨別與理解信息，優化認知體驗。

（1）構建明度反差：色彩三要素為色相、明度、純度，其中明度是指色彩所具有的明暗程度。構建色彩明度反差十分重要，從健身高強度訓練APP的界面可以看出色彩明度對比鮮明，即使是同類色藍色的呈現，但信息識別度依然清晰良好，如圖11。

（2）構建純度反差：純度是指色彩的飽和度，也稱鮮艷程度。同一色彩明度不同，純度也會隨之不同。而在明度接近的情況下，要提高信息識別度，就要構建純度反差。

在蘋果Activity運動數據界面中，構建純度反差，利用高純度的色彩組成甜圈圖，無形的明度對比變為有形的純度對比，使用戶一眼就能辨別不同顏色所代表的信息含義，如圖12。高純度的色彩對比豐富了視覺效果，降低了用戶識別信息的負擔，提升了用戶的體驗和感受。

結論

當前市面上的健身訓練類APP大多數均具備提供鍛煉方法和運動數據反饋的功能，想對用戶進行刺激、勸導和促發，培養用戶持續、主動的鍛煉習慣，增強用戶黏度，就必須注重產品信息可視化的設計。只有通過有序、有形的信息設計，才能清晰準確地對健身訓練類用戶進行直觀反饋，指導用戶科學地、高效率地健身訓練，提供給他們一個良好的產品體驗。從無序構建有序、從無形創造有形，是企業、團隊或個人在對健身訓練類APP進行信息設計時值得花功夫去做好的一件事。

參考文獻

【1】辛向陽.從用戶體驗到體驗設計【J】.包裝工程，2019，40（8）：60-67.

【2】楊琨鈺，王偉偉.我國用戶體驗設計發展研究分析【J】.設計，2020，33（13）：117-119.

【3】代福平從體驗設計角度看漢譯圖書的視覺翻譯問題【J】.創意與設計，2017（05）：77-83.

【4】加瑞特，用戶體驗要素：以用戶為中心的產品設計【M】.北京：機械工業出版社，2011：10-11.

【5】龍娟娟，閆北歌.量化自我與運動類App信息可視化設計研究【J】.裝飾，2017（10）：105-107.

【6】龍娟娟，閆北歌.基于無意視盲的運動類APP界面設計研究【J】.包裝工程，2017，38（24）：130-136.

【7】可視化設計【J】.設計，2018，（15）：7.

【8】代福平.信息可視化設計【M】.重慶：西南師范大學出版社，2015：84-85.

【9】王艷艷.圖像語境下的報刊視覺設計重構【J】.中國出版，2018，（14）：52-54.