高职精品资源共享课网站界面设计与思考

张会丽+杨威

摘 要：高职精品资源共享课网站是优质教学资源的载台，其界面设计优劣直接影响到课程建设质量，关系着教学资源的呈现与共享。本文对山西省高职48门精品资源共享课程网站界面设计进行了调查，分析了目前山西省精品资源共享课程网站界面设计存在的问题，提出了解决问题的方法和措施。

关键词：精品资源共享课；网站界面设计

中图分类号：TP393 文献标志码：A 文章编号：1673-8454（2014）01-0036-04

一、研究背景

精品资源共享课是以教师和学生为服务主体，同时面向社会学习者的网络共享课程，是具有丰富教学资源的优秀课程[1]。从2011年10月和2012年5月，教育部先后颁发了《教育部关于国家精品开放课程建设的实施意见》和《精品资源共享课建设工作实施办法》，启动了新一轮精品课程建设工作。

为了贯彻实施教育部的精神，原有国家精品课程转型升级为精品资源共享课，新课程也陆续免费开放。精品资源共享课的建设和评审主要是依托课程网站来实施的，课程网站作为精品资源共享课优质教学资源信息的载体，其网站界面作为课程的呈现形态，无疑成为精品资源共享课程建设的一个重要组成部分，界面设计优劣直接影响到教学资源的呈现与共享。相关调查表明，日常生活中人们所感知的外部信息，有83%是通过视觉通道到达人们心智的[2]。由此可见，良好的精品资源共享课网站界面设计对于广大老师、学生以及行业企业人员来说都是大有裨益的。

本文从山西省近两年公布的精品资源共享课网站中随机抽取48门高职课程网站界面作为样本，通过对样本的界面布局、导航、色彩等进行分析，指出了我省高职精品资源共享课在界面设计方面存在的不足，按照精品课程制作原则，提出了几点对策和建议，有待与同仁共同商榷。

二、研究内容与方法

（1）研究内容。为了保证样本抽取的可靠性与全面性，样本覆盖高职建筑类、制造、电子信息、医药卫生、旅游、财经等专业核心课程和专业基础课以及公共基础课。各学科所占课程数量，如图1所示。

（2）研究方法。精品资源共享课将优质课程网络化，它是一种特殊的网络课程。评价一个网络课程的界面设计质量有很多标准，但是目前网络课程评价一般由专家评定，而网络课程是供网络学习者使用的，学习者才最有发言权。基于笔者对网络课程的研究[3]和对网络课程设计、开发和使用经验，以及在一定范围内对使用精品资源共享课的教师、学生、企业人员、评审专家进行调查与反思，参照《网络课程评价规范》（CELTS-22）和《现代远程教育资源建设技术规范》对课程界面设计元素的要求，结合教育软件工程中界面设计的原则和高职精品资源共享课的实际情况，修改了界面设计评价标准，见表1。

三、评价结果分析与思考

通过调查综合评分，前五名的课程 见表2 。

为了进一步分析样本界面设计的特点，我们进行了问卷调查、组织召开评价人员座谈反馈会，对精品资源共享课程在界面设计方面应坚持的原则达成共识，并收集分析了部分课程在界面设计方面存在的不足之处。

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

界面设计是精品资源共享课建设的一项重要内容，课程的界面不仅影响到课程本身外观，也影响学生学习兴趣的引起和维持。精品资源共享课界面设计除具有一般网络课程界面设计的原则外，还应该坚持以下原则：（1）界面设计简洁、美观、有亲和力，能引起学习者的兴趣；（2）屏幕布局合理、条理清晰、重点突出；（3）界面风格一致，同一课程不同页面整体统一，局部变化，和谐完整；（4）导航清晰，方便易用，灵活有效；（5）高职精品资源共享网站还要体现网站的职业教育属性。

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

（1）界面布局凌乱。目前网页布局时一般要将屏幕空间按功能分区，如标题区、导航区、新闻区、 栏目区、图片翻滚区、版权区，各区分布要简洁、协调、美观。然而，在问卷的“您认为精品资源共享课在界面设计，如布局方面是否符合您的学习习惯？”一题中，认为界面设计很适合的比率仅为35.5%。这主要是由于不少网站界面设计时各区划分主题不突出，设计时过多地使用图片、动画刺激学习者的视觉感官，栏目交叉或重复，出现喧宾夺主的现象，没有营造出以教学设计为目的的视觉环境。

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

