视觉效果和教育心理学在教学网页设计中的应用

1 引言

创新互联公司专注于聊城网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供聊城营销型网站建设，聊城网站制作、聊城网页设计、聊城网站官网定制、微信小程序定制开发服务，打造聊城网络公司原创品牌,更为您提供聊城网站排名全网营销落地服务。

当代社会，信息化学习已经席卷而来，学习环境网络化、学习资源数字化、学习方式多样化作为信息时代学习的特征，得到学术界的认定。学习者必须充分利用网络资源、转变学习方式，变被动学习为主动学习、变接受式学习为发现式学习、变个别学习为协作式学习。逐步改变以教师为中心、课堂为中心、书本为中心的局面，促进学生创新意识与实践能力的发展。

与此同时，作为互联网时代混合式学习的重要元素--教学网站设计，其重要性也日益显现和提高。统观教学网页的多元化发展，其结果却不尽人意，大部分仍停留在文本浏览或简单网页跳转水平，有悖于我们当前提倡的"自主、探究与协作"的学习方式。此外，大部分有关教学网页设计的研究，都是从网页设计本身出发，如页面风格、交互功能以及导航策略等，缺乏对视觉效果和教育心理学在教学网页设计中的应用研究，这在很大程度上制约了自主学习的积极性。

2 视觉传达下的教学网站设计

2.1 文字的视觉传达

作为信息传播的主要符号和手段，文字无疑是网页设计的主体，不仅是网页的重要组成元素，更是网页信息的重要描述要素。作为网页的形象要素之一，文字除了表意功能外[1]，还要具体结合学生的视觉特征，综合考虑字号、字体以及行间距等设计要素。为了打造教学网站自己的特色和风格，设计者可以结合实际选择字体。比如，选择粗仿宋体来体现专业化，选择广告体来体现精美化，选择手写字体来体现亲切化，等等。教学网页设计时，可以对字体选择进行考虑和设计，用不同字体的变化来打破刻板的教学模式，让学生在学习过程中通过视觉传达体会愉悦的学习过程。

2.2 图形的视觉传达

图片属于最早被引入网络媒体中的表意符号，在当今图像化时代，图片对受众的吸引力比文字有过之无不及。图片在美化网页的同时，极大地扩展了所传达的信息量。图片所产生的视觉效果能够有效增强网页的趣味性，让原本平淡无奇的网页变得更有画面感，实现信息传达的立体化、层面化和直接化。网页图片一般分为两种，即主体图片和辅助图片。

主体图片以信息内容的直接传达为目的，包括标题图、新闻照片等。而辅助图片是为实现网页的艺术化而设计的图片，其主要作用是烘托主题和渲染氛围，典型的就是背景图片。在教学网页设计中，设计者要赋予图片以视觉美感，可以通过点线面的不同排列组合，灵活采取夸张、象征等手法来达到预期的视觉效果，实现图片艺术性。所以，教学网页的设计中，要善于合理运用图片，一方面强化知识点的理解，另一方面激发学生的学习兴趣，通过视觉上的审美冲击，给学生留下深刻印象和良好心理反应。

3 色彩心理学下的教学网页设计

3.1 色彩的整体设置

色彩的视觉效果不仅在很大程度上直接影响着学生的浏览兴趣，而且还决定着网页的整体效果。在色彩设计过程中，要遵循整体协调，局部均衡和突出重点的设计原则，对不同色彩进行灵活组合，搭配出具有美感的网页。色彩设计要根据网页整体风格定出主色调，教学网页的主色调通常以柔和淡雅的浅色为主，然后配以深色文字，这样有助于突出重点。设计者可以通过对单色色彩的饱和度调整、邻近色的选用以及对比色的配用等方法来实现[2].网页的色彩并非多多益善，主色调通常不超过三种色彩，主要是通过调整不同色彩的属性来实现色彩变化。

