網(wǎng)絡(luò )課程的界面設計現狀分析
錢(qián)良智
中國人民大學(xué)網(wǎng)絡(luò )教育學(xué)院 網(wǎng)絡(luò )教育研究中心課程開(kāi)發(fā)制作部
【摘 要】網(wǎng)絡(luò )課程的界面設計影響網(wǎng)絡(luò )課程的質(zhì)量。本文對國內網(wǎng)絡(luò )課程界面設計中的特點(diǎn)和存在的問(wèn)題進(jìn)行了分析，并對今后界面設計提出了一些建議。
【關(guān)鍵詞】網(wǎng)絡(luò )課程 界面設計 現狀
隨著(zhù)網(wǎng)絡(luò )教育的發(fā)展，網(wǎng)絡(luò )課程的數量在迅速增長(cháng)，課程建設已經(jīng)從“無(wú)”到“有”，課程的質(zhì)量也在短短幾年的時(shí)間內迅速提高。課程質(zhì)量提高的一個(gè)方面就體現在對課程界面設計的重視和設計水平的提高。為了更加全面、真實(shí)地了解網(wǎng)絡(luò )課程的界面設計現狀，我們搜集了二十幾個(gè)網(wǎng)絡(luò )學(xué)院的五十多門(mén)網(wǎng)絡(luò )課程，對它們的界面設計進(jìn)行分析研究。
一、網(wǎng)絡(luò )課程界面設計簡(jiǎn)介
網(wǎng)絡(luò )課程界面是學(xué)習者與網(wǎng)絡(luò )課程系統之間進(jìn)行信息傳遞和交換的媒介，學(xué)習者通過(guò)界面向計算機輸入信息進(jìn)行控制、查詢(xún)和操縱；課程則通過(guò)界面向用戶(hù)提供信息以供閱讀、分析、判斷。
網(wǎng)絡(luò )課程的設計是網(wǎng)絡(luò )課程設計中的一項重要工作，界面設計的好壞是決定網(wǎng)絡(luò )課程質(zhì)量的一個(gè)重要因素。課程的界面不僅影響到課程本身外觀(guān)，影響學(xué)生學(xué)習興趣的引起和維持，而且對課程的可操作性和使用的方便性也有很重要的作用。好的界面能使網(wǎng)絡(luò )課程容易被理解和接受，使學(xué)習者容易掌握和使用。而一個(gè)設計不當的界面，使學(xué)習者對課程產(chǎn)生排斥，使用不方便，導致迷航等。
界面的設計并不僅僅是美術(shù)的設計，它需要根據課程的內容和使用對象的特點(diǎn)，并綜合運用計算機科學(xué)、心理學(xué)、圖形藝術(shù)、人機工程學(xué)等多個(gè)學(xué)科的知識，這樣設計出的交互界面才能夠吸引學(xué)習者、方便友好，使學(xué)生能在自主、輕松的環(huán)境下完成網(wǎng)絡(luò )課程的學(xué)習任務(wù)。
二、目前網(wǎng)絡(luò )課程界面設計的特點(diǎn)
我們搜集的五十多門(mén)網(wǎng)絡(luò )課程中，基本上都在界面設計上達到了一個(gè)較高的水平，符合界面設計的一般原則，并考慮到了作為網(wǎng)絡(luò )課程的特殊性，能根據不同的課程內容作風(fēng)格不同的設計。
1. 界面簡(jiǎn)潔、美觀(guān)、有親和力，能引起學(xué)習者的興趣。
學(xué)習者接觸網(wǎng)絡(luò )課程是從界面開(kāi)始的，課程界面的美觀(guān)與否，直接關(guān)系到網(wǎng)絡(luò )課程的質(zhì)量。協(xié)調美觀(guān)的界面能吸引學(xué)習者，讓學(xué)習者對課程有一個(gè)良好的第一印象，而簡(jiǎn)潔的界面則能夠讓學(xué)習者在最短的時(shí)間內熟練地使用課程。
大多數的網(wǎng)絡(luò )課程，注意整體構圖，界面生動(dòng)、和諧，使學(xué)習者在輕松愉快的審美感受中進(jìn)入網(wǎng)絡(luò )學(xué)習的世界。色彩搭配合理，整個(gè)課程的界面設計一般有一個(gè)主色調，整體色調統一協(xié)調；不同主題在突出差異的同時(shí)，又不至于使學(xué)習者的視覺(jué)容易疲勞；主題與背景的色彩有對比并且和諧，能吸引學(xué)習者注意力。很多網(wǎng)絡(luò )課程充分利用新的技術(shù)，如流媒體技術(shù)，動(dòng)態(tài)網(wǎng)頁(yè)設計，結合教學(xué)內容，合理安排，使學(xué)習者可以享受到更加完美的視聽(tīng)藝術(shù)效果。界面在綜合運用多種媒體時(shí)，各媒體元素之間搭配協(xié)調得當，和諧自然，突出重點(diǎn)，為學(xué)習者營(yíng)造出良好的學(xué)習環(huán)境。
2. 屏幕布局合理，條理清晰，重點(diǎn)突出。
合理的屏幕布局使網(wǎng)絡(luò )課程條理清晰，易于使用。目前網(wǎng)絡(luò )課程一般將屏幕空間進(jìn)行功能分區，如頁(yè)面標題區、內容呈現區、學(xué)習工具區、頁(yè)面操作按鈕區。在這種布局中，各區條理清晰，主題突出，教學(xué)內容、背景、菜單、按鈕等按其重要程度在屏幕上進(jìn)行了合理安排，相關(guān)功能的按鈕分組排放，學(xué)習者能容易地辨認、找到同一類(lèi)的信息。課程主從關(guān)系明顯，主次分明，對于需要重點(diǎn)突出、主要強調的內容，安排在屏幕中心位置，或進(jìn)行了突出顯示，而對于次要的內容，如菜單、工具按鈕，一般放在屏幕的四周。主體內容所包含的文字、圖形、視頻、動(dòng)畫(huà)等多媒體對象，也都進(jìn)行了合理安排，使屏幕的布局簡(jiǎn)潔、協(xié)調、美觀(guān)，營(yíng)造出符合教學(xué)設計目的的視覺(jué)環(huán)境，突出了主體內容，增強學(xué)習者對網(wǎng)絡(luò )課程的注意力。
3. 根據網(wǎng)絡(luò )課程主題的不同設計風(fēng)格不同的界面，同一門(mén)課程的頁(yè)面風(fēng)格統一。
網(wǎng)絡(luò )課程是傳播教育內容的載體，課程的內容決定課程所采用的形式。界面設計需要考慮不同網(wǎng)絡(luò )課程所要表達的內容、主題、思想。只有通過(guò)認真設計和充分的考慮才能產(chǎn)生優(yōu)秀的界面，實(shí)現形式與內容的統一。如中央電大的《中國法制史》是將法律放到歷史中去講授，在進(jìn)行頁(yè)面設計時(shí)，以中國紅為底色，配以中國古代法律的象征獬豸，體現了法律歷史的特色。
不同的網(wǎng)絡(luò )課程在格式、按鈕設計、頁(yè)面風(fēng)格之間有所變化，另一方面，對于一門(mén)網(wǎng)絡(luò )課程來(lái)說(shuō)，是由很多不同性質(zhì)的頁(yè)面構成的，多數網(wǎng)絡(luò )課程都對其在表現形式上進(jìn)行了適當變化處理，但顯示風(fēng)格、布局、位置、頁(yè)面色彩、人機操作方式等又保持了一致。例如，在不同的頁(yè)面上，相同功能，相同操作，相同圖標的按鈕總是處于畫(huà)面的同一位置，使整個(gè)課程各部分之間有機聯(lián)系，整個(gè)課程和諧完整。
4. 導航系統方便易用，靈活有效
學(xué)習者在使用網(wǎng)絡(luò )課程進(jìn)行自主學(xué)習時(shí)，需要一個(gè)良好的導航系統來(lái)幫助他方便地找到所需要的學(xué)習內容，能在任何時(shí)候準確地確定目前所在的位置，能了解當時(shí)瀏覽內容與其他內容在結構上的關(guān)系，而不致于發(fā)生迷航現象。大部分網(wǎng)絡(luò )課程將課程的主要內容采用了樹(shù)狀的結構設計，讓使用者以簡(jiǎn)單的方式跳轉到它想要去的部分，導航定位既快速方便，又較少地占用屏幕空間，并有明確的當前位置說(shuō)明指示，還可以對上級目錄進(jìn)行快速切換，能引導學(xué)習者高效地進(jìn)行學(xué)習。有的課程更從用戶(hù)的角度出發(fā)，使菜單可以方便地隱藏和顯示，使屏幕的利用率大大提高，方便了學(xué)習者對內容的學(xué)習，而又不影響對內容主題的選擇，如浙江大學(xué)的《法律基礎》。有的課程能根據欄目不同、內容狀態(tài)的不同，設計不同的浮動(dòng)面板，如香港公開(kāi)大學(xué)的《中文微型電腦應用》，這種動(dòng)態(tài)的引導能更好地適合學(xué)習者，即時(shí)、智能地解決學(xué)習者的問(wèn)題。部分網(wǎng)絡(luò )課程設計有“書(shū)簽”，可以幫助學(xué)習者記錄其學(xué)習，便于今后學(xué)習時(shí)快速定位所需要的內容，充分體現出網(wǎng)絡(luò )課程易用、方便的特性。
5. 交互方式多樣，交互響應及時(shí)。
網(wǎng)絡(luò )課程界面設計的一個(gè)重要方面是交互的設計。交互設計除了影響課程界面的外觀(guān)，更關(guān)系到學(xué)習者的學(xué)習行為。良好的交互可以使教學(xué)信息的傳遞與交流得以順利實(shí)現，滿(mǎn)足教與學(xué)的需要。在目前的網(wǎng)絡(luò )課程中，都非常重視學(xué)習者與學(xué)習內容之間的交互，根據內容需要，設計多種形式的交互方法，如按鈕、鏈接、文本框、圖片熱對象等，交互響應及時(shí)快速，交互結果合理，形成較好的教學(xué)反饋。
6. 關(guān)注網(wǎng)絡(luò )學(xué)習的特點(diǎn)，重視界面設計的細節問(wèn)題。
在網(wǎng)絡(luò )課程中，界面一般是以WEB頁(yè)面的形式呈現的，網(wǎng)絡(luò )課程的設計者大部分能考慮到網(wǎng)絡(luò )課程界面與軟件的界面設計的不同，在界面的設計處理等方面予以充分的考慮。例如，頁(yè)面的大小根據顯示器顯示分辨率的改變能作適當的變化?，F在一般用戶(hù)的顯示器分辨率都在800*600以上，課程的界面設計時(shí)就考慮了800*600、1024*800等不同分辨率下的顯示狀況，包括布局、背景圖片的安排等。
網(wǎng)絡(luò )學(xué)習是自主學(xué)習。雖然網(wǎng)絡(luò )課程基本都是多媒體呈現，但文字仍然是最重要的媒體形式。因此，文字的呈現方式關(guān)系到學(xué)習者學(xué)習的效果和興趣。網(wǎng)絡(luò )課程一般非常重視頁(yè)面上文字呈現效果，關(guān)心文字內容是否簡(jiǎn)潔、重點(diǎn)突出，屏幕上是否出現太多的文字，字體、字號是否合適，色彩是否統一、協(xié)調，底色與文字顏色是否搭配，努力使屏幕上的文字信息自然、悅目地映入學(xué)習者的眼簾，讓學(xué)習者觀(guān)看時(shí)不易感到視覺(jué)疲勞，能將精力放在閱讀和思考問(wèn)題上。
網(wǎng)絡(luò )課程還充分考慮了成人學(xué)習者的特點(diǎn)。學(xué)習者雖然有豐富經(jīng)驗，有明確教學(xué)目標，但因為是成年人，在學(xué)習中也容易遇到困難，例如對概念比較陌生，不易鞏固，因此很多網(wǎng)絡(luò )課程中，將概念設為熱字，點(diǎn)擊它或鼠標移動(dòng)概念上面時(shí)即出現相應的解釋?zhuān)忉尩膬热萦械氖羌兾谋?，有的還是多媒體的聲音、圖像等。同時(shí)為了區別其它內容，將熱字設為便于學(xué)習者辨認的特殊顏色。
三、目前網(wǎng)絡(luò )課程界面設計中存在的問(wèn)題
1. 在進(jìn)行課程界面設計時(shí)不注意各元素的文件量，影響網(wǎng)絡(luò )課程的下載速率
圖片、聲音、動(dòng)畫(huà)、視頻可以豐富網(wǎng)絡(luò )課程的界面表現形式，使網(wǎng)絡(luò )課程看起來(lái)生動(dòng)形象，增強對學(xué)習者的感官刺激，提高學(xué)習效果，但同時(shí)也影響了頁(yè)面的下載速率。學(xué)習者上網(wǎng)訪(fǎng)問(wèn)網(wǎng)絡(luò )課程時(shí)，受到下載速度的影響。雖然目前寬帶網(wǎng)越來(lái)越普及，但仍應考慮到大部分學(xué)習者的實(shí)際情況和他們所能等待的時(shí)間限度。因此在界面設計時(shí)要考慮到一個(gè)頁(yè)面中各種元素的文件量大小，控制網(wǎng)絡(luò )課程的頁(yè)面的總字節數。
現在的網(wǎng)絡(luò )課程中，有的為了使頁(yè)面美觀(guān)，過(guò)多地運用漸變色；有的頁(yè)面中采用較多無(wú)關(guān)的圖像，而又沒(méi)有進(jìn)行優(yōu)化處理。同樣，在運用Flash動(dòng)畫(huà)時(shí)，沒(méi)有通過(guò)適當的方式減少動(dòng)畫(huà)的文件量；視頻和聲音片斷的時(shí)間太長(cháng)，文件又沒(méi)用流媒體的形式播放等。這些都增大了頁(yè)面的下載量，使網(wǎng)絡(luò )課程內容不能很快地到達學(xué)習者，影響了學(xué)習效果和質(zhì)量。學(xué)習者很可能因為等待時(shí)間過(guò)長(cháng)而失去對學(xué)習的興趣，產(chǎn)生煩燥的情緒，甚至放棄本次學(xué)習。
2. 一部分網(wǎng)絡(luò )課程的導航設計有待加強和改進(jìn)。
雖然目前網(wǎng)絡(luò )課程對導航設計都相當重視，提供了較為方便的導航方式，但由于網(wǎng)絡(luò )課程內容繁多，結構復雜，仍有相當一部分網(wǎng)絡(luò )課程需要在導航設計上進(jìn)行改進(jìn)。
超文本技術(shù)的采用，使課程成為跳轉靈活的網(wǎng)狀結構。但網(wǎng)絡(luò )結構也帶來(lái)了容易引起迷航等不利的因素。尤其是部分課程資源較多，層級繁多，又沒(méi)有進(jìn)行的良好導航設計，很容易產(chǎn)生迷航現象；大部分網(wǎng)絡(luò )課程導航方式單一，進(jìn)入特定學(xué)習內容往往只有一種方式，學(xué)習單元之間的切換也只有一種方式；沒(méi)有類(lèi)似于網(wǎng)站地圖的課程內容地圖，學(xué)習者面對繁雜的內容，不能得到對課程結構清晰的認識，也不能利用課程內容地圖快速到達所需的位置；沒(méi)有提供課程內容查詢(xún)、檢索功能或者檢索功能不能適合學(xué)生真正的需要。
美觀(guān)一致的導航能極大地提高人機界面的友好性，但部分網(wǎng)絡(luò )課程不同的頁(yè)面課程導航設計不一致。有的頁(yè)面上可鏈接的點(diǎn)不清晰，與不能鏈接的內容區分不大；而有的導航設計雖然非常明確，但在設計上比課程內容更為注目，干擾使用者的注意力?；蛘邔Ш秸加昧似聊簧陷^大片的地方，使主要內容的排版困難，影響了學(xué)習者對課程的使用。
導航設計中還有一個(gè)問(wèn)題就是課程的幫助系統比較簡(jiǎn)單，沒(méi)有列出詳細的使用說(shuō)明，也沒(méi)有遇到問(wèn)題時(shí)如何解決的說(shuō)明，只能上網(wǎng)自己解決或通過(guò)郵件等和網(wǎng)絡(luò )學(xué)院聯(lián)系。
3. 課程界面不能進(jìn)行個(gè)性化定制。
課程中合適的色彩可以降低視覺(jué)疲勞，提高學(xué)習效果。色彩還可以影響一個(gè)人的情緒，不同的色彩會(huì )讓人產(chǎn)生不同的心理效應。不同的人，不同的心理狀態(tài)所適宜的色彩也不相同。界面設計的色彩個(gè)性化，就是讓用戶(hù)根據自己的需要來(lái)改變默認的設置，選擇自己滿(mǎn)意的個(gè)性化設置，達到課程與用戶(hù)之間的協(xié)調。除了色彩，界面布局、菜單欄目的呈現與否與呈現方式等也應該提供這樣的功能，使用戶(hù)能根據自己的需要進(jìn)行個(gè)性化設定。但目前網(wǎng)絡(luò )課程并沒(méi)有提供這些功能。
更進(jìn)一步，個(gè)性化的定制不僅是優(yōu)化學(xué)習者的學(xué)習環(huán)境，而是成為學(xué)習的一種必要。比如，允許學(xué)習者對所瀏覽的課程頁(yè)面上的圖形或文本材料進(jìn)行劃線(xiàn)、畫(huà)圈這樣的標注，并對標注進(jìn)行文字解釋?zhuān)苡涗泴W(xué)習心得，并能與網(wǎng)上的其他學(xué)習者共享這些標注和學(xué)習心得；能記錄學(xué)生學(xué)習的過(guò)程，記錄學(xué)習的路徑，使學(xué)習者在下次學(xué)習時(shí)可以清楚地了解到哪些課程內容已經(jīng)瀏覽過(guò)以及它們的瀏覽路徑。
四、對網(wǎng)絡(luò )課程界面設計的建議
1. 加強對色彩學(xué)、人機工程學(xué)、認知心理學(xué)等的研究。
網(wǎng)絡(luò )課程界面的設計涉及到計算機科學(xué)、心理學(xué)、圖形藝術(shù)、人機工程學(xué)等多個(gè)學(xué)科的知識，界面的設計絕不只是美術(shù)工作者的事情，課程策劃人員、課程教師、課程制作人員都應從不同的角度對界面設計提出設想。
課程的組織結構、選取什么內容、通過(guò)超級鏈接形成怎樣的層次結構、界面上色彩的搭配、界面的布局，聲音、圖像等多媒體的組合等所有這些都關(guān)系到界面的設計效果，都要有科學(xué)的理論指導，不能光憑著(zhù)感覺(jué)走。課件設計的一切工作都要有據可循，這樣開(kāi)發(fā)出來(lái)的網(wǎng)絡(luò )課程才能讓學(xué)習者的學(xué)習效率得到大大提高。
2. 加強對網(wǎng)絡(luò )課程界面的評價(jià)工作，尤其要重視網(wǎng)絡(luò )課程學(xué)習者對界面的評價(jià)。
評價(jià)一個(gè)網(wǎng)絡(luò )課程的界面設計質(zhì)量有很多標準。網(wǎng)絡(luò )課程評價(jià)規范CELTS-22要求網(wǎng)絡(luò )課程“界面風(fēng)格統一，協(xié)調美觀(guān)，易于使用和操作，具有完備的功能。”但是，目前網(wǎng)絡(luò )課程評價(jià)一般由專(zhuān)家評定，而網(wǎng)絡(luò )課程是供網(wǎng)絡(luò )學(xué)習者使用的，學(xué)習者才最有發(fā)言權。評價(jià)一個(gè)網(wǎng)絡(luò )課程的界面設計質(zhì)量，應該更多地參考學(xué)習者對人機界面的滿(mǎn)意程度。因而在設計時(shí)，在了解界面的設計原則的基礎上，根據課程內容、特點(diǎn)，要時(shí)時(shí)從用戶(hù)角度出發(fā)，以方便用戶(hù)的使用為界面設計的目標。
3. 重視個(gè)性化界面設計的研究，關(guān)注界面設計的趨勢，將新的技術(shù)應用到人機界面中。
網(wǎng)絡(luò )課程是網(wǎng)絡(luò )學(xué)院學(xué)生自主學(xué)習最重要的資源。網(wǎng)絡(luò )課程具有個(gè)性化的設置功能，讓每位學(xué)習者都可以根據自己的需要和興趣，選擇、設定學(xué)習環(huán)境和學(xué)習方式，這是網(wǎng)絡(luò )課程進(jìn)行界面設計時(shí)需要引起重視的問(wèn)題。
目前的網(wǎng)絡(luò )課程還處在圖形用戶(hù)界面時(shí)代，新的人機交互技術(shù)，如語(yǔ)音識別技術(shù)、手寫(xiě)識別技術(shù)基本還沒(méi)有應用到網(wǎng)絡(luò )課程中。我們應該密切關(guān)注虛擬現實(shí)、多通道用戶(hù)界面等新技術(shù)的發(fā)展，及時(shí)將它們應用到網(wǎng)絡(luò )課程中，創(chuàng )造更為和諧的人機交互界面。
參考文獻
[1] 羅仕鑒，朱上上，孫守遷編著(zhù)，人機界面設計.機械工業(yè)出版社，2004.1
[2] 朱小平，孫玉珠，顧洪慧，網(wǎng)絡(luò )課程的人機界面設計，吉林廣播電視大學(xué)學(xué)報，2003.3
[3] 紀永毅，黃建軍，網(wǎng)絡(luò )課程設計與開(kāi)發(fā)的實(shí)踐探索，《電化教育研究》2004.5
[4] 教育部網(wǎng)絡(luò )課程評價(jià)規范（2003年）
聯(lián)系客服
