張會麗+楊威

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

關(guān)鍵詞：精品資源共享課；網(wǎng)站界面設(shè)計

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

一、研究背景

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

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

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

二、研究內(nèi)容與方法

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

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

三、評價結(jié)果分析與思考

通過調(diào)查綜合評分，前五名的課程 見表2 。

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

1.精品資源共享課程網(wǎng)站界面設(shè)計的原則

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

2.精品資源共享課程網(wǎng)站界面設(shè)計存在的問題

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

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

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

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

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

四、精品資源共享課程網(wǎng)站界面設(shè)計流程

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

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

網(wǎng)站內(nèi)容組織結(jié)構(gòu)圖設(shè)計，是將教學(xué)資源橫向排列并按照基本資源和拓展資源進行分類，縱向排列要按照課程學(xué)習(xí)單元進行分類，以樹型結(jié)構(gòu)表示。

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

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

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

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

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

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

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

（7）界面美化。為進一步美化界面風(fēng)格，可以添加適當?shù)腇LASH使網(wǎng)頁界面更加生動，但動畫適可而止，過多會顯得雜亂。如Banana和課程介紹部分可以由教師結(jié)合課程亮點凝練文字和精選圖片，以此豐富動畫內(nèi)容，至此界面制作完成。

五、結(jié)束語

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

參考文獻：

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

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

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

[4]張曉璦.淺談教學(xué)網(wǎng)站的界面設(shè)計和色彩搭配[J].農(nóng)業(yè)網(wǎng)絡(luò)信息，2008（1）.

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

（編輯：王曉明）endprint

四、精品資源共享課程網(wǎng)站界面設(shè)計流程

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

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

網(wǎng)站內(nèi)容組織結(jié)構(gòu)圖設(shè)計，是將教學(xué)資源橫向排列并按照基本資源和拓展資源進行分類，縱向排列要按照課程學(xué)習(xí)單元進行分類，以樹型結(jié)構(gòu)表示。

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

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

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

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

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

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

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

（7）界面美化。為進一步美化界面風(fēng)格，可以添加適當?shù)腇LASH使網(wǎng)頁界面更加生動，但動畫適可而止，過多會顯得雜亂。如Banana和課程介紹部分可以由教師結(jié)合課程亮點凝練文字和精選圖片，以此豐富動畫內(nèi)容，至此界面制作完成。

五、結(jié)束語

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

參考文獻：

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

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

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

[4]張曉璦.淺談教學(xué)網(wǎng)站的界面設(shè)計和色彩搭配[J].農(nóng)業(yè)網(wǎng)絡(luò)信息，2008（1）.

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

（編輯：王曉明）endprint

四、精品資源共享課程網(wǎng)站界面設(shè)計流程

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

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

網(wǎng)站內(nèi)容組織結(jié)構(gòu)圖設(shè)計，是將教學(xué)資源橫向排列并按照基本資源和拓展資源進行分類，縱向排列要按照課程學(xué)習(xí)單元進行分類，以樹型結(jié)構(gòu)表示。

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

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

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

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

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

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

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

（7）界面美化。為進一步美化界面風(fēng)格，可以添加適當?shù)腇LASH使網(wǎng)頁界面更加生動，但動畫適可而止，過多會顯得雜亂。如Banana和課程介紹部分可以由教師結(jié)合課程亮點凝練文字和精選圖片，以此豐富動畫內(nèi)容，至此界面制作完成。

五、結(jié)束語

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

參考文獻：

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

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

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

[4]張曉璦.淺談教學(xué)網(wǎng)站的界面設(shè)計和色彩搭配[J].農(nóng)業(yè)網(wǎng)絡(luò)信息，2008（1）.

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

（編輯：王曉明）endprint