基于心理學的網絡課程頁面設計及分析

☆代云飛 劉延華

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

基于心理學的網絡課程頁面設計及分析

☆代云飛 劉延華

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

在網絡大環境下，隨著多媒體技術、網絡技術的發展，網絡教育作為一種全新的教育方式在各高校開展起來，其中，網絡課程作為網絡教育的主體，其設計和開發細節值得我們去研究和探討。影響網絡課程質量的因素有很多，本文從網絡課程頁面設計這一點出發，采用文獻分析法，主要通過格式塔以及色彩心理學理論來對頁面設計特征進行分析，并對頁面設計提出自己的看法。

視覺心理；網頁設計；網絡課程

一、網絡課程與頁面設計

網絡課程是通過網絡傳遞的某門學科或知識點的教學內容以及相關教學活動的總和,它主要由兩個部分組成：經過設計和開發出來的教學內容和硬件設施也就是網絡環境及相關設備。

網絡課程中，頁面作為傳遞信息的主要載體，是構成網絡課程的要素。學習者通過瀏覽網頁進入特定的學習情景，參與學習活動，發生學習交互，從而完成有意義的主動的知識建構。網絡課程的頁面設計，是在有限的屏幕空間上將視聽多媒體元素進行有機的排列組合，將理性思維個性化地表現出來。

二、格式塔心理學與頁面設計

（一）格式塔心理學概述

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

（二）格式塔心理學對頁面設計的啟示

1

1.圖形和背景定律

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

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

給網絡課程網頁設計的啟示：要使學習者記住“圖形”本身即教學內容，而不是“背景”，圖形與背景的區分度越大，圖形就越突出而成為我們的知覺對象。正文或圖形應當與背景有足夠的辨識度，以便學習者能夠辨別設計者想要表達的信息。

2.閉合律

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

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

3.簡潔律

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

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

三、色彩心理學與頁面設計

（一）色彩心理學概述

色彩心理學是一門綜合研究色彩與心理的交叉學科，在傳統心理學等學科的基礎上探究色彩、人及環境三者之間的相互關系，它可以實踐于包含網絡課程中網頁設計在內的許多設計。

（二）色彩心理

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

當然，對于色彩的反應，也是因人而異的。對于同一種色彩，不同的人因年齡、性別、性格、文化背景等因素差異也會產生不同的心理反應。但大多數人對于色彩的反應是基本一致的。因此，根據眾人對色彩的認知和聯想性，表1總結了人認知色彩的心理效應。

表1 色彩的心理效應

（三）色彩心理學對頁面設計的啟示

網絡課程中頁面設計的構成環節就包括色彩搭配，色彩的合理搭配是激發學習者的學習動機之一，色彩搭配可以吸引學習者注意力，傳播學習內容、渲染學習氛圍、表達主題思想。在網頁課程的頁面設計中色彩的合理搭配主要要根據以下幾個要素。

1.學習者特征

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

2.課程內容

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

3.色彩的視覺效果

網絡課程的頁面色彩搭配要干凈利落、美觀大方，與風格一致。色彩不要太多，至多四到五種，過多的色彩讓人眼花繚亂，增加反應時間，分散注意力。在風格統一的前提下,色彩應該有所變化，通過閃爍、變色等引起學習者的注意。可以選用暖色調、較飽和的色彩作為前景色,以冷色調、淺色作為背景色。控制色塊的面積，太大的色塊最好配上個小色塊以平衡視覺，不要同樣大小的色塊并排放置，以免給人生硬之感。

4.功能模塊

對于教學內容的模塊，背景可選用柔和、淡雅的顏色,文字和背景的顏色對比要強烈。導航模塊的顏色要和教學內容模塊不同，便于學習者區分。對于鏈接的文字，在色彩方面要與其它文字有所區別。按鈕的色彩要與頁面整體風格一致，同時比其它部分更醒目和鮮艷。

四、結束語

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

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

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

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

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

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

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

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

[8]朱世根.格式塔學習理論在教學網頁設計中的應用[J].萍鄉高等專科學校學報,2007,(05)：59-61.

[9]周靜,趙志靖.格式塔理論在網絡教學頁面設計中的應用[J].中國電化教育,2005,(07)：75-77.

[10]丁祥郭,龔玉清,張琴珠.基于認知心理學的教學網頁設計[DB/OL].http：//218.22.0.27/lunwen/l01122743.htm.

[11]施良方.學習論[M].北京：人民教育出版社,2003.

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

[13]梁爽.網絡課程頁面視覺設計研究與應用[D].長春：東北師范大學,2006.

[14]黃英杰,周銳,丁玉紅.構成藝術[M].上海：同濟大學出版社,2004.

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

[編輯：閆長松]

G434

A

1671-7503（2017）05-0076-03