基于心流理论的美育类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.