基于Web2.0的高校網絡課程界面元素設計策略

◆李冬霞

界面設計的好壞是影響學生進行有效學習的重要因素。基于Web2.0的網絡課程界面元素設計以服務于網絡課程的使用者為主，Web2.0強大的服務功能主要表現在以下方面。

1）Blog和Wiki讓學習者在線發表自己的學習心得、疑惑、感情流露等，通過借助RSS與Tag將自己創作的內容主動發布出去，從而和對自己創作內容有共同興趣的人群實現分享、交流，在他人的反饋下，學習者進行反思，加深理解。

2）社交網站和Tag標簽讓學習者在線上尋找到有共同興趣愛好的學習同伴，形成個人學習社會圈，同時學習者有機會接觸到專業領域學者，與他們建立起社會關系網絡，分享他們的研究成果、思想觀念[1]。

3）Web2.0提供如Podcast、問卷調查、Wiki、心得報告、日志、聊天、BBS、測驗、投票、互動評價等多種在線學習活動。學習者通過參與這些學習活動，實現多層面的溝通交流。

4）借助RSS，教師向學生布置作業，通過與學生互相定制學習頻道、Blog了解學生的作業情況，利用Wiki技術對學生提交的作業給予回復[2]。具有可讀可寫特性的Web2.0可以記錄學生學習行為，教師可以查看學生訪問課程的次數、時間以及場所，也可以查看某個教學模塊的學生參與情況。教師可以從學習態度、學習方法等方面給出評價，如采用問卷、學生反饋、網絡調查、專家意見、學習者留言等多種方式，而不再只針對學習成績給出單一的評價，從而實現多元化的評價。

5）基于Web2.0的網絡課程為學生提供獨立自主學習工具、可視化知識管理軟件，如電子字典、有道云筆記、思維導圖（Mindmanager）、概念圖（Concept Map）等，促進學習者隱性知識顯性化，提高學習者思維的發散性和想象力，這樣更有利于學習者信息交流、知識共享、協同建構知識，從而提高其獲得知識技能的效率，提高協作學習的能力，滿足學習者的個性化學習需要。

基于Web2.0的網絡課程界面元素設計主要是為了構建個人學習環境，創設與學習主題相關的情境，體現人文氣息，為學生自主建構知識提供一種良好學習環境。為了取得更好的網絡學習效果，根據當前學習者特征以及高校網絡課程界面設計存在的問題，采用不同工具與技術之間的優化組合、功能滲透。以下提出具體界面元素設計策略。

1 導航設計

導航設計的原則應清晰、合理，符合人的心理視覺運動規律。設計文字導航，告知學習者目前所處位置以及下一步學習的方向，避免迷航。設計關鍵字導航，針對一些專業術語、關鍵詞、圖片、網站資源等以超鏈接形式提供解釋、提示或說明[3]。提供具體的標簽和查詢功能，標簽可以幫助學習者自己定位，學習者可做學習進程的標記，注明自己的學習狀態；提供查詢搜索功能可以幫助學習者盡快檢索所需的學習資源[4]。

2 菜單、窗口設計

設計原則應盡量簡化、符合用戶操作習慣。設計通過使用鼠標、選擇下拉菜單、超鏈接跳轉等簡單操作，利用新打開窗口可以進入課程新內容的學習，利用加入收藏夾、書簽等方式方便學習者管理個人學習單元。幫助、導航菜單方便學習者了解某一具體模塊的功能。

3 超文本的設計

設計原則應符合個性化需要定制，做到生動、靈活、富有感染力。考慮到網絡課程資源龐雜及不同學習者不同的學習特性，采用超文本、超媒體來組織教學信息，以滿足學習者鏈接方式進行知識學習的需要。將難點、難題等設為熱字，點擊它即出現相應的解讀或參考答案，熱字的內容可以做成純文本或是聲音、圖像、動畫、視頻等，同時可將這些圖像、動畫、視頻等作為交互的對象和學習者發生交互，讓學習者參與到學習活動中。采用醒目顏色，如紅色、綠色、藍色可以將熱字和其他文本進行區分。

4 文字的設計

文字設計原則應和諧統一、簡潔數字化。在對文字編排與設計時，不僅要考慮到字體、字號、行距、文字數量以及文字排版的方式，而且在文字的色彩設計上需要注意與頁面的背景色搭配和諧，文字呈現的效果帶給人的感受應是易讀、易看、易理解，簡潔明了，還能觸發人的情感。學習文本總體上應有統一的風格，以方便學習者定位相關的學習，對于重要文本則使用下畫線、斜體字或彩色字、加大字號、適量的閃爍等功能來吸引學習者的注意力。在網絡飛速發展的今天，文字作為信息的重要外在形式，必然要順應時代潮流，滿足大學生的個性化需求，數字媒體區別于傳統媒體的一個重要特點就是展現了一種全新的、濃縮的高科技空間，代表著一個新的美學領域。文字的設計可適當采用3D字體元素，增強多維空間的立體感，讓學習者體會到文字的真實感，給人一種在虛擬網絡學習空間中觸覺上的體驗。

5 圖形和圖像的設計

圖形和圖像的設計原則應符合清晰性、真實性、簡潔性、情感藝術性。界面中使用的圖像要保證清晰度，不對圖像進行涂抹、剪貼等毀壞圖像本來面目的操作，去除與主體無關部分，突出主體，盡量減少圖像文件的大小。選擇圖片的格式方面應主要使用Gif圖像、JPG圖像；但是對圖像質量要求較高時，應采用沒有損失或損失較小的圖像文件格式，如TIF、BMP等；而要求頁面背景保留時，應采用透明的Gif、png格式的圖像。為了表現情感藝術性，可以對圖像的色調、對比度、飽和度進行調整，通常可利用Photoshop、CorelDRAW、光影魔術手、美圖秀秀等工具美化圖片，增強藝術美感。

