高職精品資源共享課網站界面設計與思考

張會麗+楊威

摘 要：高職精品資源共享課網站是優(yōu)質教學資源的載臺，其界面設計優(yōu)劣直接影響到課程建設質量，關系著教學資源的呈現與共享。本文對山西省高職48門精品資源共享課程網站界面設計進行了調查，分析了目前山西省精品資源共享課程網站界面設計存在的問題，提出了解決問題的方法和措施。

關鍵詞：精品資源共享課；網站界面設計

中圖分類號：TP393 文獻標志碼：A 文章編號：1673-8454（2014）01-0036-04

一、研究背景

精品資源共享課是以教師和學生為服務主體，同時面向社會學習者的網絡共享課程，是具有豐富教學資源的優(yōu)秀課程[1]。從2011年10月和2012年5月，教育部先后頒發(fā)了《教育部關于國家精品開放課程建設的實施意見》和《精品資源共享課建設工作實施辦法》，啟動了新一輪精品課程建設工作。

為了貫徹實施教育部的精神，原有國家精品課程轉型升級為精品資源共享課，新課程也陸續(xù)免費開放。精品資源共享課的建設和評審主要是依托課程網站來實施的，課程網站作為精品資源共享課優(yōu)質教學資源信息的載體，其網站界面作為課程的呈現形態(tài)，無疑成為精品資源共享課程建設的一個重要組成部分，界面設計優(yōu)劣直接影響到教學資源的呈現與共享。相關調查表明，日常生活中人們所感知的外部信息，有83%是通過視覺通道到達人們心智的[2]。由此可見，良好的精品資源共享課網站界面設計對于廣大老師、學生以及行業(yè)企業(yè)人員來說都是大有裨益的。

本文從山西省近兩年公布的精品資源共享課網站中隨機抽取48門高職課程網站界面作為樣本，通過對樣本的界面布局、導航、色彩等進行分析，指出了我省高職精品資源共享課在界面設計方面存在的不足，按照精品課程制作原則，提出了幾點對策和建議，有待與同仁共同商榷。

二、研究內容與方法

（1）研究內容。為了保證樣本抽取的可靠性與全面性，樣本覆蓋高職建筑類、制造、電子信息、醫(yī)藥衛(wèi)生、旅游、財經等專業(yè)核心課程和專業(yè)基礎課以及公共基礎課。各學科所占課程數量，如圖1所示。

（2）研究方法。精品資源共享課將優(yōu)質課程網絡化，它是一種特殊的網絡課程。評價一個網絡課程的界面設計質量有很多標準，但是目前網絡課程評價一般由專家評定，而網絡課程是供網絡學習者使用的，學習者才最有發(fā)言權?；诠P者對網絡課程的研究[3]和對網絡課程設計、開發(fā)和使用經驗，以及在一定范圍內對使用精品資源共享課的教師、學生、企業(yè)人員、評審專家進行調查與反思，參照《網絡課程評價規(guī)范》（CELTS-22）和《現代遠程教育資源建設技術規(guī)范》對課程界面設計元素的要求，結合教育軟件工程中界面設計的原則和高職精品資源共享課的實際情況，修改了界面設計評價標準，見表1。

三、評價結果分析與思考

通過調查綜合評分，前五名的課程 見表2 。

為了進一步分析樣本界面設計的特點，我們進行了問卷調查、組織召開評價人員座談反饋會，對精品資源共享課程在界面設計方面應堅持的原則達成共識，并收集分析了部分課程在界面設計方面存在的不足之處。

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

界面設計是精品資源共享課建設的一項重要內容，課程的界面不僅影響到課程本身外觀，也影響學生學習興趣的引起和維持。精品資源共享課界面設計除具有一般網絡課程界面設計的原則外，還應該堅持以下原則：（1）界面設計簡潔、美觀、有親和力，能引起學習者的興趣；（2）屏幕布局合理、條理清晰、重點突出；（3）界面風格一致，同一課程不同頁面整體統(tǒng)一，局部變化，和諧完整；（4）導航清晰，方便易用，靈活有效；（5）高職精品資源共享網站還要體現網站的職業(yè)教育屬性。

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

（1）界面布局凌亂。目前網頁布局時一般要將屏幕空間按功能分區(qū)，如標題區(qū)、導航區(qū)、新聞區(qū)、 欄目區(qū)、圖片翻滾區(qū)、版權區(qū)，各區(qū)分布要簡潔、協調、美觀。然而，在問卷的“您認為精品資源共享課在界面設計，如布局方面是否符合您的學習習慣？”一題中，認為界面設計很適合的比率僅為35.5%。這主要是由于不少網站界面設計時各區(qū)劃分主題不突出，設計時過多地使用圖片、動畫刺激學習者的視覺感官，欄目交叉或重復，出現喧賓奪主的現象，沒有營造出以教學設計為目的的視覺環(huán)境。

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

