高職院校精品資源共享課程網站界面設計與研究

郝倩, 李壘

(河南工業職業技術學院， 南陽 473009)

0 引言

精品資源共享課是以教師和學生為服務主體，同時面向社會學習者的網絡共享課程，是具有豐富教學資源的優秀課程[1]，是自教育部對原來的國家精品課程的一個轉型和升級。精品資源共享課的建設和評審工作，主要通過課程網站進行實施。課程網站作為精品資源共享課優質教學資源信息的載體，網站界面作為課程的呈現形態，是精品資源共享課程建設的一個重要組成部分，界面設計優劣直接影響教學資源的呈現與共享。優秀的精品資源共享課網站界面設計對教師、學生和行業企業人員有著良好的收益。

文章通過高職院校精品資源共享課網站的界面布局、導航、色彩等進行分析，指出了高職精品資源共享課在界面設計方面的現狀與不足，依據精品課程制作原則，提出應對措施。

1 研究內容與方法

為提高高職院校的專業教學質量、豐富教學資源、方便師生學習交流，精品資源共享課不僅滲透各個專業的專業核心課程中，而且在專業基礎課和公共課中也被廣泛建設。

精品資源共享課程是將優質課程進行網絡化，是一種特殊的網絡課程。目前，網絡課程評價一般由專家評定，而作為網絡學習使用者也是最具發言權的。基于筆者對網絡課程的研究、設計、開發和使用經驗，并在一定范圍內對使用精品資源共享課的教師、學生、企業人員、評審專家的調查與思考，依據《網絡課程評價規范》和《現代遠程教育資源建設技術規范》對課程界面設計元素的要求，結合教育軟件工程中界面設計的原則和高職精品資源共享課的實際情況，對高職院校精品資源共享課網站界面的設計進行了實際性的研究。

2 精品資源共享課程網站界面設計的原則

界面設計在精品資源共享課建設中起著重要作用，課程的界面直接影響課程外觀及對學生學習興趣的激發和維持。精品資源共享課界面設計除遵循一般網絡課程界面設計的原則外，還應具備以下幾點：

1) 版面布局結構

界面設計簡潔、美觀友好，能激發學習者的興趣。其中，版面留白量在30%—50%，背景色彩純度合適；標題設計美觀，凸現背景之上；重要信息要置于突出位置加以強調；信息一致性保持統一格式，實現統一感，便于閱讀和搜索。

2) 導航與迷航

頁面布局合理，導航清晰，重點突出，操作方便。信息組織符合本門課程的內在邏輯體系和學習者的認知規律，不出現空鏈接。

3) 界面風格與色彩運用

界面風格一致，同一課程不同頁面間要實現整體統一，局部變化，和諧完整。色彩運用要符合學習者習慣，基本調色符合教學內容的特點和學生的認知心理，如活潑、中性、沉靜。另外，同一版面控制在3種顏色內，之外可添1-2種鄰近色，做到和諧、達到視覺平衡；為突出重點，色彩對比要合理。

4) 文字設計

對于文字，同版字體設計在3種內，字距、行距適中，標題以H1-H3為佳，正文字體12-14號為適。

5) 圖像元素

在構圖、色彩搭配、畫面組成與銜接方面處理圖像元素時，要符合心理學和美學的基本原則；圖片要經過壓縮、優化，提高網頁的預覽速度。

3 精品資源共享課程網站界面設計存在的問題

1) 界面布局混亂

布局頁面時，屏幕空間按功能劃分區塊，如標題區、導航區、新聞滾動圖片區、 欄目區、頁腳版權區等，各區塊分布要簡潔、協調、美觀，精品資源共享課在界面設計的布局上要符合學習習慣。由于不少網站界面設計時各區劃分主題不突出，設計時過多地使用圖片、動畫刺激學習者的視覺感官，欄目交叉或重復，出現喧賓奪主的現象，沒有達到以教學設計為目的的創造視覺環境。

2) 導航不夠清晰

學習者在瀏覽網頁時，找不到相應的節點，則稱之為迷航[3]。在問卷的“您在瀏覽精品資源共享課時，有沒有出現過迷航現象？”中，認為曾出現迷航現象的比率高達78.5%。說明網站導航設計不合理，如導航標簽和目標內容不完全對應；節點層次過多，當前位置孤立等現象。

3) 下載速度較慢

部分課程界面元素較多，如圖片、動畫、視頻、音頻較多或未經格式壓縮，增加頁面的下載量，影響頁面下載速度，影響學習的質量和效果。在問卷的“您在瀏覽精品資源共享課時，是否出現頁面被卡現象？”中，出現頁面被卡比率為32.5%。這就造成用戶訪問時可能會因下載時間過長放棄學習的興趣，也就失去了資源共享的初衷。

4) 色彩搭配不當

人眼的視覺感知取決于瞳孔和感光細胞的調節，如果光線太強或太弱會引起眼睛不適。有些課程頁面設計過于追求鮮明的色彩或強烈的色彩對比，違背機體的視覺規律與用眼健康，使學習者產生急躁厭煩的心理，影響學習效果。

優化網絡界面的設計，是高職精品資源共享課程網站建設的任務之一[4]。遺憾的是由于疏忽了設計的原則，使得很多課程網站界面設計流于形式。為了解決上述問題，更好地傳播精品資源共享課，共享優質教學資源，筆者從網站界面設計的流程出發，提出幾點對策和建議，尚有待于在實踐中繼續完善。

