基于Web2.0的高校网络课程界面元素设计策略

◆李冬霞

界面设计的好坏是影响学生进行有效学习的重要因素。基于Web2.0的网络课程界面元素设计以服务于网络课程的使用者为主，Web2.0强大的服务功能主要表现在以下方面。

1）Blog和Wiki让学习者在线发表自己的学习心得、疑惑、感情流露等，通过借助RSS与Tag将自己创作的内容主动发布出去，从而和对自己创作内容有共同兴趣的人群实现分享、交流，在他人的反馈下，学习者进行反思，加深理解。

2）社交网站和Tag标签让学习者在线上寻找到有共同兴趣爱好的学习同伴，形成个人学习社会圈，同时学习者有机会接触到专业领域学者，与他们建立起社会关系网络，分享他们的研究成果、思想观念[1]。

3）Web2.0提供如Podcast、问卷调查、Wiki、心得报告、日志、聊天、BBS、测验、投票、互动评价等多种在线学习活动。学习者通过参与这些学习活动，实现多层面的沟通交流。

4）借助RSS，教师向学生布置作业，通过与学生互相定制学习频道、Blog了解学生的作业情况，利用Wiki技术对学生提交的作业给予回复[2]。具有可读可写特性的Web2.0可以记录学生学习行为，教师可以查看学生访问课程的次数、时间以及场所，也可以查看某个教学模块的学生参与情况。教师可以从学习态度、学习方法等方面给出评价，如采用问卷、学生反馈、网络调查、专家意见、学习者留言等多种方式，而不再只针对学习成绩给出单一的评价，从而实现多元化的评价。

5）基于Web2.0的网络课程为学生提供独立自主学习工具、可视化知识管理软件，如电子字典、有道云笔记、思维导图（Mindmanager）、概念图（Concept Map）等，促进学习者隐性知识显性化，提高学习者思维的发散性和想象力，这样更有利于学习者信息交流、知识共享、协同建构知识，从而提高其获得知识技能的效率，提高协作学习的能力，满足学习者的个性化学习需要。

基于Web2.0的网络课程界面元素设计主要是为了构建个人学习环境，创设与学习主题相关的情境，体现人文气息，为学生自主建构知识提供一种良好学习环境。为了取得更好的网络学习效果，根据当前学习者特征以及高校网络课程界面设计存在的问题，采用不同工具与技术之间的优化组合、功能渗透。以下提出具体界面元素设计策略。

1 导航设计

导航设计的原则应清晰、合理，符合人的心理视觉运动规律。设计文字导航，告知学习者目前所处位置以及下一步学习的方向，避免迷航。设计关键字导航，针对一些专业术语、关键词、图片、网站资源等以超链接形式提供解释、提示或说明[3]。提供具体的标签和查询功能，标签可以帮助学习者自己定位，学习者可做学习进程的标记，注明自己的学习状态；提供查询搜索功能可以帮助学习者尽快检索所需的学习资源[4]。

2 菜单、窗口设计

设计原则应尽量简化、符合用户操作习惯。设计通过使用鼠标、选择下拉菜单、超链接跳转等简单操作，利用新打开窗口可以进入课程新内容的学习，利用加入收藏夹、书签等方式方便学习者管理个人学习单元。帮助、导航菜单方便学习者了解某一具体模块的功能。

3 超文本的设计

设计原则应符合个性化需要定制，做到生动、灵活、富有感染力。考虑到网络课程资源庞杂及不同学习者不同的学习特性，采用超文本、超媒体来组织教学信息，以满足学习者链接方式进行知识学习的需要。将难点、难题等设为热字，点击它即出现相应的解读或参考答案，热字的内容可以做成纯文本或是声音、图像、动画、视频等，同时可将这些图像、动画、视频等作为交互的对象和学习者发生交互，让学习者参与到学习活动中。采用醒目颜色，如红色、绿色、蓝色可以将热字和其他文本进行区分。

4 文字的设计

文字设计原则应和谐统一、简洁数字化。在对文字编排与设计时，不仅要考虑到字体、字号、行距、文字数量以及文字排版的方式，而且在文字的色彩设计上需要注意与页面的背景色搭配和谐，文字呈现的效果带给人的感受应是易读、易看、易理解，简洁明了，还能触发人的情感。学习文本总体上应有统一的风格，以方便学习者定位相关的学习，对于重要文本则使用下画线、斜体字或彩色字、加大字号、适量的闪烁等功能来吸引学习者的注意力。在网络飞速发展的今天，文字作为信息的重要外在形式，必然要顺应时代潮流，满足大学生的个性化需求，数字媒体区别于传统媒体的一个重要特点就是展现了一种全新的、浓缩的高科技空间，代表着一个新的美学领域。文字的设计可适当采用3D字体元素，增强多维空间的立体感，让学习者体会到文字的真实感，给人一种在虚拟网络学习空间中触觉上的体验。

5 图形和图像的设计

图形和图像的设计原则应符合清晰性、真实性、简洁性、情感艺术性。界面中使用的图像要保证清晰度，不对图像进行涂抹、剪贴等毁坏图像本来面目的操作，去除与主体无关部分，突出主体，尽量减少图像文件的大小。选择图片的格式方面应主要使用Gif图像、JPG图像；但是对图像质量要求较高时，应采用没有损失或损失较小的图像文件格式，如TIF、BMP等；而要求页面背景保留时，应采用透明的Gif、png格式的图像。为了表现情感艺术性，可以对图像的色调、对比度、饱和度进行调整，通常可利用Photoshop、CorelDRAW、光影魔术手、美图秀秀等工具美化图片，增强艺术美感。

