☆ 陳榮華 高繼梅

（湖南師范大學教育科學學院，湖南長沙 410081）

視覺搜索特征指導下的教學網(wǎng)站頁面設(shè)計

☆ 陳榮華 高繼梅

（湖南師范大學教育科學學院，湖南長沙 410081）

如今隨著現(xiàn)代教育技術(shù)的快速發(fā)展，網(wǎng)絡(luò)教育資源的日漸豐富，各種教學網(wǎng)站競相綻放，通過網(wǎng)絡(luò)學習的人數(shù)急劇攀升。心理學家赤瑞特拉（Treicheer）曾證實[1]，人類獲取信息的83%來自視覺，視覺即是效率。作為通過視覺獲取學習信息的通道，網(wǎng)頁頁面的布局、設(shè)計顯得非常重要，既要為瀏覽者創(chuàng)造一個愉悅的審美環(huán)境，又要表現(xiàn)主題和實現(xiàn)教學任務(wù)。但是縱覽各類教學網(wǎng)站，存在著這樣或那樣的缺陷也不少，例如：內(nèi)容過量、色彩過多、導航性差、缺乏層次、操作不便等問題，妨礙學習者快速獲取所需信息。鑒于此，有必要對影響視覺搜索的教學網(wǎng)站頁面設(shè)計進行深入研究，并提出切實有效的途徑和辦法。

一、視覺搜索概述

視覺搜索是一種復雜的認知過程，是指在一系列的干擾刺激群中找到某一目標刺激的視覺行為過程。目前國內(nèi)外對視覺搜索的相關(guān)研究包括：平行搜索和系列搜索兩種視覺搜索模式；前注意加工信息；視覺搜索的非對稱性以及眼動研究等，并提出了三種主要的視覺搜索模型：Neisser（1963）的簡單搜索模型，Treisman（1986）的特征整合理論和Cave wolfe（1990）的導引搜索模型。

1.平行搜索和序列搜索

平行搜索和序列搜索是兩種不同的視覺搜索模式，最早是由Sternberg提出的[2]，（1）若被測項目與記憶集中的全部項目同時比較，則被試的反應(yīng)時不會隨識記項目或記憶集的大小而變化，他稱這種同時比較為平行掃描（Parallel scanning），現(xiàn)在也稱之為平行搜索（Parallel Search）或平行加工（Parallel Processing）；（2）如果被測項目與記憶集中的項目逐一比較，那么被試的反應(yīng)時將隨著識記項目增多或記憶集增大而增加。他稱這種逐一比較為序列掃描（Serial scanning），現(xiàn)在也稱之為序列搜索（Serial Search）或序列加工（Serial Processing）。

2.視覺搜索眼動研究

視覺搜索是通過一系列的眼跳和注視來獲取刺激信息，完成信息加工。眼跳因其對視覺搜索產(chǎn)生極其大的影響，一直是視覺搜索領(lǐng)域關(guān)注的熱點，一般分為內(nèi)源性眼跳和外源性眼跳。內(nèi)源性眼跳是由個體主動發(fā)起的，受個體自身因素影響，主要與眼運動記憶與返回抑制相關(guān)聯(lián)[3]。外源性眼跳是由外源性刺激引起的眼跳，主要與刺激物的基本特征有關(guān)，例如：色彩、大小、方向、形狀、質(zhì)地、空間排列等。

3.視覺搜索非對稱性

視覺搜索的非對稱性是指：以反應(yīng)時為指標，在刺激群集（干擾項）B中搜索目標刺激（靶子）A與在刺激群集（干擾項）A中搜索目標刺激（靶子）B，搜索速度有顯著差異，出現(xiàn)非對稱現(xiàn)象。也就是說，當A、B兩類項目互易靶子或干擾項的角色時，搜索所需時間不同。典型的視覺搜索非對稱實驗由Treisman設(shè)計，如圖1所示，左圖要求在帶交叉的圓中搜索圓，右圖要求在圓中搜索帶交叉的圓。

