基于心理学的网络课程页面设计及分析

☆代云飞 刘延华

（安徽师范大学教育科学学院，安徽芜湖241000）

基于心理学的网络课程页面设计及分析

☆代云飞 刘延华

（安徽师范大学教育科学学院，安徽芜湖241000）

在网络大环境下，随着多媒体技术、网络技术的发展，网络教育作为一种全新的教育方式在各高校开展起来，其中，网络课程作为网络教育的主体，其设计和开发细节值得我们去研究和探讨。影响网络课程质量的因素有很多，本文从网络课程页面设计这一点出发，采用文献分析法，主要通过格式塔以及色彩心理学理论来对页面设计特征进行分析，并对页面设计提出自己的看法。

视觉心理；网页设计；网络课程

一、网络课程与页面设计

网络课程是通过网络传递的某门学科或知识点的教学内容以及相关教学活动的总和,它主要由两个部分组成：经过设计和开发出来的教学内容和硬件设施也就是网络环境及相关设备。

网络课程中，页面作为传递信息的主要载体，是构成网络课程的要素。学习者通过浏览网页进入特定的学习情景，参与学习活动，发生学习交互，从而完成有意义的主动的知识建构。网络课程的页面设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化地表现出来。

二、格式塔心理学与页面设计

（一）格式塔心理学概述

格式塔心理学家认为，当我们把知觉到的信息在大脑中进行了重组，学习就发生了。也就是说，通过观摩、计算、模仿等方式，分析当前情境中各个事物的要素、组成结构、排列顺序，并将这些信息在大脑中组织或者建构成一个整体进行存储，这种知觉形式叫完形。所以，“完形”一词的“形”不是指事物本身的形状，而是指事物经知觉活动获得的经验。

（二）格式塔心理学对页面设计的启示

1

1.图形和背景定律

图形和背景定律指的是当我们的眼睛看到一个多元素的页面时，会根据线条、轮廓、形状明暗或者各元素间的相互遮挡，从而区别出图形和背景。图形和背景有什么关系呢？格式塔心理学认为图形有赖于背景，图形一般出现在背景上面。背景起着一种格局的作用。

图形应当看上去比背景色彩更加鲜明。人的视觉特性表明，密度较大或波长较长的颜色的图形容易被理解为“前景”，而密度较小或波长较短的颜色的图形则被理解为“背景”。因此，为了让图形在背景下凸现出来，图形与背景之间应该具有足够的视觉区分度。

给网络课程网页设计的启示：要使学习者记住“图形”本身即教学内容，而不是“背景”，图形与背景的区分度越大，图形就越突出而成为我们的知觉对象。正文或图形应当与背景有足够的辨识度，以便学习者能够辨别设计者想要表达的信息。

2.闭合律

闭合律是指人们倾向于用过去的经验来理解不完整的图形或文字，把它们知觉为一个有意义的整体。例如：当我们看到一幅由散落的点组成的图形，就会情不自禁地不断调整视觉，直到看起来是一个我们熟悉的物体。另外，我们看到一个视觉形象，通常是先知觉其整体，再知觉其部分。

给网络课程网页设计的启示：虽然学习者也可以通过不完整的图形获取到学习信息，但是学习者会在这个过程中分散注意力以及花费不必要的精力。因此，应当避免不完整的图形。在网页设计中，应当考虑到学习者的理解能力以及理解方式，设计出有针对性的学习内容。因此，在设计页面时，应当把“意义理解”作为设计的主要目的,以减缓学习者阅读时的身心压力。同时，还要保证页面整体视觉效果和内容的连贯性。页面布局、文字字体、边框背景都要呈现统一的风格，视觉形式最好与该课程相关，不能喧宾夺主。内容的组织要符合学习者的认知特点和知识本身的主体逻辑性。

3.简洁律

苛勒（W.kohler,1947）和考夫卡（koffka,1935）提出，人们往往根据过去的经验所形成的预期，无意识地去简化他们感知的东西。当看到一幅复杂的图像时，人们会习惯性地把它简化为自己能够理解的形式（Smith-Gratto&Fisher,1998-1999）。眼睛只能将少数几个不相关的元素整合，当一个页面含有很多不太相关的信息，眼睛就会试图将其组合或者省略，使其成为容易处理的整体，如果尝试失败，则自动被忽视。

对网络课程网页设计的启示：在设计网页时，图形与文字应该通俗易懂，避免太复杂、太抽象。首先，在图像的选择上，应避免选用花哨而与内容毫无关系的图像。图像应该清晰，容易理解。对于复杂的图像，可以附上文字说明或者先呈现简化形式，再逐步增加复杂性。其次,在编辑文字时，要考虑整体的视觉效果。文字是承载信息的载体，文本最好呈现小组块形式，要容易辨认和阅读，给人清晰、一目了然,避免刻意的造型变化。同一页面出现的字体不多于三到四种，否则，会给人一种杂乱的错觉。同一概念层次用相同的字体、字号，重要内容可以用不同的颜色予以强调。

三、色彩心理学与页面设计

（一）色彩心理学概述

色彩心理学是一门综合研究色彩与心理的交叉学科，在传统心理学等学科的基础上探究色彩、人及环境三者之间的相互关系，它可以实践于包含网络课程中网页设计在内的许多设计。

（二）色彩心理