此外，不同色调的心理暗示也不尽相同，色彩知觉同人的主观情绪、联想以及象征意义等因素有着密切联系。基于不同色彩有不同心理暗示，在教学网页色彩构图设计中，一定要符合上轻下重的视觉生理特征，把轻色安排在上部，重色安排于下部。若是网页上部搭配重色，那么在下部边缘位置要相应地配以重色，以此达到平衡构图的目的。灵活运用色彩的强弱，能够避免画面的单调，实现网页画面色彩的动态感和均衡感，消除学生学习过程中的视觉疲劳。在教学网页设计中，绿色能使人产生一种轻松愉悦的感觉，阳光、绿荫和草地的搭配作为背景设计，能够给学生提供一种轻松、自然和愉悦的学习环境。

3.2 色彩的冷暖感

所谓的色彩冷暖关系，就是补色关系。冷暖感实际上是人类触觉对外界温度的一种本能反应。阳光、火焰等反射出来的红色光具有导热作用，人们称之为"暖色".而人们处于高山、雪地以及蓝天等自然环境中时，感觉寒冷，因此蓝色、蓝绿或蓝紫色称为"冷色".可以说，红与蓝构成了冷暖色系的两个极端，而居于两者中间的中性色就是绿和紫。此外，金银黑白灰五种色彩在色彩心理上也属于中性色，能够同奇特色进行调和，形成缓解效应，特别是同原色的调和。网页设计中的主色调决定了网页的整体冷暖感。教学网页所传达的信息除了需要用精准的文字加以表述外，还应该进行色彩的合理搭配，让学生形成一种类似色知觉的反映，进而有效提高网页的信息传达效果。

3.3 色彩的轻重感

色彩的明度在很大程度上决定着色彩的轻重感。通常明度较高以及色相较冷的色彩给人较轻的感觉，比如，白色就使人感觉轻，让人不由自主地联想到雾、白云等，具有轻柔的美感；相反，那些明度较低和色相暖的色彩给人较重的感觉，典型的就属黑色。黑色让人自然地联想到夜晚、金属等，具有厚重、踏实的感觉。所以，但凡加白提高明亮度的色彩就会变轻，反之，加黑降低明亮度的色彩就会变重。在教学网页设计中，通常网页的下部采用明亮度较低的色彩，给学生一种沉静的感觉，而对于儿童类教学网站，最好采用明亮度较高的色彩，给学生一种轻快感。

3.4 色彩的距离感

网页上的色彩，有的会让人产生突出和亲近感，有的会让人产生隐退和远离感。而色彩的明度和色相是这种距离感产生的主要原因。通常是暖色近，冷色远，纯色近而灰色远，对比强的色彩近，对比弱的色彩远。色彩鲜明、清晰的暖色有助于主题的突出，色彩模糊、昏暗的冷色能够烘托主题。有的教学网站利用这种色彩的距离感，形成一种具有强烈进退感的视觉效果。比如，在网页上部设计为广阔的浅蓝色天空，给学生一种身心放松，心旷神怡的感觉。

3.5 色彩的华丽与质朴感

色彩的华丽与质朴与色彩的色相有着很大的关系。纯度、明度较高的鲜明色，包括金、橙、红等色彩能够给人一种辉煌、亮丽感觉，反之，那些纯度、明度较低的灰暗色，包括蓝、蓝绿等冷色则会给人一种素淡、质朴的感觉。以纯度来讲，饱和的湖蓝、孔雀蓝以及宝石蓝也会给人华丽的感觉，而纯度低的浊色则会给人质朴感。以明亮度来讲，明亮的色彩比较灵动、轻快，具有华丽感，而灰暗色彩就显得比较深沉和厚重，带有明显朴素感。前者主要用于艺术设计类教学网页设计，后者主要用于医学教育网页设计。此外，色相的多少也产生一定的影响，色相多就显得网页华丽，色相少则显得网页朴素。在教学网页的设计中，设计者要结合具体情况合理把握网页色彩的华丽感和质朴感[3].

