基于心流理論的美育類APP 設計研究

劉建軍　李思熠　馮佳寧

摘要：研究可優化美育類App用戶體驗與學習效果的設計策略。從心流理論的視角出發，結合案例深度分析用戶在使用美育類App時的心流體驗，梳理出適于美育類App的設計思路。構建以心流理論為基礎的美育類App設計策略，為美育類App的設計提供了新的設計思路，豐富素質教育的在線教學支持體系。

關鍵詞：心流體驗；美育類App；用戶體驗；界面設計；設計策略

中圖分類號：TB472 文獻標識碼：A

文章編號：1003-0069（2024）10-0126-04

引言

隨著教育改革的不斷深化與全面發展素質教育的時代背景下，美育對培育高素質人才越發重要，呈現良好的發展趨勢。美育類App為人們提高藝術素養創造了更多機會，促進著美育教育資源的普及。但是當前的美育類App 普遍存在一些共性問題，如學習形式單一、功能不夠完善、用戶體驗較差等。將心流理論引入美育類App 設計研究中，將相關知識與美育特征結合分析，同時考慮美育學習者的學習動機等因素，構建一套科學規范的設計策略，將為美育類App 的用戶體驗、學習效果帶來了積極影響，為美育類App 的設計提供了參考思路。

一、心流理論的概述

心流理論用于定義一種人們完全專注于某件事情或某種活動中，而感知不到周圍事物存在的狀態，于1975 年被美國心理學家米哈里·希斯贊特米哈伊（Mihaly Csikszentmihalyi）初次提出。隨著社會發展水平的進步，此理論不斷豐富并應用于各類移動應用設計實踐中。

米哈里將心流理論概括為9 個特征：（1）清晰明確的目標；（2）確切且即時的反饋；（3）能力與挑戰相當；（4）行動與意識的融合；（5）注意力的高度聚集；（6）對活動有可控感；（7）自我意識逐漸消散；（8）對時間的感受不真實；（9）發自內心地參加活動[1]。Novak 等人將這9 個特征歸納為產生心流的3 類因素，即條件、體驗與結果[2]，如表1。在這3 類因素中，條件因素能夠被人為制造與控制[3]，即條件因素中的3 個特征都實現了，就能夠促發心流體驗。

二、心流理論應用于美育類App的意義

新時代我國深化教育教學改革，相繼出臺相關文件引領教育重心由應試教育轉向全面發展素質教育，見表2。而美育是發展素質教育中的關鍵一環，對德育、智育、體育、勞育有著積極作用[4]。隨著雙減政策落地，以及藝術、體育進中考等新規出臺，我國對美育的需求空間將逐步打開。同時因“互聯網+ 教育”的推進，學習方式不再局限于線下。

將心流理論運用在美育類App 設計中，促發心流體驗產生，對于學習者而言，學習者能專注于內容的感知和消化，美好的體驗與具有美感的學習內容相輔相成，藝術與審美素養得到有效提升；對于產品而言，心流理論的合理運用能彌補產品在技術方面的欠缺，是抓住用戶的關鍵因素[5]，能夠健全美育類App 的發展空隙，推進在線素質教育資源的優化。

三、心流理論在美育類App設計中的設計分析

“洪恩小畫家”是一款專注于提升兒童美術素養的美育類App，基于條件因素深度體驗這款App，筆者認為其在學習內容情境化、任務的分層引導、聽覺反饋等關鍵功能有著值得我們參考的地方，但是在促發心流體驗方面仍存在不足：（1）獎勵反饋形式較單一，只有簡單的圖文形式，用戶持續學習的動力不足，成就感尚待提高；（2）難度分級較少，用戶無法根據自身水平選擇適宜任務，缺乏對任務的可控感，能力與挑戰達不到動態平衡；（3）指引提示不可二次觸發，對于想要再次學習的用戶而言需要花更多時間摸索，完成目標的過程容易中斷。

（一）情境化的學習場景構建

