張會(huì)麗+楊威

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

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

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1673-8454（2014）01-0036-04

一、研究背景

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

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

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

二、研究?jī)?nèi)容與方法

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

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

三、評(píng)價(jià)結(jié)果分析與思考

通過(guò)調(diào)查綜合評(píng)分，前五名的課程 見(jiàn)表2 。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

五、結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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

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

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

（編輯：王曉明）endprint

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

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

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

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

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

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

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

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

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

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

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

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

五、結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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

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

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

（編輯：王曉明）endprint

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

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

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

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

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

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

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

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

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

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

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

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

五、結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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

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

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

（編輯：王曉明）endprint