视觉搜索特征指导下的教学网站页面设计

☆ 陈荣华 高继梅

（湖南师范大学教育科学学院，湖南长沙 410081）

视觉搜索特征指导下的教学网站页面设计

☆ 陈荣华 高继梅

（湖南师范大学教育科学学院，湖南长沙 410081）

如今随着现代教育技术的快速发展，网络教育资源的日渐丰富，各种教学网站竞相绽放，通过网络学习的人数急剧攀升。心理学家赤瑞特拉（Treicheer）曾证实[1]，人类获取信息的83%来自视觉，视觉即是效率。作为通过视觉获取学习信息的通道，网页页面的布局、设计显得非常重要，既要为浏览者创造一个愉悦的审美环境，又要表现主题和实现教学任务。但是纵览各类教学网站，存在着这样或那样的缺陷也不少，例如：内容过量、色彩过多、导航性差、缺乏层次、操作不便等问题，妨碍学习者快速获取所需信息。鉴于此，有必要对影响视觉搜索的教学网站页面设计进行深入研究，并提出切实有效的途径和办法。

一、视觉搜索概述

视觉搜索是一种复杂的认知过程，是指在一系列的干扰刺激群中找到某一目标刺激的视觉行为过程。目前国内外对视觉搜索的相关研究包括：平行搜索和系列搜索两种视觉搜索模式；前注意加工信息；视觉搜索的非对称性以及眼动研究等，并提出了三种主要的视觉搜索模型：Neisser（1963）的简单搜索模型，Treisman（1986）的特征整合理论和Cave wolfe（1990）的导引搜索模型。

1.平行搜索和序列搜索

平行搜索和序列搜索是两种不同的视觉搜索模式，最早是由Sternberg提出的[2]，（1）若被测项目与记忆集中的全部项目同时比较，则被试的反应时不会随识记项目或记忆集的大小而变化，他称这种同时比较为平行扫描（Parallel scanning），现在也称之为平行搜索（Parallel Search）或平行加工（Parallel Processing）；（2）如果被测项目与记忆集中的项目逐一比较，那么被试的反应时将随着识记项目增多或记忆集增大而增加。他称这种逐一比较为序列扫描（Serial scanning），现在也称之为序列搜索（Serial Search）或序列加工（Serial Processing）。

2.视觉搜索眼动研究

视觉搜索是通过一系列的眼跳和注视来获取刺激信息，完成信息加工。眼跳因其对视觉搜索产生极其大的影响，一直是视觉搜索领域关注的热点，一般分为内源性眼跳和外源性眼跳。内源性眼跳是由个体主动发起的，受个体自身因素影响，主要与眼运动记忆与返回抑制相关联[3]。外源性眼跳是由外源性刺激引起的眼跳，主要与刺激物的基本特征有关，例如：色彩、大小、方向、形状、质地、空间排列等。

3.视觉搜索非对称性

视觉搜索的非对称性是指：以反应时为指标，在刺激群集（干扰项）B中搜索目标刺激（靶子）A与在刺激群集（干扰项）A中搜索目标刺激（靶子）B，搜索速度有显著差异，出现非对称现象。也就是说，当A、B两类项目互易靶子或干扰项的角色时，搜索所需时间不同。典型的视觉搜索非对称实验由Treisman设计，如图1所示，左图要求在带交叉的圆中搜索圆，右图要求在圆中搜索带交叉的圆。

图1 视觉搜索的非对称典型实验

二、影响教学网页视觉搜索的网络环境因素

1.网页文字密度和页面空白

根据Tim Halverson的研究，相对于较密集的文字排列而言，密度较小的文字更易于被搜索到，当以较大的字体呈现重要的信息于较稀疏的空间时，搜索时间明显降低。

Barbara Chaparro和J.Ryan Baker等人通过对比四种空白空间布局阅读表现，得出实验结果：页边空白的使用影响参试者阅读速度以及理解能力。参试者在阅读有页边空白围绕的文字时速度较慢但理解能力表现较好，并表示更加满意[4]。

2.网页视觉冲击

网页色彩过于丰富，内容过于花、乱、杂；反之色调太过单一，内容枯燥、单调，这两种页面都会影响到用户的视觉搜索效率。根据视觉心理学对色彩的研究,浏览者在一定时间内阅读色彩对比过于强烈的文字 (如红底黑字)时，视觉很容易感到疲劳,并产生烦闷、不愉快的情绪。

3.网页界面结构和风格

层次结构不清晰，信息布置过拥挤，界面风格不统一，导航性不凸显，很容易使学习者不知所措，增加认知负担。另外图标、按钮、菜单等对象处理不一致，不仅增加内存空间，而且不易使浏览者感知对象预期操作。

4.网页传输速度

