利用CSS減輕網(wǎng)絡(luò)學(xué)習(xí)者認知負荷的策略分析

葛 巖，楊 雪

（1.吉林動畫學(xué)院，吉林 長春 130012；2.吉林大學(xué) 高等教育研究所，吉林 長春 130012）

利用CSS減輕網(wǎng)絡(luò)學(xué)習(xí)者認知負荷的策略分析

葛 巖1，楊 雪2

（1.吉林動畫學(xué)院，吉林 長春 130012；2.吉林大學(xué) 高等教育研究所，吉林 長春 130012）

在遠程教育系統(tǒng)中，學(xué)習(xí)者是一個處于核心位置的構(gòu)成要素。如何提高遠程學(xué)習(xí)者的學(xué)習(xí)質(zhì)量，一直是遠程教育領(lǐng)域關(guān)注的焦點問題。本文以認知負荷理論和多媒體學(xué)習(xí)的認知理論為指導(dǎo)，探討利用CSS來減輕遠程學(xué)習(xí)者認知負荷的具體策略和實現(xiàn)方法。

遠程教育系統(tǒng)；CSS；認知負荷理論

在網(wǎng)絡(luò)學(xué)習(xí)環(huán)境中，學(xué)習(xí)者與之交互的是多媒體界面，然而是不是越豐富的信息呈現(xiàn)就能取得越好的學(xué)習(xí)效果呢?近年來,人們越來越認識到要提高多媒體教學(xué)的效果,必須設(shè)計科學(xué)合理的多媒體教學(xué)界面，不能單純憑借主觀經(jīng)驗和審美要求，而應(yīng)該在科學(xué)的設(shè)計原則指導(dǎo)下進行，使之起到促進而非阻礙學(xué)生學(xué)習(xí)的作用。在對設(shè)計有效的多媒體學(xué)習(xí)環(huán)境原則的探索中，有兩條獨立展開的研究線索最為重要，它們都獲得了極為重要的成就。其一是澳大利亞教學(xué)設(shè)計研究專家斯維勒（Sweller.J）提出的認知負荷理論以及他與美國教育心理學(xué)家克拉克（Clark.R.C）共同在多媒體教學(xué)中的推廣應(yīng)用研究；其二是美國教育心理學(xué)家和多媒體教學(xué)專家梅耶（Mayer.R.E）提出的多媒體學(xué)習(xí)的認知理論。[1]

一、相關(guān)理論簡介

1.認知負荷理論

認知負荷理論（CLT）由澳大利亞心理學(xué)家John Sweller于上世紀(jì)80年代提出，該理論的依據(jù)是，在處理信息時，工作記憶的容量是有限的（Miller在1956年指出人類工作記憶的容量為7±2個信息單元），而長時記憶的容量則是無限的，并“存儲著具有不同程度復(fù)雜性和自動化特性的認知圖式”。認知負荷理論認為，如果學(xué)習(xí)者同一時間在工作記憶中處理的信息量超過這一限度，就會造成認知困難，加大認知負荷。[2]

2.多媒體學(xué)習(xí)的認知理論

依據(jù)多媒體學(xué)習(xí)的認知理論，梅耶提出了多媒體學(xué)習(xí)與教學(xué)設(shè)計的提示結(jié)構(gòu)原則 （signaling principle），它是指在多媒體學(xué)習(xí)中，當(dāng)向多媒體信息中增加線索以突出基本材料的組織時，人們的學(xué)習(xí)效果會更好。[3]根據(jù)多媒體學(xué)習(xí)的認知理論，構(gòu)建有意義學(xué)習(xí)結(jié)果所需要多數(shù)的認知加工過程，例如選擇、組織和整合，都發(fā)生在工作記憶中。工作記憶的三個重要特征就是雙向通道、容量有限和主動加工。當(dāng)刪除所有的修飾成分不可行時，可以通過向?qū)W習(xí)者提供選擇和組織材料的線索來減輕認知負擔(dān)。提示結(jié)構(gòu)原則的理論基礎(chǔ)是要求把學(xué)習(xí)者的注意力直接引向基本的材料，促使學(xué)習(xí)者忽略無關(guān)材料，節(jié)約運用有限的認知容量來加工基本的材料，從而去除了加工無關(guān)材料的認知需求。例如，增加一些提示，告知學(xué)習(xí)者在學(xué)習(xí)過程中應(yīng)該注意哪些內(nèi)容，怎樣對這些內(nèi)容進行組織等。

二、網(wǎng)絡(luò)學(xué)習(xí)環(huán)境中的認知負荷問題分析

