交互设计在网络课程界面中的应用研究

李华珍

摘要：网络课程是重要的在线教学资源，科学的交互设计可有效提升网络课程质量，优化学习效果。作者从交互设计的角度出发，结合国家精品课程中的典型实例，从网络课程界面交互设计的原则、视觉要素和策略三个方面对其进行阐述和说明，形成教学交互良好的网络课程界面，为优质网络课程设计与应用提供实质性策略和可行性方法。

关键词：网络课程界面;交互设计;视觉要素;原型构建;认知匹配

中图分类号：G434  文献标识码：B  论文编号：1674-2117（2020）08-0108-04

引言

网络课程由教学内容和网络教学支撑环境两部分构成，其媒体内容丰富、交互功能多元，具有共享性、灵活性和生动性等特点。[1]网络课程目前已成为教育领域重点建设的资源形式，尤其在高校网络教育、国家精品课程和开放教育中占主导地位。但目前很多网络课程的质量良莠不齐，一些设计者忽视相关理论依据，使得存在问题的网络课程仍在传播，造成学习者视听负担和认知負荷超载，进而很难发挥网络课程的优势。

一门优质的网络课程其设计应体现有用性、科学性和认知负荷合理性，以形成良好的学习体验。而交互设计是研究活动参与者和具有反馈性物体之间的信息交流，以优化用户体验。由此可见，这两者的目标一致。网络课程中的多元视觉符号是实现交互功能的载体。交互设计中的诸多原理可用于网络课程的设计，笔者从交互设计的角度，结合国家精品课程实例，从网络课程界面交互设计原则、视觉要素和设计策略三个方面对其进行阐述。

网络课程界面交互设计原则

网络课程界面是指人与计算机之间借助网络平台所呈现出的教学信息界面以及人机交互的媒体[2]，其目标是通过良好的交互设计来满足学习者需求，以促进有效学习。界面设计是网络课程设计的重要环节，其质量决定了网络课程的质量。[3]其中，可用性和易用性是衡量网络课程界面呈现效果的重要指标，它们能够使界面形成良好的交互体验，让学习者感到舒畅。界面在可用性和易用性上强调导航功能的科学性、全面性、层次性等。交互设计中对界面交互的研究，有助于我们对界面有用性和易用性的精准设计。例如，界面交互中关于简单化人与界面之间的交流，采用简洁清晰的界面设计风格和全面易操作的功能导航，有助于学习者流畅地完成学习任务，形成良好的自主学习环境。

1.可用性的交互设计原则

在交互设计领域，可用性反映产品能否以正确的方式提供合适的功能，以及能否让用户有效使用该功能并获取满足感。[4]可用性会影响学习者的使用满意度，其能够体现导航功能的全面性、流畅性和直观性等特点，进而影响学习者的学习体验。当界面的可用性较低时，学习者会产生不自在甚至厌烦的情绪，降低对课程的价值认可度，所以，设计者在设计网络课程界面时要充分考虑界面的可用性，课程的导航图标设计应全面而清晰，让学习者能在较短时间内了解和使用课程的操作。例如，国家精品课程《摄影基础课》，呈现了清晰的课程简介和全面的功能导航。课程界面展现了课程的类别、简介、名称、进度、分享、签到和手机课堂等多种功能图标，能够满足学习者的自主学习和交流互动。此外，这些功能图标设计得十分直白和清晰，学习者只需简单查看即可了解这些导航的功能并进行交互，提升了学习者使用界面的流畅性，为学习者创造了良好的知识建构环境。

2.易用性的交互设计原则

对具体的网络课程来说，易用性是指学习者对网络课程信息容易了解，操作功能易于掌握，认知负荷较低，有着合理的人机交互功能。[5]易用性是界面交互设计的前提和关键，与可用性息息相关，只有充分考虑到易用性，才能够设计出更符合广泛人群操作的课程界面，如《摄影基础课》课程主界面（如图1）。

