高职院校精品资源共享课程网站界面设计与研究

郝倩, 李垒

(河南工业职业技术学院， 南阳 473009)

0 引言

精品资源共享课是以教师和学生为服务主体，同时面向社会学习者的网络共享课程，是具有丰富教学资源的优秀课程[1]，是自教育部对原来的国家精品课程的一个转型和升级。精品资源共享课的建设和评审工作，主要通过课程网站进行实施。课程网站作为精品资源共享课优质教学资源信息的载体，网站界面作为课程的呈现形态，是精品资源共享课程建设的一个重要组成部分，界面设计优劣直接影响教学资源的呈现与共享。优秀的精品资源共享课网站界面设计对教师、学生和行业企业人员有着良好的收益。

文章通过高职院校精品资源共享课网站的界面布局、导航、色彩等进行分析，指出了高职精品资源共享课在界面设计方面的现状与不足，依据精品课程制作原则，提出应对措施。

1 研究内容与方法

为提高高职院校的专业教学质量、丰富教学资源、方便师生学习交流，精品资源共享课不仅渗透各个专业的专业核心课程中，而且在专业基础课和公共课中也被广泛建设。

精品资源共享课程是将优质课程进行网络化，是一种特殊的网络课程。目前，网络课程评价一般由专家评定，而作为网络学习使用者也是最具发言权的。基于笔者对网络课程的研究、设计、开发和使用经验，并在一定范围内对使用精品资源共享课的教师、学生、企业人员、评审专家的调查与思考，依据《网络课程评价规范》和《现代远程教育资源建设技术规范》对课程界面设计元素的要求，结合教育软件工程中界面设计的原则和高职精品资源共享课的实际情况，对高职院校精品资源共享课网站界面的设计进行了实际性的研究。

2 精品资源共享课程网站界面设计的原则

界面设计在精品资源共享课建设中起着重要作用，课程的界面直接影响课程外观及对学生学习兴趣的激发和维持。精品资源共享课界面设计除遵循一般网络课程界面设计的原则外，还应具备以下几点：

1) 版面布局结构

界面设计简洁、美观友好，能激发学习者的兴趣。其中，版面留白量在30%—50%，背景色彩纯度合适；标题设计美观，凸现背景之上；重要信息要置于突出位置加以强调；信息一致性保持统一格式，实现统一感，便于阅读和搜索。

2) 导航与迷航

页面布局合理，导航清晰，重点突出，操作方便。信息组织符合本门课程的内在逻辑体系和学习者的认知规律，不出现空链接。

3) 界面风格与色彩运用

界面风格一致，同一课程不同页面间要实现整体统一，局部变化，和谐完整。色彩运用要符合学习者习惯，基本调色符合教学内容的特点和学生的认知心理，如活泼、中性、沉静。另外，同一版面控制在3种颜色内，之外可添1-2种邻近色，做到和谐、达到视觉平衡；为突出重点，色彩对比要合理。

4) 文字设计

对于文字，同版字体设计在3种内，字距、行距适中，标题以H1-H3为佳，正文字体12-14号为适。

5) 图像元素

在构图、色彩搭配、画面组成与衔接方面处理图像元素时，要符合心理学和美学的基本原则；图片要经过压缩、优化，提高网页的预览速度。

3 精品资源共享课程网站界面设计存在的问题

1) 界面布局混乱

布局页面时，屏幕空间按功能划分区块，如标题区、导航区、新闻滚动图片区、 栏目区、页脚版权区等，各区块分布要简洁、协调、美观，精品资源共享课在界面设计的布局上要符合学习习惯。由于不少网站界面设计时各区划分主题不突出，设计时过多地使用图片、动画刺激学习者的视觉感官，栏目交叉或重复，出现喧宾夺主的现象，没有达到以教学设计为目的的创造视觉环境。

2) 导航不够清晰

学习者在浏览网页时，找不到相应的节点，则称之为迷航[3]。在问卷的“您在浏览精品资源共享课时，有没有出现过迷航现象？”中，认为曾出现迷航现象的比率高达78.5%。说明网站导航设计不合理，如导航标签和目标内容不完全对应；节点层次过多，当前位置孤立等现象。

3) 下载速度较慢

部分课程界面元素较多，如图片、动画、视频、音频较多或未经格式压缩，增加页面的下载量，影响页面下载速度，影响学习的质量和效果。在问卷的“您在浏览精品资源共享课时，是否出现页面被卡现象？”中，出现页面被卡比率为32.5%。这就造成用户访问时可能会因下载时间过长放弃学习的兴趣，也就失去了资源共享的初衷。

4) 色彩搭配不当

人眼的视觉感知取决于瞳孔和感光细胞的调节，如果光线太强或太弱会引起眼睛不适。有些课程页面设计过于追求鲜明的色彩或强烈的色彩对比，违背机体的视觉规律与用眼健康，使学习者产生急躁厌烦的心理，影响学习效果。

优化网络界面的设计，是高职精品资源共享课程网站建设的任务之一[4]。遗憾的是由于疏忽了设计的原则，使得很多课程网站界面设计流于形式。为了解决上述问题，更好地传播精品资源共享课，共享优质教学资源，笔者从网站界面设计的流程出发，提出几点对策和建议，尚有待于在实践中继续完善。

