基于心流理論的孕期運(yùn)動(dòng)App 色彩體驗(yàn)界面設(shè)計(jì)研究

趙文霞/南京理工大學(xué)設(shè)計(jì)藝術(shù)與傳媒學(xué)院

0 引言

色彩是界面設(shè)計(jì)的重要組成部分，不僅具有美化、裝飾的作用，同時(shí)還能影響用戶的心理和生理。運(yùn)動(dòng)作為非藥物性的生活方式干預(yù)，因其低成本、易實(shí)施等特點(diǎn)，已經(jīng)成為孕期保健的重要組成部分。但目前市場(chǎng)上針對(duì)孕婦的健身應(yīng)用程序缺乏對(duì)孕期運(yùn)動(dòng)的針對(duì)性考量和全方位思考，難以滿足孕婦的生理需求及情感體驗(yàn)。因此，通過(guò)色彩的運(yùn)用讓孕婦使用App 時(shí)獲得愉悅的體驗(yàn)，對(duì)改善孕婦的健康和提高生活品質(zhì)具有重要意義。

1 心流理論概述

心流理論是由美國(guó)心理學(xué)家米哈里齊克森·米哈里（Mihaly Csikszentmihalyi）在1975 年提出的，“心流”最初是由“FLOW”[1]直譯而來(lái)。它是指?jìng)€(gè)體對(duì)某一活動(dòng)表現(xiàn)出濃厚的興趣，并且完全沉浸在某項(xiàng)活動(dòng)中的一種情緒體驗(yàn)或狀態(tài)。在這種狀態(tài)下，人們有時(shí)甚至?xí)r(shí)空概念和對(duì)周圍環(huán)境的感知[2]，獲得一種深層沉浸體驗(yàn)，能夠感受到高度的充實(shí)感和愉悅感并且完全被所做的事深深吸引，喪失其他不相關(guān)的知覺(jué)，自我意識(shí)開始逐漸消失，感覺(jué)時(shí)間過(guò)得特別快或者特別慢，給人帶來(lái)時(shí)間的扭曲感。Csikszentmihalyi 將產(chǎn)生心流的表現(xiàn)總結(jié)為9 個(gè)特征：明確清晰的目標(biāo)、技能與挑戰(zhàn)的平衡、準(zhǔn)確而及時(shí)的反饋、行為與意識(shí)的融合、注意力高度集中、潛在的控制感、自我意識(shí)的喪失、時(shí)間扭曲感和發(fā)自內(nèi)心的參與感。Novak 等人又將其歸納為心流產(chǎn)生的條件、體驗(yàn)、結(jié)果三類因素（表1）。

表1 心流體驗(yàn)的特征

2 色彩在心流體驗(yàn)中發(fā)揮的作用

2.1 傳達(dá)準(zhǔn)確而及時(shí)的反饋

反饋的表現(xiàn)形式包含視覺(jué)反饋、聽覺(jué)反饋、觸覺(jué)反饋和嗅覺(jué)反饋等[3]，感官反饋的疊加可加強(qiáng)用戶感知，提升控制感[4]。色彩是通過(guò)視覺(jué)感知而獲取的視覺(jué)印象，具有從精神到心理上的廣泛象征意義，相同的顏色在不同的國(guó)家有著不同的文化象征意義。紅色在中國(guó)代表著吉祥、喜慶和幸福，在農(nóng)歷新年，人們會(huì)張燈結(jié)彩表達(dá)對(duì)來(lái)年的期盼；在美國(guó)文化里，紅色往往與暴力、血腥、赤字、警示相聯(lián)系。它是一種多功能的顏色，具有積極與消極的含義。因?yàn)榧t色的光頻率最低、波長(zhǎng)最長(zhǎng)，所以其衍射能力最強(qiáng)，能夠給人帶來(lái)較強(qiáng)的視覺(jué)沖擊力。因此，世界各國(guó)都用紅色來(lái)表示交通信號(hào)燈和禁止停車的標(biāo)志。紅色通常與警告或重要的內(nèi)容相關(guān)，例如在錯(cuò)誤狀態(tài)下紅色與叉形圖標(biāo)使用，看到紅色就表示出現(xiàn)了問(wèn)題；在電子商務(wù)的應(yīng)用程序中，“從購(gòu)物車中刪除”的操作也會(huì)結(jié)合叉形圖標(biāo)，或者帶紅色背景的刪除文字表示用戶正在執(zhí)行無(wú)法恢復(fù)的操作（圖1）。紅色通常也與愛(ài)相聯(lián)系，例如“點(diǎn)贊”之類的情感表達(dá)中會(huì)使用紅色（圖2）。在界面設(shè)計(jì)中，色彩的合理運(yùn)用可以準(zhǔn)確而及時(shí)地傳達(dá)圖標(biāo)代表的內(nèi)涵以及用戶操作行為帶來(lái)的結(jié)果。

