基于H5移动学习平台界面的情感化设计研究

摘要：数字化学习资源在移动学习领域受到了广泛关注和应用，数字化学习资源的开发和设计也是当下教育研究的热点话题之一。通过HTML5（以下简称“H5”）技术开发的移动学习平台的界面情感化设计，具有交互性和情感化的双重特点，增强了学习体验，促进学习者更加有效学习。基于此，本文介绍了情感化设计和H5移动学习平台，阐述了移动学习资源设计的理论基础，并从视觉层面、交互层面、思维层面，提出了基于H5移动学习平台界面情感化设计原则，最后根据本能、行为和反思水平的设计层面，分别总结出了相关策略，以期为移动学习发展提供理论参考。

关键词：移动学习；H5移动学习平台；界面设计；情感化设计

移动学习平台为方便大众能够随时随地利用通勤、排队等碎片化时间进行学习。目前，市面上涌现了大量功能强大的移动学习平台，但其界面设计存在着风格单一、图像呆板、布局固化等问题。而基于H5移动学习平台的界面情感化设计能够增强学习者的体验，能帮助学习者有效、有趣、人性化地学习。

一、相关概述

（一）情感化设计

情感是人类价值观和判断力形成的基础[1]。所谓的情感化设计，就是通过形状、色彩、肌理等各种要素，将情感融入设计作品中[2]，在使用产品的过程中，激发消费者对此的联想，产生共鸣的同时，获得精神上的满足和情感上的愉悦[3]。情感化设计（Emotional Design）是展现以人为本的设计理念，强调在产品的设计和开发过程中将情感体验充分融入作品的每一个细节中，因此学习者在使用产品的过程中能够感受到舒适、满足和快乐，进而提高产品的学习者体验和口碑。

（二）H5移动学习平台

H5，即Hyper Text Markup Language 5的缩写，是一种构建Web内容的语言描述方式。目前，H5开发平台很多且功能越来越强大，集成了“前后端”所需要的大部分功能，可以实现零代码制作[4]。作为支持移动学习的工具，H5移动学习平台的无需下载、即点即用和交互功能为学习者带来了舒适的学习体验。H5移动学习平台能够根据知识点确定学习内容，以关键点贯穿重难点、以优化教师授课、以学生自主学习为目的，从操作界面、程序灵活性和教育思想等各方面，提供更有效的学习课件和学习工具，也为教育信息化改革提供了新途径。

二、H5移动学习平台界面情感化设计的理论基础

（一）人本主义理论

情感化设计注重人的感受和体验，与人本心理学有着十分紧密的联系。人本学派强调人的本性及其主观经验的重要性，主张心理学必须从人的本性出发研究人的心理。马斯洛提出的需求理论由低级到高级分别是生理的需要、安全的需要、归属与爱的需要、尊重的需要、自我实现的需要。其中，归属与爱的需要、尊重的需要和自我实现的需要都反映了H5移动学习平台界面情感化设计的不同层次水平。

（二）联通主义学习理论

联通主义认为学习是连接专门节点和信息源的过程，而这个学习过程仅仅只是人本身的活动。联通主义知识观的核心理念在于知识被视为一种动态变化的过程，以片段形式分布于网络之中。相应的学习观念则强调学习是一个连续的、知识网络形成的过程，在这个过程中，人与外部关系的建立和知识网络的建立显得尤为重要[5]。H5移动学习平台运用联通主义学习，以学习者为起点，组成个人的网络。联通主义关注外部知识源的联结，而这个联结需要依靠承载学习资源和学习材料的设备，那么H5移动学习平台作为移动学习的载体之一，其界面情感化的设计与知识的结网连通息息相关。

（三）多媒体学习理论

多媒体学习是知识构建的重要环节，强调学习者需主动积极运用视觉与听觉途径，将新知识与原有的知识体系进行有效地整合。但是，一旦视觉、听觉通道产生过多需要加工的元素，就会对学习产生阻碍作用。理查德·梅耶的多媒体学习理论[6]重点探讨关于学习、教学和技术三方面的关系，即探讨人类学习机制、协助他人学习的方法以及多媒体学习资源设计。这一理论以其简洁明了、实用性强之特点，能够有效指导H5移动学习平台界面情感化设计。

三、基于H5移动学习平台界面情感化设计原则

2005年，美国心理学家唐纳德·诺曼（Donald Arthur Norman）在《情感化设计》一书中从人类脑部运作的观点提出情感设计理论，认为人的大脑运作可分为本能的、行为的、反思的共三层次[7]。实质上，他将设计分为本能水平的设计、行为水平的设计与反思水平的设计。因此，H5移动学习平台界面需要围绕视觉层面、交互层面、反思层面三方面分析设计原则。