除了网页编程技术的影响外，大量的图形、图像和以及大容量的动态图像也是影响网络传输速度不可忽视的重要因素。尤其是对于拨号上网的学习者来说，缓慢的文件下载速度浪费了他们宝贵的时间。据某些研究显示，动态图形或图像对于用户执行视觉搜索任务帮助并不大，甚至会通过分散用户对图像周围文字的注意而降低对文字的感知。

三、视觉搜索特征指导下的教学网页界面设计

1.主次分明，创建清晰直观的页面层次结构

教学网站内容较多，学习者很容易迷航，创建清晰直观的页面层次结构对学习者快速获取所需信息，有着不可估量的作用。可将教学内容以目录树的形式展开，方便学习者按教学目录进行查询，或通过帮助文件等方式为学习者提供清晰、明确的导航。

Triesmna发现证据表明，当选项被归组时，较组内的单一项目而言，群组由于特征联合而被率先串行扫描[5]。TulhS提供了证据也表明在视角5度以内的范围，群组的搜索时间更短。由平行搜索和序列搜索理论可知，相比较序列搜索，平行搜索效率要更高。所以网页排版时信息尽量简洁，相关的信息放在一起，不相关的内容可用空白、直线或图形分隔开。根据信息间的关联程度，采用不同的视觉刺激呈现信息的重要程度，比如：可通过字体、字号、颜色、亮度、对比度等区分开来。对于重要的信息，尽量采用平行搜索的模式，这样设计出的网页富有层次感，条例清晰，具有不同的侧重点。

2.整体协调，合理布局多种媒体信息

在进行页面信息布置时，要尊重学习者的阅读习惯。可参照黄金分割法，将网页分割成非均衡的三横三纵九宫格区域，中心区块作为视觉主体区域略大于其他区块，位于中部偏左上位置，次要内容安排在其他区块，沿着左上至右下的对角线方式来布局。大量的视觉搜索非对称实验显示，寻找一个基本特征的存在比搜索它的缺失要有效的多，所以对不重要信息附加很普通的特征，而对重要内容附加新颖、独特的外在特征，以使其在众多信息中“脱颖而出”，被学习者优先发现。

要根据教学目标的要求选择多种媒体信息合理布局。根据媒体选择最优化原则，能用文本即可准确表达的尽量用文本素材，需要直观化表达的则适度选择容量较小的JPEG、GIF图片、图像，需动态呈现过程性内容的则应精选便于网络传输的视频素材。

不同页面相同信息元素的布置要有一致的界面风格。比如：在一个页面用图片做导航条，那在其它页面也要在同样的位置放置相同的图片来做导航条，而不可换成文字型的。按钮提示、颜色、图标都要保持一致，这样不仅方便学习者操作，还可以节省内存空间，缩短信息浏览时间。

3.色彩和谐，营造舒适、悦目的视觉环境

色彩和谐搭配可吸引学习者的注意力，引导他们的视觉行为。在搭配色彩时，首先应确定适合表现主题的基调色,然后再根据课程内容的特点和学习者特征，应用颜色的近似和对比来决定配色方案，营造和谐统一的视觉效果。一般而言，教学网页内容较多，可选择柔和的色调，如冷色调，以减少视觉疲劳。

研究者展开的眼动研究实验发现，在外源性刺激中，颜色特征对眼跳影响很大，当若干个相似大小的信息同时呈现时，有着突出的颜色、较高的亮度或较大对比度的信息更容易被注意到。教学网页设计时，可将当前的重要信息和次重要信息赋于不同的颜色刺激，如鲜明和暗淡的颜色，或通过亮度或纯度加以区分，前景色和背景色也应有适量的对比度，如给予重要的文字信息以深色或高频闪烁凸显于浅色的背景之上。网页色彩不可过于丰富，一个网页的色相最好不超过三个或四个，颜色过多不仅显得杂乱，且突出不了重点，反而加重视觉疲劳。

四、结束语

以学习者为主体的网络教学，在实现教育功能的同时也要突出学习者的主体地位。作为向学习者传达教学信息的视觉平台，教学网页要根据学习者的视觉加工特点进行设计。视觉搜索作为视觉加工过程中的重要环节，一直以来都是视觉认知的主要研究领域。在视觉搜索特征指导下，从学习者的视角进行人性化的网页设计无疑是必须的，也是必要的。

[1]何克抗.CAI的理论基础和以学为中心的课件设计[J].四川教育, 2001,(1).

[2]Sternberg S.Memory scanning:Mental processes revealed by reaction－time experiment.American Scientist,1969,(57):421－457.

[3]任延涛,韩玉昌.视觉搜索过程中的眼跳及其机制[J].心理科学进展,2006,(3):340－345.

[4]Chaparro B、Baker J R.Reading Online Text:A Comparison of Four White Space Layouts. http:／／Psychology.wichita.edu／surl／usabilitynews／62／whitesPace.htm.2004－07－16.

[5]Treismna A.Perceptual grouping and attention in visual search for features and for objects.Journal of Experimental Psychology: Human Perception and Performance.1983.8(2):194－214.

于翼楠]