（3）下載速度較慢。部分課程界面元素較多，圖片、動畫、視頻太多或沒有經過格式壓縮，影響了頁面的下載速度。如過多地運用漸變色、采用較多無關的圖像而不進行優(yōu)化處理、視頻和聲音片斷的時間較長、文件也沒有用流媒體的形式播放、插入Flash 動畫時未采取適當的方式減少動畫的文件量等，這些都會增加頁面的下載量，勢必影響學習質量和效果。在問卷的“您在瀏覽精品資源共享課時，有沒有出現過頁面被卡住現象？”一題中，認為出現頁面被卡的比率為32.5%。這就造成用戶訪問時可能會因下載時間過長放棄學習的興趣，也就失去了資源共享的初衷。

（4）色彩搭配不當。人的視覺感知力需要依靠瞳孔和光敏細胞的調節(jié)，光線過強或太弱均會給眼睛造成不適。在問卷的“您在瀏覽精品資源共享課時，有沒有因色彩運用不當出現厭煩情緒？”一題中，認為出現厭煩心理的比率為28.5%。這說明有些課程頁面設計過于追求鮮明的色彩或強烈的色彩對比，違背機體的視覺規(guī)律與用眼健康，使學習者產生急躁厭煩的心理，影響學習效果。

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

四、精品資源共享課程網站界面設計流程

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

（2）網站內容組織。網站資源內容的建設是整個網站建設的核心。精品資源共享課程網站建設的成功與否，內容的整體設計起著舉足輕重的作用。首先由教師提供網站內容建設架構圖（如圖2）。設計好的架構圖，目的是讓網頁設計師清晰地了解；網站內容欄目、層次關系，主頁顯示的素材。

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

（3）網站實現技術。有了內容建設架構圖，設計師對網站的鏈接層次，從而選擇合適的建站模式，對鏈接的實現技術做到心中有數。從技術上講，可采用的技術大致有四種，其優(yōu)缺點分析見表3。

（4）網站界面風格。界面風格就是網站的外衣，包括了網頁上的所有元素（布局，文字，顏色等）組成后給人的視覺印象。如：韓國風格，歐美風格；風格設計應該圍繞課程性質，不同的課程形成不同的風格。網絡課程評價規(guī)范（CELTS-22 ）要求網絡課程“界面風格統(tǒng)一，協調美觀，易于使用和操作，具有完備的功能?！痹陲L格設計前大致需要確定布局、色系、導航，形成圖文相輔相承的頁面風格。說到風格需要了解構成風格的三個要素。

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

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

③導航。導航標簽代表的是整個網站的內容結構標識，用戶依靠標簽的內容和組織方式來尋找網站中的信息。設計標簽的過程，實際上就是對信息分類的過程，必須做到標準清晰，有歧義的標簽逼人猜測它的意圖，使用戶很難預測到鏈接背后是什么內容，甚至讓用戶走錯路或迷航。

（5）畫好粗略草圖。教學團隊根據課程性質，結合網站內容建設架構圖，完成粗略布局。經過反復構思，拿出一張白紙一支筆，發(fā)揮自己的想象力，把創(chuàng)意輪廓畫成草圖，這只是創(chuàng)作階段，不講究細膩工整，只要設計師能明白教師的用意即可。盡可能多畫幾張，最終選定一張作為創(chuàng)作腳本，如圖3所示。

（6）細化布局。細化布局是一種創(chuàng)造，既要立足信息的傳達，也要做到視覺流程自然、合理、暢快，使頁面上各信息要素的位置、間隙、大小保持一定的節(jié)奏感和美感。細化布局一般采用Photoshop或Firework設計制作。網頁大小根據顯示器的分辨率設計，高度不限定，但寬度比顯示器的實際大小窄20像素，為的是給右側的滾動條留有一定的空間。目前，主流頁面大小一般為995*436。布局時要根據創(chuàng)作腳本，把最重要的信息如LOGO、標題、導航、課程介紹放在最顯眼的地方。頁面布局樣式可采用左右對齊式、全景式、包圍式、對稱式、單側對齊式、衛(wèi)星式、散開式、照片組合式布局等。另外，布局時要注重合理運用點和線。點的引導作用是讓瀏覽者更輕松的找到自己想要的信息。線不但可以起到頁面的分割作用，很好地運用線條還使網頁錦上添花。

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

