基于高校移动学习平台的UI设计与实现

(太原理工大学 山西 太原 030024)

一、移动学习平台简介

移动学习已经成为一种新的学习模式，正在逐渐改变着人们的学习方式，也影响着传统教学模式，移动学习平台是一种新型的网络学习平台，即在移动互联网环境下、基于移动设备开展学习的网络平台。

从用户体验方式来说，移动学习平台可以分为两种，一种是基于浏览器或网站，一种是基于移动APP的。其中，移动APP包括原生APP(NativeAPP)和WebAPP两种类型。移动学习平台是用于支持学习内容和活动的软件系统。目前，根据应用场景的不同，移动学习平台也具有多样性和差异性。本文研究的移动学习平台定位为学生在自由环境中的非正式学习，目的在于辅助传统的课堂教学。同时，为了保证移动学习平台的稳定性能和学习者的流畅体验，该移动学习平台采用移动原生APP的方式。

二、UI研究背景

目前许多学者对UI设计进行了研究，研究成果主要集中在通用的软件设计、WEB设计方面。如八大黄金法则、20大UI设计原则等。UI(UserInterface)即用户界面、人机界面，广义上指人机交互的媒介。UI设计即用户界面设计，由人机交互设计演变而来，具有多学科交叉性。目前，UI设计己经形成了一个完整的研究体系，其主要研究内容包括用户研究、界面交互设计、界面视觉设计及界面技术开发四部分，跨越了心理学、艺术设计、计算机学科等多个研究领域网。

三、UI设计目标及设计要求

为保证移动学习APP的UI的应用效果，并对应用效果进行定性或定量的描述，本节提出了UI的设计要求及目标。本文从设计理念、系统性能和用户体验三个层面提出了UI的设计目标。基于对高校移动学习APP的UI的功能性需求分析和用户研究，综合分析八大黄金法则、20大UI设计原则，本文认为，此次UI设计应当满足清晰性、可靠性、高效性和激励性四个方面的要求。

(一)清晰性。让学习者能够快速获取对APP的清晰认识〈包括整体架构、主要功能等)。每个界面主题分明，而且主次清晰；界面中的布局容易熟悉；界面中的重要按钮容易理解、操作方便。

(二)可靠性。让学习者感受到交互是安全的、符合预期的，学习者能够控制与平台的交互。允许学习者根据自己的需求来控制界面，通过消息提示、对话框等多种方式给予学习者充分的指导和反馈等。

(三)高效性。借助简单的操作，学习者能够快速、高效地查找目标内容或资源，完成学习任务。通过贴心的工具设计和常用工具的快捷设计大大简化用户的工作量等。

(四)激励性。让学习者感受到移动学习APP的实用性、新颖性、趣味性，以提高用户粘性和忠诚度，激励学习者未来继续使用产品。

四、系统功能需求分析

基于对高校移动学习APP的设计定位和总体分析，UI的功能性需求主要包括课程学习、学习支持、交流讨论和系统服务四个方面，具体阐述如下。

(一)课程学习。课程学习是移动学习APP的重要功能。其中学习资源的设计与呈现是移动学习平台的设计重点。

(二)学习支持。为了更好地支持课堂教学、促进深度学习，移动学习平台应当提供作业、通知、测试等学习支持，使移动学习平台能够满足非正式环境中的个体学习需求以及正式学习环境中的课堂使用需求。

(三)交流讨论。移动学习平台应当充分发挥技术优势，提供论坛等交流方式，可有力地促进师生之间、生生之间的随时、有效的沟通。

(四)系统服务。作为一个系统平台，移动学习平台应当提供必需的系统服务。系统服务主要包括系统操作、账号管理和系统版本等。

五、UI设计与实现

(一)系统UI框架。基于上文对高校移动学习APP系统需求的分析和总结，结合UI的设计要求、性能目标和用户体验目标，最终确定了移动学习APP的组织架构，将用户界面分为两个层级。

一级界面。为了帮助学习者进行课程学习、促进学习者的个人学习、学习者与教师和同伴之间的交流互动，同时，为学习者提供方便的系统服务，移动学习APP的一级界面确定为“课程中心”、“课堂笔记”、“学习论坛”、“我的课程”、”更多”。这五个一级界面也将作为移动学习APP的五个功能模块，作为五个菜单项组合成一个固定菜单，为学习者提供全局导航。

二级界面。基于一级界面，结合学习情境，二级界面确定如下：”课程中心”的二级界面为“课程首页”；”课堂笔记”的二级界面为学习者所记录的所有笔记；”学习论坛”的二级界面为“论坛主题”；“我的课程”的二级界面为“资源列表”；“更多”的二级界面为功能列表，包括“退出系统”、“关于版本”等。

(二)系统手势操作。手势操作是学习者与移动学习平台的互动方式，对用户体验有直接而且重要的影响。目前移动设备中常用的手势包括单击、双击、滑动、拖拽、长按、缩放等多种类型。

针对高校移动学习场景学习需求，结合学习者认知习惯，遵循手势设计的基本原则，高校移动学习APP的一系列的手势，如下表所示。

手势作用具体应用单击打开对象所有按钮、图标等双击将对象全屏将图片、文字等放大至全屏滑动切换屏幕切换同级莱单缩放缩放对象缩放图片、文字等资源下拉刷新数据更新内容长按显示更多功能查找功能

(三)页面结构及导航设计。为了保持布局的一致性，提高UI的清晰性和易用性，移动学习APP的UI的界面基本组成元素从上到下一次为状态栏、导航栏、内容区和菜单栏。其中，状态栏可以直接使用移动设备系统状态乱，菜单栏可以具体UI针对具体学习情境进行微调即可。

为了提供清晰、方便的导航，移动学习APP的导航设计可以分为全局导航和局部导航，具体阐述如下：

1、全局导航。基于上文对系统架构和界面结构的分析，移动学习APP的全局导航包括“课程中心”、“课堂笔记”、“学习论坛”、“我的课程”、”更多”五个菜单项，以菜单的形式固定在界面底部。

2、局部导航。第一种形式是界面中的按钮、图文按钮等按钮导航。第二种形式是界面中的内容提供导航，如标签导航、宫格导航、列表导航、tab导航、组合导航等。

通过全局导航，学习者可以始终明确当前所处位置，并方便地跳转到不同模块。局部导航帮助学习者从当前界面快速跳转到其它界面。两种导航方式结合可以确保学习者始终不迷航，并且能够快速进入指定界面。

六、总结

本文首先梳理了移动学习平台、及UI设计的概念、研究范围、相关理论及研究现状。基于前人的研究成果，包括设计理念和功能框架，结合移动学习APP的设计目标，本文阐述了移动学习APP的UI设计理念与UI实现的总体方案与核心技术框架。

随着移动互联网的发展，移动学习己经成为一种新的教育现象，而高校已经成为移动学习的主要阵地。移动学习平台作为一种新的网络学习平台，有利于构建课堂内外无缝衔接的一体化学习环境，还能促进学生开展系统学习和深度学习。移动学习平台的UI(用户界面)作为学习者与移动学习平台进行交互的媒介，其设计质量直接影响着学习者的学习体验。随着用户体验的普及，人们开始追求实用性和享受性的双重目标。因此，移动学习平台的UI设计至关重要。