高校慕课APP 界面设计的极简主义运用研究 THE STUDY OF MINIMALISM IN THE DESING OF THE APP INTERFACE OF MOOCS

0

长春工业大学 艺术设计学院 刘香渔 居全伟

摘要:研究极简主义在高校慕课APP界面设计中的运用。文章结合案例阐述极简主义在高校慕课APP界面设计中的运用:界面布局、界面中的“隐藏”信息、简约的图标设计中的运用。结合调查问卷结果分析,总结出极简主义的设计风格符合高校学生的心理诉求,用户使用体验在APP界面设计中具有重要作用。

关键词:高校慕课 界面设计 极简主义

中图分类号:J05 文献标识码:A

文章编号:1003-0069(2017)11-0128-02

Abstrac t:Study on the application of minimalism in the design of the APP interface of mooc. This paper discusses the application of minimalism in the design of the APP interface of the mooc in universities: interface layout, "hidden" information in the interface, and the application of simple icon design. Based on the analysis of questionnaire results, the author summarizes that the design style of minimalism accords with the psychological appeal of college students, and the user experience plays an important role in the design of the APP interface.

Keywords:Moos The APP interface design Minimalism

引言

“慕课”打破了传统的高等教育模式,“慕课”利用交互式技术,使得全球数百甚至数千万的学生,能够通过互联网免费观看到来自世界各地的、知名院校的、一流教师的课程及演讲。“极简主义”能使用户在较短的时间快读浏览界面中的相关信息,节约了用户的浏览及接受信息的时间,给用户带来便利。

一、极简主义在高校慕课APP界面设计中的运用

(一)界面布局的极简设计

界面布局顾名思义就是对页面的文字、图形或表格进行排布、设计。优秀的布局,需要对页面信息进行完整的考虑。既要考虑用户需求、用户行为,也要考虑信息发布者的目的、目标。

“移动图书馆”慕课APP的主界面布局采用宫格式布局,将主界面中展示的各个信息功能进行整齐排列,每个信息功能展示在相应的宫格中,整个界面简约直观。“中国大学MOOC”的主界面布局采用的是宫格布局与矩阵布局相结合的布局形式,分学科按钮版块采用的是宫格布局,“推荐课程”、“精彩讨论”等版块布局采用的是矩阵式布局,矩阵式布局是将各个信息用矩形图片展示,这些矩形图片以相对较规则的形式进行排列。

宫格布局和矩阵布局是高校慕课APP界面设计中的常用布局,这两种布局形式让界面显得整洁,界面布局本身并没有成为突出的元素,这样的设计能够减少内容和展现上的嵌套层级,将最主要的信息直观地在主界面中展现。

(二)主界面中的“隐藏”信息

打开慕课APP软件应用的主界面之后,通常情况下主界面中的各个版块的信息内容是静止,由于手机屏幕的尺寸大小制约,不可能将APP应用软件中的所有功能、信息完全在主界面中展现,一些次要功能、信息就会被“隐藏”起来,想要浏览或是应用这些“隐藏”起来的功能、信息,是需要用户进行一些手势动作的操作,也就是交互设计,这种设计是对有限的主界面空间的一种延伸和拓展。将这些功能、信息的隐藏,也是对主界面空间设计的一种简化。

1.“切换隐藏”的运用

“移动图书馆”、“中国大学MOOC”两款高校慕课APP的主界面,这两款高校慕课APP应用软件主界面的最上方版块就是运用了“切换隐藏”,“切换隐藏”是将几个平行信息在同一个信息板块中循环滚动显示,使用户可以不用任何手势操作在同一个版块位置浏览到更多的隐藏信息。“移动图书馆”的“切换隐藏”版块的右下角有四个圆点,相对应的是四个界面信息,当切换到相应界面信息的时候,对应的圆点着色,而其他圆点为白色。该板块的交互操作通常为自动与手动相结合的操作,当用户没有看清切换界面的信息时,便可以手动滑动切换这些信息。“中国大学MOOC”的“切换隐藏”版块与“移动图书馆”的“切换隐藏”版块的切换原则类似,不同点是信息界面切换相对应的不是圆点,而是短横线。

“切换隐藏”在慕课APP界面中的应用能够在有限的空间中展示更多的信息内容,自动切换也省去了用户繁琐的操作。

2.“抽屉隐藏”的运用