五、結束語

在精品資源共享課程建設的道路上，如何把網站界面設計內化為課程內在的魅力，需要處處以用戶為出發(fā)點和落腳點，根據不同的課程特點，在不違背設計原則的前提下，進行設計創(chuàng)新，從而使課程網站更具多樣性和吸引力，實現精品資源共享課的品牌效應。

參考文獻：

[1]《教育部關于國家精品開放課程建設的實施意見》（教高[2011]8號）[Z].

[2]劉丹.企業(yè)形象識別系統(tǒng)[J].東北農業(yè)大學學報（社會科學版），2006（1）.

[3]楊威.信息技術教學導論（第2版）[M].電子工業(yè)出版社，2007.5.

[4]張曉璦.淺談教學網站的界面設計和色彩搭配[J].農業(yè)網絡信息，2008（1）.

[5]《精品資源共享課建設工作實施辦法》（教高廳[2012]2號）[Z].

（編輯：王曉明）endprint

四、精品資源共享課程網站界面設計流程

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

（2）網站內容組織。網站資源內容的建設是整個網站建設的核心。精品資源共享課程網站建設的成功與否，內容的整體設計起著舉足輕重的作用。首先由教師提供網站內容建設架構圖（如圖2）。設計好的架構圖，目的是讓網頁設計師清晰地了解；網站內容欄目、層次關系，主頁顯示的素材。

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

（3）網站實現技術。有了內容建設架構圖，設計師對網站的鏈接層次，從而選擇合適的建站模式，對鏈接的實現技術做到心中有數。從技術上講，可采用的技術大致有四種，其優(yōu)缺點分析見表3。

（4）網站界面風格。界面風格就是網站的外衣，包括了網頁上的所有元素（布局，文字，顏色等）組成后給人的視覺印象。如：韓國風格，歐美風格；風格設計應該圍繞課程性質，不同的課程形成不同的風格。網絡課程評價規(guī)范（CELTS-22 ）要求網絡課程“界面風格統(tǒng)一，協調美觀，易于使用和操作，具有完備的功能?！痹陲L格設計前大致需要確定布局、色系、導航，形成圖文相輔相承的頁面風格。說到風格需要了解構成風格的三個要素。

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

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

③導航。導航標簽代表的是整個網站的內容結構標識，用戶依靠標簽的內容和組織方式來尋找網站中的信息。設計標簽的過程，實際上就是對信息分類的過程，必須做到標準清晰，有歧義的標簽逼人猜測它的意圖，使用戶很難預測到鏈接背后是什么內容，甚至讓用戶走錯路或迷航。

（5）畫好粗略草圖。教學團隊根據課程性質，結合網站內容建設架構圖，完成粗略布局。經過反復構思，拿出一張白紙一支筆，發(fā)揮自己的想象力，把創(chuàng)意輪廓畫成草圖，這只是創(chuàng)作階段，不講究細膩工整，只要設計師能明白教師的用意即可。盡可能多畫幾張，最終選定一張作為創(chuàng)作腳本，如圖3所示。

（6）細化布局。細化布局是一種創(chuàng)造，既要立足信息的傳達，也要做到視覺流程自然、合理、暢快，使頁面上各信息要素的位置、間隙、大小保持一定的節(jié)奏感和美感。細化布局一般采用Photoshop或Firework設計制作。網頁大小根據顯示器的分辨率設計，高度不限定，但寬度比顯示器的實際大小窄20像素，為的是給右側的滾動條留有一定的空間。目前，主流頁面大小一般為995*436。布局時要根據創(chuàng)作腳本，把最重要的信息如LOGO、標題、導航、課程介紹放在最顯眼的地方。頁面布局樣式可采用左右對齊式、全景式、包圍式、對稱式、單側對齊式、衛(wèi)星式、散開式、照片組合式布局等。另外，布局時要注重合理運用點和線。點的引導作用是讓瀏覽者更輕松的找到自己想要的信息。線不但可以起到頁面的分割作用，很好地運用線條還使網頁錦上添花。

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

五、結束語

在精品資源共享課程建設的道路上，如何把網站界面設計內化為課程內在的魅力，需要處處以用戶為出發(fā)點和落腳點，根據不同的課程特點，在不違背設計原則的前提下，進行設計創(chuàng)新，從而使課程網站更具多樣性和吸引力，實現精品資源共享課的品牌效應。

參考文獻：

[1]《教育部關于國家精品開放課程建設的實施意見》（教高[2011]8號）[Z].

