☆代云飛 劉延華

（安徽師范大學(xué)教育科學(xué)學(xué)院，安徽蕪湖241000）

基于心理學(xué)的網(wǎng)絡(luò)課程頁面設(shè)計(jì)及分析

☆代云飛 劉延華

（安徽師范大學(xué)教育科學(xué)學(xué)院，安徽蕪湖241000）

在網(wǎng)絡(luò)大環(huán)境下，隨著多媒體技術(shù)、網(wǎng)絡(luò)技術(shù)的發(fā)展，網(wǎng)絡(luò)教育作為一種全新的教育方式在各高校開展起來，其中，網(wǎng)絡(luò)課程作為網(wǎng)絡(luò)教育的主體，其設(shè)計(jì)和開發(fā)細(xì)節(jié)值得我們?nèi)パ芯亢吞接?。影響網(wǎng)絡(luò)課程質(zhì)量的因素有很多，本文從網(wǎng)絡(luò)課程頁面設(shè)計(jì)這一點(diǎn)出發(fā)，采用文獻(xiàn)分析法，主要通過格式塔以及色彩心理學(xué)理論來對(duì)頁面設(shè)計(jì)特征進(jìn)行分析，并對(duì)頁面設(shè)計(jì)提出自己的看法。

視覺心理；網(wǎng)頁設(shè)計(jì)；網(wǎng)絡(luò)課程

一、網(wǎng)絡(luò)課程與頁面設(shè)計(jì)

網(wǎng)絡(luò)課程是通過網(wǎng)絡(luò)傳遞的某門學(xué)科或知識(shí)點(diǎn)的教學(xué)內(nèi)容以及相關(guān)教學(xué)活動(dòng)的總和,它主要由兩個(gè)部分組成：經(jīng)過設(shè)計(jì)和開發(fā)出來的教學(xué)內(nèi)容和硬件設(shè)施也就是網(wǎng)絡(luò)環(huán)境及相關(guān)設(shè)備。

網(wǎng)絡(luò)課程中，頁面作為傳遞信息的主要載體，是構(gòu)成網(wǎng)絡(luò)課程的要素。學(xué)習(xí)者通過瀏覽網(wǎng)頁進(jìn)入特定的學(xué)習(xí)情景，參與學(xué)習(xí)活動(dòng)，發(fā)生學(xué)習(xí)交互，從而完成有意義的主動(dòng)的知識(shí)建構(gòu)。網(wǎng)絡(luò)課程的頁面設(shè)計(jì)，是在有限的屏幕空間上將視聽多媒體元素進(jìn)行有機(jī)的排列組合，將理性思維個(gè)性化地表現(xiàn)出來。

二、格式塔心理學(xué)與頁面設(shè)計(jì)

（一）格式塔心理學(xué)概述

格式塔心理學(xué)家認(rèn)為，當(dāng)我們把知覺到的信息在大腦中進(jìn)行了重組，學(xué)習(xí)就發(fā)生了。也就是說，通過觀摩、計(jì)算、模仿等方式，分析當(dāng)前情境中各個(gè)事物的要素、組成結(jié)構(gòu)、排列順序，并將這些信息在大腦中組織或者建構(gòu)成一個(gè)整體進(jìn)行存儲(chǔ)，這種知覺形式叫完形。所以，“完形”一詞的“形”不是指事物本身的形狀，而是指事物經(jīng)知覺活動(dòng)獲得的經(jīng)驗(yàn)。

（二）格式塔心理學(xué)對(duì)頁面設(shè)計(jì)的啟示

1

1.圖形和背景定律

圖形和背景定律指的是當(dāng)我們的眼睛看到一個(gè)多元素的頁面時(shí)，會(huì)根據(jù)線條、輪廓、形狀明暗或者各元素間的相互遮擋，從而區(qū)別出圖形和背景。圖形和背景有什么關(guān)系呢？格式塔心理學(xué)認(rèn)為圖形有賴于背景，圖形一般出現(xiàn)在背景上面。背景起著一種格局的作用。

圖形應(yīng)當(dāng)看上去比背景色彩更加鮮明。人的視覺特性表明，密度較大或波長較長的顏色的圖形容易被理解為“前景”，而密度較小或波長較短的顏色的圖形則被理解為“背景”。因此，為了讓圖形在背景下凸現(xiàn)出來，圖形與背景之間應(yīng)該具有足夠的視覺區(qū)分度。