“色彩是有表情的，这是设计无法回避的问题。”色彩牵涉很多学问，其中之一就是心理学。不同的色彩会给人不同的心理反应，这是毋庸置疑的，如冷暖、大小、软硬、轻重、远近等感受，也可以让人产生不同的兴趣，这与色彩的明度、纯度和饱和度有一定的联系。

当然，对于色彩的反应，也是因人而异的。对于同一种色彩，不同的人因年龄、性别、性格、文化背景等因素差异也会产生不同的心理反应。但大多数人对于色彩的反应是基本一致的。因此，根据众人对色彩的认知和联想性，表1总结了人认知色彩的心理效应。

表1 色彩的心理效应

（三）色彩心理学对页面设计的启示

网络课程中页面设计的构成环节就包括色彩搭配，色彩的合理搭配是激发学习者的学习动机之一，色彩搭配可以吸引学习者注意力，传播学习内容、渲染学习氛围、表达主题思想。在网页课程的页面设计中色彩的合理搭配主要要根据以下几个要素。

1.学习者特征

选择色彩时，首先要对学习者特征进行分析，学习者的年龄、性格特征、认知特点。选择性地说，比如年龄方面，学龄前儿童往往对色彩鲜艳的事物情有独钟，这是因为儿童感觉认知不全面，主要靠直觉来感受色彩，色彩强烈、对比强烈的事物更能吸引他们的注意力。随着年龄的增长和知识的增加，人们对色彩的优先感应能力逐渐降低而对形状更为关注。因而成人则习惯于反差对比较小的色彩。而从事不同职业的人对同一色彩又有不同的经验感受，所以，在进行网页设计时，色彩所表示或引申的含义要同学习者对色彩的经验一致。

2.课程内容

网络课程的主题和内容制约色彩的选择。例如：工科类的课程往往结构严谨，逻辑性较强，所以，色彩的节奏不能太跳跃，以渐变性节奏为主，背景选中冷色或偏冷的颜色。而艺术类的课程内容往往天马行空，较多引用图片、视频等视觉素材，所以，背景最好选用纯色，常使用黑色和白色，黑色给人幽深、神秘之感，白色则让人觉得纯净和安静。

3.色彩的视觉效果

网络课程的页面色彩搭配要干净利落、美观大方，与风格一致。色彩不要太多，至多四到五种，过多的色彩让人眼花缭乱，增加反应时间，分散注意力。在风格统一的前提下,色彩应该有所变化，通过闪烁、变色等引起学习者的注意。可以选用暖色调、较饱和的色彩作为前景色,以冷色调、浅色作为背景色。控制色块的面积，太大的色块最好配上个小色块以平衡视觉，不要同样大小的色块并排放置，以免给人生硬之感。

4.功能模块

对于教学内容的模块，背景可选用柔和、淡雅的颜色,文字和背景的颜色对比要强烈。导航模块的颜色要和教学内容模块不同，便于学习者区分。对于链接的文字，在色彩方面要与其它文字有所区别。按钮的色彩要与页面整体风格一致，同时比其它部分更醒目和鲜艳。

四、结束语

心理学的很多理论可以运用于网络课程的网页设计，本文从格式塔心理学、色彩心理学两个方面加以论述。在设计网络课程时，充分运用心理学的相关原理，进行人性化设计，能够使网络课程更符合学习者的认知规律，提高网络课程的教学效果。笔者在本文中也仅仅涉及到了心理学的部分内容，需要更多的学者专家共同探索，使之形成一个体系，从而更好地服务于网络课程的设计实践工作。

[1]教育部现代远程教育资源建设委员会.《现代远程教育资源建设技术规范》[DB/OL].http：//www.cbe21.com/subject/information /article.php?article_id=1195.

[2]张新明.试论网络课程的艺术设计[J].中国远程教育,2002,(03)：47-49.

[3]钱家渝.视觉心理学：视觉形式的思维与传播[M].上海：学林出版社,2006.

[4]何洁.广告与视觉传达[M].北京：中国轻工业出版社,2004.

[5]王汀.版面构成[M].广州：广东人民出版社,2002.

[6]朱凌云,罗廷锦,余胜泉.网络课程评价[DB/OL]. http：//www.edu.cn/20020225/3021059.shtml.

[7]李砚祖,芦影.视觉传达的历史与美学[M].北京：中国人民大学出版社,1999.

[8]朱世根.格式塔学习理论在教学网页设计中的应用[J].萍乡高等专科学校学报,2007,(05)：59-61.

[9]周静,赵志靖.格式塔理论在网络教学页面设计中的应用[J].中国电化教育,2005,(07)：75-77.

[10]丁祥郭,龚玉清,张琴珠.基于认知心理学的教学网页设计[DB/OL].http：//218.22.0.27/lunwen/l01122743.htm.

[11]施良方.学习论[M].北京：人民教育出版社,2003.

[12]宋杰.视听语言——影像与声音[M].北京：中国广播电视出版社,200.

[13]梁爽.网络课程页面视觉设计研究与应用[D].长春：东北师范大学,2006.

[14]黄英杰,周锐,丁玉红.构成艺术[M].上海：同济大学出版社,2004.

[15]谢舒潇,叶长茂.浅谈网络课程的页面设计[J].高等理科教育, 2004,(01)：101-104.

[编辑：闫长松]

G434

A

1671-7503（2017）05-0076-03