1、網絡教學頁面設計中網頁圖標設計一般規律探究 摘要 目的 結合視覺空間工作記憶能力對網頁圖標設計作用的行為分析研究和神經加工機制研究，揭示網絡教學頁面設計中網頁圖標設計的相關規律。方法采用2x2實驗，運用測試工具對一組被試者進行視覺測試，結果以平均分為基準分高低兩個等級后，再分別把高低兩組隨機分兩個小組，這樣對比組和實驗組在相同的環境下對兩種界面運用了兩種不同的網頁圖標進行設計的課件進行學習，最后測試學習效果。結果 學習成績因視覺空間工作記憶能力的不同，課件界面設計運用的網頁圖標的不同而不同，因此網絡課程的界面要素網頁圖標設計的視覺效果對界面設計來說是很重要的。關鍵字 視覺空間工作記憶 工作記憶

2、 網頁圖標Abstract Objective Working memory space is the ability to integrate visual website design role acts face analysis and neural processing mechanisms study revealed teaching network design web page design logo related laws. Method using 2x2 experiment, using test tools for a group of learners a vi

3、sual test results to the average level is divided into two sub-base grading, or to separate the two groups of two teams at random, so comparison group and experimental group in the same environment for two types of two different web logo design using two learning, Final test results good learning. R

4、esult Performance space for visual results of the different working memory capacity, software interface design of the website logo vary according to, and therefore the curriculum network interface elements website logo design visual effects for interface design is very important.1. 引言當前,利用網絡進行教學和遠程教

5、育是教育發展的一個方向。網絡教學效果的好壞、成功與否與網絡課程的設計與制作密切相關。網絡課程是由一頁一頁的網頁按照一定的順序和結構組成的。頁面既是網絡課程的組成部分也是網絡課程的呈現形式,所有的教學信息和資源都是通過頁面呈現在學習者面前的。也就是說頁面是學習者與網絡資源的交互通道，而信息傳輸是否暢通很大程度上取決于頁面的設計，頁面吸引學習者，主要是吸引學習者的視覺沖擊力，同時實現一種隱性的信息傳播。因此, 網絡課程頁面設計的優劣, 直接影響到網絡課程的質量和效果。網頁面上的大部分信息都是由視覺感知的，很大一部分信息是通過視覺獲取的。而工作記憶,它是一種對信息進行暫時加工和貯存的能量有限的記憶系

6、統，在認知活動中起重要作用。根據Baddeley2的工作記憶理論，工作記憶是人類暫時處理和存儲信息的假設性精神操作空間，由中央執行系統、語言回路、視覺空間模板等三個成分組成。而視覺空間模板，作為工作記憶的重要組成成分之一，它負責處理視覺空間信息。信息可以直接進入視覺空間模板（如直接知覺到的信息），也可以間接進入視覺空間模板（如從記憶中產生的表象）2。因此視覺空間工作記憶能力與網絡教學頁面設計的關系，對我們無疑具有很大的啟發作用。而在以前的很多課件中，其界面的表達元素多限于文本，隨著計算機科學技術的發展，目前很多CD一ROM教學盤由于其存儲容量（可達640M）的優勢，大量采用圖形界面。主要包括工

7、作臺（Deskiop）、圖標（Icon）、按鈕（Button）、窗口、下拉式菜單和圖形式菜單等。然而圖標，一種小型的、帶有簡潔圖形的符號。它采用仿真、模擬的方法進行設計，用簡潔的圖形符號模擬現實世界中的事物，使學習者很容易和現實中的事物聯系起來。例如使用形象的“放像機”圖標，單擊它可以觀看活動圖像、錄像；用以“話筒”圖標，單擊它可以進行錄音。作為圖形界面的主要元素之一，它在計算機圖形界面中起了相當重要的作用，它的視覺效果直接影響著頁面的質量，影響著學習者的學習興趣和學習效率。而圖標在網絡課程的界面中主要起到導航的作用。由于Internet的網絡課程中大量地使用了超媒體信息系統，這種系統為學習者

