精品资源共享课网站界面的交互设计*

杜 营,王小青,刘吉林

(1.广东建设职业技术学院建筑信息系,广东广州 510440; 2.广东财经大学华商学院艺术系,广东广州 511300; 3.广东建设职业技术学院现代商务与管理系,广东广州 511300）

精品资源共享课网站界面的交互设计*

杜 营1,王小青2,刘吉林3

(1.广东建设职业技术学院建筑信息系,广东广州 510440; 2.广东财经大学华商学院艺术系,广东广州 511300; 3.广东建设职业技术学院现代商务与管理系,广东广州 511300）

基于精品资源共享课的性质与交互设计的理论,结合课程本身的特点及用户特征,提出服务于网络课程的界面交互、导航交互、按钮交互、内容交互、动画交互和测试交互的设计方法,以便学习者提高学习效果,达到优秀课程资源的共享.

精品资源共享课;界面;交互设计

0 引言

精品资源共享课建设是国家精品开放课程建设项目的重要组成部分,旨在促进教育教学观念的转变,引领教学内容和教学方法改革,推动高等学校优质课程教学资源通过现代信息技术手段共建共享,提高人才培养质量,服务学习型社会建设.精品资源共享课以量大面广的公共基础课、专业基础课和专业核心课为重点,以课程资源系统、丰富和适合网络传播为基本要求,经过国家、省、校三级建设,形成普通本科教育、高等职业教育、网络教育多层次、多类型的优质课程教学资源共建共享体系,为高校师生和社会学习者提供优质课程教学资源[1].精品课程资源共享课的web界面基于网络表现形式,包括按照课程教学目标和方法所整理的教学内容,与网络教学所运用的工具软件、课程教学资源,以及在网络教学平台上所进行的一系列教与学的活动.

1 界面交互

吉尔伯特和莫尔认为：“交互是两个或多个个体在学习环境中为完成学习任务或建立社会关系而进行的双向通信.”[2]交互存在于一切社会活动中,在不同的事物发展过程中或不同的社会环境下会表现出不同的形态,在信息化时代,交互更是一种普通和常见的现象.在精品资源共享课网站中,界面设计包含页面的内容布局、元素排版、色彩设计等视觉元素,同时包括学习者与web界面之间的交互设计.

1.1 界面模块布局和色彩基调

界面模块中的主次、位置和大小是界面设计者要考虑的首要问题.在精品课程共享资源平台上,教学录像、动画等资源特色可以放在网页的中心位置,将其作为网页的核心部分,突出界面的主次关系.在体现共享资源信息完善性的同时,增加页面的动态美感.在色彩基调上,网络课程在考虑课程性质的前提下,结合学习内容的性质和学习者的心理需求,运用色彩的和谐之美,通过色彩的美化手段体现对色彩应用和色彩最高目标的追求,如果色彩离开了视觉愉悦的整体显现,色彩的和谐之美就无从谈起[3].网页色彩应注重主题模板的开发,尽量使用邻近色以达到色调统一、和谐,界面色调既有均齐的严谨性,又有平衡的自由度,利用多种同一性的要素来调和界面的色彩搭配,抑制过分的对比色彩,消除视觉上的杂乱感,为学习者提供选择个性颜色的模板.

1.2 界面元素

界面元素包括菜单、文字、按钮、媒体等元素,传统课程基本具备了上述元素.然而,在精品资源共享课中,个性化的学习界面是该课程与以往网络课程的差异之处,页面除了供学习者浏览的同时,还可以让学习者在界面上添加笔记、标记等,学习者也可以根据自己的兴趣添加自己的个性化模块.

2 导航交互

导航能让学习者一眼看清楚整个学习内容的模块构成,根据自己学习的侧重点找到相应的模块,利用模块信息了解所处的位置,能较好的对教学信息构建进行整体把握.导航的设计,应遵循用户的需求、目标和使用偏好,设计师需要发现这些并为其开发以用户为中心的设计(UCD）[4].在UCD中目标非常重要,设计者关注用户最终想实现的目标,定义完成目标的任务和方式,并且始终牢记用户的需求与偏好.导航栏在网页中是一组超链接,与共享课中重要的页面相关联.导航的运用有助于避免学习者偏离教学目标,帮助学习者把握学习框架,导航交互包括栏目导航、辅助导航和“面包屑导航”①面包屑导航http：//baike.baidu.com/view/2122303.htm三种.栏目导航一般位于网页顶部象征性的网幅之下,以树形信息结构为基础,分为一级导航、二级导航、三级导航等以此类推;辅助导航一般位于网站的左右两侧,引导用户及时看到相近或相关的栏目,用于帮助用户使用网站的辅助性导航工具,如工具栏、快捷链接等.常用的辅助链接包括“网上帮助”、“在线客服”、“常用问题”等;面包屑导航让用户了解当前所处的位置,以及当前页面在整个网站中的位置,其作用是告诉学习者目前所在网站中的位置以及如何返回,减少返回到上一级页面的点击或操作,无需使用浏览器的“返回”按钮或网站的主导航来返回到上一级页面.导航的功能是协助用户查询信息和提示当前所在的位置,导航标签起着指示方位的作用,帮助用户熟悉网站的信息结构,导航系统的一致性是网站可用性的基本保证之一.设计师应该在布局、视觉表现、互动方式上保持风格的一致,使用户能够迅速地识别和预测网站的导航系统和操作方式[5].

3 按钮交互

按钮交互是指用户通过点击网页上的按钮,出现直观、实时、个性化的人机交互响应,其造型设计及色彩搭配应与网页界面风格相统一,以保证页面的整体协调.在用Flash软件实现按钮交互时,包括鼠标指针不在按钮上时的弹起状态、指针经过时按钮的颜色变化、鼠标按下时按钮的反应状态和鼠标点击时出现的交互响应.按钮在精品资源共享课中是不可或缺的元素,web中包括个性导航按钮和播放控制按钮.个性导航按钮是位于网页左右两侧的次导航菜单,原则上次导航是可以用文字实现的,然而按钮的嵌入,可以让其界面美观且交互过程形象,增加人机互动,激发学习者的阅读兴趣.播放控制按钮是共享课中最常用也是进入学习状态时不可缺少的交互元素,其造型设计的美观、大小、位置的摆放和交互的时效性与学习者的界面使用习惯关系密切,尤其是在播放时的实时交互,如暂停、前进、后退等按钮设计和进度条等的拖动操作都是播放控制按钮的关键.

4 内容交互

内容交互设计包括教学内容、学习资源及课程作业模块.精品资源共享课内容交互设计,首先要以学习者为中心,以提高精品资源共享课的教学质量,实现以学习者自主学习为核心的教学方式,内容的交互设计则必须遵循以学习者为中心,从学习者的角度出发,突出易学易用的特点,调动学习者自主学习的积极性;其次,要便于归纳、整合学习内容的后台技术支持,如学习者与教学内容的交互、学习者与计算机的交互、学习者与学习者间的交互等后台数据库建设;再次,为了避免学习者思维混乱,界面对话框、按钮等对象需设计简洁,标识清楚,内容界面应该分块组合,相同内容划分在同一区域板块上,且风格要一致,任何交互板块、最终学习内容交互板块的设计都要保持整体的一致性.

5 动画交互

目前,精品资源共享课的使用范围在高校,专业课程的性质和资源的共享形式略有不同,但使用对象基本是一致的.精品课程强调教学、共享,其资源共享课所针对的目标对象主要受众的是教师、学生以及社会学习者.在网络环境学习中,学习者应具有相应的能力,如必须能够熟练地进行计算机的使用和操作、自主学习能力、自我指导能力、良好的自控能力以及团队合作精神.因此,精品资源共享课的交互界面设计需要考虑到受众对象(用户）的特点和习性,才能够设计出最好的课程交互界面,让精品资源共享课的利用率最大化,达到课程建设的最终目的,使得人机交互更加成功.交互动画共享课程学习内容,其在动画播放时,支持事件响应和实时交互操作,动画播放期间学习者可以主动参与某种内容的操作,动画也因学习者的不同选择和接受某种控制(预先准备的编程）,让学习者由被动接受变为主动选择控制动画播放进度.动画的交互、课程内容与课程本身的教学内容密切联系,首先可以根据课程内容设计动画菜单进行选择.就一个大知识点而言,下面的小知识点随之作为动画交互,用户可以根据自己的需要选择某一个知识点进行学习.知识点播放结束或播放过程中想返回上一级大知识点的菜单可以随时实现.动画交互较视频而言,拥有更多的个性选择和互动.

6 测试交互

测试交互是课程学习评价的测试方式,便于了解学习者在学习完一个或多个知识后对知识的掌握程度,包括阶段测试和综合测试.根据课程的内容及知识点的难易程度,教师可以设计选择题、填空题、判断题、问答题等题型,阶段测试可以让学习者了解自己对现阶段的知识把握程度,及时反馈学习内容的不足.综合测试是学习者通过各种交互学习完成整个课程后,检测其对知识点的总体把握与运用程度,有效的让学习者了解自己的学习状况.

精品资源共享课是建立在信息时代下,对教学方法、教学手段与教学媒介的改革,对网络课程的界面、导航、按钮、内容、动画、测试各种交互设计进行研究与实践,其建设包括对学习者心理、界面优化、认知习惯等诸多内容,是建立在现有精品课程的基础建设,但较精品课程需要更完善的共享资料和社会公开度,对网站学习内容的交互设计技术要求更高,强调科学教学和资源共享,其主要受众除了教师和学生外,还包括社会学习者,相比受众主要为教师的精品课程,其更适合现阶段信息社会的需要.因此,要加强精品资源共享课网站界面的交互设计,充分发挥共享课教学资源的利用与共享,以便更好的为高校师生和社会学习者提供优质的课程教学资源.

[1]教育部办公厅.教育部办公厅关于印发《精品资源共享课建设工作实施办法》的通知[EB/OL].(20130823）.http// www.moe.gov.cn.

[2]Gilbert L,Moore D R.Building Interactivity into Web Courses：Tools for Social and Instructional Interaction[J].Educational Technolgy,1998,38(3）：26.

[3]邢庆华.色彩[M].南京：东南大学出版社,2005.

[4]塞弗.交互设计指南[M].陈军亮,陈媛嫄,李敏,等译.北京：机械工业出版社,2010.

[5]崔山山.网页设计[M].重庆：重庆大学出版社,2011.

[6]杨在宝,张杰.“教学系统设计”网络课程的交互设计探索[J].中国教育信息化,2010(3）：74-76.

[7]李寿材,马秀峰.国家精品课程网站色彩调查与分析[J].电化教育研究,2009(3）：83-86.

[8]武法提.网络课程设计与开发[M].北京：高等教育出版社,2007.

On the Design of the Online Interactive Interface for the Resource Sharing Course

DU Ying1,WANG Xiaoqing2,LIU Jilin3
(1.Department of Building Information,Guangdong Construction Vocational College of Technology,Guangzhou 510440,China; 2.Department of Arts,Huashang Institute,Guangdong College of Finance&Economics,Guangzhou 511300,China; 3.Department of Modern Business&Management,Guangdong Construction Vocational College of Technology,Guangzhou 510440,China）

Through analyzing the characteristics of the excellent sharing resources,the theories of interaction design,and the features of courses and their users,this paper aims to put forth some design methods to assist online courses,including interactive interface,navigation,buttons,content,animation and tests design.It is hoped that such methods can accelerate the sharing of outstanding teaching and learning resources and help learners improve learning effectiveness

excellent resource sharing;interface;interaction design

G423

A

1009-1734(2014）02-0110-03

2013-12-25

广东建设职业技术学院校级课题(2012-02）.

杜营,讲师,硕士,研究方向：艺术设计、多媒体技术.E-mail：82114704@qq.com