“抽屉隐藏”所隐藏起来的信息功能通常是次级信息功能,这种“隐藏”的形式类似于推拉抽屉的动作模拟,用户可以通过点击抽屉隐藏按钮或者滑动屏幕来打开或隐藏“抽屉隐藏”中的信息功能。在“移动图书馆”高校慕课APP主界面的左上角,人物头像即是“抽屉隐藏”界面的开关按钮,点击人物头像按钮时,主界面向右滑动,“隐藏”在“抽屉”中的“我的收藏”等次级信息显示出来,再次点击人物头像,“抽屉”即被关闭,相关信息再次隐藏。另外一种操作是直接向右滑动主界面,隐藏的“抽屉”显示出来,向左滑动主界面,“抽屉”关闭被隐藏。

“抽屉隐藏”的设计常被用在导航信息布局中,该设计不仅节省了界面空间,而且不影响用户对于界面正文信息的阅读和浏览,可以说“隐藏”在“抽屉”中的功能信息是对主界面内容的一种延伸。

3.“按钮隐藏”的运用

“按钮隐藏”所隐藏起来的是主界面中的一些未能完全展现的信息,通过点击“按钮”打开全新的页面,页面中会显示相对较全面的相关信息。在“中国大学MOOC”的主界面中,在中间部分版块为按学科分类的课程按钮,有考研、经济管理、外语等不同的学科按钮,在该版块的右下角的按钮为“更多”,点击“更多”按钮,即打开了显示全部按学科分类课程的界面。再例如“中国大学MOOC”主界面中的“合作高校”版块内容,由于主界面空间有限,只能显示部分合作高校,该版块的右上角的按钮为“查看全部”,点击该按钮即是打开了显示145所合作高校的界面。

“按钮隐藏”的设计同样节省了主界面空间,将更广阔、更全面的信息“隐藏起来”通过点击按钮来显示,“隐藏”在“按钮”中的功能信息是对主界面内容的一种拓展。

(三)简约的图标能提高识别度

1. APP应用图标的扁平化设计

扁平化设计是一种极简的视觉表达方式,随着移动智能手机APP应用图标设计风格的演变历程,扁平化设计常常与拟物化设计形成对立面。扁平化设计在过去的几年当中经历了积极而快速的发展,扁平化设计已经应用到越来越多的平面设计领域。现如今,扁平化设计已经应用到的网页和UI设计当中,甚至已经成为了主流设计方向。扁平化设计在慕课APP图标设计中的应用,更加提高了图标相对应的功能的辨识度。

2. 形象的图形能够塑造辨识度

高校慕课APP应用图标的设计首先是要与智能手机系统的风格相统一,其图标的图案设计是简约明了的,运用简单的图形及明快的色彩来提高该APP的独有特点,用户在即将要对某一高校慕课APP进行应用时,首先会观看图标的形状及图标下方的APP名称,并且有意识地将图标及文字进行关联,而在第二次及以后的使用中,可以忽略文字直接从简洁形象的图标来辨识该款慕课APP应用。

为我国目前高校学生使用率较高的三款高校慕课APP应用软件,首先是“移动图书馆”,其图标为红色背景、白色图案,图像的主体是拖着尾巴的五角星。“移动图书馆”是北京超星集团旗下的一款高校教育APP应用,如果使用者对该款APP的创作来源有所了解的话,就会形象地从图标中的主体图案“拖着尾巴的五角星”中的“五角星”与集团名称“超星”进行相关联,从而辨识该图标。即使不了解该款APP的开发来源,从图标中“拖着尾巴”的五角星,能够与该图标下方文字中的“移动”进行相关联,来识别该图标。

第二款APP应用是“树下”,其图标为白色的背景,左上角为大小交错的半圆形组成的绿色图形,其图形的形状是“树荫”的形象表达,在“树荫”下方是七棵小树,排列方式是中间高,两侧低,颜色是红色、黄色、蓝色、绿色四种颜色的交错排列,这七棵小树的是“学习者”的形象表达,每一名“学习者”都是一棵在“树荫”下茁壮成长的“小树”,该款高校慕课APP应用软件的图标的图案设计与其应用软件的名称“树下”有较强的呼应。

第三款APP应用为“中国大学MOOC”,是由网易公司与教育部爱课程网携手推出的在线教育平台,该款APP应用软件汇集了众多名校课程资源,用户可以在线进行课程的学习,也可以在线进行考试测试。其图标同样用白色作为背景,图标中间由绿色及蓝色的两个相交的菱形组成,菱形的上下边缘是向上弯曲的曲线,整体外观形象是一本翻开的书本,两个菱形的相交使用户联想到学科的交叉,而“中国大学MOOC”正是一款课程的种类较全面,覆盖面广的应用软件。