8、創造出了一種由學習者進行控制的學習環境，使學習者在學習過程中鏈接或訪問信息有更大的伸縮性，從而更加適應學習者的個性化學習風格。但是超媒體信息系統也可能為學習者帶來迷航的危險。那我們應如何根據不同學習者的不同視覺空間工作記憶能力設計好網頁圖標以降低迷航的可能性和導航系統的復雜程度呢？今天將通過實驗來分析驗證網絡課程頁面設計中關于圖標設計的一般規律和特點。2.理論依據與問題提出21 理論依據2.1.1工作記憶理論工作記憶（working memory）：屬程序性記憶、短時記憶，是一短暫時刻的知覺，是一系列操作過程中的前后連接關系，后一項活動需要前項活動為參照。依賴于大腦前額葉皮層神經環路的功能，尤

9、其是谷氨酸神經元與多巴胺神經元之間的平衡。對腦高級功能的意義，通常是在過去的經歷與當前的行動之間提供時間和空間的連續性，對于思維運算、下棋、彈鋼琴以及無準備的即席演講等都是十分重要的。在工作記憶受損時，難以記住事件正確的前后關系。一個典型的例子就是回憶一個新的七位數的電話號碼。你能回憶出來的數字的個數稱為你的“數字廣度”。對大多數人來說，它通常只有六到七個。換句話說，工作記憶的能力是有限的。某些腦損傷的病人只有極小的數字記憶廣度，除了他們聽到的最后一個字母外，別的一概回憶不起來，但他們的意識卻正常。事實上，他們的長時記憶可能并未受到損害。1974年，Baddeley和Hitch在模擬短時記憶障

10、礙的實驗基礎上提出了工作記憶的三系統概念，用“工作記憶”代替了原來“短時記憶”的概念。Baddeley認為工作記憶指的是一種系統，它為復雜的任務比如言語理解、學習和推理等提供臨時的儲存空間和加工時所必需的信息，工作記憶系統能同時儲存和加工信息，這和短時記憶概念僅強調儲存功能是不同的。Baddeley在短時記憶基礎上提出的一個記憶模型。它的功能是:在進行復雜認知活動時 ,暫時存儲和操縱信息 。經近些年的實驗驗證 ,它是一個相當成功的模型 。國內的朱瀅 、崔耀 、張達人 的工作都涉及這方面。工作記憶分成三個子成分，分別是中樞執行系統、視空初步加工系統和語音環路。大量行為研究和神經心理學上的許多證據

11、表明了三個子成分的存在，有關工作記憶的結構和作用形式的認識也在不斷地豐富和完善。人們發現工作記憶與語言理解能力、注意及推理等聯系緊密，工作記憶蘊藏智能的玄機。視空間工作記憶（visuo-spatial working memory），用于存貯視覺和（或）空間的信息，主要負責產生、操作和保持視覺映象，是工作記憶的重要組成部分。然而查看了大量的文獻資料，發現與言語工作記憶相比 ,對視空間工作記憶的研究較少 。梁鳳華等8的研究綜述中提到視覺空間工作記憶加工模式有整合加工模式、平行加工模式及雙重存貯加工模式。2.1.2 視空間工作記憶Luck 和Vogel 研究認為視覺工作記憶以完全整合的形式貯存大約

12、3 或4 個客體,記憶容量受物體數量的限制但相對地不受可區分的組成這些物體的特征的數量所限制,每一個客體可以包含無限的可區分的特征8再引用。這些研究均表明視覺記憶是以整合的方式存貯特征的,存貯的容量大約為3 或4 個客體且不受客體所包含特征數量的限制。這種將視覺記憶中多個元素組合成一個單元的概念實際上是記憶中組塊概念的一個特例。視覺記憶通過各種分組和組織方式使越來越多的信息融合到一個組塊當中,使大量的信息得到了記憶。記憶的容量受到組塊數量的限制 ,然而記憶范圍實際上是不受每個組塊所含信息數量的限制 ,對于含有多個特征的客體,客體數量而不是呈現的相關特征的數量限制記憶成績。盡管許多研究支持了特征

13、整合理論 ,但同時有許多證據表明 ,如果不經過額外的努力特征在視覺記憶中可能不會以整合的形式得到保持。如Rensink提出的一致性理論認為在沒有注意參與的情況下 ,一個很顯然的物體將被知覺成它的各個組成部分。許多研究者發現了不符合系列搜索的證據 。又有研究者認為視覺是通過直接感知視覺景象結構中突顯的特殊特性而給某種可能的聯結進行編碼的。這個假設得到了神經生理學研究的支持 , De Valois等對猴子的研究表明在初級視皮層中 ,V1區的大多數細胞在 10°90°范圍內有各自的方位偏好 ,同一個刺激可能因其呈現的位置不同而發生興奮或抑制效應 ,或者完全沒有任何作用 。Stef

