交互式在线学习APP界面设计研究——以中国大学MOOC(慕课)为例_

第34卷第3期

2021 年 5 月

Development & Innovation of Machinery & Electrical Products

机电卢品开发与创新

Vol.34,No.3May.,2021文章编号：1002-6673 (2021) 03-145-03交互式在线学习APP界面设计研究——以中国大学MOOC

(慕课）为例阮晓敏！孙亚云(中国矿业大学建筑与设计学院，江苏徐州221116)摘要：伴随数字媒体技术的快速发展，针对“互联网+教育”理念下高校学生广泛使用交互式在线学习

APP的现状，文章以中国大学MOOC (慕课）学习平台为研究对象，立足当前教学实际着眼于APP界面设

计，分别从界面的布局、图形、色彩三个方面进行分析。根据研究进行总结梳理，提出主要面向高校学生的

交互式在线学习APP的界面设计原则，以期为相关设计实践提供参考。d〇i:10.3969/.1002-6673.2021.03.050关键词：交互式％在线学习％界面设计中图分类号：TP31 文献标识码：A

Research on the Interface Design of Interactive Online Learning Application-----A Case Study of MOOC Platform in ChinaRUANXiao-Min，SUNYa-Yun#

AbstractSchool

of

Architecture &

Design，China

University

of

Mining

and

Technology，Xuzhou

Jiangsu 221116,

China):

Along

with

the

rapid

development

of

digital

media

technology，

interactive

online

learning

apps

are

widely

used

by

college

students

under

the

concept

of

n

Internet +

education” .

This

paper

takes

the

MOOC

platform

in

China

as

the

research

object

and

based

on

the

actual

teaching

analysis

interface

layout，

graphics，

color

three

aspects.

The

interface

design

principle

of

interactive

online

learning

APP

for

college

students

is

proposed

according

to

the

research.

In

order

to

provide

reference

for

related

design

ds：

Interface ；

Online

learning；

Interface

design0引言验。因此，探析合理适用的APP界面所具有的特征便显得尤为重要。1中国大学伴随着大数据、移动互联、云计算等技术在各个领域

的不断成熟和普及，信息的传递由原先的单向传递向多

向互动传递发展，促使知识量增长、知识更新周期缩短，

因而充分利用碎片化时间，灵活运用各种网络手段及技

术渠道即时获取知识便尤为重要。基于此，国内掀起了新

一轮教育信息化的浪潮，交互式在线学习类APP在高校

学生及教育者中日渐普及，给传统高校教育带来了机遇

与挑战。交互式在线学习是指利用多媒体计算机技术和网络

技术，在教育者和受教育者之间构建桥路实现交流互动

的新兴学习方式。交互式在线学习APP界面的合理设计

能够利于发布者传达有效信息，受众接收知识，同时也保

证了视觉、心理上的舒适感，为受众带来良好的学习体

修稿日期：2021-03-07作者简介：阮晓敏（1995-)，女，安徽合肥人，中国矿业大学硕

士研究生在读。主要从事文化创意产品设计研究；孙亚云

(1977-)，女，山东勝州人，副教授。主要从事品牌设计、文化

创意设计与市场营销策略研究。MOOC界面设计分析知识经济的火热催生了

M00C这一新型的、开放的

网络教学模式，其被誉为“印刷术发明以来教育最大的革

新”m，M00C所具备的自主性、多样性、开放性、连接性和

互动性使其成为交互式在线学习平台的典型。在国内，有

