郝倩, 李壘

(河南工業(yè)職業(yè)技術(shù)學(xué)院， 南陽(yáng) 473009)

0 引言

精品資源共享課是以教師和學(xué)生為服務(wù)主體，同時(shí)面向社會(huì)學(xué)習(xí)者的網(wǎng)絡(luò)共享課程，是具有豐富教學(xué)資源的優(yōu)秀課程[1]，是自教育部對(duì)原來(lái)的國(guó)家精品課程的一個(gè)轉(zhuǎn)型和升級(jí)。精品資源共享課的建設(shè)和評(píng)審工作，主要通過(guò)課程網(wǎng)站進(jìn)行實(shí)施。課程網(wǎng)站作為精品資源共享課優(yōu)質(zhì)教學(xué)資源信息的載體，網(wǎng)站界面作為課程的呈現(xiàn)形態(tài)，是精品資源共享課程建設(shè)的一個(gè)重要組成部分，界面設(shè)計(jì)優(yōu)劣直接影響教學(xué)資源的呈現(xiàn)與共享。優(yōu)秀的精品資源共享課網(wǎng)站界面設(shè)計(jì)對(duì)教師、學(xué)生和行業(yè)企業(yè)人員有著良好的收益。

文章通過(guò)高職院校精品資源共享課網(wǎng)站的界面布局、導(dǎo)航、色彩等進(jìn)行分析，指出了高職精品資源共享課在界面設(shè)計(jì)方面的現(xiàn)狀與不足，依據(jù)精品課程制作原則，提出應(yīng)對(duì)措施。

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

為提高高職院校的專業(yè)教學(xué)質(zhì)量、豐富教學(xué)資源、方便師生學(xué)習(xí)交流，精品資源共享課不僅滲透各個(gè)專業(yè)的專業(yè)核心課程中，而且在專業(yè)基礎(chǔ)課和公共課中也被廣泛建設(shè)。

精品資源共享課程是將優(yōu)質(zhì)課程進(jìn)行網(wǎng)絡(luò)化，是一種特殊的網(wǎng)絡(luò)課程。目前，網(wǎng)絡(luò)課程評(píng)價(jià)一般由專家評(píng)定，而作為網(wǎng)絡(luò)學(xué)習(xí)使用者也是最具發(fā)言權(quán)的。基于筆者對(duì)網(wǎng)絡(luò)課程的研究、設(shè)計(jì)、開發(fā)和使用經(jīng)驗(yàn)，并在一定范圍內(nèi)對(duì)使用精品資源共享課的教師、學(xué)生、企業(yè)人員、評(píng)審專家的調(diào)查與思考，依據(jù)《網(wǎng)絡(luò)課程評(píng)價(jià)規(guī)范》和《現(xiàn)代遠(yuǎn)程教育資源建設(shè)技術(shù)規(guī)范》對(duì)課程界面設(shè)計(jì)元素的要求，結(jié)合教育軟件工程中界面設(shè)計(jì)的原則和高職精品資源共享課的實(shí)際情況，對(duì)高職院校精品資源共享課網(wǎng)站界面的設(shè)計(jì)進(jìn)行了實(shí)際性的研究。

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

界面設(shè)計(jì)在精品資源共享課建設(shè)中起著重要作用，課程的界面直接影響課程外觀及對(duì)學(xué)生學(xué)習(xí)興趣的激發(fā)和維持。精品資源共享課界面設(shè)計(jì)除遵循一般網(wǎng)絡(luò)課程界面設(shè)計(jì)的原則外，還應(yīng)具備以下幾點(diǎn)：

1) 版面布局結(jié)構(gòu)

界面設(shè)計(jì)簡(jiǎn)潔、美觀友好，能激發(fā)學(xué)習(xí)者的興趣。其中，版面留白量在30%—50%，背景色彩純度合適；標(biāo)題設(shè)計(jì)美觀，凸現(xiàn)背景之上；重要信息要置于突出位置加以強(qiáng)調(diào)；信息一致性保持統(tǒng)一格式，實(shí)現(xiàn)統(tǒng)一感，便于閱讀和搜索。

2) 導(dǎo)航與迷航

頁(yè)面布局合理，導(dǎo)航清晰，重點(diǎn)突出，操作方便。信息組織符合本門課程的內(nèi)在邏輯體系和學(xué)習(xí)者的認(rèn)知規(guī)律，不出現(xiàn)空鏈接。

3) 界面風(fēng)格與色彩運(yùn)用

界面風(fēng)格一致，同一課程不同頁(yè)面間要實(shí)現(xiàn)整體統(tǒng)一，局部變化，和諧完整。色彩運(yùn)用要符合學(xué)習(xí)者習(xí)慣，基本調(diào)色符合教學(xué)內(nèi)容的特點(diǎn)和學(xué)生的認(rèn)知心理，如活潑、中性、沉靜。另外，同一版面控制在3種顏色內(nèi)，之外可添1-2種鄰近色，做到和諧、達(dá)到視覺(jué)平衡；為突出重點(diǎn)，色彩對(duì)比要合理。