14、urak和Boynton 也得出對特征的視覺記憶是分離的 ,特征之間的聯結經常很難維持 。他們采用局部呈現測試研究范式:用 5s 時間呈現彩色輪廓的動物 ,3s或15s之后是一個單目標測試的再認實驗 ,他們發現當禁止使用言語編碼時 ,對于顏色和形狀的記憶是良好的 ,但是對于顏色和形狀之間聯結性的記憶卻相對較弱。在另一個實驗中他們指導被試單獨注意某個維度(或者顏色或者形狀) ,發現無關維度的同時變化不影響再認成績。Treisman在一系列使用彩色字母合成腦知覺匹配實驗中發現 ,在不同的組合中當測試時呈現了同樣的特征 ,但在特征的匹配上有了改變時 ,辨別的錯誤率最高 。Simons 的研究也得出了

15、類似的結論 。Simons在研究中采用以下測試范式:先呈現4 張實物或抽象形狀的圖片,然后進行匹配任務測試。發現當改變圖片的總體結構時 ,被試幾乎總是能注意到這種變化;而只改變目標本身或交換兩個圖片的位置 ,被試就難以覺察到這種變化 ,且圖片交換位置時成績最低。這些研究均表明了對特征記憶的獨立性 ,人們能很好地記憶某個客體中的特征 ,但對特征間的呈現關系的記憶卻很弱。當任務要求對這些關系進行記憶時 ,需要注意的參與。2.2問題的提出圖標在計算機圖形界面中起了相當重要的作用，從1981年Xerox Star系統開始，到2003出現的BeOS Zeta系統，每一系統都有不同的圖標。在網絡教學迅速發

16、展的今天,網絡課程頁面設計體現出它的重要性,作為頁面的一個重要元素網頁圖標（icon），它的設計也是致關重要的在目前關于網絡課程的頁面設計還存在許多不足,關于圖標設計方面的研究也是比較少.對于圖標的的認知主要依靠視覺加工,因此猜測視覺空間工作記憶能力不同的人對于圖標的認知與理解也不同,即視覺空間工作記憶能力與圖標的認知存在密切的關系，但究竟有什么樣的關系還要進行進一步的研究為了更細化的了解視覺空間工作記憶能力與網頁圖標（icon）的關系，本研究試圖以視覺空間工作記憶能力不同的學生為研究對象，研究其在不同圖標學習條件中的學習效果2.2.1研究假設1.視覺空間工作記憶能力高的學習者在文字標注圖標學

17、習條件中將比在沒有文字標注的圖標學習條件的學習效果好。2.視覺空間工作記憶能力低的學習者在文字標注圖標學習條件下將比在沒有文字標注的圖標學習條件中的學習效果好。3. 在文字標注圖標學習條件中進行學習，視覺空間工作記憶能力高的學習者學習效果好于視覺空間工作記憶能力低的學習者。4. 在沒有文字標注的圖標學習條件中進行學習，視覺空間工作記憶能力高的學習者比視覺空間工作記憶能力低的學習者的學習效果好。5.視覺空間工作記憶能力高的學習者在文字標注圖標學習條件中的學習效果將比視覺空間工作記憶能力低的學習者在沒有文字標注的圖標學習條件中的學習效果好。6. 視覺空間工作記憶能力高的學習者在沒有文字標注的圖標學

18、習條件的學習效果比視覺空間工作記憶能力低的學習者在文字標注圖標學習條件中的學習效果好。3.研究方法3.1被試從A市B縣C小學中隨機抽樣60名四年級的學生。這些學生使用過計算機，且有過作為多媒體教學對象的經歷。3.2實驗材料本實驗的材料為視覺空間工作記憶能力測試工具和兩個它的界面運用了不同網頁圖標設計而成的課件以及用來測試學習效果的測試卷。3.2.1 視覺空間工作記憶測試工具測試工具是引用Kim.h.s開發的空間整合測試工具，然后我們用flash軟件來實現Kim.h.s開發的空間整合測試工具的效果。它的整個測試過程是向被試呈現20對由點線構成的圖片，每對圖片有三張，每張圖片中點的個數和排列分布是