4 认知心理学下的教学网页设计

互联网时代的混合式学习重要元素有：在线课件、教学视频、文章案例、文献导读、线上讨论等。为了更好地对开放教育源进行汇聚和推送，缩短学生从探究到接受的自主学习过程，教学网页设计必须更加符合学生的认知心理，信息的传达和接受才会更加有效。特别在学生自主学习环节，网页的视觉效果会直接影响其寻求有效资源的学习心理。因此，教学网页设计要结合学生的认知心理，在整体布局、认知需求等方面进行合理设计[4].

4.1 整体布局

学习浏览网页的习惯是基于人类生理特征下的正常反应。人们在阅读时只能形成一个焦点，不能同时将视线投放于几个事物之上。同时，人在阅读时有一种习惯性视觉走向，就是由左到右，从上到下。因此教学网页设计要符合人类视觉走向的心理特征。此外，教学网页要突出重点，抓住学生眼球，不能让学生产生无所适从的迷茫感。在教学网页设计中，要充分利用视觉走向和浏览者的心理，实现网站信息的高效传达。要注意做好各大功能模块的分布和视觉引导工作，实现网页视觉效果的整体性。总之，教学网页设计首先要考虑两方面的因素，一方面，要以信息有效传达为主，要符合学生的阅读和思维习惯，实现视觉走向的自然化。另一方面，实现网页各要素在整体协调下的合理分布，实现网页上各种信息在大小、位置以及间距方面的衔接。

4.2 认知需求

网页设计属于平面设计范畴，要充分利用互动式交流的思维进行网页设计，增加网页吸引力，充分满足受众认知需求。教学网页的内容和形式要实现统一，作为一个资源型网站，面对大量需要传达的信息，必须进行合理排布，既要实现网页的整体性，同时又不失信息传达的重点。但是各种信息的排布切不可僵硬死板，要在遵从学生视觉和心理特征的基础上，适当加入些许创新元素，实现页面的多样性、灵动性，给学生留下特别的印象。

以激发学生认知心理为出发点，在学习平台的视觉设计方面，首要任务是信息的有效传达，其次是打造学习平台自身的特色。各信息要素的合理分布是信息得以高效利用的基础，网页中要明确设置学习者迫切需求的栏目和平台入口，以便他们能够有针对性地对信息进行搜索和浏览。网络学习平台的构建不仅需要全面、清晰的信息资源，更要注重网络学习氛围的营造，便捷而愉悦的学习感受会让使用者在进行网络自主学习时有事半功倍的效果。

5 艺术审美对教学网站功能的整体提升

教学网站设计所呈现的艺术品质使其介于实用和审美的两端，成为集实用和审美为一体的具有双重属性的艺术新形态，所具有的审美性内容同其它艺术领域的作品并无差别。教学网页的艺术美主要是利用各种艺术化设计手法带来师生的审美愉悦和体会[5].在教学网站设计中主要体现为要素比例的和谐性，色彩的鲜明性，形式的完整性，整体的多样性等等。可以说，优秀的设计离不开艺术美学的支撑。教学网站的艺术设计中涉及到的色彩选择，完全可以从艺术美学角度出发进行构想。艺术审美下的教学网站通常以生动、丰富、灵动和自然为主要特征，追求比例、尺度、色性和色度关系，简单、直接而又生动地加以呈现。以艺术审美角度来讲，赏心悦目的背后通常是严格的考量、理性的推敲和细致的调整。

教学网页的设计构思可以从学校的形象塑造、学校文化的建设以及教学内容的扩展三个角度为出发点，创建出独具特色的网页。作为视觉传达设计系统的子系统，教学网页设计的审美功能要充分重视，特别是在一些艺术类教学网页中，艺术审美的追求成为网站设计时需要考量的重要组成部分