[2]劉丹.企業(yè)形象識別系統(tǒng)[J].東北農業(yè)大學學報（社會科學版），2006（1）.

[3]楊威.信息技術教學導論（第2版）[M].電子工業(yè)出版社，2007.5.

[4]張曉璦.淺談教學網站的界面設計和色彩搭配[J].農業(yè)網絡信息，2008（1）.

[5]《精品資源共享課建設工作實施辦法》（教高廳[2012]2號）[Z].

（編輯：王曉明）endprint

四、精品資源共享課程網站界面設計流程

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

（2）網站內容組織。網站資源內容的建設是整個網站建設的核心。精品資源共享課程網站建設的成功與否，內容的整體設計起著舉足輕重的作用。首先由教師提供網站內容建設架構圖（如圖2）。設計好的架構圖，目的是讓網頁設計師清晰地了解；網站內容欄目、層次關系，主頁顯示的素材。

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

（3）網站實現技術。有了內容建設架構圖，設計師對網站的鏈接層次，從而選擇合適的建站模式，對鏈接的實現技術做到心中有數。從技術上講，可采用的技術大致有四種，其優(yōu)缺點分析見表3。

（4）網站界面風格。界面風格就是網站的外衣，包括了網頁上的所有元素（布局，文字，顏色等）組成后給人的視覺印象。如：韓國風格，歐美風格；風格設計應該圍繞課程性質，不同的課程形成不同的風格。網絡課程評價規(guī)范（CELTS-22 ）要求網絡課程“界面風格統(tǒng)一，協調美觀，易于使用和操作，具有完備的功能?！痹陲L格設計前大致需要確定布局、色系、導航，形成圖文相輔相承的頁面風格。說到風格需要了解構成風格的三個要素。

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

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

③導航。導航標簽代表的是整個網站的內容結構標識，用戶依靠標簽的內容和組織方式來尋找網站中的信息。設計標簽的過程，實際上就是對信息分類的過程，必須做到標準清晰，有歧義的標簽逼人猜測它的意圖，使用戶很難預測到鏈接背后是什么內容，甚至讓用戶走錯路或迷航。

（5）畫好粗略草圖。教學團隊根據課程性質，結合網站內容建設架構圖，完成粗略布局。經過反復構思，拿出一張白紙一支筆，發(fā)揮自己的想象力，把創(chuàng)意輪廓畫成草圖，這只是創(chuàng)作階段，不講究細膩工整，只要設計師能明白教師的用意即可。盡可能多畫幾張，最終選定一張作為創(chuàng)作腳本，如圖3所示。

（6）細化布局。細化布局是一種創(chuàng)造，既要立足信息的傳達，也要做到視覺流程自然、合理、暢快，使頁面上各信息要素的位置、間隙、大小保持一定的節(jié)奏感和美感。細化布局一般采用Photoshop或Firework設計制作。網頁大小根據顯示器的分辨率設計，高度不限定，但寬度比顯示器的實際大小窄20像素，為的是給右側的滾動條留有一定的空間。目前，主流頁面大小一般為995*436。布局時要根據創(chuàng)作腳本，把最重要的信息如LOGO、標題、導航、課程介紹放在最顯眼的地方。頁面布局樣式可采用左右對齊式、全景式、包圍式、對稱式、單側對齊式、衛(wèi)星式、散開式、照片組合式布局等。另外，布局時要注重合理運用點和線。點的引導作用是讓瀏覽者更輕松的找到自己想要的信息。線不但可以起到頁面的分割作用，很好地運用線條還使網頁錦上添花。

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

五、結束語

在精品資源共享課程建設的道路上，如何把網站界面設計內化為課程內在的魅力，需要處處以用戶為出發(fā)點和落腳點，根據不同的課程特點，在不違背設計原則的前提下，進行設計創(chuàng)新，從而使課程網站更具多樣性和吸引力，實現精品資源共享課的品牌效應。

參考文獻：

[1]《教育部關于國家精品開放課程建設的實施意見》（教高[2011]8號）[Z].

[2]劉丹.企業(yè)形象識別系統(tǒng)[J].東北農業(yè)大學學報（社會科學版），2006（1）.

[3]楊威.信息技術教學導論（第2版）[M].電子工業(yè)出版社，2007.5.

[4]張曉璦.淺談教學網站的界面設計和色彩搭配[J].農業(yè)網絡信息，2008（1）.

[5]《精品資源共享課建設工作實施辦法》（教高廳[2012]2號）[Z].

（編輯：王曉明）endprint