（3）下载速度较慢。部分课程界面元素较多，图片、动画、视频太多或没有经过格式压缩，影响了页面的下载速度。如过多地运用渐变色、采用较多无关的图像而不进行优化处理、视频和声音片断的时间较长、文件也没有用流媒体的形式播放、插入Flash 动画时未采取适当的方式减少动画的文件量等，这些都会增加页面的下载量，势必影响学习质量和效果。在问卷的“您在浏览精品资源共享课时，有没有出现过页面被卡住现象？”一题中，认为出现页面被卡的比率为32.5%。这就造成用户访问时可能会因下载时间过长放弃学习的兴趣，也就失去了资源共享的初衷。

（4）色彩搭配不当。人的视觉感知力需要依靠瞳孔和光敏细胞的调节，光线过强或太弱均会给眼睛造成不适。在问卷的“您在浏览精品资源共享课时，有没有因色彩运用不当出现厌烦情绪？”一题中，认为出现厌烦心理的比率为28.5%。这说明有些课程页面设计过于追求鲜明的色彩或强烈的色彩对比，违背机体的视觉规律与用眼健康，使学习者产生急躁厌烦的心理，影响学习效果。

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

四、精品资源共享课程网站界面设计流程

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

（2）网站内容组织。网站资源内容的建设是整个网站建设的核心。精品资源共享课程网站建设的成功与否，内容的整体设计起着举足轻重的作用。首先由教师提供网站内容建设架构图（如图2）。设计好的架构图，目的是让网页设计师清晰地了解；网站内容栏目、层次关系，主页显示的素材。

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

（3）网站实现技术。有了内容建设架构图，设计师对网站的链接层次，从而选择合适的建站模式，对链接的实现技术做到心中有数。从技术上讲，可采用的技术大致有四种，其优缺点分析见表3。

（4）网站界面风格。界面风格就是网站的外衣，包括了网页上的所有元素（布局，文字，颜色等）组成后给人的视觉印象。如：韩国风格，欧美风格；风格设计应该围绕课程性质，不同的课程形成不同的风格。网络课程评价规范（CELTS-22 ）要求网络课程“界面风格统一，协调美观，易于使用和操作，具有完备的功能。”在风格设计前大致需要确定布局、色系、导航，形成图文相辅相承的页面风格。说到风格需要了解构成风格的三个要素。

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

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

③导航。导航标签代表的是整个网站的内容结构标识，用户依靠标签的内容和组织方式来寻找网站中的信息。设计标签的过程，实际上就是对信息分类的过程，必须做到标准清晰，有歧义的标签逼人猜测它的意图，使用户很难预测到链接背后是什么内容，甚至让用户走错路或迷航。

（5）画好粗略草图。教学团队根据课程性质，结合网站内容建设架构图，完成粗略布局。经过反复构思，拿出一张白纸一支笔，发挥自己的想象力，把创意轮廓画成草图，这只是创作阶段，不讲究细腻工整，只要设计师能明白教师的用意即可。尽可能多画几张，最终选定一张作为创作脚本，如图3所示。

（6）细化布局。细化布局是一种创造，既要立足信息的传达，也要做到视觉流程自然、合理、畅快，使页面上各信息要素的位置、间隙、大小保持一定的节奏感和美感。细化布局一般采用Photoshop或Firework设计制作。网页大小根据显示器的分辨率设计，高度不限定，但宽度比显示器的实际大小窄20像素，为的是给右侧的滚动条留有一定的空间。目前，主流页面大小一般为995*436。布局时要根据创作脚本，把最重要的信息如LOGO、标题、导航、课程介绍放在最显眼的地方。页面布局样式可采用左右对齐式、全景式、包围式、对称式、单侧对齐式、卫星式、散开式、照片组合式布局等。另外，布局时要注重合理运用点和线。点的引导作用是让浏览者更轻松的找到自己想要的信息。线不但可以起到页面的分割作用，很好地运用线条还使网页锦上添花。

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