4 精品資源共享課程網站界面設計的建議和措施

1) 網站整體規劃

界面設計是由多門學科構成的產物。涉及到計算機科學、心理學、圖形藝術、人機工程學等。精品資源共享課程網站界面設計是一個團隊合作的結果，需專業教師、網頁設計師、程序開發員等協同完成。界面設計凝集著其中每個人的智慧和創造。由于個人愛好和觀點不同，在界面設計前要充分溝通、協調一致，做好整體規劃，協同創造精品。

2) 網站內容組織

網站資源內容的建設是整個網站建設的核心。精品資源共享課程網站建設是否成功，其中內容的整體設計起著重要的作用。首先由教師提供網站內容建設架構圖，如圖1所示。

圖1 網站內容建設架構圖

設計好的架構圖，使網頁設計師對整個網站內容結構清晰；網站內容欄目、層次關系，主頁顯示的素材。

網站內容組織結構圖設計，是將教學資源橫向排列并按照基本資源和拓展資源進行分類，縱向排列要按照課程學習單元進行分類，以樹型結構表示。

3) 網站實現技術

在內容建設架構圖的基礎上，選擇合適的建站模式。從技術上講，大致分為4種，其優缺點分析，如表1所示。

4) 網站界面風格

界面風格就是網站的外衣，包括頁面布局、網頁元素、色彩搭配等內容組成后給人的視覺印象。精品資源共享課程網站的風格設計應該圍繞課程性質，不同的課程形成不同的風格。網絡課程評價規范(CELTS-22 )要求網絡課程“界面風格統一，協調美觀，易于使用和操作，具有完備的功能。”在風格設計前，需確定網頁的布局、色系、導航，形成圖文相輔相承的頁面風格。

構成風格的3個要素如下：

(1) 布局。心理學的研究表明，平面的視覺影響力上方強于下方，左側強于右側。平面的上部和中上部被稱為“最佳視域”。對于重點突出的內容，安排在最佳視域，而工具按鈕一般放在屏幕的四周，菜單通常緊靠標題區。主體內容涵蓋的文字、圖形、視頻、動畫等多媒體對象應合理安排，使頁面布局簡潔、協調、美觀，營造符合教學設計目的的視覺環境，增強學習者的注意力。在頁面布局中，頁面功能區不同，考慮的側重點也要有所不同，各功能區劃分要做到突出重點，功能明顯。

表1 網站建設實現技術及優缺點

(2) 色彩。傳達網站形象的首位視覺要素就是色彩。網站設計時首先確定一個主色調，主體色與背景色要對比協調。不同功能按鈕在突出差異的同時，要合理應用色系，即主題色、輔助色和強調色。建議一個頁面的色彩不要超過4種色彩，否則沒有方向感和側重感。

(3) 導航。導航標簽代表的是整個網站的內容結構標識，用戶依靠標簽的內容和組織方式了解網站中的信息。設計標簽的過程，實際上就是對信息分類的過程，必須做到標準清晰，有歧義的標簽使用戶很難預測到鏈接背后的內容，甚至使用戶走錯路或迷航。

5) 畫好粗略草圖

教學團隊根據課程性質，結合網站內容建設架構圖，完成粗略布局。經過反復構思，拿出一張白紙一支筆，通過紙上布局，發揮自己的想象力，把創意輪廓畫成草圖。這只是創作階段，不講究細膩工整，只要設計師能明白教師的用意即可。可以多出幾個方案，擇優選擇。

6) 細化布局

對布局進行細化是一種創作，要立足于信息的傳達，做到視覺流程自然、合理、暢快，頁面上各信息要素的位置、間隙、大小保持一定的節奏和美感。細化布局一般采用Photoshop或Firework進行設計制作。網頁大小參照顯示器的分辨率設計，高度不限，寬度比顯示器實際尺寸窄20像素，使右邊的滾動條留一定空間。布局時根據創作腳本，把精品資源共享課程網站的重要信息如LOGO、標題、導航、課程介紹放在頁面的重要位置。頁面布局采用左右對齊式、對稱式、全景式、單側對齊式、包圍式和照片組合式布局等樣式。另外，布局時要注重合理運用點和線。點的引導使用戶能夠輕松找到需要的信息，線條運用對頁面不僅起到分割作用，還可錦上添花。

7) 界面美化

為進一步美化界面風格，可以添加適當的FLASH或JavaScript特效，使網頁界面更加生動。但動畫適可而止，過多會顯得雜亂。如導航和課程介紹部分可以由教師結合課程亮點凝練文字和精選圖片，以此豐富動畫內容，至此界面制作完成。

5 總結

基于高職院校精品資源共享課程網站界面設計與研究中提出的建設方法和措施，在我校電子技術、計算機應用技術和網絡技術3個專業核心課程的精品資源共享課程網站界面設計實際建設中，已全面得到借鑒和推廣，經驗證該研究取得了很好的指導作用。在精品資源共享課程建設的道路上，如何把網站界面設計內化為課程內在的魅力，需要以用戶需求為出發點和落腳點，根據不同的課程特點，在不違背設計原則的前提下，從版面布局結構、導航與迷航、界面風格、色彩運用、文字設計、圖像元素等方面進行設計創新，針對現階段存在的問題，對網站整體規劃、內容組織、實現技術、細化布局、界面美化等方面進行詳細研究，從而使課程網站更具多樣性和吸引力，實現精品資源共享課的品牌效應。由于篇幅有限，文章省略界面設計實例的引入。