圖1 視覺搜索的非對稱典型實驗

二、影響教學網(wǎng)頁視覺搜索的網(wǎng)絡(luò)環(huán)境因素

1.網(wǎng)頁文字密度和頁面空白

根據(jù)Tim Halverson的研究，相對于較密集的文字排列而言，密度較小的文字更易于被搜索到，當以較大的字體呈現(xiàn)重要的信息于較稀疏的空間時，搜索時間明顯降低。

Barbara Chaparro和J.Ryan Baker等人通過對比四種空白空間布局閱讀表現(xiàn)，得出實驗結(jié)果：頁邊空白的使用影響參試者閱讀速度以及理解能力。參試者在閱讀有頁邊空白圍繞的文字時速度較慢但理解能力表現(xiàn)較好，并表示更加滿意[4]。

2.網(wǎng)頁視覺沖擊

網(wǎng)頁色彩過于豐富，內(nèi)容過于花、亂、雜；反之色調(diào)太過單一，內(nèi)容枯燥、單調(diào)，這兩種頁面都會影響到用戶的視覺搜索效率。根據(jù)視覺心理學對色彩的研究,瀏覽者在一定時間內(nèi)閱讀色彩對比過于強烈的文字 (如紅底黑字)時，視覺很容易感到疲勞,并產(chǎn)生煩悶、不愉快的情緒。

3.網(wǎng)頁界面結(jié)構(gòu)和風格

層次結(jié)構(gòu)不清晰，信息布置過擁擠，界面風格不統(tǒng)一，導航性不凸顯，很容易使學習者不知所措，增加認知負擔。另外圖標、按鈕、菜單等對象處理不一致，不僅增加內(nèi)存空間，而且不易使瀏覽者感知對象預期操作。

4.網(wǎng)頁傳輸速度

除了網(wǎng)頁編程技術(shù)的影響外，大量的圖形、圖像和以及大容量的動態(tài)圖像也是影響網(wǎng)絡(luò)傳輸速度不可忽視的重要因素。尤其是對于撥號上網(wǎng)的學習者來說，緩慢的文件下載速度浪費了他們寶貴的時間。據(jù)某些研究顯示，動態(tài)圖形或圖像對于用戶執(zhí)行視覺搜索任務(wù)幫助并不大，甚至會通過分散用戶對圖像周圍文字的注意而降低對文字的感知。

三、視覺搜索特征指導下的教學網(wǎng)頁界面設(shè)計

1.主次分明，創(chuàng)建清晰直觀的頁面層次結(jié)構(gòu)

教學網(wǎng)站內(nèi)容較多，學習者很容易迷航，創(chuàng)建清晰直觀的頁面層次結(jié)構(gòu)對學習者快速獲取所需信息，有著不可估量的作用。可將教學內(nèi)容以目錄樹的形式展開，方便學習者按教學目錄進行查詢，或通過幫助文件等方式為學習者提供清晰、明確的導航。

Triesmna發(fā)現(xiàn)證據(jù)表明，當選項被歸組時，較組內(nèi)的單一項目而言，群組由于特征聯(lián)合而被率先串行掃描[5]。TulhS提供了證據(jù)也表明在視角5度以內(nèi)的范圍，群組的搜索時間更短。由平行搜索和序列搜索理論可知，相比較序列搜索，平行搜索效率要更高。所以網(wǎng)頁排版時信息盡量簡潔，相關(guān)的信息放在一起，不相關(guān)的內(nèi)容可用空白、直線或圖形分隔開。根據(jù)信息間的關(guān)聯(lián)程度，采用不同的視覺刺激呈現(xiàn)信息的重要程度，比如：可通過字體、字號、顏色、亮度、對比度等區(qū)分開來。對于重要的信息，盡量采用平行搜索的模式，這樣設(shè)計出的網(wǎng)頁富有層次感，條例清晰，具有不同的側(cè)重點。