圖1 京東網(wǎng)頁(yè)

圖2 Twitter點(diǎn)贊

2.2 劃分功能模塊，構(gòu)建簡(jiǎn)潔清晰的界面

合理地運(yùn)用顏色劃分功能模塊，完善信息架構(gòu)，提高認(rèn)知效率。簡(jiǎn)潔清晰的界面則能夠減少干擾因素，讓用戶在使用的過(guò)程中更容易理解、記憶應(yīng)用程序的功能和操作方式。但是“簡(jiǎn)潔”并不意味著減少或者省略，而是對(duì)復(fù)雜的信息進(jìn)行整合，將信息呈現(xiàn)的方式簡(jiǎn)單化、程序化，盡量不要使用復(fù)雜的設(shè)計(jì)元素，可以通過(guò)色彩來(lái)強(qiáng)調(diào)功能模塊的劃分吸引用戶的注意力。利用顏色區(qū)分導(dǎo)航欄、背景、圖標(biāo)可以使用戶更容易理解界面之間的層級(jí)關(guān)系，引導(dǎo)用戶更快地進(jìn)入心流狀態(tài)。以京東App為例，在狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄運(yùn)用界面主題色進(jìn)行模塊分割，利用色彩的對(duì)比劃分功能模塊，使用戶能夠快速找到所需功能。

2.3 引發(fā)用戶情感共鳴，增強(qiáng)發(fā)自內(nèi)心的參與感

色彩能夠以非語(yǔ)言的的方式傳達(dá)信息、創(chuàng)造特定的情緒，有時(shí)甚至可以影響人們做出的決定。人們對(duì)顏色的感知是主觀的，但受到歷史文化、地域的影響，某些顏色的效果具有普遍意義。例如光譜中紅色區(qū)域可以是以黃色為基礎(chǔ)的顏色，這些被稱為暖色，暖色代表著舒適、溫暖到敵意和憤怒的各種情緒；同時(shí)紅色也可以以藍(lán)色為基礎(chǔ)，如酒紅色、覆盆子色，這些被稱為冷色，具有平靜的含義，可以讓人感受到嚴(yán)肅、冷漠。App 界面的色彩運(yùn)用從類別上主要分為主色、輔助色和點(diǎn)睛色，其中主色決定了App 的界面設(shè)計(jì)風(fēng)格。根據(jù)受眾選擇特定的顏色，使其與情感聯(lián)系起來(lái)，對(duì)于大多數(shù)人，藍(lán)色表現(xiàn)出冷靜與理智，代表著信任、安全和可靠，例如支付寶選用藍(lán)色不僅讓人聯(lián)想到科技與創(chuàng)新，同時(shí)也能帶給用戶安全感。因此，通過(guò)界面顏色的視覺(jué)感受影響用戶的情緒，與用戶產(chǎn)生情感共鳴，能夠增強(qiáng)用戶的心流體驗(yàn)。

3 沉浸式色彩體驗(yàn)應(yīng)用原則

3.1 迎合目標(biāo)用戶

色彩是設(shè)計(jì)中最具有表現(xiàn)力的要素之一，它通過(guò)視覺(jué)能夠引起用戶一系列的生理和心理感受。色彩學(xué)把顏色分為暖色調(diào)、冷色調(diào)和中性色調(diào)。暖色系的色彩被認(rèn)為會(huì)提高心跳次數(shù)、增強(qiáng)欲望和食欲，冷色系則有著相反的作用。不同年齡、性別的用戶對(duì)色彩的喜好都存在差異，需要對(duì)用戶的偏好進(jìn)行分析，并且分析色彩給用戶帶來(lái)的視覺(jué)感受以及情緒變化。同時(shí)要選擇與App 調(diào)性相同，能夠引導(dǎo)相應(yīng)情感的顏色，例如美團(tuán)App（圖3）的黃色代表著熱情、溫暖，象征著美團(tuán)始終堅(jiān)守“幫助大家吃得更好，生活更好”的使命?？紤]到女性在孕期需要放松身心，色彩上，可以選擇柔和、舒適的顏色。粉色經(jīng)常用來(lái)體現(xiàn)女性的溫柔、浪漫、甜美的特性，例如美柚App（圖4）用粉色來(lái)凸顯女性化的特點(diǎn)。

圖3 美團(tuán)

圖4 美柚

3.2 統(tǒng)一性