五、结束语

在精品资源共享课程建设的道路上，如何把网站界面设计内化为课程内在的魅力，需要处处以用户为出发点和落脚点，根据不同的课程特点，在不违背设计原则的前提下，进行设计创新，从而使课程网站更具多样性和吸引力，实现精品资源共享课的品牌效应。

参考文献：

[1]《教育部关于国家精品开放课程建设的实施意见》（教高[2011]8号）[Z].

[2]刘丹.企业形象识别系统[J].东北农业大学学报（社会科学版），2006（1）.

[3]杨威.信息技术教学导论（第2版）[M].电子工业出版社，2007.5.

[4]张晓瑷.浅谈教学网站的界面设计和色彩搭配[J].农业网络信息，2008（1）.

[5]《精品资源共享课建设工作实施办法》（教高厅[2012]2号）[Z].

（编辑：王晓明）endprint

四、精品资源共享课程网站界面设计流程

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

（2）网站内容组织。网站资源内容的建设是整个网站建设的核心。精品资源共享课程网站建设的成功与否，内容的整体设计起着举足轻重的作用。首先由教师提供网站内容建设架构图（如图2）。设计好的架构图，目的是让网页设计师清晰地了解；网站内容栏目、层次关系，主页显示的素材。

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

（3）网站实现技术。有了内容建设架构图，设计师对网站的链接层次，从而选择合适的建站模式，对链接的实现技术做到心中有数。从技术上讲，可采用的技术大致有四种，其优缺点分析见表3。

（4）网站界面风格。界面风格就是网站的外衣，包括了网页上的所有元素（布局，文字，颜色等）组成后给人的视觉印象。如：韩国风格，欧美风格；风格设计应该围绕课程性质，不同的课程形成不同的风格。网络课程评价规范（CELTS-22 ）要求网络课程“界面风格统一，协调美观，易于使用和操作，具有完备的功能。”在风格设计前大致需要确定布局、色系、导航，形成图文相辅相承的页面风格。说到风格需要了解构成风格的三个要素。

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

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

③导航。导航标签代表的是整个网站的内容结构标识，用户依靠标签的内容和组织方式来寻找网站中的信息。设计标签的过程，实际上就是对信息分类的过程，必须做到标准清晰，有歧义的标签逼人猜测它的意图，使用户很难预测到链接背后是什么内容，甚至让用户走错路或迷航。

（5）画好粗略草图。教学团队根据课程性质，结合网站内容建设架构图，完成粗略布局。经过反复构思，拿出一张白纸一支笔，发挥自己的想象力，把创意轮廓画成草图，这只是创作阶段，不讲究细腻工整，只要设计师能明白教师的用意即可。尽可能多画几张，最终选定一张作为创作脚本，如图3所示。

（6）细化布局。细化布局是一种创造，既要立足信息的传达，也要做到视觉流程自然、合理、畅快，使页面上各信息要素的位置、间隙、大小保持一定的节奏感和美感。细化布局一般采用Photoshop或Firework设计制作。网页大小根据显示器的分辨率设计，高度不限定，但宽度比显示器的实际大小窄20像素，为的是给右侧的滚动条留有一定的空间。目前，主流页面大小一般为995*436。布局时要根据创作脚本，把最重要的信息如LOGO、标题、导航、课程介绍放在最显眼的地方。页面布局样式可采用左右对齐式、全景式、包围式、对称式、单侧对齐式、卫星式、散开式、照片组合式布局等。另外，布局时要注重合理运用点和线。点的引导作用是让浏览者更轻松的找到自己想要的信息。线不但可以起到页面的分割作用，很好地运用线条还使网页锦上添花。

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

五、结束语

在精品资源共享课程建设的道路上，如何把网站界面设计内化为课程内在的魅力，需要处处以用户为出发点和落脚点，根据不同的课程特点，在不违背设计原则的前提下，进行设计创新，从而使课程网站更具多样性和吸引力，实现精品资源共享课的品牌效应。

参考文献：

[1]《教育部关于国家精品开放课程建设的实施意见》（教高[2011]8号）[Z].