“看懂藝術”板塊旨在使用戶親臨藝術家的創作現場，將重要的藝術知識有效地映射在生動形象的插畫中，并且在插畫的表現上體現了一定的空間感，模擬現實的空間場景，如圖1。用戶通過視覺動線的變化追隨故事情節發展，如先以第一人稱視角前往藝術館看展，在了解到某件作品后，將進入該藝術家的居所與其深度對話，利用視、聽覺的相互配合和層層遞進的故事情節，將藝術知識變為一幕幕趣味生動的場景，營造藝術學習的氛圍。此外，界面中在適宜的時間點添加了互動環節，提升用戶的參與度，從而增加用戶注意力的穩定性。

這種情境化的學習方式增添了用戶學習藝術知識過程中的趣味性和沉浸感，連續性的場景化學習活動將知識與對應情景有效地聯系起來，促進用戶對知識的理解與內化，減輕了其學習的心理負擔與挫折感。

（二）線上線下相結合的游戲性創作模式

在“魔法涂色”板塊特別引入了游戲性的創作機制，增加了用戶進行美育創作時的趣味性和滿足度，見圖2。首先，頁面展示了連續性的大自然主題場景圖以及各個填色狀態為空白的小動物；其次，當用戶用紙筆畫出某個對應的動物并涂色后，可以用移動設備拍照上傳，畫面中對應的動物即變為彩色狀態，并展示動畫表演，將現實中的圖畫生動地投射在二維畫面中；最后，用戶能夠對畫面中已填充的動物進行喂養、打掃等操作，參與到模擬經營的小游戲中。

用戶通過努力逐一填充、豐富自己的場景，體會到從零到有的成就感，會珍惜通過努力獲得的成果；模擬經營的游戲機制也帶給用戶持續性的滿足感，用戶與產品形成了情感聯結，從而增加用戶黏性。

（三）任務清晰化的分層引導

“洪恩小畫家”的分層引導出現在每項任務的開始之際，幫助用戶明確任務在每個關鍵節點下的目標，循序漸進地完成了學習任務，如圖3。開始任務前，將任務進行清晰化的步驟拆解并排序，同時出現對任務內容的語音解讀，通過圖像、聲音、文字相結合的方式幫助用戶理解任務內容；正式開始任務后，手勢圖標與虛線框出現在任務的待完成區域，并展示相應的手勢移動路徑，進而引導用戶正確操作，有效地降低了新用戶的操作門檻，對用戶產生持續學習行為產生很大的幫助；當用戶熟練后，在使用過程中即可擁有更高的自由度。

（四）任務完成前后的激勵反饋

在“創意畫廊”板塊，分別采用了情景展示與彈窗，在用戶任務完成的前、后階段予以反饋。當任務完成前，通過展示完整的主題場景圖，向用戶呈現完成所有創作內容后的完整畫面，激勵用戶解鎖更多任務以填補畫面空缺，如圖4；當任務完成后，界面彈出對應的完成狀態彈窗，反饋任務的完成情況，使用戶清楚當前任務的所處階段，如圖5。

但是，彈窗作為一種完成創作任務后的激勵反饋，表現形式較為單一，僅以文字形式展現，而未完成下的懲罰機制還較為模糊，缺乏用戶學習行為與回報之間的聯系，帶來的成就感不足以驅動用戶持續學習。

（五）利用背景音效營造美育氛圍

研究表明，背景音樂影響著個體在學習過程中的認知水平與情緒[6]。絕大多數學習類App 僅在聽課環節賦予背景音效，但是“洪恩小畫家”將背景音樂貫穿在用戶使用App 的全程，在不同功能場景下利用背景音效的變化調動用戶情緒，增強了用戶對產品功能的感知，為美育活動營造了合適的氛圍。

一方面，背景音根據主題而變化，比如在汽車總動員主題的音樂是活潑愉快的，輔以車輛的鳴笛聲，在海底世界主題中則搭配奇異風格的音樂，輔以氣泡與水流的聲音。另一方面，會根據任務階段而變化，剛開始任務時，平緩的音樂變為輕快短暫的音效，以振奮、激勵用戶，當完成創作時，則出現慶祝風格的音效以表示對用戶完成任務的肯定，加強成就感。