統(tǒng)一的顏色風(fēng)格能加強(qiáng)用戶對(duì)應(yīng)用程序的記憶程度，體驗(yàn)感更加舒適和自然。界面設(shè)計(jì)中需要確保相同層級(jí)、相同功能的色彩元素保持統(tǒng)一，確定好主題色、輔助色、功能狀態(tài)色后需要按照規(guī)范進(jìn)行使用，確保界面在視覺(jué)層次、設(shè)計(jì)風(fēng)格的統(tǒng)一性。大多數(shù)情況下，在設(shè)計(jì)的過(guò)程中可以利用界面主題色選用不同明度、純度的小色塊點(diǎn)綴界面，提升界面整體的協(xié)調(diào)性。用戶可以通過(guò)色塊對(duì)不同的模塊進(jìn)行區(qū)分，可以降低用戶記憶學(xué)習(xí)的認(rèn)知負(fù)荷，改善用戶體驗(yàn)。但統(tǒng)一并不意味著單一，多種色相顏色配色的Arngren 網(wǎng)站界面（圖5）和統(tǒng)一色調(diào)的站酷網(wǎng)站界面（圖6）的對(duì)比，可以看到在統(tǒng)一顏色下的設(shè)計(jì)畫面更為和諧，讓人感到整潔、舒適。其次，統(tǒng)一性不僅僅體現(xiàn)在色相上的協(xié)調(diào)，更加表現(xiàn)在色彩語(yǔ)意與產(chǎn)品內(nèi)涵的貼合度。例如網(wǎng)易云音樂(lè)以紅色為主導(dǎo)色，紅色代表著熱烈、鮮活和向上，與網(wǎng)易云音樂(lè)“有溫度、有情感的音樂(lè)社區(qū)”形象不謀而合。因此，在使用多種顏色的時(shí)候除了進(jìn)行色調(diào)的統(tǒng)一，還需要考慮到產(chǎn)品的內(nèi)容與核心。

圖5 Arngren網(wǎng)站

圖6 站酷

3.3 平衡性

平衡性是指在界面設(shè)計(jì)中有秩序的色彩搭配。一般情況下，同類色彩的搭配能夠很好地實(shí)現(xiàn)色彩的調(diào)和，而高純度的互補(bǔ)色或?qū)Ρ壬缂t綠、藍(lán)橙、黃紫，這類顏色適合在比較張揚(yáng)需要著重突出的場(chǎng)景下使用。由于過(guò)于強(qiáng)烈的視覺(jué)刺激會(huì)使用戶產(chǎn)生視覺(jué)疲勞，因此需要控制使用面積，盡量在核心部分使用。另一方面是冷色與暖色關(guān)系的平衡，通過(guò)冷暖對(duì)比使界面不顯單調(diào)。色彩的布局可以通過(guò)深色與淺色之間的平衡區(qū)分產(chǎn)品的內(nèi)容主次關(guān)系，通過(guò)色彩的飽和度、明度、對(duì)比度之間的差異形成對(duì)比，用戶的視覺(jué)中心點(diǎn)會(huì)自覺(jué)地偏向顏色鮮艷或者較深的部分。

4 App 中主要模塊的界面設(shè)計(jì)

App 設(shè)計(jì)前期研究采用了訪談法和問(wèn)卷法獲取用戶在孕期時(shí)的健康、運(yùn)動(dòng)狀況和建議信息。調(diào)研共有65 人參與了問(wèn)卷填寫，有效問(wèn)卷填寫65 份。通過(guò)對(duì)運(yùn)動(dòng)需求和建議的調(diào)研和數(shù)據(jù)分析，得出結(jié)論：大部分孕媽在孕期會(huì)有身體不適的狀況，并且會(huì)選擇通過(guò)運(yùn)動(dòng)來(lái)輔助緩解身體的不適，但同時(shí)又擔(dān)心運(yùn)動(dòng)會(huì)對(duì)胎兒產(chǎn)生不良的影響。

4.1 用戶模型及用戶旅程圖

建立具有代表性的用戶模型，賦予其基本的信息及人物性格，可以更好地了解用戶的功能需求。孕婦在不同的階段生理及心理的狀態(tài)都有所不同，基于以用戶為中心的設(shè)計(jì)理念，對(duì)孕婦的心理特征、特殊需求、活動(dòng)軌跡進(jìn)行研究，從而挖掘出孕期運(yùn)動(dòng)App 的設(shè)計(jì)機(jī)會(huì)點(diǎn)。

綜合前期的調(diào)研結(jié)果，將孕婦的行為按照時(shí)間維度歸納為一條完整的運(yùn)動(dòng)行為路線，發(fā)現(xiàn)孕婦的功能需求及情感需求點(diǎn)，同時(shí)梳理出用戶在運(yùn)動(dòng)過(guò)程中的機(jī)會(huì)點(diǎn)，最終以可視化的圖表展現(xiàn)（圖8）。