（一）视觉层面原则

视觉层面包含了从内涵、图形、文字、布局和色彩五个因素[8]对H5移动学习平台界面的情感因素进行分析。色彩是人类表达情感的媒介，属于APP外在的视觉表达[9]。在情感化设计时，H5移动学习平台界面首先需要确保视觉层面达到舒适、美观的效果，符合当下的审美观念，并注入积极正向的情感。因此，针对这五点提出以下视觉层面的具体要求：内涵丰富、图形简洁、色彩合理、文字精准、布局合理。根据移动学习“片段性”的特点，H5移动学习平台界面设计在视觉层面应当遵循页面舒适美观、内容短小精悍的原则。

（二）交互层面原则

在H5移动学习平台界面情感化设计中，交互层面的设计同样至关重要。为了提高学习者体验，提出以下具体要求：功能性明确、理解性简单、使用性友好。H5移动学习平台界面的交互属于人机交互，要求界面简单大方、有条理以及有清晰明确的指示。若H5移动学习平台的界面混乱不清，容易导致错误操作，不便于学习者的学习。一旦H5移动学习平台界面设计过于繁琐，势必会将众多潜在学习者阻隔在外。因此，在符合学习者的操作基础上，界面的设计需要在交互的时候展现出情感态度。例如，在学习者进行作答时，回答正确可以设置动态界面或者图标提示。由此可见，H5移动学习平台界面情感化设计在交互层面应当遵循传递有效信息、及时反馈交互信息的原则。

（三）反思层面原则

为了在H5移动学习平台界面情感化设计中更好地体现反思层面，提出以下具体要求：情感记忆鲜明、愉悦度高激发学习者学习兴趣。H5移动学习平台界面的情感化设计需要做到以下三点：

1.促使学习者对当前界面产生感知，赋予其可控性，建立操作预期，从而降低迷茫与等待的情绪；

2.让学习者感知当前界面，满足学习者的个体归属感、尊重感，以最终满足自我实现的需要；

3.真正关怀学习者，以“活”的界面去嵌入移动学习当中。

由此可见，H5移动学习平台在界面情感化设计应当遵循感知学习者的体验、满足学习者的个体归属感的原则。

四、基于H5移动学习平台界面情感化设计策略

H5移动学习平台往往具备精美的视觉界面设计、顺畅的交互体验以及激发学习者情感共鸣的元素。基于此，下文依据本能、行为和反思水平的设计层面提出了基于H5移动学习平台界面的情感化设计策略。

（一）本能反应的唤醒：视觉元素的情感化设计

界面设计应当考虑到内涵、色彩、图形、文字与布局五个要素的搭配和运用，以达到情感化的目的。本能层直接反馈的是视觉感官的刺激，对应H5移动学习平台外在的美观性，以学习者的视觉感受为中心的同时，以学习者审美特点为需求。

1.设计具有典型性和代表性图标形象

在视觉层面上的情感设计，需要设计具有典型、有代表性的图标形象，赋予学习者熟悉的视觉感受，通过设计有代表性的IP形象或者具有学科特色的logo标志，达到视觉识别和即刻认知的效果。例如，“欢乐苗绣”H5案例采用了重庆彭水苗族的绣花图标，结合苗族绣娘IP形象贯穿整个页面。学习用户打开即可感受到苗绣文化带来的视觉冲突，直接明确学习主题，点击页面便能在线结合设计专属的绣帛，传承苗绣技艺。

2.依据学习内容统一色彩和风格基调

设计人员需要依据学习内容，明确和统一整体界面的色彩和风格基调，强调规范化设计；采用动画效果展示设计情感化冲突，注重趣味性和情感表达相融合，使学习者能感受到H5页面所传达的知识内容及所蕴含的文化精神内涵。例如，“春天飞花令”H5案例以诗词的形式，整体色彩为绿色，风格基调统一为春日景色，大背景采用卡通风景，有柳絮舞动、细节飞花的画面，让学习者能够感受到中国诗词的美好和中华文化的精神内涵。

（二）行为互动的建立：交互体验的情感化设计

1.支持人机交互反馈和学习数据记录