19、一樣的，。在呈現圖片時，每對圖片的前兩張都是每張各呈現2秒鐘后再出現第三張圖片，在出現第三張圖片后進行判斷前兩張圖片是否能聯結成第三張圖片，能的話話點擊能，不能的話點擊否，然后點擊確定。這里的判斷時間為4s鐘，判斷確定后會出現下面一對由點和線構成的圖片。這里如果超時還未作出判斷的話，也將會出現下一對要判斷的圖片。被試判斷的同時后臺也進行判斷被試判斷的是否正確并進行統計正確的個數，為來得及進行判斷的作判斷錯誤的處理，在最后顯示被試判斷的個數。經spss11.0分析，可信度為Alpha為=0.50。3.2.2 不同形式圖標條件下的學習課件兩個學習課件是運用flash軟件制作的，界面運用了界面的一重

20、要元素網頁圖標（icon）做導航，每頁用了5個左右。兩個課件內容和布局都是一樣的，但頁面設計時使用兩個不同的圖標，即純粹的圖標形式和和帶有文字說明的圖標，經spss11.0分析，可信度Alpha為=0.69。3.2.3 學習結果測試題學習結果測試題是根據課件內容及課件的界面特點設計的，有生字注音,內容填空,關于圖標所表示的意思的選擇題和填空題。經spss11.0分析，可信度為Alpha=0.65。3.3實驗設計和程序本實驗是2x2的實驗，視覺空間工作記憶能力和課件是自變量,被試學習效果為因變量。實驗是在A市B縣一所名叫C的小學進行，實驗環境為該校計算機機房，被試者每人一臺電腦。首先運用視覺空間

21、工作記憶能力測試工具對學生進行測試，在做正式測試之前首先讓他們進行練習，使被試熟悉測試工具的使用。測試之后根據測試結果以平均基準分為高低兩個等級。再把視覺空間記憶能力高的學生隨機分成兩組，把視覺空間記憶能力低的學生也隨機分成兩組。然后在條件相同的情況下實驗組和對比組分別運用網絡課程界面為純粹的圖標形式的課件和網絡課程的界面為文字和圖標有機結合形式的課件進行學習，學習時間為15分鐘，學習之后，學生根據學習的課件的內容以及課件的頁面特點填寫設計好的測試卷，最后統計數據并進行分析。3.4實驗實施過程實驗在A市B縣一所小學進行，實驗整個過程一直有本人，該學校一名計算機老師以及該校60名四年級學生參與。

22、實驗先后分兩次進行。首先，選定一個時間，利用10分鐘對被試進行視覺空間工作記憶能力的測試。在測試前，研究者先對測試工具的運用進行講解說明，使被試清楚軟件的使用，減小誤差。然后讓學生運用測試工具進行測試。這一實驗材料的指導語為“這是一個視覺記憶測試。在屏幕上將出現一系列圖片,每張圖片都是由點和線組成的，呈現兩張后，再呈現第三張，前兩張可能能聯結成第三張，可能不能，再呈現第三張后請你既準確又迅速的作出判斷，這里判斷的時間為4s鐘，前兩張圖片每張呈現的時間為2s鐘。2s鐘后將被掩蔽，接著出現第二張。判斷完這一組圖片或4s后仍沒作出判斷的話將會出現下一組圖片，呈現的時間以前面的都一樣，請大家集中注意力

23、，認真做好測試。正式測試前讓被試練習幾次 ,直到被試理解主試給予的任務并順利做出反應為止 ,然后正式實驗。視覺刺激(即圖片)呈現在計算機屏幕的中央。視覺空間工作記憶能力的值為被試判斷正確的個數，等測試完成后，讓被試將自己判斷正確的個數（也就是測試工具最后記錄顯示的數字）記錄下來上交給本人。根據測試結果數據，使用spss11.0工具算出視覺空間記憶能力的中央值，中央值為11，然后根據中央值將視覺空間工作記憶能力分成高低兩組，把中央值大于等于11的定義為視覺空間記憶能力高，小于11的定義為視覺空間記憶能力低。在此基礎上再分別把高低兩組隨機分成兩組。然后再把其中的高低兩個組定為實驗組，把另外的高低兩