在APP界面中导航栏的每一个按钮,通常都会对应一个相关的功能,与APP应用软件图标类似,导航栏中的按钮的图标设计的简约处理,同样能够便于用户的认知与识别图标。相似的APP应用软件,在其导航栏中,通常会有几个相似的功能按钮,例如“我的”或是“用户”尽管功能的名称有些差异,但他们的功能是相似的,因此在相似功能按钮的图标设计也是相似的。分别为学堂在线、中国大学MOOC、慕课网,三款慕课APP应用软件的首页导航栏,从图片对比中可以看到,学堂在线中的“用户”功能、中国大学MOOC中的“我的学习”功能,以及慕课网中的“我的”功能是相似功能,他们的图标设计都运用线条勾勒人物头像的极简形象,尽管每款软件的设计风格有所区别,但这一功能相对应的图标形象基本是一致的。当用户想要应用该功能的时候,脑海中就会出现人物头像的形象,形成一种条件反射,正应为是运用线条的极简设计,使用户能够用极短的时间对功能图标进行认知及快速记忆,再加上其功能位置都是在最右侧,能够有助于用户的认知习惯与意识形态的养成,从而提高了软件功能的使用效率,也节省了用户的使用时间。

二、慕课APP的极简主义设计符合高校学生的心理诉求

为了能够更加准确地了解高校学生使用慕课APP的使用情况,邀请112名高校学生填写调查问卷,进行调研。高校慕课APP使用情况越来越普及,64%的学生认为应该以课堂式教学为主,网络学习平台教学辅助,18%的学生认为两种教学模式各占一半。慕课学习已经成为高校学生学习的一种必不可少的学习方式,尽管有些课程是学校要求的必修慕课课程,但在调查问卷中高校学生对建设高校慕课学习平台建设是否有必要的统计显示,58%的学生认为是有必要的。

从高校慕课APP界面设计方面的调查来看,学生对logo及界面设计的美观与否的关注程度已经超过了对学习软件的课程内容级师资团队的关注程度。高校学生对慕课APP界面的设计风格要求是要简约清晰。

在高校学生对界面设计关心的方面调查中,对界面的操作是否简便、快捷,界面的信息传递是否清晰、明确这两个选项的比重较高,除此之外,高校学生对使用界面的心情是否愉悦也占较高比重。通过调查问卷的结果分析来看,高校学生对高校慕课APP界面极简设计的要求,不仅仅是界面外观的极简设计,还包括操作的便捷性,高校学生使用慕课APP应用软件进行学习时,简洁直观的操作界面是能够提高学生的操作效率的,教育学习APP软件与娱乐、购物、聊天等其他APP软件不同,教育学习APP软件更应该去除界面中的繁琐设计及复杂的操作,高校慕课APP界面设计应该简约直观,将用户更多的时间和精力用在学习知识方面,而不是把时间和精力浪费在信息量较多的界面信息浏览以及繁琐的操作上,以简单精致、人性化的设计强化情感体验,提高用户的学习效率。

结论

极简主义在高校慕课APP界面设计中的运用,它不仅是简单地将界面外观设计得简洁直观,而是通过应用软件的性质定位、用户群体分析、用户操作习惯、用户使用感受等诸多方面的综合考虑。交互设计在高校慕课APP界面设计中具有重要作用,其目的就是为了提高用户使用应用软件的体验。而用户使用体验对于高校慕课APP应用软件的重要性,则决定了应用软件的开发设计者在设计规划产品时,必然要重视交互设计。

参考文献

[1] 张颖.移动UI完美设计法则[M].北京:机械工业出版社,2015:62-65

[2] 朱晓阳,朱华,欧永和. 极简主义在手机APP启动图标设计中的运用[J].包装工程,2014(8):14-17.

[3] 罗婧瑄. 极简主义在扁平化风格网页设计中的应用与研究[D].西北师范大学.2015:28-29.

[4] 杜鹤民. 基于极简主义的泛扁平化设计研究[J].包装工程,2017(04)143-145.

[5] 徐孟瑾,朱华.极简主义在APP界面设计中的原则探讨[J].设计,2016(07):30-31.

[6] 张天爽,汪兰川. 论极简主义风格平面设计的表现手法[J].设计,2015(19):78-79.

[7] 辛欣,李娜.北京工业大学耿丹学院校园APP交互及界面设计[J].设计,2015(03):12-13.

[8] 王卓. App界面设计与移动交互体验设计方法研究[J].艺术科技,2016(08):75.