2.整體協(xié)調(diào)，合理布局多種媒體信息

在進行頁面信息布置時，要尊重學習者的閱讀習慣?？蓞⒄拯S金分割法，將網(wǎng)頁分割成非均衡的三橫三縱九宮格區(qū)域，中心區(qū)塊作為視覺主體區(qū)域略大于其他區(qū)塊，位于中部偏左上位置，次要內(nèi)容安排在其他區(qū)塊，沿著左上至右下的對角線方式來布局。大量的視覺搜索非對稱實驗顯示，尋找一個基本特征的存在比搜索它的缺失要有效的多，所以對不重要信息附加很普通的特征，而對重要內(nèi)容附加新穎、獨特的外在特征，以使其在眾多信息中“脫穎而出”，被學習者優(yōu)先發(fā)現(xiàn)。

要根據(jù)教學目標的要求選擇多種媒體信息合理布局。根據(jù)媒體選擇最優(yōu)化原則，能用文本即可準確表達的盡量用文本素材，需要直觀化表達的則適度選擇容量較小的JPEG、GIF圖片、圖像，需動態(tài)呈現(xiàn)過程性內(nèi)容的則應(yīng)精選便于網(wǎng)絡(luò)傳輸?shù)囊曨l素材。

不同頁面相同信息元素的布置要有一致的界面風格。比如：在一個頁面用圖片做導航條，那在其它頁面也要在同樣的位置放置相同的圖片來做導航條，而不可換成文字型的。按鈕提示、顏色、圖標都要保持一致，這樣不僅方便學習者操作，還可以節(jié)省內(nèi)存空間，縮短信息瀏覽時間。

3.色彩和諧，營造舒適、悅目的視覺環(huán)境

色彩和諧搭配可吸引學習者的注意力，引導他們的視覺行為。在搭配色彩時，首先應(yīng)確定適合表現(xiàn)主題的基調(diào)色,然后再根據(jù)課程內(nèi)容的特點和學習者特征，應(yīng)用顏色的近似和對比來決定配色方案，營造和諧統(tǒng)一的視覺效果。一般而言，教學網(wǎng)頁內(nèi)容較多，可選擇柔和的色調(diào)，如冷色調(diào)，以減少視覺疲勞。

研究者展開的眼動研究實驗發(fā)現(xiàn)，在外源性刺激中，顏色特征對眼跳影響很大，當若干個相似大小的信息同時呈現(xiàn)時，有著突出的顏色、較高的亮度或較大對比度的信息更容易被注意到。教學網(wǎng)頁設(shè)計時，可將當前的重要信息和次重要信息賦于不同的顏色刺激，如鮮明和暗淡的顏色，或通過亮度或純度加以區(qū)分，前景色和背景色也應(yīng)有適量的對比度，如給予重要的文字信息以深色或高頻閃爍凸顯于淺色的背景之上。網(wǎng)頁色彩不可過于豐富，一個網(wǎng)頁的色相最好不超過三個或四個，顏色過多不僅顯得雜亂，且突出不了重點，反而加重視覺疲勞。

四、結(jié)束語

以學習者為主體的網(wǎng)絡(luò)教學，在實現(xiàn)教育功能的同時也要突出學習者的主體地位。作為向?qū)W習者傳達教學信息的視覺平臺，教學網(wǎng)頁要根據(jù)學習者的視覺加工特點進行設(shè)計。視覺搜索作為視覺加工過程中的重要環(huán)節(jié)，一直以來都是視覺認知的主要研究領(lǐng)域。在視覺搜索特征指導下，從學習者的視角進行人性化的網(wǎng)頁設(shè)計無疑是必須的，也是必要的。

[1]何克抗.CAI的理論基礎(chǔ)和以學為中心的課件設(shè)計[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.

于翼楠]