[2]刘丹.企业形象识别系统[J].东北农业大学学报（社会科学版），2006（1）.

[3]杨威.信息技术教学导论（第2版）[M].电子工业出版社，2007.5.

[4]张晓瑷.浅谈教学网站的界面设计和色彩搭配[J].农业网络信息，2008（1）.

[5]《精品资源共享课建设工作实施办法》（教高厅[2012]2号）[Z].

（编辑：王晓明）endprint

四、精品资源共享课程网站界面设计流程

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

（2）网站内容组织。网站资源内容的建设是整个网站建设的核心。精品资源共享课程网站建设的成功与否，内容的整体设计起着举足轻重的作用。首先由教师提供网站内容建设架构图（如图2）。设计好的架构图，目的是让网页设计师清晰地了解；网站内容栏目、层次关系，主页显示的素材。

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

（3）网站实现技术。有了内容建设架构图，设计师对网站的链接层次，从而选择合适的建站模式，对链接的实现技术做到心中有数。从技术上讲，可采用的技术大致有四种，其优缺点分析见表3。

（4）网站界面风格。界面风格就是网站的外衣，包括了网页上的所有元素（布局，文字，颜色等）组成后给人的视觉印象。如：韩国风格，欧美风格；风格设计应该围绕课程性质，不同的课程形成不同的风格。网络课程评价规范（CELTS-22 ）要求网络课程“界面风格统一，协调美观，易于使用和操作，具有完备的功能。”在风格设计前大致需要确定布局、色系、导航，形成图文相辅相承的页面风格。说到风格需要了解构成风格的三个要素。

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

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

③导航。导航标签代表的是整个网站的内容结构标识，用户依靠标签的内容和组织方式来寻找网站中的信息。设计标签的过程，实际上就是对信息分类的过程，必须做到标准清晰，有歧义的标签逼人猜测它的意图，使用户很难预测到链接背后是什么内容，甚至让用户走错路或迷航。

（5）画好粗略草图。教学团队根据课程性质，结合网站内容建设架构图，完成粗略布局。经过反复构思，拿出一张白纸一支笔，发挥自己的想象力，把创意轮廓画成草图，这只是创作阶段，不讲究细腻工整，只要设计师能明白教师的用意即可。尽可能多画几张，最终选定一张作为创作脚本，如图3所示。

（6）细化布局。细化布局是一种创造，既要立足信息的传达，也要做到视觉流程自然、合理、畅快，使页面上各信息要素的位置、间隙、大小保持一定的节奏感和美感。细化布局一般采用Photoshop或Firework设计制作。网页大小根据显示器的分辨率设计，高度不限定，但宽度比显示器的实际大小窄20像素，为的是给右侧的滚动条留有一定的空间。目前，主流页面大小一般为995*436。布局时要根据创作脚本，把最重要的信息如LOGO、标题、导航、课程介绍放在最显眼的地方。页面布局样式可采用左右对齐式、全景式、包围式、对称式、单侧对齐式、卫星式、散开式、照片组合式布局等。另外，布局时要注重合理运用点和线。点的引导作用是让浏览者更轻松的找到自己想要的信息。线不但可以起到页面的分割作用，很好地运用线条还使网页锦上添花。

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

五、结束语

在精品资源共享课程建设的道路上，如何把网站界面设计内化为课程内在的魅力，需要处处以用户为出发点和落脚点，根据不同的课程特点，在不违背设计原则的前提下，进行设计创新，从而使课程网站更具多样性和吸引力，实现精品资源共享课的品牌效应。

参考文献：

[1]《教育部关于国家精品开放课程建设的实施意见》（教高[2011]8号）[Z].

[2]刘丹.企业形象识别系统[J].东北农业大学学报（社会科学版），2006（1）.

[3]杨威.信息技术教学导论（第2版）[M].电子工业出版社，2007.5.

[4]张晓瑷.浅谈教学网站的界面设计和色彩搭配[J].农业网络信息，2008（1）.

[5]《精品资源共享课建设工作实施办法》（教高厅[2012]2号）[Z].

（编辑：王晓明）endprint