中国大学M00C(慕课）、学堂在线、ewant育网开放教育

平台等都多个M00C平台。文章选取移动端APP开发较

成熟的中国大学M00C(慕课)为研究对象。1.1界面设计中的风格体现中国大学M00C (慕课）选用了简约主义的设计风

格，简约主义作为现代主义的发展和继承，保留了现代主

义简洁、实用、朴素、美观的设计特点，符合当前大众的审

美趋势和界面设计风格的时代特征。如图1所示，设计摒

弃了厚重繁杂的装饰性线条、纹理、拟物化图标等，使整

体界面保持干净整洁，以扁平化的设计风格突出了要表

达的内容，产品的各类功能及信息清晰明确，能让用户及

时的找到自己要寻找的信息，增加实用性及舒适性。145

•综合研究•Q C•到20000i?汇速记s

t

分必 >-2

离n上

13家KS 艺术设计 经济®■£ =DB窜輯& £术<8计1.2界面设计中

我難Eag的布局界面布局是对

〇〇〇〇〇'碎ffjii学英a界面中所存在的文

字、图形或表格进

詡a:興小《«折行排布、设计[2]。合

理的布局设计在使

^h

91■■8用及视觉感受上给图1中国大学MOOC(慕课)手机端界面#Fig.l

Interface

of

China

Universities 验，因此，界面设计

MOOC

application 时设计者需要对页面中的各种信息进行考虑和推敲，要对用户人群的需求、

行为与信息发布者的传达目标进行综合考虑，以满足不

同使用群体的使用习惯。在“中国大学MOOC(慕课）”的主界面布局中采用的

是宫格布局、列表式布局和分模块布局相结合的布局形

式[3]，例如图2(a)框内推荐栏按钮板块采用的是宫格布局，

图2(b)框内所示“精选”等板块布局采用的是列表式布

局，同时也会结合图2(c)框内分模块布局。这样布局一方

面利用布局形式的组合，使得界面简约而不单调，另一方

面，多利用矩形图片展示内容，显得规范严谨，与MOOC

的教育定位更为符合。另外，这样布局可以让界面显得简

洁清晰，能够将用户的关注力集中在界面信息内容上，利

于信息有效传递。图2中国大学MOOC(慕课）手机端界面

Fig.2

Interface

of

China

Universities

MOOC

application1.3界面设计中图形元素图形是界面设计中占比极大的元素，会直接影响用

户感受，美观实用而有创新性的图形元素在APP的界面

设计中很受欢迎。做好信息与图形之间的相互融合，以图

文并茂的形式给手机界面设计带来独特的视觉体验[4]。在中国大学MOOC(慕课）应用内，其图形元素设计

体现出来差异性、丰富性、柔和美。在内容上，中国大学

MOOC(慕课)融合国内众多高校的大量专业、学科，这些

学科特征在其图标设计上都有一定的体现，充分显示学

科间、各功能板块见的差异性，提升辨识度，进一步使界146面简洁;如图3所示，中国大学MOOC(慕课）中的图标设

计类型广泛，线性、异形、面性都有涉及，将对应功能的图

形进行外在线条的勾勒或颜色填充，形成了丰富的APP

图形元素，增强使用过程中视觉上的舒适度；在界面显示

的图形中，广泛使用圆角矩形取代直角，界面图标设计不

生硬，更具有亲和力，也使整个界面具有一定美感，给使

用者带来较为深刻的印象。我的优惠券

我的赂户余额%我的砍价

00国家精品21600考研 期末不挂期末不挂 名师专栏 英语学习我的团购©我的推广G分享AppAII首页(3我的学习帐号去评分图3中国大学MOOC(慕课）界面图标

Fig.3

Icons

of

China

Universities

MOOC

application1.4界面设计中色彩元素界面设计中选取不同的色彩带给人以不同的视觉冲

击、心理感受，在界面设计中进行颜色的选择和搭配时，

要明确以下两个目的：其一是要通过色彩的对比，使用户

能及时把握界面的重点信息，见图4,在“立即参加”功能键及相关课程价格上选用与

主体色对比强烈的橙色；其二

是美化界面，给用户以舒适感，

甚至可以达到提升学习效率

的效果。UI色彩系统一般分为两

部分：主色调和辅助色调。设

计中对于色彩的应用是规范

性和艺术性的统一。一方面色彩

的选择要突出品牌的特征和优

图4中国大学MOOC

点，产生独一性，完善、提升该品

(慕课）手机端界面

牌的知名度。中国大学MOOC

Fig.4

Interface

of

China

Universities

MOOC

(慕课）主体色选用接近自然的application绿色，广泛应用于LOGO、标准字、导航按钮及其他小功能

键上，带给人以舒适、健康、轻松的感觉，可以适度缓解学

习压力。另一方面结合少量其他色彩，如黄色、橙色、红色

等构成暖性色调。相比色调单一的灰白黑或者冷色调，柔

和、活跃的色彩具有良好的亲和力，舒适感更容易使用户

在使用应用时产生愉悦的心情。2交互式智能在线学习APP界面设计原则基于对中国大学MOOC(慕课）的深人分析并调研了

解多个互动式在线学习APP，总结梳理得出了互动式在

线学习APP的设计原则。2.1统一性原则

•综合研究•对于APP来说，首因效应普遍存在。这也就意味着

其界面上的文字、图形和色彩等细节和局部元素与整体

风格能否做到协调一致，影响着当下的用户体验和后续

的用户使用粘性。恰当的色彩搭配是良好界面设计的基础，图标、文

字、界面分区都要要注意色彩统一性。在同一界面的色彩

使用上，应避免两种以上高对比度，高纯度的色彩搭配，

这样搭配短时间内会吸引用户的眼球，但极易造成用户

视觉疲劳，一定程度上减少用户使用该APP时间和频

率。界面色彩可以用二种色相相近，但纯度、明度有差异

的颜色为主色，再以三种到五种颜色作为辅助色。在保证

颜色统一的基础上，也增加界面的丰富度。在学习类移动端界面设计布局中常采用的是宫格布

局与列表式布局相结合的布局形式。这种布局方式能在

满足用户实际需求的基础上带来良好的视觉感受。2.2这里的扁平化原则包含两个维度的内容，第一个维度

在于图案设计上的扁平化，在图形的选择设计上应该多以

扁平化的简单元素和几何图形如正方形、圆形为主，异形

图案运用应当适度，拟物化图形与扁平化图标在整个应用

中不应混合使用，否则会破坏整体布局，干扰信息识别；另

一个维度在于信息层级的扁平化，过多的层级只会带来用

户的疲倦，一些可以统筹在同一层级的内容应当归纳起

来，减少用户点开的层级数。界面设计中逻辑清晰的层级

划分处理会给用户带来层级分明，内容明确，功能丰富以

及使用舒适等感受。从而赢得使用者的喜爱，促使其继续

使用此款软件进行相关的知识能力或技术水平的提升。

2.5品牌化原则国内在线学习平台的品牌意识已经伴随着经济发展

越发强烈，例如粉笔APP、果壳网、网易云课堂等都形成

了统一的品牌形象。我们在进行界面设计与完善时，应该

将界面设计元素与品牌形象与品牌文化深深联系在一

年轻化原则根据大数据用户画像分析，互动式在线学习APP的

起，一个立足于用户，以人为本的品牌形象有助于其产品

更好的发展，增大产品竞争力。品牌因素与产品的发展是

一种辩证地关系，看似相互独立，其实是一种相辅相成的

关系。优秀的界面设计会吸引更多用户，有助于将品牌植

根于用户心中，而良好的品牌形象会促使用户产生去使

用其产品的兴趣，形成一种品牌效应。3结束语主要用户群体是年龄在#〇%40岁之间的高校学生、高校

毕业生、高校教师等，这一群体接受过相对良好的教育，

基本都有十年甚至更长的受教育经历，已经形成一套学

习、运用知识的体系，学习中更倾向于找寻自己感兴趣或

知识结构中缺失的内容。因此在界面功能设计中，其一应

符合群体直白明了的习惯，直接给用户呈现他们想看到的

内容，不过于复杂和隐晦；其二应满足年轻人个性化的心

态，用户的知识体系不尽相同，因此用户希望根据自己的

需求进行个性化设置。比如可以根据自己的学习情况系统

进行记录并生成个人学习情况表进行合理化建议等等。另外，这一群体对于界面美感有个人化的理解，对于

布局的要求更倾向于注重虚实留白和便捷美观，要充分

考虑到年轻用户的审美倾向和使用方式。所以在线学习

APP的设计应将年轻化原则贯彻始终。2.3拟真性原则无论是受教育者利用在线学习APP科技的革新给大众生活带来了便利，在“互联网+教

育”的背景下，互动式在线学习APP的普及率越来越高。

对于受教育者，全球的教育资源汇聚于此，它是学习知识

的课堂。对于教育者，在线学习APP是施展教育教学能

力的舞台。对于平台的经营管理者，在线学习APP是知

识变现的平台。互动式在线学习APP大有可为，为了让

各方围绕互动式在线学习APP满足自身需要，应该充分

考虑其界面设计，打造实用、舒适、具有视觉美感的学习

平台。设计师也应善于平衡视觉元素进行设计，满足实用

功能、追求视觉美感、重视心理感受，树立品牌形象，以设

计原则为依托开展科学与艺术相统一的设计工作。参考文献：学习课程还是

教育者录制教学视频上传平台，都会期望能够有一个比

传统线下大学课堂更为开放、自由、轻松、灵活的学习环

境，这也就是互动式的内涵所在。教学，是教与学的统一，

在互动式在线学习APP中要突出拟真性原则，既模拟课

堂环境，让受教育者有一个身临其境，代人感强烈的课

堂，又要高于传统课堂，在界面设计充分考虑自由提问、

互动、交流的需要。只有基于认真分析群体的认知特征，使用习惯，情感

化需求才能做好在线学习APP拟真性原则界面设计。强

大的功能性以及界面的拟真性可以促使用户产生学习兴

趣并发现乐趣。2.4扁平化原则[1]

李秀丽.我国高校慕课建设及课程利用情况调查分析—以中国

大学MOOC等四大平台为例[J].图书馆学研究，2017,10.[2]

朱和平.曲线在现代设计中的艺术表现[J].装饰，2002,6.[3]

刘香渔，居全伟.高校慕课APP界面设计的极简主义运用研究[J].

设计，2017,22.[4]

杨琴.平面视觉元素在界面设计中的应用[J].包装工程2019,6.[5]

李梦媛.基于色彩应用的数据可视化设计[J].艺术科技，2019，12.[6]

肖现芳.移动学习系统界面扁平化设计研究[D].河南师范大学，

2017.147