1.超文本標(biāo)記語言的非線性特征致使學(xué)習(xí)容易迷失

所有網(wǎng)頁的內(nèi)容顯示都使用超文本標(biāo)記語言HTML，它具有非線性的特征，在傳統(tǒng)教材中，大部分都有目錄、頁面等，便于學(xué)習(xí)者瀏覽和查找。當(dāng)面對眾多的超級鏈接時，不知道自己往“哪里去”。學(xué)習(xí)者需對這些問題不斷地思考、判斷和決策，這必然占據(jù)大量的認知資源，加重認知負荷。特別是對于場依存型學(xué)習(xí)者而言，往往會迷惑于為自己的學(xué)習(xí)路徑做出決策，甚至不知身在何處。因此，網(wǎng)絡(luò)信息的這種非線性結(jié)構(gòu)，在給學(xué)習(xí)帶來方便的同時，若使用不當(dāng)則會加重工作記憶的負擔(dān)。[4]

2.頁面布局的不合理

學(xué)習(xí)者與網(wǎng)絡(luò)環(huán)境之間通過視覺信息和聽覺信息來完成交互，可見，各種信息的位置很重要，如果放在合適的位置，節(jié)省了學(xué)習(xí)者搜索的時間。當(dāng)教學(xué)信息的呈現(xiàn)布局不夠明朗時，就很容易使信息加工系統(tǒng)的認知負擔(dān)過重，因為進行認知加工需要時間和努力，而這兩者都是有限的。學(xué)習(xí)者就勢必需要分散一部分精力用于思考這方面問題，從而加重了認知負荷。

3.頁面設(shè)計的功能堆砌

雖然使用了復(fù)雜的技術(shù)，但不利于學(xué)習(xí)者的使用。有時候在頁面中展示了一些無關(guān)信息，冗余較多，不利于學(xué)習(xí)者知識結(jié)構(gòu)的建立。如果知識結(jié)構(gòu)組織不合理、過于分散，在進行學(xué)習(xí)之前，學(xué)生需要花費精力整理各種知識之間的關(guān)系，就會加重認知負荷。應(yīng)將大量的學(xué)習(xí)資源按照知識結(jié)構(gòu)的形式進行組織，使知識之間的關(guān)系一目了然，便于學(xué)生結(jié)構(gòu)化知識。

三、CSS概要

CSS是Cascading Style Sheets層疊樣式表的縮寫,它的特點是非常突出的，應(yīng)用的HTML元素將會依據(jù)所指定的CSS樣式來顯示它的外觀，并且CSS將數(shù)據(jù)與顯示格式分開來處理，符合數(shù)據(jù)層與表現(xiàn)層分離的創(chuàng)作趨勢：[5]

（1）CSS樣式的資源是共享的，因此可以減少代碼的使用，從而加快網(wǎng)頁傳輸?shù)乃俣?，降低網(wǎng)絡(luò)傳輸負荷。

（2）CSS可以彌補HTML的不足，例如，HTML元素中只可以設(shè)定文字的前景顏色，但CSS不但可以設(shè)置文字的前景色，而且可以指定文字的背景顏色。

（3）CSS可以提升設(shè)計人員的應(yīng)用變化。例如，HTML元素不可以設(shè)置行距，但利用CSS便可以創(chuàng)造出更具變化的排版樣式。

（4）CSS樣式是集中管理的，它可以在HTML網(wǎng)頁中獨立地以一個樣式區(qū)域存在；也可以.css擴展名存儲成一個獨立的文本文件。當(dāng)修改時只需針對樣式修改即可，因此有利于提升工作效率。

傳統(tǒng)table布局方式實際上是利用了table表格元素具有的無邊框特性，將網(wǎng)頁中的各個元素按版式劃分放入表格的各個單元格中，從而實現(xiàn)復(fù)雜的排版組合。大量的樣式設(shè)計代碼混雜在表格、單元格之中，代碼的可讀性大大降低，維護起來成本也相當(dāng)高，使得瀏覽器下載及解析速度變慢。而使用CSS布局，重點在DIV層的設(shè)計上，它是一個比表格簡單的元素，只有這樣一個定義，并且它的功能就是將一段信息標(biāo)記出來用于后期的樣式定義。

四、減輕學(xué)習(xí)者認知負荷的具體策略分析