4) 文字設(shè)計(jì)

對(duì)于文字，同版字體設(shè)計(jì)在3種內(nèi)，字距、行距適中，標(biāo)題以H1-H3為佳，正文字體12-14號(hào)為適。

5) 圖像元素

在構(gòu)圖、色彩搭配、畫面組成與銜接方面處理圖像元素時(shí)，要符合心理學(xué)和美學(xué)的基本原則；圖片要經(jīng)過(guò)壓縮、優(yōu)化，提高網(wǎng)頁(yè)的預(yù)覽速度。

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

1) 界面布局混亂

布局頁(yè)面時(shí)，屏幕空間按功能劃分區(qū)塊，如標(biāo)題區(qū)、導(dǎo)航區(qū)、新聞滾動(dòng)圖片區(qū)、 欄目區(qū)、頁(yè)腳版權(quán)區(qū)等，各區(qū)塊分布要簡(jiǎn)潔、協(xié)調(diào)、美觀，精品資源共享課在界面設(shè)計(jì)的布局上要符合學(xué)習(xí)習(xí)慣。由于不少網(wǎng)站界面設(shè)計(jì)時(shí)各區(qū)劃分主題不突出，設(shè)計(jì)時(shí)過(guò)多地使用圖片、動(dòng)畫刺激學(xué)習(xí)者的視覺(jué)感官，欄目交叉或重復(fù)，出現(xiàn)喧賓奪主的現(xiàn)象，沒(méi)有達(dá)到以教學(xué)設(shè)計(jì)為目的的創(chuàng)造視覺(jué)環(huán)境。

2) 導(dǎo)航不夠清晰

學(xué)習(xí)者在瀏覽網(wǎng)頁(yè)時(shí)，找不到相應(yīng)的節(jié)點(diǎn)，則稱之為迷航[3]。在問(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)前位置孤立等現(xiàn)象。

3) 下載速度較慢

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

4) 色彩搭配不當(dāng)

人眼的視覺(jué)感知取決于瞳孔和感光細(xì)胞的調(diào)節(jié)，如果光線太強(qiáng)或太弱會(huì)引起眼睛不適。有些課程頁(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ù)之一[4]。遺憾的是由于疏忽了設(shè)計(jì)的原則，使得很多課程網(wǎng)站界面設(shè)計(jì)流于形式。為了解決上述問(wèn)題，更好地傳播精品資源共享課，共享優(yōu)質(zhì)教學(xué)資源，筆者從網(wǎng)站界面設(shè)計(jì)的流程出發(fā)，提出幾點(diǎn)對(duì)策和建議，尚有待于在實(shí)踐中繼續(xù)完善。

4 精品資源共享課程網(wǎng)站界面設(shè)計(jì)的建議和措施

1) 網(wǎng)站整體規(guī)劃

界面設(shè)計(jì)是由多門學(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ì)師、程序開發(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)圖，如圖1所示。

圖1 網(wǎng)站內(nèi)容建設(shè)架構(gòu)圖

設(shè)計(jì)好的架構(gòu)圖，使網(wǎng)頁(yè)設(shè)計(jì)師對(duì)整個(gè)網(wǎng)站內(nèi)容結(jié)構(gòu)清晰；網(wǎng)站內(nèi)容欄目、層次關(guān)系，主頁(yè)顯示的素材。

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

3) 網(wǎng)站實(shí)現(xiàn)技術(shù)

在內(nèi)容建設(shè)架構(gòu)圖的基礎(chǔ)上，選擇合適的建站模式。從技術(shù)上講，大致分為4種，其優(yōu)缺點(diǎn)分析，如表1所示。

4) 網(wǎng)站界面風(fēng)格

界面風(fēng)格就是網(wǎng)站的外衣，包括頁(yè)面布局、網(wǎng)頁(yè)元素、色彩搭配等內(nèi)容組成后給人的視覺(jué)印象。精品資源共享課程網(wǎ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ì)前，需確定網(wǎng)頁(yè)的布局、色系、導(dǎo)航，形成圖文相輔相承的頁(yè)面風(fēng)格。

構(gòu)成風(fēng)格的3個(gè)要素如下：

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

表1 網(wǎng)站建設(shè)實(shí)現(xiàn)技術(shù)及優(yōu)缺點(diǎn)

(2) 色彩。傳達(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è)重感。

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

5) 畫好粗略草圖

教學(xué)團(tuán)隊(duì)根據(jù)課程性質(zhì)，結(jié)合網(wǎng)站內(nèi)容建設(shè)架構(gòu)圖，完成粗略布局。經(jīng)過(guò)反復(fù)構(gòu)思，拿出一張白紙一支筆，通過(guò)紙上布局，發(fā)揮自己的想象力，把創(chuàng)意輪廓畫成草圖。這只是創(chuàng)作階段，不講究細(xì)膩工整，只要設(shè)計(jì)師能明白教師的用意即可?？梢远喑鰩讉€(gè)方案，擇優(yōu)選擇。

6) 細(xì)化布局

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

7) 界面美化

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

5 總結(jié)

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