給網(wǎng)絡(luò)課程網(wǎng)頁設(shè)計(jì)的啟示：要使學(xué)習(xí)者記住“圖形”本身即教學(xué)內(nèi)容，而不是“背景”，圖形與背景的區(qū)分度越大，圖形就越突出而成為我們的知覺對(duì)象。正文或圖形應(yīng)當(dāng)與背景有足夠的辨識(shí)度，以便學(xué)習(xí)者能夠辨別設(shè)計(jì)者想要表達(dá)的信息。

2.閉合律

閉合律是指人們傾向于用過去的經(jīng)驗(yàn)來理解不完整的圖形或文字，把它們知覺為一個(gè)有意義的整體。例如：當(dāng)我們看到一幅由散落的點(diǎn)組成的圖形，就會(huì)情不自禁地不斷調(diào)整視覺，直到看起來是一個(gè)我們熟悉的物體。另外，我們看到一個(gè)視覺形象，通常是先知覺其整體，再知覺其部分。

給網(wǎng)絡(luò)課程網(wǎng)頁設(shè)計(jì)的啟示：雖然學(xué)習(xí)者也可以通過不完整的圖形獲取到學(xué)習(xí)信息，但是學(xué)習(xí)者會(huì)在這個(gè)過程中分散注意力以及花費(fèi)不必要的精力。因此，應(yīng)當(dāng)避免不完整的圖形。在網(wǎng)頁設(shè)計(jì)中，應(yīng)當(dāng)考慮到學(xué)習(xí)者的理解能力以及理解方式，設(shè)計(jì)出有針對(duì)性的學(xué)習(xí)內(nèi)容。因此，在設(shè)計(jì)頁面時(shí)，應(yīng)當(dāng)把“意義理解”作為設(shè)計(jì)的主要目的,以減緩學(xué)習(xí)者閱讀時(shí)的身心壓力。同時(shí)，還要保證頁面整體視覺效果和內(nèi)容的連貫性。頁面布局、文字字體、邊框背景都要呈現(xiàn)統(tǒng)一的風(fēng)格，視覺形式最好與該課程相關(guān)，不能喧賓奪主。內(nèi)容的組織要符合學(xué)習(xí)者的認(rèn)知特點(diǎn)和知識(shí)本身的主體邏輯性。

3.簡潔律

苛勒（W.kohler,1947）和考夫卡（koffka,1935）提出，人們往往根據(jù)過去的經(jīng)驗(yàn)所形成的預(yù)期，無意識(shí)地去簡化他們感知的東西。當(dāng)看到一幅復(fù)雜的圖像時(shí)，人們會(huì)習(xí)慣性地把它簡化為自己能夠理解的形式（Smith-Gratto&Fisher,1998-1999）。眼睛只能將少數(shù)幾個(gè)不相關(guān)的元素整合，當(dāng)一個(gè)頁面含有很多不太相關(guān)的信息，眼睛就會(huì)試圖將其組合或者省略，使其成為容易處理的整體，如果嘗試失敗，則自動(dòng)被忽視。

對(duì)網(wǎng)絡(luò)課程網(wǎng)頁設(shè)計(jì)的啟示：在設(shè)計(jì)網(wǎng)頁時(shí)，圖形與文字應(yīng)該通俗易懂，避免太復(fù)雜、太抽象。首先，在圖像的選擇上，應(yīng)避免選用花哨而與內(nèi)容毫無關(guān)系的圖像。圖像應(yīng)該清晰，容易理解。對(duì)于復(fù)雜的圖像，可以附上文字說明或者先呈現(xiàn)簡化形式，再逐步增加復(fù)雜性。其次,在編輯文字時(shí)，要考慮整體的視覺效果。文字是承載信息的載體，文本最好呈現(xiàn)小組塊形式，要容易辨認(rèn)和閱讀，給人清晰、一目了然,避免刻意的造型變化。同一頁面出現(xiàn)的字體不多于三到四種，否則，會(huì)給人一種雜亂的錯(cuò)覺。同一概念層次用相同的字體、字號(hào)，重要內(nèi)容可以用不同的顏色予以強(qiáng)調(diào)。

三、色彩心理學(xué)與頁面設(shè)計(jì)

（一）色彩心理學(xué)概述