另外，每點擊一次屏幕中的按鍵，也會觸發音效，而不像傳統的物理交互一樣沒有任何反饋。例如，當用戶點擊某一畫具或色卡時，語音會實時念出對應名稱，幫助用戶更好地理解聲與形的對應關系，與產品建立更強的交互感，增強用戶黏性，并作為一種指導手段，輔助用戶進行持續且正確的操作，強化正面反饋。

（六）其他提升用戶體驗的因素

1. 舒適的界面設計：通過飽滿豐富的色彩，調動兒童情緒，培養創造力與想象力；借助生動形象的插畫替代單一文字，直觀體現產品的功能價值，也潛移默化地為兒童帶來美的認知；采用大量的圓角處理，在視覺上給人的感覺也更活潑可愛、安全舒適。

2. 清晰的信息架構：首頁通過清楚明確的信息架構將功能劃分，迎合了用戶繪畫創作、學習藝術知識的不同需求，減少用戶分心的可能性，幫助用戶快速做出決策，減輕用戶對產品功能摸索的時間成本與認知負荷。

3. 遵循兒童的認知水平。App 定位于兒童美育啟蒙，在任務設計上始終圍繞著兒童的認知特性，嚴格遵循兒童的認知水平與發展規律。通過進行合理的信息布局，嚴格把控兒童注意力的分配，加強其注意力的穩定性，運用豐富的色彩、音效促進兒童感知覺發展。

四、基于心流理論的美育類App設計策略構建

在洞悉美育特點的基礎上，筆者通過分析用戶在滿足心流條件下觸發的體驗感受，以促發美育學習者的心流體驗為出發點，并考慮對用戶學習動機的影響，構建了一套包含4 個維度14 條設計原則的美育類App 設計策略，如表3。

（一）清楚可執行的學習目標

清晰可行的目標能夠使用戶保持學習狀態：在設計美育類App時，充分調研目標用戶的求知需求、興趣愛好以及外界的獎勵、監督或競爭等[7]，減少用戶的學習成本，助其更快發生心流體驗。

1. 精準的用戶人群定位：美育的學習群體較廣，因此，要對用戶范圍進行界定，重點關注他們對藝術的情感態度與學習需求。對用戶的充分調研能夠建立清晰的用戶畫像，進而準確把控設計方向，明確美育類App 的視覺風格、功能規劃、信息設計等內容。

2. 明確的美育目標分類：將美育目標明確分類，能夠準確傳達產品的功能價值。美育類App 的學習目標分為知識型與實踐型，其中知識型以課程為主，可以是視頻、文本或插畫等，用戶通過“看”的方式 實現藝術知識拓展、審美素養提升等目標；實踐型以任務挑戰為主，用戶主要以“做”的方式完成相應任務，例如，填色、描邊、寫字、創作等，掌握相應的藝術技能與技巧。

3. 邏輯清晰的流程設計：美育應當遵循由淺層學習到深度學習的認知過程，通過拆解目標步驟，制訂合理順序，提升學習效率與學習效果，最終使學習者習得信息并能夠進行有效創造。若流程不合理，會使心流體驗效果下降[8]。

4. 直觀易懂的指令引導：做好任務的分層引導和提示，有助于降低用戶的操作門檻與認知負擔，使用戶感受到產品釋放出的友好態度，對知識的進一步獲取更有動力。

需要注意的是，美育不是考核性活動，在完成任務過程中應予以用戶更大的包容度和容錯率，同時強化引導提示的易讀性與視覺效果。

（二）確切且有時效性的反饋

確切即時的反饋有助于行動順利推進。在美育類App 設計中，需尤為關注交互行為反饋、視聽覺反饋、獎罰反饋對用戶體驗及用戶行為的影響。將這些反饋機制相互結合，共同為用戶創造良好的美育學習體驗。

1. 正確及時的交互行為反饋：交互反饋要體現產品想傳遞的情感態度，考慮目標用戶的期望與體驗。例如，用戶點擊收藏按鈕可觸發相應圖標的色彩變化與簡單動效；使用不同的畫筆會呈現不同的筆觸效果；還可模擬現實中操作按鍵所獲得的振動、移動等物理反饋，在App 的交互反饋上還原這種真實感，增強產品使用感。