圖8 用戶旅程圖

4.2 界面色彩設(shè)計(jì)與框架結(jié)構(gòu)

4.2.1 界面色彩

色彩是能引起用戶心理上共同的審美愉悅的形式要素。用戶在使用App 時(shí)，顏色在留給用戶第一印象的同時(shí)，還能夠展現(xiàn)產(chǎn)品的內(nèi)涵、品質(zhì)、概念等。由于生理、心理、年齡、文化等差異，不同人群對(duì)于色彩的偏好有所不同，需要科學(xué)地認(rèn)知受眾群體對(duì)于色彩的需求，為他們提供更加人性化的設(shè)計(jì)。相對(duì)于男性而言，女性更喜歡柔和的色調(diào)，例如粉色、黃綠等帶有溫柔意向的顏色，特別是對(duì)于處在孕產(chǎn)分娩、生理期等特殊時(shí)期的女性，飽和度低、明度高的顏色給視覺(jué)、心理帶來(lái)的刺激相對(duì)較小，更受到女性的偏愛(ài)。因此，在孕期運(yùn)動(dòng)App 的界面設(shè)計(jì)中選擇了以綠色為主色調(diào)，紫色、藍(lán)色為輔助色。綠色屬于中性色調(diào)，從視覺(jué)角度來(lái)看，綠色是最寧?kù)o、最放松的顏色之一，代表著健康、自然、希望，象征著起點(diǎn)與成長(zhǎng)，與女性孕育生命的意義不謀而合。

4.2.2 框架結(jié)構(gòu)

孕期運(yùn)動(dòng)App 分為“首頁(yè)、廣場(chǎng)、消息、我的”四個(gè)主要模塊（圖9），每個(gè)模塊的主要功能如下。

圖9 界面設(shè)計(jì)

首頁(yè)：每日推薦、搜索欄、直播課、塑身課、減脂課等與前期調(diào)研目標(biāo)相符合的課程推薦；廣場(chǎng)：經(jīng)驗(yàn)交流、運(yùn)動(dòng)圈打卡；消息：接受相關(guān)的推送、獲取好友的消息及點(diǎn)贊回復(fù)；我的：用戶的信息設(shè)置、身體狀態(tài)的監(jiān)測(cè)、獎(jiǎng)勵(lì)的獲取、重新設(shè)置運(yùn)動(dòng)目標(biāo)。

綜上，色彩上，使用柔和、舒適的顏色，通過(guò)簡(jiǎn)單和直觀的設(shè)計(jì)，讓用戶可以輕松地找到所需的信息和功能。功能上，在進(jìn)入應(yīng)用程序后會(huì)對(duì)用戶的身體狀況和運(yùn)動(dòng)目標(biāo)進(jìn)行調(diào)研，后續(xù)根據(jù)孕婦的孕期、有無(wú)疾病史、目標(biāo)等要素推薦相關(guān)課程，確保挑戰(zhàn)與技能的平衡；其次，在視頻跟練的過(guò)程中可以調(diào)整自己的進(jìn)度，并且依靠傳感設(shè)備對(duì)身體狀況進(jìn)行監(jiān)測(cè)，確保運(yùn)動(dòng)的安全性。在應(yīng)用程序的設(shè)置中，用戶可以靈活地設(shè)置自己的運(yùn)動(dòng)計(jì)劃，自由地調(diào)整計(jì)劃的時(shí)間、內(nèi)容和強(qiáng)度，從而更加方便地適應(yīng)用戶的生活和身體狀況；最后，在完成運(yùn)動(dòng)計(jì)劃后，可以獲取經(jīng)驗(yàn)，通過(guò)獎(jiǎng)勵(lì)機(jī)制來(lái)激勵(lì)用戶，使用戶感受到成就感，增強(qiáng)用戶活躍度。

5 結(jié)語(yǔ)

隨著全民健身理念的發(fā)展，運(yùn)動(dòng)類移動(dòng)應(yīng)用程序也迎來(lái)了新的發(fā)展機(jī)遇，但同時(shí)也面臨著同質(zhì)化、用戶體驗(yàn)感不佳的困境。文章在心流理論的指導(dǎo)下，探究孕期運(yùn)動(dòng)類App 沉浸式色彩體驗(yàn)的方法，為設(shè)計(jì)實(shí)踐提供了可靠依據(jù)，證明心流理論與孕期運(yùn)動(dòng)應(yīng)用程序結(jié)合的重要意義。希望今后在孕婦運(yùn)動(dòng)的問(wèn)題上，能夠給孕婦提供實(shí)質(zhì)性的幫助，為孕婦提供更加愉悅的運(yùn)動(dòng)體驗(yàn)，提高孕婦群體的生活質(zhì)量。