24、個小組定為對比組。在第二天的某一節課，讓實驗組運用界面為純粹圖標形式的課件進行學習，對比組則運用界面上的圖標帶有文字的課件進行學習，大家學習的時間均為15分鐘。在實驗開始之前，我對學習的總體目標等做了些講解。實驗過程當中出現了許多狀況，被試注意力不集中，影響了測試和學習的效果；還有個別同學不遵守紀律，影響旁邊同學（環境變量）；還有在做測試卷時還出現詢問旁邊同學；還有各被試之間的水平存在差異等這些變量都將導致實驗的誤差。3.5數據處理 運用spss11.0軟件進行雙變量分析，并統計分析的有效度設定為=.05。4結果視覺空間記憶能力高低不同的的被試利用不同的兩種課件進行學習，所得的學習效果如表1所

25、示。7.13能力高能力低TotalMNSDMNSDMNSD無文字圖標有文字圖標1416156.339.630.8062.024155.861.5121.302318.421.6496.101.78029表1 視覺空間記憶能力高低不同的被試運用不同課件進行學習的效果表從上表可以看出視覺空間記憶能力高的學習者，運用了界面以有文字的圖標設計的課件的人數N=16，平均值M=9.63，集團間標準偏差 SD=0.806，運用了界面以純粹圖標的形式設計的課件的人數N=15，平均值M=6.33，集團間標準偏差SD=2.024。視覺空間記憶能力低的學習者，運用了界面以有文字的圖標設計的課件的人數N=15，平均值

26、M=7.13，集團間標準偏差SD=1.302，運用了界面以純粹圖標的形式設計的課件的人數N=14，平均值M=5.86，集團間標準偏差SD=1.512。說明視覺空間工作記憶能力高的學習者在文字標注圖標學習條件下學習效果明顯好于在沒有文字標注的圖標學習條件中的學習效果。視覺空間記憶能力低的學習者在文字標注圖標學習條件下學習效果明顯好于在沒有文字標注的圖標學習條件中學習效果。均在文字標注圖標學習條件下進行學習，視覺空間記憶能力高的學習者學習效果明顯好于視覺空間工作記憶能力低的學習者。均在沒有文字標注的圖標學習條件中進行學習，視覺空間記憶能力高的學習者與視覺空間工作記憶能力低的學習者的學習效果無明顯差

27、別，即不論視覺空間工作記憶能力高還是低的學習者對無文字標注的純粹的圖標的理解能力都差不多，無明顯差別。 視覺空間工作記憶能力高的學習者在文字標注圖標學習條件下的學習效果明顯好于視覺空間工作記憶能力低的學習者運用了界面導航以純粹圖標的形式設計的課件的學習效果。視覺空間工作記憶能力低的學習者在文字標注圖標學習條件下的學習效果好于視覺空間工作記憶能力高的學習者運用了界面導航以純粹圖標的形式設計的課件的學習效果。SourceType III Sum of SquaresdfMean SquareFP能力課件能力 * 課件43.36351.58259.619151112.89151.5825.4201.

28、54827.6262.903.146.000.009表2 視覺空間工作記憶能力和課件雙變量分析注：*P<0.05這些說明了視覺空間工作記憶能力低的學生和視覺空間工作記憶能力高的學習者均對有文字標注的圖標的理解程度比對無文字標注的圖標的理解程度要好。即對于不論是視覺空間工作記憶能力高還是低的學習者來說，有文字標注的圖標比無文字標注的圖標易于理解和記憶。從該表格可以看出在其他條件相同的情況下，由于課件的不同，即課件界面運用了不同網頁圖標（icon）進行設計，學習效果有顯著性差異，有效度為P=0.000，假設被肯定；視覺空間工作記憶能力單方面因素的不同，學習效果沒有顯著性差異，有效度為P=0.

29、146，假設被否定；能力和課件這二因素有顯著的交互作用，視覺空間記憶能力因素和課件因素相互影響，視覺空間工作記憶能力不同的學習者運用不同的課件，學習效果有顯著性的差異，有效度為P=0.009，研究假設被肯定。5分析和討論5.1視覺空間工作記憶能力與網頁圖標（icon）設計的關系對視覺空間工作記憶能力高低不同被試運用界面以不同網頁圖標進行設計的課件進行學習的學習效果的研究后發現，假設1、假設2、假設5被肯定，也說明了無論對于視覺空間工作記憶能力高的學習者還是低的學習者，有文字標注的圖標比純粹的圖標易于理解記憶。由于年齡，受教育程度，知識經驗等因素的不同，人的接受信息的能力、認知特點、思維方式也不