6 視頻動畫的設計

視頻動畫設計原則應微型簡潔、流暢化、賦予教育性。通常使用的視頻文件有AVI和MOV兩種類型，視頻窗口開設的大小要合適，過大不僅影響其他媒體所占據的空間，還會使畫面不清晰，最好能夠智能化地自由縮放控制。為了讓視頻播放更流暢，網絡課程中的視頻時間不要過長，若視頻時間較長，可將視頻分割成多個短時間視頻片斷連續播放。如今流行的微課程、微視頻、MOOC（大規模開放在線課程）一般采用5～15分鐘的視頻，可以借鑒其制作方式和技巧進行設計。Flash動畫具有體積小、可邊下載邊播放等特點，讓抽象的內容形象化，許多難以理解的內容變得生動有趣、有聲有色，合理使用動畫便可以達到更好的學習效果[5]。

7 聲音的選配

聲音選配原則應符合科學教育性、播放可控、流暢性。一般選擇與學習內容表現的主題相符、輕快的輕音樂，背景音樂旋律和節奏一定要服從于內容，不可干擾學習者學習。一般采用MP3、MIDI、WAV音頻文件格式方便傳播。配音的添加要合理，不合理的配音往往會分散學生的注意力，畫蛇添足[6]。另外，有的學習者不喜歡有背景音樂，因此，界面應有聲音控制開關，遵循可控性原則，這樣學習者可根據情緒需要控制音量的大小及聲音更換、播放、停止等播放模式。

8 色彩的設計

色彩設計遵循總體協調、局部對比的原則。不同的色彩有不同的喻義，因此要謹慎選擇。選擇色彩時要符合人的視覺規律，選擇清晰、簡潔的顏色，前景與背景的色彩要搭配和諧，從而減少視覺疲勞。恰當運用色彩，構成新穎的色彩搭配，可以起到視覺傳達導向性的作用，引導學習者的視覺方向，減弱其他干擾元素，這是交互設計的精髓。色彩的合理運用可以給人輕松自在的學習感受，營造一種激發學習動機和興趣的學習氛圍。

9 版式的布局設計

界面版式布局原則應符合主次分明、合理性、均衡性、直觀性。1:1.618的黃金比長寬比是最具有視覺美感的版式。對稱布局的設計具有穩定、莊嚴、整齊、秩序、安寧、沉靜的特點，垂直均勻的布局若處理不恰當，容易造成視覺心理的不平衡，那么可采用分隔線作部分或全部的弱化處理，或加入其他元素，使左右部分的過渡自然而和諧。版式布局的各個組成元素要根據人的視覺審美習慣和心理感知，分清主次，合理編排組合界面的每個元素，體現整體感的一致性和連貫性，運用媒體技術處理，形成變化豐富的畫面，達到多視點、多層次、立體感的空間形態，使得教學內容能形象地展示在學習者的面前，形成較好的學習交互。

總之，高校網絡課程的內容不是以線性方式組織的教科書文本，而是以超文本方式組織的多媒體學習單元，即多媒體元素組成的微學習單元[7]。任何設計策略、原則應合理地解決使用者多方面需求，將各個界面元素恰當合理地置于頁面板塊中，達到人性化的友好界面。Web2.0的新技術、新理念在網絡課程界面元素的設計中體現出巨大的優勢，能夠改善網絡課程學習資源的呈現方式，加速網絡學習資源的更新頻率，促進網絡學習資源的開放、共享，提升網絡課程的人際交互和人機交互，便于網上學習活動開展，有利于構建面向過程的、多元化的評價體系，實現學習評價的客觀、全面、公正。在設計界面元素的過程中，必須充分考慮人的學習心理特征，注重界面設計的科學性、藝術性、教育性，合理運用各種技術手段，遵循易學易用又不失美感的原則。只有這樣，才能夠提高學習積極性，達到理想的學習效果。

當今是數字化社會，界面的設計賦予數字化是不可改變的主流。基于Web2.0的網絡課程界面元素設計雖然有很大的優勢，但也存在不足，在利用優勢的同時應盡量減少不利因素。在這個視覺刺激泛濫的年代，創新是設計的靈魂，沒有固定的設計模式，也沒有完美的設計模式，只有更優化、更友好的界面設計?！八街梢怨ビ瘛?，需要借鑒更優秀的作品來達到更智能化、更人性化的界面，達到創意美、視覺美、人性美、秩序美、和諧美、變化美的一種不可替代的藝術美感。

[1]馬凌.Web革命與教育創新[J].哈爾濱市委黨校學報,2008(5):81-82.

[2]賴德剛.基于Web2.0的中小學教師遠程培訓平臺的設計[J].中國科教創新導刊,2011(12):190.

[3]張筱蘭,歐陽汝梅.高校自主學習型網絡課程的設計策略[J].電化教育研究,2008(12):38-41.

[4]王琪.網絡課程設計之點滴思考[J].中國遠程教育,2002(5):38-40.

[5]束梅霞.視覺文化支持下的初中信息技術學案設計研究[D].南京:南京師范大學,2011.

[6]黃慶華.多媒體軟件界面藝術設計研究[D].上海:華東師范大學,2007.

[7]張振亭.基于系統觀的網絡課程設計與實現[D].武漢:華中師范大學,2002.