第34卷第3期 机电卢品开发与创新Vol.34,No.3 2021 年 5 月Development & Innovation of Machinery & Electrical Products May.,2021
文章编号：1002-6673 (2021) 03-145-03
交互式在线学习APP界面设计研究
——以中国大学MOOC(慕课）为例
阮晓敏！孙亚云
(中国矿业大学建筑与设计学院，江苏徐州221116)
摘要：伴随数字媒体技术的快速发展，针对“互联网+教育”理念下高校学生广泛使用交互式在线学习
A P P的现状，文章以中国大学M O O C(慕课）学习平台为研究对象，立足当前教学实际着眼于A P P界面设
计，分别从界面的布局、图形、彩三个方面进行分析。根据研究进行总结梳理，提出主要面向高校学生的 交互式在线学习A P P的界面设计原则，以期为相关设计实践提供参考。
关键词：交互式％在线学习％界面设计
中图分类号：T P31 文献标识码：A d〇i:10.3969/j.issn.1002-6673.2021.03.050
Research on the Interface Design of Interactive Online Learning Application
-----A Case Study of MOOC Platform in China
R U A N X iao-M in，S U N Y a-Y u n
# School of Architecture &Design，China University of Mining and Technology，Xuzhou Jiangsu 221116,China)
Abstract:Along with the rapid development of di g i t a l media technology，interactive online learning apps are widely used by college students under the concept of n Internet+ education” .This paper takes the M O O C platform in China a s the research object and based on the actual teaching analysis interface layout，graphics，color three aspects.The interface design principle of interactive online learning A P P for college students i s proposed according to the research.In order to provide reference for related design practice.
Keywords：Interface；Online learning；Interface design
0引言
伴随着大数据、移动互联、云计算等技术在各个领域 的不断成熟和普及，信息的传递由原先的单向传递向多 向互动传递发展，促使知识量增长、知识更新周期缩短，因而充分利用碎片化时间，灵活运用各种网络手段及技 术渠道即时获取知识便尤为重要。基于此，国内掀起了新 一轮教育信息化的浪潮，交互式在线学习类A P P在高校 学生及教育者中日渐普及，给传统高校教育带来了机遇 与挑战。
交互式在线学习是指利用多媒体计算机技术和网络 技术，在教育者和受教育者之间构建桥路实现交流互动 的新兴学习方式。交互式在线学习A P P界面的合理设计 能够利于发布者传达有效信息，受众接收知识，同时也保 证了视觉、心理上的舒适感，为受众带来良好的学习体 修稿日期：2021-03-07
作者简介：阮晓敏（1995-)，女，安徽合肥人，中国矿业大学硕 士研究生在读。主要从事文化创意产品设计研究；孙亚云 (1977-)，女，山东勝州人，副教授。主要从事品牌设计、文化创意设计与市场营销策略研究。验。因此，探析合理适用的A P P界面所具有的特征便显得尤为重要。
1中国大学M O O C界面设计分析
知识经济的火热催生了 M00C这一新型的、开放的 网络教学模式，其被誉为“印刷术发明以来教育最大的革 新”m，M00C所具备的自主性、多样性、开放性、连接性和 互动性使其成为交互式在线学习平台的
典型。在国内，有中国大学M00C(慕课）、学堂在线、e w a n t育网开放教育 平台等都多个M00C平台。文章选取移动端A P P开发较 成熟的中国大学M00C(慕课)为研究对象。
页面设计风格1.1界面设计中的风格体现
中国大学M00C(慕课）选用了简约主义的设计风 格，简约主义作为现代主义的发展和继承，保留了现代主 义简洁、实用、朴素、美观的设计特点，符合当前大众的审 美趋势和界面设计风格的时代特征。如图1所示，设计摒 弃了厚重繁杂的装饰性线条、纹理、拟物化图标等，使整 体界面保持干净整洁，以扁平化的设计风格突出了要表 达的内容，产品的各类功能及信息清晰明确，能让用户及 时的到自己要寻的信息，增加实用性及舒适性。
145
•综合研究•
Q C •到20000i ?汇速记s 13家KS 艺术设计 经济®■£ =
t  分必 >-2<wvnaiia 离n 上
D B 窜輯& £术<8计
我難
E ag
〇〇〇〇〇'
碎ffjii 学英a
詡
:
^91h ■■
8
a
興
小
《«折
1.2界面设计中 的布局
界面布局是对 界面中所存在的文 字、图形或表格进
行排布、设计[2]。合 理的布局设计在使 用及视觉感受上给
图1中国大学M O O C (慕课)手机端界面#
Fig.l  Interface  of  China  Universities  验，因此，界面设计
M O O C  application  时设计者需要对页面中的各种信息进行考虑和推敲，要对用户人的需求、 行为与信息发布者的传达目标进行综合考虑，以满足不 同使用体的使用习惯。在“中国大学M O O C (慕课）”的主界面布局中采用的 是宫格布局、列表式布局和分模块布局相结合的布局形 式[3]，例如图2(a )框内推荐栏按钮板块采用的是宫格布局， 图2(b )框内所示“精选”等板块布局采用的是列表式布 局，同时也会结合图2(c )框内分模块布局。这样布局一方 面利用布局形式的组合，使得界面简约而不单调，另一方 面，多利用矩形图片展示内容，显得规范严谨，与M O O C  的教育定位更为符合。另外，这样布局可以让界面显得简 洁清晰，能够将用户的关注力集中在界面信息内容上，利 于信息有效传递。
图2中国大学M O O C (慕课）手机端界面
Fig .2 Interface  of  China  Universities  M O O C  application 1.3界面设计中图形元素
图形是界面设计中占比极大的元素，会直接影响用 户感受，美观实用而有创新性的图形元素在A P P 的界面 设计中很受欢迎。做好信息与图形之间的相互融合，以图 文并茂的形式给手机界面设计带来独特的视觉体验[4]。
在中国大学M O O C (慕课）应用内，其图形元素设计 体现出来差异性、丰富性、柔和美。在内容上，中国大学 M O O C (慕课)融合国内众多高校的大量专业、学科，这些 学科特征在其图标设计上都有一定的体现，充分显示学 科间、各功能板块见的差异性，提升辨识度，进一步使界
面简洁；如图3所示，中国大学M O O
C
(慕课）中的图标设
计类型广泛，线性、异形、面性都有涉及，将对应功能的图
形进行外在线条的勾勒或颜填充，形成了丰富的A P P  图形元素，增强使用过程中视觉上的舒适度；在界面显示 的图形中，广泛使用圆角矩形取代直角，界面图标设计不 生硬，更具有亲和力，也使整个界面具有一定美感，给使 用者带来较为深刻的印象。
我的优惠券 我的赂户余额0
6
%
我的砍价 我的团购国家精品
21考研
期末不挂©
我的推广
G 分享A p p A
II
(
3
去评分
首页
我的学习
期末不挂
名师专栏
英语学习
帐号
图3中国大学M O O C (慕课）界面图标
Fig .3 Icons  of  China  Universities  M O O C  application 1.4界面设计中彩元素
界面设计中选取不同的彩带给人以不同的视觉冲 击、心理感受，在界面设计中进行颜的选择和搭配时， 要明确以下两个目的：其一是要通过彩的对比，使用户 能及时把握界面的重点信息，见图4，在“立即参加”功能键及相关课程价格上选用与 主体对比强烈的橙；其二 是美化界面，给用户以舒适感， 甚至可以达到提升学习效率 的效果。
U I 彩系统一般分为两 部分：主调和辅助调。设 计中对于彩的应用是规范 性和艺术性的统一。一方面彩
的选择要突出品牌的特征和优
点，产生独一性，完善、提升该品
牌的知名度。中国大学M O O C
(慕课）主体选用接近自然的图4中国大学M O O C
(慕课）手机端界面 Fig .4 Interface  of  China
Universities  M O O C
application 绿，广泛应用于L O G O 、标准字、导航按钮及其他小功能 键上，带给人以舒适、健康、轻松的感觉，可以适度缓解学 习压力。另一方面结合少量其他彩，如黄、橙、红 等构成暖性调。相比调单一的灰白黑或者冷调，柔 和、活跃的彩具有良好的亲和力，舒适感更容易使用户 在使用应用时产生愉悦的心情。
2
交互式智能在线学习
A P P 界
面设计原则
基于对中国大学M O O C
(慕课）的深人分析并调研了
解多个互动式在线学习A P P ，总结梳理得出了互动式在
线学习A
P P
的设计原则。
2.1
统一性原则
146
•综合研究•
对于A P P来说，首因效应普遍存在。这也就意味着 其界面上的文字、图形和彩等细节和局部元素与整体 风格能否做到协调一致，影响着当下的用户体验和后续 的用户使用粘性。
恰当的彩搭配是良好界面设计的基础，图标、文字、界面分区都要要注意彩统一性。在同一界面的彩 使用上，应避免两种以上高对比度，高纯度的彩搭配，这样搭配短时间内会吸引用户的眼球，但极易造成用户 视觉疲劳，一定程度上减少用户使用该A P P时间和频 率。界面彩可以用二种相相近，但纯度、明度有差异 的颜为主，再以三种到五种颜作为辅助。在保证 颜统一的基础上，也增加界面的丰富度。
在学习类移动端界面设计布局中常采用的是宫格布 局与列表式布局相结合的布局形式。这种布局方式能在 满足用户实际需求的基础上带来良好的视觉感受。
2.2年轻化原则
根据大数据用户画像分析，互动式在线学习A P P的主要用户体是年龄在#〇%40岁之间的高校学生、高校 毕业生、高校教师等，这一体接受过相对良好的教育，基本都有十年甚至更长的受教育经历，已经形成一套学 习、运用知识的体系，学习中更倾向于寻自己感兴趣或 知识结构中缺失的内容。因此在界面功能设计中，其一应 符合体直白明了的习惯，直接给用户呈现他们想看到的 内容，不过于复杂和隐晦；其二应满足年轻人个性化的心 态，用户的知识体系不尽相同，因此用户希望根据自己的 需求进行个性化设置。比如可以根据自己的学习情况系统 进行记录并生成个人学习情况表进行合理化建议等等。
另外，这一体对于界面美感有个人化的理解，对于 布局的要求更倾向于注重虚实留白和便捷美观，要充分 考虑到年轻用户的审美倾向和使用方式。所以在线学习
A P P的设计应将年轻化原则贯彻始终。
2.3拟真性原则
无论是受教育者利用在线学习A P P学习课程还是 教育者录制教学视频上传平台，都会期望能够有一个比 传统线下大学课堂更为开放、自由、轻松、灵活的学习环 境，这也就是互动式的内涵所在。教学，是教与学的统一，在互动式在线学习A P P中要突出拟真性原则，既模拟课 堂环境，让受教育者有一个身临其境，代人感强烈的课 堂，又要高于传统课堂，在界面设计充分考虑自由提问、互动、交流的需要。
只有基于认真分析体的认知特征，使用习惯，情感 化需求才能做好在线学习A P P拟真性原则界面设计。强大的功能性以及界面的拟真性可以促使用户产生学习兴 趣并发现乐趣。
2.4扁平化原则
这里的扁平化原则包含两个维度的内容，第一个维度 在于图案设计上的扁平化，在图形的选择设计上应该多以 扁平化的简单元素和几何图形如正方形、圆形为主，异形 图案运用应当适度，拟物化图形与扁平化图标在整个应用 中不应混合使用，否则会破坏整体布局，干扰信息识别；另一个维度在于信息层级的扁平化，过多的层级只会带来用 户的疲倦，一些可以统筹在同一层级的内容应当归纳起 来，减少用户点开的层级数。界面设计中逻辑清晰的层级 划分处理会给用户带来层级分明，内容明确，功能丰富以 及使用舒适等感受。从而赢得使用者的喜爱，促使其继续 使用此款软件进行相关的知识能力或技术水平的提升。2.5品牌化原则
国内在线学习平台的品牌意识已经伴随着经济发展 越发强烈，例如粉笔A P P、果壳网、网易云课堂等都形成 了统一的品牌形象。我们在进行界面设计与完善时，应该 将界面设计元素与品牌形象与品牌文化深深联系在一 起，一个立足于用户，以人为本的品牌形象有助于其产品 更好的发展，增大产品竞争力。品牌因素与产品的发展是 一种辩证地关系，看似相互独立，其实是一种相辅相成的 关系。优秀的界面设计会吸引更多用户，有助于将品牌植 根于用户心中，而良好的品牌形象会促使用户产生去使 用其产品的兴趣，形成一种品牌效应。
3结束语
科技的革新给大众生活带来了便利，在“互联网+教育”的背景下，互动式在线学习A P P的普及率越来越高。对于受教育者，全球的教育资源汇聚于此，它是学习知识 的课堂。对于教育者，在线学习A P P是施展教育教学能 力的舞台。对于平台的经营管理者，在线学习A P P是知 识变现的平台。互动式在线学习A P P大有可为，为了让 各方围绕互动式在线学习A P P满足自身需要，应该充分 考虑其界面设计，打造实用、舒适、具有视觉美感的学习 平台。设计师也应善于平衡视觉元素进行设计，满足实用 功能、追求视觉美感、重视心理感受，树立品牌形象，以设 计原则为依托开展科学与艺术相统一的设计工作。
参考文献：
[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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。