色彩心理學(xué)是一門綜合研究色彩與心理的交叉學(xué)科，在傳統(tǒng)心理學(xué)等學(xué)科的基礎(chǔ)上探究色彩、人及環(huán)境三者之間的相互關(guān)系，它可以實(shí)踐于包含網(wǎng)絡(luò)課程中網(wǎng)頁設(shè)計(jì)在內(nèi)的許多設(shè)計(jì)。

（二）色彩心理

“色彩是有表情的，這是設(shè)計(jì)無法回避的問題。”色彩牽涉很多學(xué)問，其中之一就是心理學(xué)。不同的色彩會(huì)給人不同的心理反應(yīng)，這是毋庸置疑的，如冷暖、大小、軟硬、輕重、遠(yuǎn)近等感受，也可以讓人產(chǎn)生不同的興趣，這與色彩的明度、純度和飽和度有一定的聯(lián)系。

當(dāng)然，對(duì)于色彩的反應(yīng)，也是因人而異的。對(duì)于同一種色彩，不同的人因年齡、性別、性格、文化背景等因素差異也會(huì)產(chǎn)生不同的心理反應(yīng)。但大多數(shù)人對(duì)于色彩的反應(yīng)是基本一致的。因此，根據(jù)眾人對(duì)色彩的認(rèn)知和聯(lián)想性，表1總結(jié)了人認(rèn)知色彩的心理效應(yīng)。

表1 色彩的心理效應(yīng)

（三）色彩心理學(xué)對(duì)頁面設(shè)計(jì)的啟示

網(wǎng)絡(luò)課程中頁面設(shè)計(jì)的構(gòu)成環(huán)節(jié)就包括色彩搭配，色彩的合理搭配是激發(fā)學(xué)習(xí)者的學(xué)習(xí)動(dòng)機(jī)之一，色彩搭配可以吸引學(xué)習(xí)者注意力，傳播學(xué)習(xí)內(nèi)容、渲染學(xué)習(xí)氛圍、表達(dá)主題思想。在網(wǎng)頁課程的頁面設(shè)計(jì)中色彩的合理搭配主要要根據(jù)以下幾個(gè)要素。

1.學(xué)習(xí)者特征

選擇色彩時(shí)，首先要對(duì)學(xué)習(xí)者特征進(jìn)行分析，學(xué)習(xí)者的年齡、性格特征、認(rèn)知特點(diǎn)。選擇性地說，比如年齡方面，學(xué)齡前兒童往往對(duì)色彩鮮艷的事物情有獨(dú)鐘，這是因?yàn)閮和杏X認(rèn)知不全面，主要靠直覺來感受色彩，色彩強(qiáng)烈、對(duì)比強(qiáng)烈的事物更能吸引他們的注意力。隨著年齡的增長和知識(shí)的增加，人們對(duì)色彩的優(yōu)先感應(yīng)能力逐漸降低而對(duì)形狀更為關(guān)注。因而成人則習(xí)慣于反差對(duì)比較小的色彩。而從事不同職業(yè)的人對(duì)同一色彩又有不同的經(jīng)驗(yàn)感受，所以，在進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)，色彩所表示或引申的含義要同學(xué)習(xí)者對(duì)色彩的經(jīng)驗(yàn)一致。

2.課程內(nèi)容

網(wǎng)絡(luò)課程的主題和內(nèi)容制約色彩的選擇。例如：工科類的課程往往結(jié)構(gòu)嚴(yán)謹(jǐn)，邏輯性較強(qiáng)，所以，色彩的節(jié)奏不能太跳躍，以漸變性節(jié)奏為主，背景選中冷色或偏冷的顏色。而藝術(shù)類的課程內(nèi)容往往天馬行空，較多引用圖片、視頻等視覺素材，所以，背景最好選用純色，常使用黑色和白色，黑色給人幽深、神秘之感，白色則讓人覺得純凈和安靜。

3.色彩的視覺效果

網(wǎng)絡(luò)課程的頁面色彩搭配要干凈利落、美觀大方，與風(fēng)格一致。色彩不要太多，至多四到五種，過多的色彩讓人眼花繚亂，增加反應(yīng)時(shí)間，分散注意力。在風(fēng)格統(tǒng)一的前提下,色彩應(yīng)該有所變化，通過閃爍、變色等引起學(xué)習(xí)者的注意?？梢赃x用暖色調(diào)、較飽和的色彩作為前景色,以冷色調(diào)、淺色作為背景色。控制色塊的面積，太大的色塊最好配上個(gè)小色塊以平衡視覺，不要同樣大小的色塊并排放置，以免給人生硬之感。