予以用戶及時的交互反饋，不但能幫助用戶認清當前在應用中的所處位置，進行有效判斷并做出決策，還能避免錯誤操作，加強用戶與產品間的交流。

2. 符合美育情境的視聽覺反饋：視覺反饋，包括色彩的適時變化，學習進度展示與時鐘顯示等；聽覺反饋，包括不同功能下的背景音樂、點擊音效、語音引導等。不同情境需要采用適宜的視聽覺反饋來調動用戶情緒。但是，視聽覺反饋要遵循一定的規律，如當目標達成時通常使用喜悅積極的音效，操作不當時或錯誤時使用的是帶有警醒意味的音效。多樣化的視聽覺反饋能激發用戶興趣、增強注意力，激起其情感共鳴。

另外，美育內容豐富，如音樂、繪畫、書法、自然等，都屬于美育的范疇。視聽覺反饋可根據產品功能有所側重，如音樂教育類App 可更多地考慮背景音樂對學習認知的影響機制，而美術教育類App 可更側重于研究視覺效果。

3. 目標達成情況的獎懲反饋：獎懲反饋影響著用戶的學習動機，當用戶每完成一項任務，可通過趣味的動畫、獎勵有紀念性的勛章等方式，帶給用戶驚喜感與成就感；而當用戶未完成或者中途放棄，可通過積分減少、“未完成”等帶有遺憾、警示意味的表現形式來激勵用戶再次學習。

但是懲罰機制不宜過度，美育應當在輕松、愉悅的心境下進行，懲罰機制要在用戶的心理承受范圍內，避免給用戶造成一種挫敗感而流失用戶。另外，為了增加用戶實現目標過程中的趣味性，可以在獎懲方式中參考游戲里的反饋機制，將美育的理念投射在游戲中，利用游戲對人的情緒及認知的積極作用，增加用戶與產品的互動。

（三）學習者能力與接受的挑戰相當

學習者的學習效果與其認知水平有關，過于困難或者過于簡單的挑戰都不利于心流體驗產生，要充分考慮目標用戶的能力范圍。但是用戶的需求存在個體差異，挑戰應在滿足提升美育素養這一整體需求的同時，又有個性化的區分。當用戶的能力與其接受的挑戰相當時，將更容易集中在內容本身，體驗到美育學習為其帶來的積極效應。

1. 規范有效的測評機制：在美育類App 設計中，應重點構建課前與課后兩個階段的學習者能力測評機制。從用戶層面來說，有助于用戶客觀認識自身薄弱點與優勢；從產品層面來說，有利于推進完善產品功能，提供更精準化的美育教學服務。

在課前測評機制中，可創建美育知識題庫，分析用戶答題情況，助其選擇更適宜的學習目標；在課后測評機制中，則提供課后測驗或關卡游戲，評估近期學習效果。另外，可提高人工智能等技術力量在美育類App 中的參與度。以“美育助教”App 為例，其增設了AI 繪畫測評與美育測評功能，見圖6，用戶通過模擬練習，自我檢測近期學習效果，還可以拍照上傳自己的藝術作品，獲得專業性點評，從而客觀了解自身不足并有針對性地調整學習方向。

2. 科學合理的美育目標分級：一方面，不同用戶的藝術素養等客觀條件存在差別，學習目標受興趣愛好等主觀條件的影響；另一方面，同一位用戶經過階段性學習后的能力水平也會有所變化。提升藝術素養是長期過程，對學習目標分階分級，將難度較大、過程較長、內容較多的目標拆解，有助于用戶堅持學習，擁有對挑戰的可控感，逐步實現自我提升。

以“河小象課堂”App 為例，每個課程都被拆解為數個時間較短的小課程，用戶只有當完成當前課程后才可解鎖后面更多課程，學習的時間、難度被拆解為適宜水平，有助于用戶堅持學習計劃，見圖7。

3. 易于操作的交互方式：在美育類App 設計中，交互不合理或過于復雜都會讓用戶失去耐心。例如，用戶需要經過多個層級才能到達學習界面，或者完成任務的交互方式不易于執行。應當將交互流程簡化，提高交互效率，避免增加用戶操作門檻，使其專注于目標本身。