4 精品资源共享课程网站界面设计的建议和措施

1) 网站整体规划

界面设计是由多门学科构成的产物。涉及到计算机科学、心理学、图形艺术、人机工程学等。精品资源共享课程网站界面设计是一个团队合作的结果，需专业教师、网页设计师、程序开发员等协同完成。界面设计凝集着其中每个人的智慧和创造。由于个人爱好和观点不同，在界面设计前要充分沟通、协调一致，做好整体规划，协同创造精品。

2) 网站内容组织

网站资源内容的建设是整个网站建设的核心。精品资源共享课程网站建设是否成功，其中内容的整体设计起着重要的作用。首先由教师提供网站内容建设架构图，如图1所示。

图1 网站内容建设架构图

设计好的架构图，使网页设计师对整个网站内容结构清晰；网站内容栏目、层次关系，主页显示的素材。

网站内容组织结构图设计，是将教学资源横向排列并按照基本资源和拓展资源进行分类，纵向排列要按照课程学习单元进行分类，以树型结构表示。

3) 网站实现技术

在内容建设架构图的基础上，选择合适的建站模式。从技术上讲，大致分为4种，其优缺点分析，如表1所示。

4) 网站界面风格

界面风格就是网站的外衣，包括页面布局、网页元素、色彩搭配等内容组成后给人的视觉印象。精品资源共享课程网站的风格设计应该围绕课程性质，不同的课程形成不同的风格。网络课程评价规范(CELTS-22 )要求网络课程“界面风格统一，协调美观，易于使用和操作，具有完备的功能。”在风格设计前，需确定网页的布局、色系、导航，形成图文相辅相承的页面风格。

构成风格的3个要素如下：

(1) 布局。心理学的研究表明，平面的视觉影响力上方强于下方，左侧强于右侧。平面的上部和中上部被称为“最佳视域”。对于重点突出的内容，安排在最佳视域，而工具按钮一般放在屏幕的四周，菜单通常紧靠标题区。主体内容涵盖的文字、图形、视频、动画等多媒体对象应合理安排，使页面布局简洁、协调、美观，营造符合教学设计目的的视觉环境，增强学习者的注意力。在页面布局中，页面功能区不同，考虑的侧重点也要有所不同，各功能区划分要做到突出重点，功能明显。

表1 网站建设实现技术及优缺点

(2) 色彩。传达网站形象的首位视觉要素就是色彩。网站设计时首先确定一个主色调，主体色与背景色要对比协调。不同功能按钮在突出差异的同时，要合理应用色系，即主题色、辅助色和强调色。建议一个页面的色彩不要超过4种色彩，否则没有方向感和侧重感。

(3) 导航。导航标签代表的是整个网站的内容结构标识，用户依靠标签的内容和组织方式了解网站中的信息。设计标签的过程，实际上就是对信息分类的过程，必须做到标准清晰，有歧义的标签使用户很难预测到链接背后的内容，甚至使用户走错路或迷航。

5) 画好粗略草图

教学团队根据课程性质，结合网站内容建设架构图，完成粗略布局。经过反复构思，拿出一张白纸一支笔，通过纸上布局，发挥自己的想象力，把创意轮廓画成草图。这只是创作阶段，不讲究细腻工整，只要设计师能明白教师的用意即可。可以多出几个方案，择优选择。

6) 细化布局

对布局进行细化是一种创作，要立足于信息的传达，做到视觉流程自然、合理、畅快，页面上各信息要素的位置、间隙、大小保持一定的节奏和美感。细化布局一般采用Photoshop或Firework进行设计制作。网页大小参照显示器的分辨率设计，高度不限，宽度比显示器实际尺寸窄20像素，使右边的滚动条留一定空间。布局时根据创作脚本，把精品资源共享课程网站的重要信息如LOGO、标题、导航、课程介绍放在页面的重要位置。页面布局采用左右对齐式、对称式、全景式、单侧对齐式、包围式和照片组合式布局等样式。另外，布局时要注重合理运用点和线。点的引导使用户能够轻松找到需要的信息，线条运用对页面不仅起到分割作用，还可锦上添花。

7) 界面美化

为进一步美化界面风格，可以添加适当的FLASH或JavaScript特效，使网页界面更加生动。但动画适可而止，过多会显得杂乱。如导航和课程介绍部分可以由教师结合课程亮点凝练文字和精选图片，以此丰富动画内容，至此界面制作完成。

5 总结

基于高职院校精品资源共享课程网站界面设计与研究中提出的建设方法和措施，在我校电子技术、计算机应用技术和网络技术3个专业核心课程的精品资源共享课程网站界面设计实际建设中，已全面得到借鉴和推广，经验证该研究取得了很好的指导作用。在精品资源共享课程建设的道路上，如何把网站界面设计内化为课程内在的魅力，需要以用户需求为出发点和落脚点，根据不同的课程特点，在不违背设计原则的前提下，从版面布局结构、导航与迷航、界面风格、色彩运用、文字设计、图像元素等方面进行设计创新，针对现阶段存在的问题，对网站整体规划、内容组织、实现技术、细化布局、界面美化等方面进行详细研究，从而使课程网站更具多样性和吸引力，实现精品资源共享课的品牌效应。由于篇幅有限，文章省略界面设计实例的引入。