4.功能模塊

對(duì)于教學(xué)內(nèi)容的模塊，背景可選用柔和、淡雅的顏色,文字和背景的顏色對(duì)比要強(qiáng)烈。導(dǎo)航模塊的顏色要和教學(xué)內(nèi)容模塊不同，便于學(xué)習(xí)者區(qū)分。對(duì)于鏈接的文字，在色彩方面要與其它文字有所區(qū)別。按鈕的色彩要與頁面整體風(fēng)格一致，同時(shí)比其它部分更醒目和鮮艷。

四、結(jié)束語

心理學(xué)的很多理論可以運(yùn)用于網(wǎng)絡(luò)課程的網(wǎng)頁設(shè)計(jì)，本文從格式塔心理學(xué)、色彩心理學(xué)兩個(gè)方面加以論述。在設(shè)計(jì)網(wǎng)絡(luò)課程時(shí)，充分運(yùn)用心理學(xué)的相關(guān)原理，進(jìn)行人性化設(shè)計(jì)，能夠使網(wǎng)絡(luò)課程更符合學(xué)習(xí)者的認(rèn)知規(guī)律，提高網(wǎng)絡(luò)課程的教學(xué)效果。筆者在本文中也僅僅涉及到了心理學(xué)的部分內(nèi)容，需要更多的學(xué)者專家共同探索，使之形成一個(gè)體系，從而更好地服務(wù)于網(wǎng)絡(luò)課程的設(shè)計(jì)實(shí)踐工作。

[1]教育部現(xiàn)代遠(yuǎn)程教育資源建設(shè)委員會(huì).《現(xiàn)代遠(yuǎn)程教育資源建設(shè)技術(shù)規(guī)范》[DB/OL].http：//www.cbe21.com/subject/information /article.php?article_id=1195.

[2]張新明.試論網(wǎng)絡(luò)課程的藝術(shù)設(shè)計(jì)[J].中國遠(yuǎn)程教育,2002,(03)：47-49.

[3]錢家渝.視覺心理學(xué)：視覺形式的思維與傳播[M].上海：學(xué)林出版社,2006.

[4]何潔.廣告與視覺傳達(dá)[M].北京：中國輕工業(yè)出版社,2004.

[5]王汀.版面構(gòu)成[M].廣州：廣東人民出版社,2002.

[6]朱凌云,羅廷錦,余勝泉.網(wǎng)絡(luò)課程評(píng)價(jià)[DB/OL]. http：//www.edu.cn/20020225/3021059.shtml.

[7]李硯祖,蘆影.視覺傳達(dá)的歷史與美學(xué)[M].北京：中國人民大學(xué)出版社,1999.

[8]朱世根.格式塔學(xué)習(xí)理論在教學(xué)網(wǎng)頁設(shè)計(jì)中的應(yīng)用[J].萍鄉(xiāng)高等?？茖W(xué)校學(xué)報(bào),2007,(05)：59-61.

[9]周靜,趙志靖.格式塔理論在網(wǎng)絡(luò)教學(xué)頁面設(shè)計(jì)中的應(yīng)用[J].中國電化教育,2005,(07)：75-77.

[10]丁祥郭,龔玉清,張琴珠.基于認(rèn)知心理學(xué)的教學(xué)網(wǎng)頁設(shè)計(jì)[DB/OL].http：//218.22.0.27/lunwen/l01122743.htm.

[11]施良方.學(xué)習(xí)論[M].北京：人民教育出版社,2003.

[12]宋杰.視聽語言——影像與聲音[M].北京：中國廣播電視出版社,200.

[13]梁爽.網(wǎng)絡(luò)課程頁面視覺設(shè)計(jì)研究與應(yīng)用[D].長春：東北師范大學(xué),2006.

[14]黃英杰,周銳,丁玉紅.構(gòu)成藝術(shù)[M].上海：同濟(jì)大學(xué)出版社,2004.

[15]謝舒瀟,葉長茂.淺談網(wǎng)絡(luò)課程的頁面設(shè)計(jì)[J].高等理科教育, 2004,(01)：101-104.

[編輯：閆長松]

G434

A

1671-7503（2017）05-0076-03