人们的视觉注意顺序一般是从左往右、自上而下，认知过程则是从整体概念到子概念，该课程模块划分符合人们的视觉顺序和认知特征，左侧为导航模块，体现了整体的功能设计，学习者通过点击图标进入其所属功能进行具体的课件、作业与考试等学习活动。右侧分为两个板块，右上部分显示“开始学习”的醒目图标，右下部分为课程公告，主题和内容层次清晰。采用由左到右、自上而下的排版方式能够很好地适应学习者的视觉过程。课程界面主次分明，学习者能够很容易把握该课程的学习目标和学习活动，便于建立该课程的学习计划。此外，清晰简洁的课程界面有助于减轻学习者的视觉负担，为学习者营造一种愉悦的学习氛围。

网络课程界面交互设计视觉要素

视觉要素是人类接受信息的重要媒介。在网络课程界面中，文字、图形和色彩均是影响学习者视觉效果的重要因素。由于视觉要素能够直接被学习者所感知，其设计的好坏会直接影响界面的质量，进而影响交互体验。正是有了视觉要素的参与，网络课程才能充分发挥其存在的价值，兼具科学性、交互性和美观性，有效传达教学信息，营造舒适自在的学习环境。

1.文字的设计

文字的设计主要包括字体效果、字号以及行间距设置等。网络课程界面中的字体效果有静态和动态之分[6]，动态字体具有立体感，能够随时间或空间的不同而所有变化，主要是用于特定主题的设计，以增强视觉感染力。在界面中文字的设计是课程宣传效果的关键，能够直接影响学习者对课程的兴趣。动态字体的节奏性和运动性能够产生视觉层次感和交互感，设计者可依据宣传效果选择重叠、形变、分层、渐变与旋转等动态处理方法。例如，在《设计的力量》课程界面中，课程名称采用了重叠方法，将不同透明度的文字叠加形成空间感、层次感，打破了字体一成不变的二维平面视觉感受，富有趣味性、交互性，能够更好地引起学习者注意，传递情绪。

2.图形和色彩的搭配

课程界面中对图形的设计包括抽象图形和具象图形。抽象图形表达自由，可用于对客观事物的夸张、变形和联想;具象图形贴近真实事物，容易引起受众的共鸣。色彩有冷暖、深浅的表达方式，一般暖色和深色视觉表现力更强。在课程界面设计中可根据实际需求、课程内容、学习者心理等因素，选用正确的图形搭配以合理的色彩，运用对比、和谐、集中等手法来传达教学信息。例如，中国国画课程，设计者可以结合水墨色特点进行界面的设计，将传统的花卉和山水元素通过具象图形和着色深浅进行调和、对比，用深色表现重要景象，浅色表现模糊形象。通过色彩分明、意境丰富的搭配能够体现国画的深厚内涵与艺术之美。此外，两者的搭配除了体现意境和视觉美感，还应符合客观事实和科学规律。例如，自然科学类课程中，设计者应严格遵守科学规律与自然现象，合理应用抽象和具象图形来展现自然界的生物、环境等，用正确的色彩揭示生物的生长历程、环境的变化等，以向学习者传达正确的科学知识和规律，引起学习者的共识与思考。综上所述，图形与色彩的搭配不同所产生的效果也会不同，设计者应充分利用图形、色彩的表达效果和科学规律予以搭配，形成传达教学信息的良好媒介。

网络课程界面交互设计策略

在网络课程界面中，学习者需求能否得到满足以及认知空间是否超载都会直接影响交互体验。交互设计策略是设计者在宏观层面的设计基准，能够指导整个设计过程，其包括原型构建和认知匹配两方面。原型构建以学习者为出发点，注重学习者特征和反馈，以促进界面的优化;认知匹配主要是减少无关因素干扰以及调节学习任务难易度，以形成良好界面交互体验。

1.原型构建策略

