网络学习资源的界面开发方法研究
2015-09-10 07:22赵玉司国东
中国远程教育 2015年1期
赵玉 司国东
【摘 要】
界面是学习者与网络学习资源间信息交互的主要通道，对学习效果有着至关重要的影响。但从国内网络精品课程与精品资源的应用现状看，界面设计不完善的问题仍然比较常见，一个主要的原因是资源建设者缺乏有效的界面开发方法。本文分析了学习资源界面开发的难点，给出了一种基于模式的网络学习资源界面开发方法，并通过实例展示了界面开发的详细过程。
【关键词】 网络学习资源；界面开发；界面模式
【中图分类号】 G434 【文献标识码】 A 【文章编号】 1009—458x（2015）01—0065—06
一、引言
学习资源是教育技术的两大研究对象之一。美国教育传播与技术协会（AECT）（1994）界定了广义的学习资源概念——支持学习所用到的全部资源，如软硬件支持系统、教学材料与环境等[1]。随着远程教育的快速发展，对学习资源这一概念的理解也发生了变化。我们讨论的学习资源特指网络学习资源，即学习者利用网络手段开展学习活动所需的各种网络信息资源[2]。近十年来，教育技术领域的研究者在网络学习资源的发展趋势、技术标准、应用模式、组织结构、开发方法等方面展开了细致的研究，但在学习资源的界面设计与开发方面，由于涉及教育学、认知心理学、人机交互、艺术设计等多个学科，有针对性的研究还比较少。
网络学习资源的人机界面是学习者与学习内容间信息交互的主通道[3]。学习者通过界面访问学习资源，获取知识和信息。界面的质量直接决定了学习交互的质量，对学习效果有着至关重要的影响。从目前国内网络学习资源的建设现状看，界面设计不完善的现象仍然比较常见[4]。研究表明，界面问题已经成为影响我国网络精品课程和资源应用的一个主要因 素[5]。
二、学习资源界面开发的难点与现状
（一）学习资源界面开发的难点
界面设计是学习资源界面开发的主要难点。通用软件的界面设计有三个基本需求[6]：① 提供充足的交互方法，让用户通过界面能访问到软件的逻辑层和数据层；② 使用图形化、可视化设计，提供高效的交互机制，让用户的工作更有效率；③ 考虑未来可能产生的新需求。学习资源的界面设计首先要满足这些基本需求，同时也要考虑资源使用过程中的“教与学”问题[7]。“教”强调了资源的内容设计（教学设计），而“学”则强调了资源的界面设计。另外，通用软件的界面设计强调信息传递与交互操作的效率，而学习资源的界面设计则更关注如何在交互的过程中促进学习认知与降低认知负荷，效率问题则在其次。
除此之外，信息技术的发展也对学习资源的界面开发提出了更高的要求。近年来，各种新式的学习设备不断涌现（如智能手机、平板电脑等），但在硬件方面（屏幕尺寸、分辨率、外部按钮等）缺乏统一的标准，加上操作系统（iOS、Android、Windows Phone等）的差异，有着完全不同的交互特性和界面设计理念。应用环境的多样性和技术环境的异构性使得界面开发任务更加繁重，难度更大。
（二）学习资源界面开发的现状
学习资源界面的开发缺少通用的、标准化的方法。网络学习资源的建设已有多种国际化标准，如SCORM、LOM等。这些标准在学习资源的内容封装、组织结构、元数据、排序与导航方法、LMS交互机制等方面制定了详细的技术规范[8]，但在具体的界面设计和开发方面，却没有提供有效的处理方法。另外，学习资源的建设者多为一线教师或教育技术人员，比较熟悉教学内容和教学设计方法，也具备一定的技术能力，却并不了解界面设计领域的工作内容和界面开发方法，普遍缺乏界面设计思想[9]。结果是许多学习资源和教学系统的界面交互性非常差，难以满足有效学习的需求。如文本没有进行排版和结构化处理、布局不合理、色彩搭配问题、缺乏一致性、字体过大（或过小）、交互设计不符合用户习惯等。因此，如何提供有效的界面开发方法，帮助学习资源建设者解决界面设计需求与技术实现上的困难，是提升界面质量、让学习资源真正用到实处的一个关键问题。
三、常用的界面开发方法
界面开发是一项复杂、繁琐和费时的工作，开发者需要有效的界面开发方法和工具来辅助建模和实现。从早期的用户界面管理系统，到目前比较流行的用户界面模式[10]，人机交互领域的研究者做了大量的探索与实践。目前比较常用的界面开发方法包括基于准则的方法、基于模型的方法和基于模式的方法。
准则也称为原则或法则，是设计知识的归纳和总结。界面准则能为界面开发者提供设计建议，比如人机交互领域的八项黄金法则[11]、教育技术领域的多媒体信息设计原则[12]等。在使用准则开发人机界面时，缺乏经验的开发者常常会遇到以下两个问题：第一，准则过于简洁和抽象，难以理解，只包含设计知识，并没有包含使用这些设计知识的经验与方法；第二，准则存在着局限性，可能不适用于所有的场景，一些不同的设计准则甚至相互矛盾，如空间接近原则（Spatial Contiguity Principle）指出相关的图像与文字邻近呈现时学习效果更好[13]，但Kim等[14]的实验研究却有不同的结论；在多媒体英语词汇学习时，空间接近原则并没有发挥明显的作用，是否呈现与词汇相关的图像对学习效果并没有显著影响。对于缺乏设计知识与设计经验的学习资源建设者来说，基于准则的方法并不适用，相互矛盾的准则让他们更加迷惑。
界面模型的作用是表达界面中的概念、需求和构成等，大致可以分为概念模型与陈述模型两大类。基于模型的方法让开发者将注意力集中在重要的概念和属性上，而非具体的技术与实现细节。在界面开发过程中，开发者先创设基本模型，描述所有的任务需求与它们的结构；再创设抽象的用户模型，通过隐喻的方式重新定义基本模型中的任务，描述任务场景，构造任务树；最后通过整体布局设计、交互设计与细节设计生成具体的用户界面[15]。然而，创建实例化更低层次模型是一项乏味且耗时的工作，特别是大部分工作需要手工完成[16]。近年来，各种新式交互设备不断出现，人机界面开发的工作量激增，开发者更加注重开发的效率。基于模型的方法由于其繁琐性和不可复用性，应用范围越来越窄。
模式的概念来源于建筑学，是对常见问题的通用解决方案。界面模式通过说明性的文字、案例、草图等阐述人机界面的详细设计方案，开发者在模式的指导下完成界面开发[17]。基于模式的方法是目前最具可用性的一种界面开发方法，采用软件复用的思想，提供抽象的、半抽象的或具体的建模信息[18]。开发者不需从头开始设计界面，而是在界面模式的基础上完成界面开发[19]。界面模式的应用通常需要界面模式库（Interface Pattern Library）的支持，模式库用来存储和组织界面模式，方便用户检索、选择和使用[20]。在过去的十年中，研究者已经设计、开发和出版了多种具有代表性的界面模式库，如Designing Interfaces Patterns[21]、Patterns in Interaction Design[22]、Patterns for Creating Winning Web Sites[23]、Yahoo！ Design Pattern Library[24]等。这些模式库存储了大量有价值、可复用的界面模式，为通用人机界面的设计与开发提供了丰富的解决方案。
本文认为，基于模式的方法更适用于学习资源的界面开发，因为：① 基于准则的方法要求开发者具有丰富设计知识和设计经验，基于模型的方法要求开发者具备精确的任务描述与抽象建模能力，而基于模式的方法对开发者的设计能力与设计经验要求并不高；② 界面模式提供了丰富的上下文信息、设计知识和使用经验，能有效减少具体界面设计与技术实现花费的时间与精力，提高开发的效率和质量。
四、学习资源界面模式库
界面模式库是界面模式应用的基础。本文设计了一个学习资源界面模式库（简称LRIP），用于存储适用于学习软件或学习资源的界面模式。在建设模式库之前，必须先明确库中界面模式的组织方式、描述方法以及存储机制，在此基础上实现模式的检索、获取、比较、分享、评价等具体功能。
（一）模式的组织
不同的界面模式库有不同的应用领域和用户群体，组织与分类的策略也不尽相同。通用型界面模式库多按功能或设计元素分类，如Designing Interfaces Patterns和Patterns in Interaction Design，而专用型模式库则采用针对性较强的分类设计，比如Yahoo！ Design Pattern Library，它的用途是保持雅虎网站设计的一致性和品牌体验，库中仅包括最基本的五个类别（布局、导航、选择、富交互和社会化）。
LRIP属于专用模式库，它的组织结构设计既要从应用领域出发，也要考虑用户群体（学习资源建设者）的特点。LRIP的组织结构如图1，先按学习方式分类，再按设计元素分类。
不同的学习方式对应着不同的学习环境与学习设备，界面设计考虑的重点也不一样。如泛在学习环境下的界面设计要重点考虑如何适应多种终端设备，而在移动学习环境下，界面设计要重点考虑如何利用有限的屏幕空间与开发平台的差异（如iOS与Android的基础控件设计差异很大）。因此，LRIP按学习方式将界面模式划分为网络学习、泛在学习和移动学习三类。学习方式的下一层是界面设计元素，根据学习资源的内容和呈现特点，定义了十个类别：组合模式、布局（Layout）、导航（Navigation）、搜索（Search）、输入（Input）、静态呈现（Static Presentation）、动态呈现（Dynamic Presentation）、列表（List）、色彩（Color）和地图（Map）。设计元素的下一层为具体的界面模式。
在使用模式进行界面开发时，需要开发者选择多个模式（设计元素）整合成具体的界面。对于缺乏设计经验的学习资源建设者来说，完成这一任务可能会有困难。因此，LRIP在设计元素这一层次中新增了一类组合模式，将多个模式（子模式）有机地整合起来，为用户提供一套完整的界面解决方案。
（二）模式的描述与存储
模式的描述方法对于模式的组织、共享、检索、比较和使用都十分重要，LRIP使用扩充后的PLML（Pattern Language Markup Language）语言描述库中的界面模式。PLML是一种通用的界面模式描述语言，有17个具体的描述性元素，能描述模式的名字、案例、场景、上下文、代码等信息[25]。为了支持LRIP中的组合模式，我们对PLML语言进行了扩充，新增了Sub-patterns元素，用来描述组合模式对应的子模式集合。
LRIP使用XML（Extensible Markup Language）文件来存储界面模式的描述信息。XML是一种可扩展标记语言，具备结构化特征，允许用户自定义元素标记，支持编程解析，其纯文本格式十分适合网络传输。将界面模式存储在XML文件中，有利于模式的共享、检索、选择和管理。以下是一个组合模式UG001的部分代码：
UG001<！—模式在库中的唯一编号-->
课程PPT播放页面，基于HTML5技术，支持多种设备上的自适应呈现……
……<！--代码段1-->
……<！--代码段2-->
……<！—其他代码-->
<！—子模式UL001 -->
UL001
<！—子模式US001 -->
US001
……<！—后面是其他子模式-->
……<！—后面是其他元素的描述-->
五、基于模式的学习资源界面开发方法
基于模式的界面开发方法包括四个基本步骤：任务描述、模式选取、具体界面设计和技术实现。在进行界面设计之前，开发者需要先确定界面对应的任务，撰写任务描述。标准的任务描述包括上下文信息、应用场景和基本的功能需求。更细致一些的任务描述还包括交互结构的定义（静态操作与动态操作的对话模型）和性能需求（响应时间、操作步骤等）。缺乏经验的开发者可能无法写出完整和细致的任务描述，可以参考界面模式的Problem元素（用于问题描述）和Context元素（用于场景描述）。确定界面任务后，从模式库选取最适合的界面模式。有两种选取策略：一种是根据任务描述中出现的应用领域与设计元素选择多个对应的子模式；另一种是选取与任务描述最为接近的组合模式。完成模式选取后，开发者借鉴模式提供的设计思路、设计细节、技术描述等，完成具体界面设计和技术实现。下面通过两个实际案例展示方法的详细流程和细节。
（一）移动学习资源界面设计案例
任务描述：在智能手机上呈现课程的概念图。
模式选取：概念图的图像尺寸比较大，内部的细节信息较多，通过等比缩放显示在手机屏幕上很难看清楚，而放大图像，然后拖动浏览的形式不能很好地呈现概念图的整体结构。本例选取“移动学习”类别下的静态呈现模式MSP003，使用Overview+Detail可视化技术，设计思路与细节可以参考图2。在屏幕的右上角提供了一个Overview视图，其他空间呈现放大后的细节（Detail视图），拖动Overview视图中的导航框可以浏览整个图像。
图2 MSP003模式的界面实例
具体界面设计：开发者根据模式提供的设计思路和学习资源的具体需求完成设计。
技术实现：移动设备的平台与开发工具差异较大，界面模式无法提供具体的程序代码。开发者根据使用的移动平台自行完成技术实现。
（二）泛在学习资源界面设计的案例
任务描述：网站上课程的电子幻灯片（PPT）播放页面，能以自适应方式支持多种设备访问。
模式选取：本例选择“泛在学习”类别下的组合模式UG001来完成界面的开发。UG001采用HTML5技术，能在计算机和移动设备（平板电脑、智能手机）上以自适应的方式播放电子幻灯片。UG001由多个子模式组成：一个Layout模式（整体布局），两个不相同的Navigation模式（上方导航栏和侧方导航栏），一个Search模式（搜索框）和一个Dynamic Presentation模式（幻灯片播放控件）。UG001在PC上的界面如图3所示，图中的文本框标识了对应的子模式。
具体界面设计：完成模式选取后，可以调整组合模式UG001中的子模式，再进行具体界面设计。如模式UG001中使用的Search模式（搜索框）比较简洁，开发者可以在模式库中选择其他Search模式进行替换（如图5）。新的Search模式有丰富的提示信息，并提供快速检索功能。
图5 两种Search子模式
技术实现： UG001提供了界面设计的思想与技术细节，包括布局设计、交互设计与色彩搭配设计的设计思路，也提供了一些核心的代码片段，如HTML5中新语义元素的使用样例、响应式设计的实现方法、JQuery实现导航按钮和下拉菜单的代码等。界面开发者可以参考这些内容进行技术实现。
六、总结与展望
优质网络学习资源既要有优质的学习内容，也要有高质量的人机界面。对于界面设计能力相对欠缺的开发者来说，为之提供标准化、结构化、可复用的界面模式，不但能提升界面开发的效率，在设计质量上也有一定的保障。另外，在使用界面模式的过程中，开发者可以从模式的描述信息中获取界面设计原理与技术实现细节，既能积累设计经验，也能学习更多的设计知识。所介绍的模式库LRIP尚处于初建阶段，在模式种类及功能上也有较大的提升空间，需要进一步完善模式库的架构设计，添加更多的模式素材。
[参考文献]
[1] 卢锋，李青，曹梅，刘振波. 美国教育技术界学习资源观的发展及其启示[J]. 电化教育研究，2001，（07）：23-26.
[2] 陈时见，王冲. 论网络学习资源的意义、功能与类型[J]. 电化教育研究，2003，（10）：50-54.
[3] Hillman， D.C.A.， Willis， D.J.， Gunawardena， C.N. Learner-interface interaction in distance education： an extension of contemporary models and strategies for practitioners[J]. American Journal of Distance Education，1994，8（2）：30-42.
[4] 陈丽，刘慧琼. 媒体界面交互性设计的流程和原则[J]. 中国远程教育，2006，（4）：22-30.
[5] 王娟，刘名卓， 祝智庭. 高校精品课程应用调查及其对精品资源共享课建设的启示[J]. 中国电化教育，2013，（12）：40-46.
[6][17] Wendler，S.， Philippow，I. Requirements for a Definition of generative User Interface Patterns[A]. Proceeding of 15th International Conference on Human-Computer Interaction[C]. USA： Springer Berlin Heidelberg， 2013： 510-520.
[7] Perry， G.T.， Schnaid， F. A case study on the design of learning interfaces[J]. Computers & Education， 2012， 59（2）： 722-731.
[8] 杨现民，余胜泉. 泛在学习环境下的学习资源信息模型构建[J]. 中国电化教育，2010，（9）：72-78.
[9] Squires， D. Usability and educational software design： special issue of interacting with computers[J]. Interacting with Computers， 1999， 11（5）： 463-466.
[10][15] Wendler S.， Ammon D.， Kikova T.， et al. Development of Graphical User Interfaces based on User Interface Patterns[A]. The Fourth International Conferences on Pervasive Patterns and Applications[C]. Nice： XPS， 2012： 57-66.
[11] Shneiderman B.， Plaisant C. 用户界面设计：有效的人机交互策略[M]. 北京：电子工业出版社，2006.
[12][13] 理查德·E·迈耶. 多媒体学习[M]. 北京：商务印书馆，2006.
[14] Kim D.， Kim D.J. Effect of screen size on multimedia vocabulary learning[J]. British Journal of Educational Technology， 2012， 43（1）： 62-70.
[16] Ahmed S.， Ashraf G. Model-based user interface engineering with design patterns[J]. Journal of Systems and Software， 2007， 80（8）： 1408-1422.
[18][20] Engel J.， Herdin C.， Maertin C. Exploiting HCI Pattern Collections for User Interface Generation[A]. The Fourth International Conferences on Pervasive Patterns and Applications[C]. Nice： XPS， 2012：36-44.
[19] Dearden A.， Finlay J. Pattern languages in HCI： A critical review[J]. Human computer interaction， 2006， 21（1）： 49-102.
[21] Tidwell， J. Designing Interfaces， Patterns for Effective Interaction Design[EB/OL]. [2014-06-12]. http：//www.designinginterfaces.com.
[22] van Welie， M. Patterns in Interaction Design[EB/OL]. [2014-06-12]. http：//www.welie.com.
[23] van Duyne， D.， Landay J.， Hong J. The Design of Sites， Patterns for Creating Winning Websites[M]. Indiana： Prentice Hall International， 2006.
[24] Yahoo！ Inc. Yahoo！ Design Pattern Library[EB/OL]. [2014-06-12]. http：//developer.yahoo.com/ypatterns.
[25] Sally Fincher. PLML： Pattern Language Markup Language[EB/OL]. [2014-06-12]. http：//www.cs.kent.ac.uk/people/staff/saf/patterns/plml.html.
收稿日期：2014-09-30
作者简介：赵玉，讲师，硕士，广东行政职业学院电子信息系（510800）。
司国东，讲师，硕士，华南农业大学信息学院（510642）。
责任编辑 日 新
责任校对 日 新