30、同，對于低年級的學生來說，年齡小，知識經驗少，接受信息的能力低，偏重于對具體形象的認知材料的識記。這一階段學生對具體形象化的圖象易于接受，不過要對圖標有一定的理解為基礎才達到預期目標的。就如一個房子的圖標，像低年級的學生由于知識經驗的限制，看到房子小圖標大部分學生只能聯想到實物房子，而想不到是表示返回首頁的意思，所以加以文字說明，這樣才能很好的理解。假設3被肯定，因為在對有文字標注的圖標的理解的基礎上，視覺空間工作記憶能力高和低的被試者在視覺加工能力，視覺辨別和視覺記憶上存在差異。假設4被否定，可能原因為由于圖標沒加文字說明，低年級的學生不理解其意思，且有可能在測試視覺空間工作記憶能力時，測試

31、工具中界面圖片顯示的時間過短，被試者來不及反應，也可能在測試時，外界因素如學生注意力不集中，周圍其他被試者等對視覺空間工作記憶能力的測試造成較大的影響。5.2網頁圖標（icon）設計的一般特點及規律根據人的視覺記憶容量，我們在網絡課程頁面設計時，一張頁面應該放置網頁圖標個數為5-10個。圖標，一種小型的、帶有簡潔圖形的符號，它是采用仿真、模擬的方法進行設計，用簡潔的圖形符號模擬現實世界中的事物，使學習者很容易和現實中的事物聯系起來。實驗表明圖標模擬現實世界中的事物，代表的意思要簡潔明了，能讓學習者一看就可以想到正確的意思的話，頁面設計時運用到的圖標，設計除了美觀外，所要表達的意思也要和課件相符

32、，且圖標既要形象又要易于理解，如設計的圖標加了文字說明的更直觀，易于理解、辨別和記憶！根據視覺視覺工作記憶加工的方式特征是以整合的方式進行存貯，或是特征以平行的方式進行存貯，在不超過視覺記憶容量的情況下，網頁圖標應多設計幾個能表現圖標要表達的意思的特征，這樣視覺記憶通過各種分組和組織方式使越來越多的信息融合到一個組塊當中,使大量的信息得到了記憶，讓人更容易理解圖標所要表達的意思。還有設計網頁圖標時一定要根據不同人的視覺空間記憶能力的不同，以及不同人的不同文化水平等，來設計網頁圖標，使它所包含的信息易于記憶和理解，能使學習者很容易和現實中的事物聯系起來，明白圖標所要表達的意思。6結論與建議根據本

33、研究結果看，無論是視覺空間工作記憶能力高還是低 ,都是運用界面上的導航為文字標注的圖標的課件進行學習得到的效果，比運用界面上的導航為純粹的圖標形式的課件進行學習得到的效果要好。這是由于低年級的學生接受能力低，理解能力低，知識經驗不足的特點，運用文字進行說明，更易于理解，這樣導航就比較清楚，不至于迷航，節省了許多時間，也提高了學習效率。這一結果中可以看出，人的認知特點和接受能力以及理解能力，知識經驗與年齡和受教育程度有著很密切的關系。因此我們應該根據年齡、認知水平等的的不同，來設計圖標。如針對低年級學生我們可以在圖標的旁邊加上小字進行說明，高年級的學生我們可以設計成當光標一移到圖標上就出現文字說明等這些方法。為了美觀，對部分的成人，我們也可以運用純粹的圖標形式。但只要可能,盡量使用文本來增強用戶界面的圖標效果針對圖標使用清楚、明確的文本標注提高圖標的異讀性，這樣學習者在學習時就能目的明確的通過圖標鏈接到要學習的內容，不至于迷航浪費不必要的時間。以最簡單的學習路徑學到要學的內容。對于加了文字標注的圖標，請使用簡單的和分隔清楚的字體，因為無論大小如何，您選擇的字體樣式都可能會影響可讀性。只要可能，請盡量使用大多數用戶都熟悉的、字符