在交互设计中，原型是指对开发的产品和概念加以形象化和具体化，体现了设计者的设计意图。[7]构建原型有助于测试概念的有效性，通过不断地改进和优化，形成最终的概念或产品。在界面交互设计中，设计者以滿足学习者需求为目标，通过原型的构建和迭代，设计出体验效果良好的界面。英国龙比亚大学的大卫·比扬教授提出的PACT模型强调交互服务的目的——为人服务，设计要素包括人、人的行为、学习的情境和支持学习的技术。对于网络课程而言，设计要素应包括学习者（学习行为、学习目标等）、课程环境和软件技术这三个层面（如图2）。

原型构建的主要流程为：确定课程目标→测试学习者初始状态（学习目标、学习行为、学习技术和认知能力）→跟踪、存储与分析学习数据→提供可视化学习决策→调整与改进原型。设计者通过原型构建把设计思想传递给学习者，从数据中得到反馈，并对原型进行调整。其中，学习者层面包括学习目标、学习行为、学习技术和认知能力等信息，课程环境通过合适的软件技术来跟踪、存储和分析这些信息，提供可视化决策。此方法获取的学习者交互行为特征依赖于系统环境。设计者还可添加一些界面功能以获取学习者情感特征如情绪、态度和满意度等，如在课程界面中添加语音（语气、语调、语义）和情绪（带有感情色彩的评语和表情等）的输入功能，及时地了解学习者的界面使用感受，以调整原型界面的视觉和功能设计，进而提升学习成效。

2.认知匹配策略

认知负荷理论认为人的工作记忆有限，学习是通过工作记忆加工信息的过程，当学习任务过于复杂超过了工作记忆容量时，学习效果较差，即出现认知超载。[8]因此，设计者在界面设计中需考量认知负荷的合理性。认知负荷主要有外部认知负荷和内部认知负荷，外部认知负荷是外在学习环境中对学习产生消极影响的负荷，内部认知负荷是由学习资源、学习任务难度和学习者认知水平共同决定。合理的认知负荷可通过降低外部负荷和调节内部负荷来实现，以设计出更加适合学习者认知规律的界面。

降低外部认知负荷主要是从外部环境着手，如设计者可通过减少无关的图片、文字和链接等方式，来防止过度占用学习者认知资源。还可利用学习者的认知习惯、知识基础来规避不必要的认知负荷，如中小学的课程，设计者可借助耳熟能详的事例，如拟人化植物、动物等元素来展示课程内容要点和交互操作，以提升学习代入感和趣味性。内部认知负荷是以学习者的认知水平为调节依据，如可在界面中加入知识前测和阶段性测试功能以确定学习者的认知水平，然后链接至不同难度和复杂度的学习任务导航界面，以充分挖掘学习者潜力进入下一阶段的任务学习。

结语

网络课程作为重要的网络学习资源，其质量能够显著影响学习者的学习效果。交互设计领域为网络课程的界面设计提供了丰富的理论基础和科学实践。本文基于此从网络课程界面交互设计原则、视觉元素和交互设计策略三个层面进行阐述，旨在使网络课程界面能够兼具可用性、易用性、科学性和艺术性等，激发学习者的学习兴趣并匹配学习者认知负荷水平，优化学习过程和学习效果。此外，网络课程界面的设计应该有所变化而不是采用千篇一律的模板，笔者认为设计者可以充分利用信息化时代提供的便捷工具和操作环境，提供更加贴近学习者真实需求和特点的专属设计，从而满足学习者的个性化学习需求，培养创新型人才。

参考文献：

[1]付国艳.网络课程中的交互设计研究[D].石家庄：河北大学，2006.

[2][3]陈迟.网络课程界面设计研究[D].上海：上海外国语大学，2012.

[4]张宝，刘克涛，董磊，等.基于可用性的用户界面色彩研究[J].设计，2017（10）：110-111.

[5]陈岩.产品设计中的易用性研究[J].设计，2015（03）：56-57.

[6]李潇.数字媒介环境下的动态文字设计与编排研究[J].美与时代（上旬刊），2019（07）：84-86.

[7]李世国.交互设计[M].北京：中国水利水电出版社，2016.

[8]陈锋娟.基于认知负荷理论的微视频设计与应用研究[D].武汉：华中师范大学，2015.