界面是人與機器進行交互的操作方式，即用戶與機器互相傳送信息的媒介。[6]好的界面美觀易懂、操作簡單且具有引導(dǎo)功能，使用戶感覺愉快、興趣增強，從而提高效率。所有的界面都是通過各種界面構(gòu)成要素來呈現(xiàn)給學(xué)習(xí)者的，因此，如何更好地設(shè)計它的構(gòu)成要素來促進學(xué)習(xí)者的學(xué)習(xí)，顯得更加重要。它的構(gòu)成要素包括：文本、圖片、導(dǎo)航與鏈接、視頻動畫、聲音等。

1.結(jié)構(gòu)設(shè)計

依據(jù)梅耶提出的提示結(jié)構(gòu)原則,將每個界面劃分為具體的結(jié)構(gòu)，即內(nèi)容塊以及每塊內(nèi)容服務(wù)的目的，根據(jù)這些內(nèi)容設(shè)置的目的，組織上述各種構(gòu)成要素，建立起相應(yīng)的HTML結(jié)構(gòu)?？偨Y(jié)起來，每個界面大致包括Logo、站點導(dǎo)航（主導(dǎo)航）、二級導(dǎo)航、頁面內(nèi)容（文字、圖片、表單）、頁腳（版權(quán)、訪問量統(tǒng)計）等信息。之后，用DIV層將整體內(nèi)容劃分到各個DIV中，構(gòu)建起網(wǎng)頁的結(jié)構(gòu)主體。

實現(xiàn)的效果如圖1所示。

下面分別設(shè)置css樣式:

效果圖如圖2所示，以上已經(jīng)結(jié)構(gòu)化了HTML語言，每個內(nèi)容塊可以根據(jù)需要放在頁面上的任何地方。就目前市場情況可以看出，多數(shù)人使用1400×900的寬屏液晶顯示器，由于頁面尺寸與顯示器大小和分辨率有關(guān)系，無法突破顯示器的范圍，且菜單欄和工具欄將占據(jù)一定的高度，建議設(shè)計頁面時盡量不要大于1300×800像素的尺寸，保證更多的人很好地瀏覽網(wǎng)頁，因此在最外層，配合樣式， 將頁面的高度、寬度固定，使其不隨顯示器分辨率的改變而改變，不能產(chǎn)生內(nèi)部模塊的竄位。

2.導(dǎo)航設(shè)計

導(dǎo)航是科學(xué)，也是一門藝術(shù)，它可以讓學(xué)習(xí)者從一個頁面轉(zhuǎn)到另一個頁面，采用超文本的形式，將圖、文、聲、像等不同媒體信息整合，構(gòu)成了一個豐富而生動的超媒體學(xué)習(xí)環(huán)境。學(xué)習(xí)者可以從一個頁面輕松地跳轉(zhuǎn)到另一個頁面，但同時也產(chǎn)生了一個問題，容易迷航，這種信息的非線性結(jié)構(gòu)，需要占用部分認知資源，對于場依存型學(xué)習(xí)者而言，往往會迷惑于自己處在網(wǎng)站的哪個位置。在具體的設(shè)計中，我們可以利用css在每個頁面設(shè)置主導(dǎo)航，使頁面跳轉(zhuǎn)方便，可以通過內(nèi)聯(lián)框架將其嵌入到相應(yīng)位置，使代碼具有一定的可重用性。具體主導(dǎo)航簡略代碼如下：

在導(dǎo)航上設(shè)置“首頁”，就像一本書的目錄，將首頁與其他頁面融合起來，才能形成一個整體，不會耽擱學(xué)習(xí)者的尋找主頁的時間，降低學(xué)習(xí)者的外在認知負荷。作為“框架”來幫助組織信息并使之模塊化，學(xué)習(xí)者一目了然，這種資源組織和呈現(xiàn)方式較為合理，減輕學(xué)習(xí)者檢索和查找信息的負擔(dān)，降低學(xué)習(xí)者外在認知負荷，有助于提高認知效果。

3.文本設(shè)計

多媒體界面中常常包含大量的文本內(nèi)容，占據(jù)相當(dāng)大的面積，因此，文本信息設(shè)計的好壞將影響到整體界面的呈現(xiàn)效果。設(shè)計者要遵循的一個原則就是多媒體界面中文本的主要功能是恰當(dāng)表征信息，而要達到這種效果，還必須考慮文本信息的連續(xù)性和組織形式，及與其他信息，如圖片等的組合，設(shè)計方法如圖3所示。

