在线学习类App界面视觉层级表现特点研究

金 晶

（杭州职业技术学院，浙江 杭州 310018）

随着互联网的发展，教育形式在近几年快速更新，人们开始逐渐通过互联网的方式进行在线学习。在线学习类App满足了学生泛在学习的需求，使得学生可以在任何地方、任何时刻进行学习。但是，这也导致了学习时间碎片化、学习情境复杂化等问题，如何通过App中的视觉元素提高用户在线学习时的注意力，让学生快速、高效的获取信息从而提高学习效率，是设计师需要重点关注的问题[1]。目前在线学习类App的界面设计风格多样，大多数都没有关于运用界面视觉元素提升用户注意力的研究，设计师仅仅只是停留在视觉上的美观程度。文章通过对《中国大学慕课》《腾讯课堂》和《超星学习通》三种在线学习类App的分析比较，以此探究在线学习类App界面视觉层级表现特点，为在线学习类App的界面设计提供可行性参考。

一、界面视觉层级作用与表现

（一）界面视觉层级的概念及作用

手机界面本身是二维的，但是其内容有着逻辑上的信息结构和层级关系，从而形成了界面信息的视觉层级，如图1。根据视觉思维的特征，用户在短时间内只能对有限的信息进行处理[2]。因此，通过界面信息组织制造清晰的视觉层级，可以使用户在使用过程中顺其自然的理解产品的逻辑结构和层次关系，从而提高用户在线学习时的注意力，提高学习效率[3]。

图1 界面信息的视觉层级

（二）界面视觉层级的表现

界面视觉层级是通过视觉元素的选择和组织，提高用户对关键信息内容的辨识度，从而达到界面信息清晰、视听有效的呈现，基本的界面视觉元素有文字、图片和色彩[4]。文字作为界面信息主体，能够让用户接收到界面中所要表达的内容，想准确有效地传达信息，就必须考虑文字编排的视觉层级，给予用户简洁明了的文字信息传达效果。图片在界面中主要起到装饰和说明的作用，可以帮助用户对界面中文字内容进行理解，对图片的位置、比例等进行编排，从而创造清晰的视觉层级，提高用户的识别效率。色彩能够有效感染用户的情绪，运用色彩的对比可以区分界面中信息的主次关系，使用户更快地接收到界面想要传达的内容[5]。

二、在线学习类App界面视觉层级表现特点分析

优化App界面视觉层级设计以期提升用户的学习效率是在线学习类App界面设计的主要任务，综合《中国大学慕课》《腾讯课堂》和《超星学习通》三种在线学习类App，分别对界面结构以及界面细节视觉层级的表现特点进行分析。

（一）界面结构的视觉层级

界面结构的视觉层级指的是通过对文字、图片等信息元素的组织和编排，搭建合理的信息结构，展现所需传达的信息。在线学习类App的界面结构根据不同的产品定位有所差异，但总的来说都是以归纳整理信息内容，为用户提供多种查找课程信息的导航分类模块为主。

1．中国大学慕课App

在中国大学慕课App中，界面结构利用了格式塔理论中主体与背景原理，通过模块内尺寸比例划分决定了信息的优先视觉层级，分为以图为主和以文字为主两种形式的导航分类模块。如最近直播导航分类模块通过突出课程名称等文字信息，告知用户该模块的课程信息，使用户能够快速定位到需要学习的课程。而编辑推荐导航分类模块则是通过突出课程封面图片帮助用户理解课程特点，从而区分各个课程信息模块。每个导航分类下课程信息模块采用一致的排列布局，利用格式塔理论中相似性原理和接近性原理拉开模块内课程信息间的距离，并组合相关联的信息元素，形成了清晰的界面视觉层级。此外，中国大学慕课App中利用格式塔理论中的连续性原理将处于屏幕边缘的卡片做部分遮挡处理，暗示用户在屏幕之外还有更多的课程信息可用手指去滑出操作，巧妙地向用户解释了界面的结构层级，又无形地拓展了有限的界面空间。

2．腾讯课堂App

在腾讯课堂App中，每个导航分类模块虽然同样采用一致的排列布局，但是其中的图文比例都各不一致，包含多种不同的组织方式。如直播好课、行业小零识和小编优选等导航分类是以图片为主体组成的课程信息模块，其中在行业小零识导航分类中，利用主体与背景原理在模块尺寸大小上形成对比。此外，干货集锦、实用经验和学员故事等导航分类是以文字为主体组成的课程信息模块，引导用户进行点击学习。在腾讯课堂App中界面结构的组织方式较为复杂，视觉层级过多，容易干扰用户视线，影响界面信息的准确表达和用户学习时的注意力。

