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

曾盛旗

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

關(guān)鍵詞：體驗設(shè)計健身類APP信息可視化設(shè)計界面設(shè)計交互

中圖分類號：TP391.9

文獻標識碼：A

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

引言

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

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

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

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

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

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

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

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

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

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

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

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

（三）健身訓(xùn)練類APP體驗特點

相對于傳統(tǒng)健身，線上健身訓(xùn)練類APP能夠給用戶提供不同的用戶體驗。總結(jié)主要有以下特征：

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

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

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

二、體驗設(shè)計下健身訓(xùn)練類APP信息可視化設(shè)計發(fā)展

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

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

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

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

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

三、健身類APP信息可視化設(shè)計方法

（一）從無序到有序

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

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

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

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

2.運用規(guī)律，使視覺層次有序：視覺層次是在整理數(shù)據(jù)，使信息有序陳列后，將信息語言轉(zhuǎn)化為符合大眾認知的視覺語言。構(gòu)建視覺層次有序，是利用視覺語言將信息進行分類、組合或?qū)Ρ龋瑸樽x者尋找信息提供清晰的視覺層次與路徑，幫助用戶對信息的輕重緩急進行判斷，促使用戶快速發(fā)生行為反饋。視覺語言的表達需要用嚴謹?shù)乃季S尋找并運用信息間的規(guī)律，如色彩規(guī)律、形狀規(guī)律、群組規(guī)律、節(jié)奏規(guī)律等，才能建立有序并符合邏輯的視覺層次。

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

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

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

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

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

（二）從無形到有形

1.顯著視覺圖形，使數(shù)據(jù)信息有形化：顯著視覺圖形是指合理地設(shè)計圖文大小、顏色、位置等形態(tài)和視覺元素，這些元素的占比多少能夠幫助用戶有效地分配注意資源，形成和諧統(tǒng)一的視覺效果【6】。數(shù)據(jù)與信息有形化將復(fù)雜繁瑣的數(shù)據(jù)建立聯(lián)系，發(fā)現(xiàn)規(guī)律和特征，運用計算機圖形學(xué)和圖像處理技術(shù)將不易理解的數(shù)據(jù)變?yōu)橛行蔚囊曈X圖形，協(xié)助個體或組織簡短有效地向受眾傳達信息【7】。健身類APP需要將無形的數(shù)據(jù)轉(zhuǎn)化為顯著的視覺圖形，才能給用戶帶來良好的視覺與使用體驗，具體來說需要注意以下三點：

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

Nike+RunningAPP的訓(xùn)練計劃則將動作計劃說明單獨列于一行，且對每個動作匹配了相應(yīng)圖片，每段時間的字體加粗、有形化處理，避免大面積文字的出現(xiàn)，如圖8。信息有形化，結(jié)構(gòu)精簡化，合理地設(shè)計文字信息權(quán)重能夠有效分配用戶的注意力，減少視覺負擔(dān)。

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

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

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

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

2.運用視覺修辭，使抽象信息變得具體：抽象的信息往往很難讓用戶在短暫的時間內(nèi)識別并接受。運用視覺修辭，如比喻、對比、夸張、放大、解剖、顯微等手法，結(jié)合受眾、意圖與語境，能夠?qū)Τ橄笮畔⑦M行生動具體的視覺展現(xiàn)。

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

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

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

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

在蘋果Activity運動數(shù)據(jù)界面中，構(gòu)建純度反差，利用高純度的色彩組成甜圈圖，無形的明度對比變?yōu)橛行蔚募兌葘Ρ龋褂脩粢谎劬湍鼙鎰e不同顏色所代表的信息含義，如圖12。高純度的色彩對比豐富了視覺效果，降低了用戶識別信息的負擔(dān)，提升了用戶的體驗和感受。

結(jié)論

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

參考文獻

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

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

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

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

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

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

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

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

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