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

☆代云飛 劉延華

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

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

☆代云飛 劉延華

（安徽師范大學(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è)計和開發(fā)細節(jié)值得我們?nèi)パ芯亢吞接?。影響網(wǎng)絡(luò)課程質(zhì)量的因素有很多，本文從網(wǎng)絡(luò)課程頁面設(shè)計這一點出發(fā)，采用文獻分析法，主要通過格式塔以及色彩心理學(xué)理論來對頁面設(shè)計特征進行分析，并對頁面設(shè)計提出自己的看法。

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

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

網(wǎng)絡(luò)課程是通過網(wǎng)絡(luò)傳遞的某門學(xué)科或知識點的教學(xué)內(nèi)容以及相關(guān)教學(xué)活動的總和,它主要由兩個部分組成：經(jīng)過設(shè)計和開發(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)頁進入特定的學(xué)習(xí)情景，參與學(xué)習(xí)活動，發(fā)生學(xué)習(xí)交互，從而完成有意義的主動的知識建構(gòu)。網(wǎng)絡(luò)課程的頁面設(shè)計，是在有限的屏幕空間上將視聽多媒體元素進行有機的排列組合，將理性思維個性化地表現(xiàn)出來。

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

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

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

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

1

1.圖形和背景定律

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

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

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

2.閉合律

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

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

3.簡潔律

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

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

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

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

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

（二）色彩心理

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

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

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

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

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

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

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

2.課程內(nèi)容

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

3.色彩的視覺效果

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

4.功能模塊

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

四、結(jié)束語

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[編輯：閆長松]

G434

A

1671-7503（2017）05-0076-03