根據(jù)認知規(guī)律，主體需在界面所呈現(xiàn)信息中建構(gòu)信息的圖式表征，如果信息太復(fù)雜，則會給表征帶來困難，因此，同一界面上使用的字體種類不要太多，文本字體的更換不要太頻繁。有人研究認為，一個界面中以不超過3～4種字體為宜。另外，由于文字字體呈現(xiàn)需要學(xué)習(xí)者計算機系統(tǒng)的支持，如果在學(xué)習(xí)者計算機上不存在多媒體界面中的某些字體時，計算機將以其默認的其他字體替代，這可能會引起文本字體的混亂，增加認知負荷。因此，設(shè)計者應(yīng)該盡量使用目前計算機系統(tǒng)中的通用字體來設(shè)計界面中的文本信息。

如果想表現(xiàn)一些特殊字體，可將其做成圖片放置在div層中，單純的黑白字體顯得單調(diào)乏味，容易造成認知疲勞，使學(xué)習(xí)者無法長時間保持注意穩(wěn)定，因此在界面中常常為文字設(shè)置色彩。以不同的色彩將界面文本信息分塊化如圖4所示，學(xué)習(xí)者能夠更容易的將相關(guān)性高的信息提取加工，降低了認知負荷。

要想實現(xiàn)圖4的效果，不能使用ID選擇符，因為每個ID名稱只能使用一次，需使用Class選擇符，它允許重復(fù)使用，在頁面中多個元素都可以使用同一個Class定義。如圖4，左側(cè)豎排都使用在行內(nèi)定義一個區(qū)域，一行內(nèi)可以被劃分成3個區(qū)域（見圖①②③），從而實現(xiàn)某種特定效果。

為了突出文本當(dāng)中的重要信息，利于學(xué)習(xí)者的意義建構(gòu)，還可以將其加粗、增大字號、變化色彩或增大周圍的留白空間等。但是在文本設(shè)計時要注意，同級文字字體和大小的選擇要盡量保持一致，各級文字的形式包括大小、色彩、是否帶陰影、是否是三維字、是否帶下劃線、是否傾斜、橫向排列還是縱向排列等也要相對固定，并且圖形對比關(guān)系要一致，切忌追求花樣，隨意變化，因為太多的變化會增加刺激量，容易分散注意力，造成認知負荷。

4.色彩及其頁面內(nèi)容模塊的設(shè)計

單一的頁面顏色容易造成學(xué)習(xí)者的視覺疲勞，使學(xué)習(xí)者無法長時間保持注意力穩(wěn)定，所以要配合輔色調(diào)來搭配，不同的色彩將界面模塊化，學(xué)習(xí)者能夠更容易地將相關(guān)性高的信息提取加工，降低了認知負荷。

利用HTML框架集可以在多個視圖窗口中展示網(wǎng)頁，多視圖模式提供給設(shè)計者一個方法，使用該方法，可以實現(xiàn)某一個視圖始終可視，而其他視圖可以滾動或者也可以被替換掉。由于有些瀏覽器不支持框架，可以考慮使用標(biāo)簽。

五、總結(jié)

利用CSS對布局、字體等的設(shè)計，依據(jù)人類信息加工的特征，在開發(fā)過程中，應(yīng)結(jié)合實際情況，采用多種工具手段和策略，使之優(yōu)化組合，有效地發(fā)揮網(wǎng)絡(luò)的優(yōu)勢，同時盡可能地降低學(xué)習(xí)過程中的認知負荷水平。具體的應(yīng)用效果仍需在實踐中加以檢驗，在應(yīng)用反饋的基礎(chǔ)上，深入剖析CSS對減輕學(xué)習(xí)者認知負荷的作用程度。

[1]王文智.基于認知負荷理論的多媒體教學(xué)呈現(xiàn)原則探討[J].遠程教育雜志,2009(2).

[2]李紅梅,劉寧,李世改.利用概念圖減輕遠程學(xué)習(xí)者認知負荷的策略探析[J].中國遠程教育，2008(8).

[3]張麗,盛群力.技術(shù)應(yīng)如何致力于促進學(xué)習(xí)？—梅耶論多媒體學(xué)習(xí)與教學(xué)設(shè)計的原則[J].遠程教育雜志，2009(2):28-30.

[4]林剛,陳國江.網(wǎng)絡(luò)學(xué)習(xí)環(huán)境對認知負荷的影響及對策研究[J].中國遠程教育,2007(8):35-38.

[5]張亞飛.HTML開發(fā)王[M].北京:電子工業(yè)出版社,2008,6:274-275.

[6]楊雪,王碩,黃海林.網(wǎng)絡(luò)虛擬實驗的界面設(shè)計研究與實現(xiàn)[J].中國教育信息化,2007(2):70-72.

(編輯：楊馥紅)

G250.73

A

1673-8454（2010）23-0016-04