3．超星学习通App

在超星学习通App中，每个导航分类下课程信息模块同样采用一致的排列布局，并且只有一种组织形式，即左文右图，图文在模块中的占比较为一致，如图4。超星学习通App中界面结构的视觉层级较为简单，过少的视觉层级也会影响到界面信息的有效传达，使得用户无法快速准确地找到所需的信息，降低用户的学习效率。

（二）界面细节层级划分

界面结构的视觉层级能够帮助用户准确定位所需要的课程信息，但是如果用户需要进一步了解课程内容则需要花更多的时间去浏览课程简介、教师姓名、直播时间等细节辅助信息，容易造成用户查找信息困难、注意力不集中等问题。因此，设计师需要对细节辅助信息的字重、字号、颜色等进行细微的调整和区分，制造清晰的界面细节层级，让用户快速、高效的获取信息从而提高学习效率。

1．文字层级划分

在中国大学慕课App和腾讯课堂App的课程信息模块中，根据文字信息主次关系分别对字号、字重进行了细节层级划分。通过文字细节层级的划分，突出各模块的课程名称，并区分各个课程信息模块内的信息主次关系，帮助用户识别信息的重要性顺序。其中，腾讯课堂App的字号、字重根据需要突出的功能点采用了不同的细节层级划分，过于细腻的细节层级虽然能够展示每个导航模块内的信息，但是当用户在浏览整个界面时无法突出界面中的主体信息，不利于用户获取信息。

在超星学习通App中，课程信息模块的文字细节层级只有字号设置了层级，字重无层级。文字细节层级过于简单会显得界面较为单调，用户在浏览时虽然能够很直观地了解到界面中信息内容，但是却无法快速地获取细节信息，增加了用户的使用负担，降低了学习效率。

2．颜色层级划分

在中国大学慕课、腾讯课堂和超星学习通三种在线学习类App中，对提示文字、标签、价格等重点信息均使用了饱和度和明度较高的颜色。其中在价格信息上，中国大学慕课和腾讯课堂都使用了暖色系，突出课程优惠卖点，引导用户进行选购。通过颜色的细节层级对比，强化了界面的主要信息。在课程名称、教师姓名、学习人数等需要用户进行阅读的文字信息上，使用同色系不同明度，通过黑白灰明度层级对比表达信息的主次关系，使阅读的顺序一目了然。

三、总结

综上所述，在综合分析了《中国大学慕课》《腾讯课堂》和《超星学习通》三种在线学习类App的界面视觉层级表现特点后，针对界面视觉层级设计特点及不足之处将在线学习类App的设计要素归纳为以下四个方面：

（一）利用分组、对齐优化界面结构，简化归纳视觉层级。在移动端有限的界面中包含了大量的课程信息，通过对共性的元素进行信息分组，表示同组信息具有相似的功能，利于用户快速理解各组信息之间的逻辑关系。同时，利用位置距离实现信息关系的表达，形成明确的视觉层级，使用户更加容易查找和明确课程信息，更有效地完成学习任务。

（二）通过视觉对比加强界面视觉层级。通过尺寸对比突出重要的课程模块以及模块内的主体信息，引导用户的视线营造视觉层级，帮助用户理解课程信息之间的主次关系。同时，通过颜色对比突出各课程模块内的提示信息，在色彩属性上色相的层级高于饱和度，饱和度高于明度，因此根据色相、饱和度和明度分别对不同层级的提示信息进行颜色层级划分，帮助用户识别信息的重要性顺序。在课程模块内的阅读文字信息上，运用同色系不同明度，明度对比越强，视觉层级越高，明度对比越弱则越低，使用户阅读的顺序一目了然。

（三）通过视觉提示设计加强同级界面的结构关系。人们倾向于感知连续的形式，将零散的信息认知成一个相互联系的整体。在App导航分类下包含了多个课程信息模块，设计师可以利用连续性原则设计视觉提示，如视觉要素部分遮挡等设计手法，引导用户操作并掌握界面结构关系，从而创造视觉层级，降低用户的学习成本，也拓展了有限的界面空间。

（四）易读的文字层级设计。文字除了传递信息的重要功能外，文字样式属性还可以细化界面视觉层级，从而实现易阅读的目的。根据课程信息主次关系对文字层级进行划分，采用不同字号和字重，通过文字量化设计，构建易读的文字视觉层级，使用户能快速准确地接收到最想获取的信息，提高学习效率。