6 视频动画的设计

视频动画设计原则应微型简洁、流畅化、赋予教育性。通常使用的视频文件有AVI和MOV两种类型，视频窗口开设的大小要合适，过大不仅影响其他媒体所占据的空间，还会使画面不清晰，最好能够智能化地自由缩放控制。为了让视频播放更流畅，网络课程中的视频时间不要过长，若视频时间较长，可将视频分割成多个短时间视频片断连续播放。如今流行的微课程、微视频、MOOC（大规模开放在线课程）一般采用5～15分钟的视频，可以借鉴其制作方式和技巧进行设计。Flash动画具有体积小、可边下载边播放等特点，让抽象的内容形象化，许多难以理解的内容变得生动有趣、有声有色，合理使用动画便可以达到更好的学习效果[5]。

7 声音的选配

声音选配原则应符合科学教育性、播放可控、流畅性。一般选择与学习内容表现的主题相符、轻快的轻音乐，背景音乐旋律和节奏一定要服从于内容，不可干扰学习者学习。一般采用MP3、MIDI、WAV音频文件格式方便传播。配音的添加要合理，不合理的配音往往会分散学生的注意力，画蛇添足[6]。另外，有的学习者不喜欢有背景音乐，因此，界面应有声音控制开关，遵循可控性原则，这样学习者可根据情绪需要控制音量的大小及声音更换、播放、停止等播放模式。

8 色彩的设计

色彩设计遵循总体协调、局部对比的原则。不同的色彩有不同的喻义，因此要谨慎选择。选择色彩时要符合人的视觉规律，选择清晰、简洁的颜色，前景与背景的色彩要搭配和谐，从而减少视觉疲劳。恰当运用色彩，构成新颖的色彩搭配，可以起到视觉传达导向性的作用，引导学习者的视觉方向，减弱其他干扰元素，这是交互设计的精髓。色彩的合理运用可以给人轻松自在的学习感受，营造一种激发学习动机和兴趣的学习氛围。

9 版式的布局设计

界面版式布局原则应符合主次分明、合理性、均衡性、直观性。1:1.618的黄金比长宽比是最具有视觉美感的版式。对称布局的设计具有稳定、庄严、整齐、秩序、安宁、沉静的特点，垂直均匀的布局若处理不恰当，容易造成视觉心理的不平衡，那么可采用分隔线作部分或全部的弱化处理，或加入其他元素，使左右部分的过渡自然而和谐。版式布局的各个组成元素要根据人的视觉审美习惯和心理感知，分清主次，合理编排组合界面的每个元素，体现整体感的一致性和连贯性，运用媒体技术处理，形成变化丰富的画面，达到多视点、多层次、立体感的空间形态，使得教学内容能形象地展示在学习者的面前，形成较好的学习交互。

总之，高校网络课程的内容不是以线性方式组织的教科书文本，而是以超文本方式组织的多媒体学习单元，即多媒体元素组成的微学习单元[7]。任何设计策略、原则应合理地解决使用者多方面需求，将各个界面元素恰当合理地置于页面板块中，达到人性化的友好界面。Web2.0的新技术、新理念在网络课程界面元素的设计中体现出巨大的优势，能够改善网络课程学习资源的呈现方式，加速网络学习资源的更新频率，促进网络学习资源的开放、共享，提升网络课程的人际交互和人机交互，便于网上学习活动开展，有利于构建面向过程的、多元化的评价体系，实现学习评价的客观、全面、公正。在设计界面元素的过程中，必须充分考虑人的学习心理特征，注重界面设计的科学性、艺术性、教育性，合理运用各种技术手段，遵循易学易用又不失美感的原则。只有这样，才能够提高学习积极性，达到理想的学习效果。

当今是数字化社会，界面的设计赋予数字化是不可改变的主流。基于Web2.0的网络课程界面元素设计虽然有很大的优势，但也存在不足，在利用优势的同时应尽量减少不利因素。在这个视觉刺激泛滥的年代，创新是设计的灵魂，没有固定的设计模式，也没有完美的设计模式，只有更优化、更友好的界面设计。“他山之石，可以攻玉”，需要借鉴更优秀的作品来达到更智能化、更人性化的界面，达到创意美、视觉美、人性美、秩序美、和谐美、变化美的一种不可替代的艺术美感。

[1]马凌.Web革命与教育创新[J].哈尔滨市委党校学报,2008(5):81-82.

[2]赖德刚.基于Web2.0的中小学教师远程培训平台的设计[J].中国科教创新导刊,2011(12):190.

[3]张筱兰,欧阳汝梅.高校自主学习型网络课程的设计策略[J].电化教育研究,2008(12):38-41.

[4]王琪.网络课程设计之点滴思考[J].中国远程教育,2002(5):38-40.

[5]束梅霞.视觉文化支持下的初中信息技术学案设计研究[D].南京:南京师范大学,2011.

[6]黄庆华.多媒体软件界面艺术设计研究[D].上海:华东师范大学,2007.

[7]张振亭.基于系统观的网络课程设计与实现[D].武汉:华中师范大学,2002.