行为层注重的是交互操作和即时反馈，对应H5移动学习平台层面中人机交互的操作性，以学习者的流畅体验为界定标准，实现视觉、交互与反思层面的平衡。没有及时反馈的交互不属于真正意义上的交互。要想达到人机交互必反馈的目标，设计人员需要设计有趣的交互效果，让学习者可以与页面进行互动，以增加学习者的参与度和黏性。例如，学习者可以使用滑动屏幕、点击按钮等方式来触发动画效果或者交互式学习游戏等。同时，在使用H5移动学习过程中，平台支持有效记录学习者的在线学习情况，并形成过程性学习数据。

2.契合学习者的需求以突显学习成效

在交互层次的情感化设计，设计人员需要以客观事实为基础，适合学习者的需求和明确学习的任务要求，进行符合预期的设计，以达到基本成效。与Flash技术制作的交互课件不同，H5移动学习平台能将各种课件形式融合起来，实现图文并茂、音视频有机结合。具体来说，学习者可以在课堂中或者随时随地通过扫二维码的方式，访问H5课件进行移动学习；教师则可以在H5课件中展现的关键点知识、设置专项练习或布置作业，明确学习要求的教学，更易于让学习者接受和理解，也有利于提升学习成效。

（三）思维认同的深化：思维层面的情感化设计

1.引起学习者情感共鸣以加深情感记忆

设计人员需要结合学习内容，以故事化、情境化的方式引发学习者的共鸣，使得学习者在使用H5移动学习平台时，不仅能够获得知识，还能在情感上产生深刻的记忆。设计人员可以运用场景、角色等元素，构建学习者与内容之间的情感联系，让学习者在学习过程中产生代入感，从而加深对知识的理解和情感的记忆。例如，由腾讯和共青团中央联手打造的H5案例——“70年，能为祖国做些什么？”，先以视频的形式展示祖国发生的巨大变化，后运用一镜到底的长图形式讲述祖国一些系列大事件，引起学习者爱国情和自豪感两者的强烈共鸣，号召学习者担任起中华民族伟大复兴的时代使命。由此可见，设计人员需要以媒体工具为媒介，真正地引起学习者情感共鸣，以此加深其情感记忆。

2.强化学习者高阶思维以促进深度学习

在H5移动学习界面设计中，如何呈现学习内容背后的深层精神、文化内涵，激发学习者的深层思考和高阶思维，是迫切需要去解决的问题。设计人员需要给予学习者智能化、个性化的界面设计，从情感价值观念上给予学习者正向情绪引导，运用象征、隐喻和故事等手法，增强界面的情感内涵，以达到深层多次交互的学习，促进深度学习。例如，“中华传统节日”H5案例以互动问答的形式，引导学习者深入了解我国传统节日的由来、习俗和意义。设计者运用丰富的视觉元素和文字描述，展示了节日背后的文化内涵。学习者在完成问答的过程中，不仅提高了自己的文化素养，还对中华传统文化产生了更深入地思考、认同和热爱。由此可见，基于反思水平的情感化设计与价值引导能够强化学习者的高阶思维，促进其深度学习。

五、结束语

H5移动学习平台界面情感化设计是提升学习者学习体验的重要手段，在一定程度上能够提升学习的交互性、沉浸性，并赋予H5移动学习平台生命力。在实际应用中，设计人员需根据具体的学习内容、目标群体和教学场景，灵活调整和优化情感化设计策略，通过情感化设计，让H5移动学习平台成为学习者喜爱的学习工具，注重学习者的情感反馈，使新媒体时代下的移动学习更具人性化和生动性，助推教育信息化进一步改革和发展。

作者单位：归妙玲 北部湾大学

参考文献

[1]Helander，M.G，ThamM.P.（2003）.Hedonomics-afFectivehumanfactorsdesign[M].Ergonomics，46（13/14），1269-1272.

[2]许利剑.情感化设计的评价指标研究[D].南京：南京理工大学.2008.

[3]李征. 情感设计与人本设计[J]. 装饰，2004（6）：15-15.

[4]莫葵凤，郑小军，朱育贤，等.H5移动微课的创新设计与快速开发[J].中国教育信息化，2019（4）：34-36.

[5]马丽琴.移动学习资源设计与开发[J].教育信息化论坛，2019，3（07）：80-81.

[6][美]理查德·E·迈耶著.多媒体学习[M].牛勇，邱香译.北京：商务印书馆，2006.

[7]唐纳德.诺曼.设计心理学[M].北京：中信出版社，2003.

[8]赵亚伟.手机APP界面的情感化设计研究[D].济南：山东大学，2014.

[9]蓝子易.基于情感化设计的APP界面设计研究[D].唐山：华北理工大学，2022.