杜 營,王小青,劉吉林

(1.廣東建設(shè)職業(yè)技術(shù)學(xué)院建筑信息系,廣東廣州 510440; 2.廣東財(cái)經(jīng)大學(xué)華商學(xué)院藝術(shù)系,廣東廣州 511300; 3.廣東建設(shè)職業(yè)技術(shù)學(xué)院現(xiàn)代商務(wù)與管理系,廣東廣州 511300）

精品資源共享課網(wǎng)站界面的交互設(shè)計(jì)*

杜 營1,王小青2,劉吉林3

(1.廣東建設(shè)職業(yè)技術(shù)學(xué)院建筑信息系,廣東廣州 510440; 2.廣東財(cái)經(jīng)大學(xué)華商學(xué)院藝術(shù)系,廣東廣州 511300; 3.廣東建設(shè)職業(yè)技術(shù)學(xué)院現(xiàn)代商務(wù)與管理系,廣東廣州 511300）

基于精品資源共享課的性質(zhì)與交互設(shè)計(jì)的理論,結(jié)合課程本身的特點(diǎn)及用戶特征,提出服務(wù)于網(wǎng)絡(luò)課程的界面交互、導(dǎo)航交互、按鈕交互、內(nèi)容交互、動(dòng)畫交互和測試交互的設(shè)計(jì)方法,以便學(xué)習(xí)者提高學(xué)習(xí)效果,達(dá)到優(yōu)秀課程資源的共享.

精品資源共享課;界面;交互設(shè)計(jì)

0 引言

精品資源共享課建設(shè)是國家精品開放課程建設(shè)項(xiàng)目的重要組成部分,旨在促進(jìn)教育教學(xué)觀念的轉(zhuǎn)變,引領(lǐng)教學(xué)內(nèi)容和教學(xué)方法改革,推動(dòng)高等學(xué)校優(yōu)質(zhì)課程教學(xué)資源通過現(xiàn)代信息技術(shù)手段共建共享,提高人才培養(yǎng)質(zhì)量,服務(wù)學(xué)習(xí)型社會(huì)建設(shè).精品資源共享課以量大面廣的公共基礎(chǔ)課、專業(yè)基礎(chǔ)課和專業(yè)核心課為重點(diǎn),以課程資源系統(tǒng)、豐富和適合網(wǎng)絡(luò)傳播為基本要求,經(jīng)過國家、省、校三級(jí)建設(shè),形成普通本科教育、高等職業(yè)教育、網(wǎng)絡(luò)教育多層次、多類型的優(yōu)質(zhì)課程教學(xué)資源共建共享體系,為高校師生和社會(huì)學(xué)習(xí)者提供優(yōu)質(zhì)課程教學(xué)資源[1].精品課程資源共享課的web界面基于網(wǎng)絡(luò)表現(xiàn)形式,包括按照課程教學(xué)目標(biāo)和方法所整理的教學(xué)內(nèi)容,與網(wǎng)絡(luò)教學(xué)所運(yùn)用的工具軟件、課程教學(xué)資源,以及在網(wǎng)絡(luò)教學(xué)平臺(tái)上所進(jìn)行的一系列教與學(xué)的活動(dòng).

1 界面交互

吉爾伯特和莫爾認(rèn)為：“交互是兩個(gè)或多個(gè)個(gè)體在學(xué)習(xí)環(huán)境中為完成學(xué)習(xí)任務(wù)或建立社會(huì)關(guān)系而進(jìn)行的雙向通信.”[2]交互存在于一切社會(huì)活動(dòng)中,在不同的事物發(fā)展過程中或不同的社會(huì)環(huán)境下會(huì)表現(xiàn)出不同的形態(tài),在信息化時(shí)代,交互更是一種普通和常見的現(xiàn)象.在精品資源共享課網(wǎng)站中,界面設(shè)計(jì)包含頁面的內(nèi)容布局、元素排版、色彩設(shè)計(jì)等視覺元素,同時(shí)包括學(xué)習(xí)者與web界面之間的交互設(shè)計(jì).

1.1 界面模塊布局和色彩基調(diào)

界面模塊中的主次、位置和大小是界面設(shè)計(jì)者要考慮的首要問題.在精品課程共享資源平臺(tái)上,教學(xué)錄像、動(dòng)畫等資源特色可以放在網(wǎng)頁的中心位置,將其作為網(wǎng)頁的核心部分,突出界面的主次關(guān)系.在體現(xiàn)共享資源信息完善性的同時(shí),增加頁面的動(dòng)態(tài)美感.在色彩基調(diào)上,網(wǎng)絡(luò)課程在考慮課程性質(zhì)的前提下,結(jié)合學(xué)習(xí)內(nèi)容的性質(zhì)和學(xué)習(xí)者的心理需求,運(yùn)用色彩的和諧之美,通過色彩的美化手段體現(xiàn)對(duì)色彩應(yīng)用和色彩最高目標(biāo)的追求,如果色彩離開了視覺愉悅的整體顯現(xiàn),色彩的和諧之美就無從談起[3].網(wǎng)頁色彩應(yīng)注重主題模板的開發(fā),盡量使用鄰近色以達(dá)到色調(diào)統(tǒng)一、和諧,界面色調(diào)既有均齊的嚴(yán)謹(jǐn)性,又有平衡的自由度,利用多種同一性的要素來調(diào)和界面的色彩搭配,抑制過分的對(duì)比色彩,消除視覺上的雜亂感,為學(xué)習(xí)者提供選擇個(gè)性顏色的模板.

1.2 界面元素

界面元素包括菜單、文字、按鈕、媒體等元素,傳統(tǒng)課程基本具備了上述元素.然而,在精品資源共享課中,個(gè)性化的學(xué)習(xí)界面是該課程與以往網(wǎng)絡(luò)課程的差異之處,頁面除了供學(xué)習(xí)者瀏覽的同時(shí),還可以讓學(xué)習(xí)者在界面上添加筆記、標(biāo)記等,學(xué)習(xí)者也可以根據(jù)自己的興趣添加自己的個(gè)性化模塊.

2 導(dǎo)航交互

導(dǎo)航能讓學(xué)習(xí)者一眼看清楚整個(gè)學(xué)習(xí)內(nèi)容的模塊構(gòu)成,根據(jù)自己學(xué)習(xí)的側(cè)重點(diǎn)找到相應(yīng)的模塊,利用模塊信息了解所處的位置,能較好的對(duì)教學(xué)信息構(gòu)建進(jìn)行整體把握.導(dǎo)航的設(shè)計(jì),應(yīng)遵循用戶的需求、目標(biāo)和使用偏好,設(shè)計(jì)師需要發(fā)現(xiàn)這些并為其開發(fā)以用戶為中心的設(shè)計(jì)(UCD）[4].在UCD中目標(biāo)非常重要,設(shè)計(jì)者關(guān)注用戶最終想實(shí)現(xiàn)的目標(biāo),定義完成目標(biāo)的任務(wù)和方式,并且始終牢記用戶的需求與偏好.導(dǎo)航欄在網(wǎng)頁中是一組超鏈接,與共享課中重要的頁面相關(guān)聯(lián).導(dǎo)航的運(yùn)用有助于避免學(xué)習(xí)者偏離教學(xué)目標(biāo),幫助學(xué)習(xí)者把握學(xué)習(xí)框架,導(dǎo)航交互包括欄目導(dǎo)航、輔助導(dǎo)航和“面包屑導(dǎo)航”①面包屑導(dǎo)航http：//baike.baidu.com/view/2122303.htm三種.欄目導(dǎo)航一般位于網(wǎng)頁頂部象征性的網(wǎng)幅之下,以樹形信息結(jié)構(gòu)為基礎(chǔ),分為一級(jí)導(dǎo)航、二級(jí)導(dǎo)航、三級(jí)導(dǎo)航等以此類推;輔助導(dǎo)航一般位于網(wǎng)站的左右兩側(cè),引導(dǎo)用戶及時(shí)看到相近或相關(guān)的欄目,用于幫助用戶使用網(wǎng)站的輔助性導(dǎo)航工具,如工具欄、快捷鏈接等.常用的輔助鏈接包括“網(wǎng)上幫助”、“在線客服”、“常用問題”等;面包屑導(dǎo)航讓用戶了解當(dāng)前所處的位置,以及當(dāng)前頁面在整個(gè)網(wǎng)站中的位置,其作用是告訴學(xué)習(xí)者目前所在網(wǎng)站中的位置以及如何返回,減少返回到上一級(jí)頁面的點(diǎn)擊或操作,無需使用瀏覽器的“返回”按鈕或網(wǎng)站的主導(dǎo)航來返回到上一級(jí)頁面.導(dǎo)航的功能是協(xié)助用戶查詢信息和提示當(dāng)前所在的位置,導(dǎo)航標(biāo)簽起著指示方位的作用,幫助用戶熟悉網(wǎng)站的信息結(jié)構(gòu),導(dǎo)航系統(tǒng)的一致性是網(wǎng)站可用性的基本保證之一.設(shè)計(jì)師應(yīng)該在布局、視覺表現(xiàn)、互動(dòng)方式上保持風(fēng)格的一致,使用戶能夠迅速地識(shí)別和預(yù)測網(wǎng)站的導(dǎo)航系統(tǒng)和操作方式[5].

3 按鈕交互

按鈕交互是指用戶通過點(diǎn)擊網(wǎng)頁上的按鈕,出現(xiàn)直觀、實(shí)時(shí)、個(gè)性化的人機(jī)交互響應(yīng),其造型設(shè)計(jì)及色彩搭配應(yīng)與網(wǎng)頁界面風(fēng)格相統(tǒng)一,以保證頁面的整體協(xié)調(diào).在用Flash軟件實(shí)現(xiàn)按鈕交互時(shí),包括鼠標(biāo)指針不在按鈕上時(shí)的彈起狀態(tài)、指針經(jīng)過時(shí)按鈕的顏色變化、鼠標(biāo)按下時(shí)按鈕的反應(yīng)狀態(tài)和鼠標(biāo)點(diǎn)擊時(shí)出現(xiàn)的交互響應(yīng).按鈕在精品資源共享課中是不可或缺的元素,web中包括個(gè)性導(dǎo)航按鈕和播放控制按鈕.個(gè)性導(dǎo)航按鈕是位于網(wǎng)頁左右兩側(cè)的次導(dǎo)航菜單,原則上次導(dǎo)航是可以用文字實(shí)現(xiàn)的,然而按鈕的嵌入,可以讓其界面美觀且交互過程形象,增加人機(jī)互動(dòng),激發(fā)學(xué)習(xí)者的閱讀興趣.播放控制按鈕是共享課中最常用也是進(jìn)入學(xué)習(xí)狀態(tài)時(shí)不可缺少的交互元素,其造型設(shè)計(jì)的美觀、大小、位置的擺放和交互的時(shí)效性與學(xué)習(xí)者的界面使用習(xí)慣關(guān)系密切,尤其是在播放時(shí)的實(shí)時(shí)交互,如暫停、前進(jìn)、后退等按鈕設(shè)計(jì)和進(jìn)度條等的拖動(dòng)操作都是播放控制按鈕的關(guān)鍵.

4 內(nèi)容交互

內(nèi)容交互設(shè)計(jì)包括教學(xué)內(nèi)容、學(xué)習(xí)資源及課程作業(yè)模塊.精品資源共享課內(nèi)容交互設(shè)計(jì),首先要以學(xué)習(xí)者為中心,以提高精品資源共享課的教學(xué)質(zhì)量,實(shí)現(xiàn)以學(xué)習(xí)者自主學(xué)習(xí)為核心的教學(xué)方式,內(nèi)容的交互設(shè)計(jì)則必須遵循以學(xué)習(xí)者為中心,從學(xué)習(xí)者的角度出發(fā),突出易學(xué)易用的特點(diǎn),調(diào)動(dòng)學(xué)習(xí)者自主學(xué)習(xí)的積極性;其次,要便于歸納、整合學(xué)習(xí)內(nèi)容的后臺(tái)技術(shù)支持,如學(xué)習(xí)者與教學(xué)內(nèi)容的交互、學(xué)習(xí)者與計(jì)算機(jī)的交互、學(xué)習(xí)者與學(xué)習(xí)者間的交互等后臺(tái)數(shù)據(jù)庫建設(shè);再次,為了避免學(xué)習(xí)者思維混亂,界面對(duì)話框、按鈕等對(duì)象需設(shè)計(jì)簡潔,標(biāo)識(shí)清楚,內(nèi)容界面應(yīng)該分塊組合,相同內(nèi)容劃分在同一區(qū)域板塊上,且風(fēng)格要一致,任何交互板塊、最終學(xué)習(xí)內(nèi)容交互板塊的設(shè)計(jì)都要保持整體的一致性.

5 動(dòng)畫交互

目前,精品資源共享課的使用范圍在高校,專業(yè)課程的性質(zhì)和資源的共享形式略有不同,但使用對(duì)象基本是一致的.精品課程強(qiáng)調(diào)教學(xué)、共享,其資源共享課所針對(duì)的目標(biāo)對(duì)象主要受眾的是教師、學(xué)生以及社會(huì)學(xué)習(xí)者.在網(wǎng)絡(luò)環(huán)境學(xué)習(xí)中,學(xué)習(xí)者應(yīng)具有相應(yīng)的能力,如必須能夠熟練地進(jìn)行計(jì)算機(jī)的使用和操作、自主學(xué)習(xí)能力、自我指導(dǎo)能力、良好的自控能力以及團(tuán)隊(duì)合作精神.因此,精品資源共享課的交互界面設(shè)計(jì)需要考慮到受眾對(duì)象(用戶）的特點(diǎn)和習(xí)性,才能夠設(shè)計(jì)出最好的課程交互界面,讓精品資源共享課的利用率最大化,達(dá)到課程建設(shè)的最終目的,使得人機(jī)交互更加成功.交互動(dòng)畫共享課程學(xué)習(xí)內(nèi)容,其在動(dòng)畫播放時(shí),支持事件響應(yīng)和實(shí)時(shí)交互操作,動(dòng)畫播放期間學(xué)習(xí)者可以主動(dòng)參與某種內(nèi)容的操作,動(dòng)畫也因?qū)W習(xí)者的不同選擇和接受某種控制(預(yù)先準(zhǔn)備的編程）,讓學(xué)習(xí)者由被動(dòng)接受變?yōu)橹鲃?dòng)選擇控制動(dòng)畫播放進(jìn)度.動(dòng)畫的交互、課程內(nèi)容與課程本身的教學(xué)內(nèi)容密切聯(lián)系,首先可以根據(jù)課程內(nèi)容設(shè)計(jì)動(dòng)畫菜單進(jìn)行選擇.就一個(gè)大知識(shí)點(diǎn)而言,下面的小知識(shí)點(diǎn)隨之作為動(dòng)畫交互,用戶可以根據(jù)自己的需要選擇某一個(gè)知識(shí)點(diǎn)進(jìn)行學(xué)習(xí).知識(shí)點(diǎn)播放結(jié)束或播放過程中想返回上一級(jí)大知識(shí)點(diǎn)的菜單可以隨時(shí)實(shí)現(xiàn).動(dòng)畫交互較視頻而言,擁有更多的個(gè)性選擇和互動(dòng).

6 測試交互

測試交互是課程學(xué)習(xí)評(píng)價(jià)的測試方式,便于了解學(xué)習(xí)者在學(xué)習(xí)完一個(gè)或多個(gè)知識(shí)后對(duì)知識(shí)的掌握程度,包括階段測試和綜合測試.根據(jù)課程的內(nèi)容及知識(shí)點(diǎn)的難易程度,教師可以設(shè)計(jì)選擇題、填空題、判斷題、問答題等題型,階段測試可以讓學(xué)習(xí)者了解自己對(duì)現(xiàn)階段的知識(shí)把握程度,及時(shí)反饋學(xué)習(xí)內(nèi)容的不足.綜合測試是學(xué)習(xí)者通過各種交互學(xué)習(xí)完成整個(gè)課程后,檢測其對(duì)知識(shí)點(diǎn)的總體把握與運(yùn)用程度,有效的讓學(xué)習(xí)者了解自己的學(xué)習(xí)狀況.

精品資源共享課是建立在信息時(shí)代下,對(duì)教學(xué)方法、教學(xué)手段與教學(xué)媒介的改革,對(duì)網(wǎng)絡(luò)課程的界面、導(dǎo)航、按鈕、內(nèi)容、動(dòng)畫、測試各種交互設(shè)計(jì)進(jìn)行研究與實(shí)踐,其建設(shè)包括對(duì)學(xué)習(xí)者心理、界面優(yōu)化、認(rèn)知習(xí)慣等諸多內(nèi)容,是建立在現(xiàn)有精品課程的基礎(chǔ)建設(shè),但較精品課程需要更完善的共享資料和社會(huì)公開度,對(duì)網(wǎng)站學(xué)習(xí)內(nèi)容的交互設(shè)計(jì)技術(shù)要求更高,強(qiáng)調(diào)科學(xué)教學(xué)和資源共享,其主要受眾除了教師和學(xué)生外,還包括社會(huì)學(xué)習(xí)者,相比受眾主要為教師的精品課程,其更適合現(xiàn)階段信息社會(huì)的需要.因此,要加強(qiáng)精品資源共享課網(wǎng)站界面的交互設(shè)計(jì),充分發(fā)揮共享課教學(xué)資源的利用與共享,以便更好的為高校師生和社會(huì)學(xué)習(xí)者提供優(yōu)質(zhì)的課程教學(xué)資源.

[1]教育部辦公廳.教育部辦公廳關(guān)于印發(fā)《精品資源共享課建設(shè)工作實(shí)施辦法》的通知[EB/OL].(20130823）.http// www.moe.gov.cn.

[2]Gilbert L,Moore D R.Building Interactivity into Web Courses：Tools for Social and Instructional Interaction[J].Educational Technolgy,1998,38(3）：26.

[3]邢慶華.色彩[M].南京：東南大學(xué)出版社,2005.

[4]塞弗.交互設(shè)計(jì)指南[M].陳軍亮,陳媛嫄,李敏,等譯.北京：機(jī)械工業(yè)出版社,2010.

[5]崔山山.網(wǎng)頁設(shè)計(jì)[M].重慶：重慶大學(xué)出版社,2011.

[6]楊在寶,張杰.“教學(xué)系統(tǒng)設(shè)計(jì)”網(wǎng)絡(luò)課程的交互設(shè)計(jì)探索[J].中國教育信息化,2010(3）：74-76.

[7]李壽材,馬秀峰.國家精品課程網(wǎng)站色彩調(diào)查與分析[J].電化教育研究,2009(3）：83-86.

[8]武法提.網(wǎng)絡(luò)課程設(shè)計(jì)與開發(fā)[M].北京：高等教育出版社,2007.

On the Design of the Online Interactive Interface for the Resource Sharing Course

DU Ying1,WANG Xiaoqing2,LIU Jilin3
(1.Department of Building Information,Guangdong Construction Vocational College of Technology,Guangzhou 510440,China; 2.Department of Arts,Huashang Institute,Guangdong College of Finance&Economics,Guangzhou 511300,China; 3.Department of Modern Business&Management,Guangdong Construction Vocational College of Technology,Guangzhou 510440,China）

Through analyzing the characteristics of the excellent sharing resources,the theories of interaction design,and the features of courses and their users,this paper aims to put forth some design methods to assist online courses,including interactive interface,navigation,buttons,content,animation and tests design.It is hoped that such methods can accelerate the sharing of outstanding teaching and learning resources and help learners improve learning effectiveness

excellent resource sharing;interface;interaction design

G423

A

1009-1734(2014）02-0110-03

2013-12-25

廣東建設(shè)職業(yè)技術(shù)學(xué)院校級(jí)課題(2012-02）.

杜營,講師,碩士,研究方向：藝術(shù)設(shè)計(jì)、多媒體技術(shù).E-mail：82114704@qq.com