4. 個性化的任務推薦：用戶需求分為外在與潛在需求，其中潛在需求能賦予產品感性價值，讓用戶對產品發生共鳴[9]。實現個性化的任務推薦，既要通過充分調研完善產品功能，滿足外在需求，又要注重用戶的心理滿足、興趣偏好等潛在的情感層面需求，為其推薦適宜任務。

（四）以學習者為中心的用戶體驗

除了引發心流體驗的條件因素之外，美育類App 在設計時還要以學習者為中心，重點關注影響用戶體驗的積極因素。

1. 對學習者友好的用戶界面：在色彩上，可通過主題色達到界面的視覺一致性；在風格上，美育強調創造性，可賦予更加趣味的交互形式、圖標、動效；在頁面布局上，各個模塊的比例應當合理，布局有一定的透氣性，減少不必要的內容堆砌，借助卡片式設計、飽和度與字重的變化區分信息優先級，讓界面中的各個元素之間發揮最大作用與效率，使用戶能夠有效地提取信息。

2. 融入情感化設計：美育是充滿感性的教育活動，在美育類App 設計中融入情感化設計能夠減少用戶在使用產品時的消極情緒[10]。可考慮色彩、圖形、音樂對情感的作用機制，以提升用戶的情感體驗。

美育類App 的情感化設計應發力于界面設計與目標設計中。例如，在界面設計中，使用圓角、圓潤的字體使用戶感到安全放松；在目標設計中，增設適時的語音、圖文提示，使用戶感受到產品的友好態度。

3. 沉浸式的美育學習場景：美育作為一種創造性的活動，更注重情境與內容的結合，可利用增強互動、游戲化機制、虛擬現實技術等方式增強沉浸感，來平衡在線學習互動性的不足。當用戶完全沉浸于學習中，將促使心流體驗發生，表現出身體與心理融合、享受知識與情感的收獲等特征[11]，形成習得信息與使用信息的認知閉環。

結語

作為全面素質教育的組成部分，美育在近年來得到普及并且不斷發展，但是美育依然是我國教育中的薄弱環節，美育類App 還處在不斷探索與發展階段。從心流理論的視角下研究美育類App 的設計，基于心流理論的條件因素構建一套適于美育類App 的設計策略，能夠為優化美育學習體驗、學習方式及學習效果提供新的視角，賦予其他美育類App 的設計一定的參考意義，豐富素質教育的在線教學支持體系。未來的研究工作將會對美育學習者的需求進行深度挖掘，并從交互設計、用戶體驗的視角進一步完善。

基金項目：國家社會科學基金“十四五”規劃2021 年度教育學一般課題“突發公共事件下中小學校外教育空間應急適應性研究”（項目編號：BGA210056）

參考文獻

[1]CSIKSZENTMIHALY I，MIHAL Y. Flow：the Psychology of Optimal Experience[M]. New York：Harper & Row，1990.

[2]NOVAK T P，HOFFMAND L. Measuring the Customer Experience in Online Environments：a Structural Modeling Approach[J]. Marketing Science，2000，19（1）：22-42.

[3]賀薔錕，何人可.基于心流理論的移動學習應用交互設計研究[J].包裝工程，2018，39（04）：188-192.

[4]周德昌，江月孫.簡明教育辭典[M].廣州：廣東高等教育出版社，1992-01.

[5]楊心月，任利民.基于心流理論的健身類APP設計研究[J].設計，2022，35（11）：119-121.

[6]胡棋君.背景音樂影響個體學習效果[J].大眾心理學，2022（11）：2-3.

[7]楊澤航，朱文濤.心流體驗為主導的知識型APP體驗設計研究[J].設計，2021，34（05）：41-43.

[8]趙詩凡，沈雷.基于心流理論的兒童智能手表交互界面設計研究[J/OL].包裝工程：1-11.

[9]李民.尋找用戶潛在需求的新方法[J].機械設計，2013，30（06）：104-106.

[10]梁麗.基于情感化設計的教育類APP界面設計研究[J].大眾文藝，2021（15）：57-58.

[11]杜二敏.具身認知視角下沉浸式學習的發生機制探析[J].寧波大學學報（教育科學版），2022，44（02）：30-37.