趙玉 司國東

【摘 要】

界面是學(xué)習(xí)者與網(wǎng)絡(luò)學(xué)習(xí)資源間信息交互的主要通道，對學(xué)習(xí)效果有著至關(guān)重要的影響。但從國內(nèi)網(wǎng)絡(luò)精品課程與精品資源的應(yīng)用現(xiàn)狀看，界面設(shè)計(jì)不完善的問題仍然比較常見，一個(gè)主要的原因是資源建設(shè)者缺乏有效的界面開發(fā)方法。本文分析了學(xué)習(xí)資源界面開發(fā)的難點(diǎn)，給出了一種基于模式的網(wǎng)絡(luò)學(xué)習(xí)資源界面開發(fā)方法，并通過實(shí)例展示了界面開發(fā)的詳細(xì)過程。

【關(guān)鍵詞】 網(wǎng)絡(luò)學(xué)習(xí)資源；界面開發(fā)；界面模式

【中圖分類號(hào)】 G434 【文獻(xiàn)標(biāo)識(shí)碼】 A 【文章編號(hào)】 1009—458x（2015）01—0065—06

一、引言

學(xué)習(xí)資源是教育技術(shù)的兩大研究對象之一。美國教育傳播與技術(shù)協(xié)會(huì)（AECT）（1994）界定了廣義的學(xué)習(xí)資源概念——支持學(xué)習(xí)所用到的全部資源，如軟硬件支持系統(tǒng)、教學(xué)材料與環(huán)境等[1]。隨著遠(yuǎn)程教育的快速發(fā)展，對學(xué)習(xí)資源這一概念的理解也發(fā)生了變化。我們討論的學(xué)習(xí)資源特指網(wǎng)絡(luò)學(xué)習(xí)資源，即學(xué)習(xí)者利用網(wǎng)絡(luò)手段開展學(xué)習(xí)活動(dòng)所需的各種網(wǎng)絡(luò)信息資源[2]。近十年來，教育技術(shù)領(lǐng)域的研究者在網(wǎng)絡(luò)學(xué)習(xí)資源的發(fā)展趨勢、技術(shù)標(biāo)準(zhǔn)、應(yīng)用模式、組織結(jié)構(gòu)、開發(fā)方法等方面展開了細(xì)致的研究，但在學(xué)習(xí)資源的界面設(shè)計(jì)與開發(fā)方面，由于涉及教育學(xué)、認(rèn)知心理學(xué)、人機(jī)交互、藝術(shù)設(shè)計(jì)等多個(gè)學(xué)科，有針對性的研究還比較少。

網(wǎng)絡(luò)學(xué)習(xí)資源的人機(jī)界面是學(xué)習(xí)者與學(xué)習(xí)內(nèi)容間信息交互的主通道[3]。學(xué)習(xí)者通過界面訪問學(xué)習(xí)資源，獲取知識(shí)和信息。界面的質(zhì)量直接決定了學(xué)習(xí)交互的質(zhì)量，對學(xué)習(xí)效果有著至關(guān)重要的影響。從目前國內(nèi)網(wǎng)絡(luò)學(xué)習(xí)資源的建設(shè)現(xiàn)狀看，界面設(shè)計(jì)不完善的現(xiàn)象仍然比較常見[4]。研究表明，界面問題已經(jīng)成為影響我國網(wǎng)絡(luò)精品課程和資源應(yīng)用的一個(gè)主要因 素[5]。

二、學(xué)習(xí)資源界面開發(fā)的難點(diǎn)與現(xiàn)狀

（一）學(xué)習(xí)資源界面開發(fā)的難點(diǎn)

界面設(shè)計(jì)是學(xué)習(xí)資源界面開發(fā)的主要難點(diǎn)。通用軟件的界面設(shè)計(jì)有三個(gè)基本需求[6]：① 提供充足的交互方法，讓用戶通過界面能訪問到軟件的邏輯層和數(shù)據(jù)層；② 使用圖形化、可視化設(shè)計(jì)，提供高效的交互機(jī)制，讓用戶的工作更有效率；③ 考慮未來可能產(chǎn)生的新需求。學(xué)習(xí)資源的界面設(shè)計(jì)首先要滿足這些基本需求，同時(shí)也要考慮資源使用過程中的“教與學(xué)”問題[7]?！敖獭睆?qiáng)調(diào)了資源的內(nèi)容設(shè)計(jì)（教學(xué)設(shè)計(jì)），而“學(xué)”則強(qiáng)調(diào)了資源的界面設(shè)計(jì)。另外，通用軟件的界面設(shè)計(jì)強(qiáng)調(diào)信息傳遞與交互操作的效率，而學(xué)習(xí)資源的界面設(shè)計(jì)則更關(guān)注如何在交互的過程中促進(jìn)學(xué)習(xí)認(rèn)知與降低認(rèn)知負(fù)荷，效率問題則在其次。

除此之外，信息技術(shù)的發(fā)展也對學(xué)習(xí)資源的界面開發(fā)提出了更高的要求。近年來，各種新式的學(xué)習(xí)設(shè)備不斷涌現(xiàn)（如智能手機(jī)、平板電腦等），但在硬件方面（屏幕尺寸、分辨率、外部按鈕等）缺乏統(tǒng)一的標(biāo)準(zhǔn)，加上操作系統(tǒng)（iOS、Android、Windows Phone等）的差異，有著完全不同的交互特性和界面設(shè)計(jì)理念。應(yīng)用環(huán)境的多樣性和技術(shù)環(huán)境的異構(gòu)性使得界面開發(fā)任務(wù)更加繁重，難度更大。

（二）學(xué)習(xí)資源界面開發(fā)的現(xiàn)狀

學(xué)習(xí)資源界面的開發(fā)缺少通用的、標(biāo)準(zhǔn)化的方法。網(wǎng)絡(luò)學(xué)習(xí)資源的建設(shè)已有多種國際化標(biāo)準(zhǔn)，如SCORM、LOM等。這些標(biāo)準(zhǔn)在學(xué)習(xí)資源的內(nèi)容封裝、組織結(jié)構(gòu)、元數(shù)據(jù)、排序與導(dǎo)航方法、LMS交互機(jī)制等方面制定了詳細(xì)的技術(shù)規(guī)范[8]，但在具體的界面設(shè)計(jì)和開發(fā)方面，卻沒有提供有效的處理方法。另外，學(xué)習(xí)資源的建設(shè)者多為一線教師或教育技術(shù)人員，比較熟悉教學(xué)內(nèi)容和教學(xué)設(shè)計(jì)方法，也具備一定的技術(shù)能力，卻并不了解界面設(shè)計(jì)領(lǐng)域的工作內(nèi)容和界面開發(fā)方法，普遍缺乏界面設(shè)計(jì)思想[9]。結(jié)果是許多學(xué)習(xí)資源和教學(xué)系統(tǒng)的界面交互性非常差，難以滿足有效學(xué)習(xí)的需求。如文本沒有進(jìn)行排版和結(jié)構(gòu)化處理、布局不合理、色彩搭配問題、缺乏一致性、字體過大（或過?。⒔换ピO(shè)計(jì)不符合用戶習(xí)慣等。因此，如何提供有效的界面開發(fā)方法，幫助學(xué)習(xí)資源建設(shè)者解決界面設(shè)計(jì)需求與技術(shù)實(shí)現(xiàn)上的困難，是提升界面質(zhì)量、讓學(xué)習(xí)資源真正用到實(shí)處的一個(gè)關(guān)鍵問題。

三、常用的界面開發(fā)方法

界面開發(fā)是一項(xiàng)復(fù)雜、繁瑣和費(fèi)時(shí)的工作，開發(fā)者需要有效的界面開發(fā)方法和工具來輔助建模和實(shí)現(xiàn)。從早期的用戶界面管理系統(tǒng)，到目前比較流行的用戶界面模式[10]，人機(jī)交互領(lǐng)域的研究者做了大量的探索與實(shí)踐。目前比較常用的界面開發(fā)方法包括基于準(zhǔn)則的方法、基于模型的方法和基于模式的方法。

準(zhǔn)則也稱為原則或法則，是設(shè)計(jì)知識(shí)的歸納和總結(jié)。界面準(zhǔn)則能為界面開發(fā)者提供設(shè)計(jì)建議，比如人機(jī)交互領(lǐng)域的八項(xiàng)黃金法則[11]、教育技術(shù)領(lǐng)域的多媒體信息設(shè)計(jì)原則[12]等。在使用準(zhǔn)則開發(fā)人機(jī)界面時(shí)，缺乏經(jīng)驗(yàn)的開發(fā)者常常會(huì)遇到以下兩個(gè)問題：第一，準(zhǔn)則過于簡潔和抽象，難以理解，只包含設(shè)計(jì)知識(shí)，并沒有包含使用這些設(shè)計(jì)知識(shí)的經(jīng)驗(yàn)與方法；第二，準(zhǔn)則存在著局限性，可能不適用于所有的場景，一些不同的設(shè)計(jì)準(zhǔn)則甚至相互矛盾，如空間接近原則（Spatial Contiguity Principle）指出相關(guān)的圖像與文字鄰近呈現(xiàn)時(shí)學(xué)習(xí)效果更好[13]，但Kim等[14]的實(shí)驗(yàn)研究卻有不同的結(jié)論；在多媒體英語詞匯學(xué)習(xí)時(shí)，空間接近原則并沒有發(fā)揮明顯的作用，是否呈現(xiàn)與詞匯相關(guān)的圖像對學(xué)習(xí)效果并沒有顯著影響。對于缺乏設(shè)計(jì)知識(shí)與設(shè)計(jì)經(jīng)驗(yàn)的學(xué)習(xí)資源建設(shè)者來說，基于準(zhǔn)則的方法并不適用，相互矛盾的準(zhǔn)則讓他們更加迷惑。

界面模型的作用是表達(dá)界面中的概念、需求和構(gòu)成等，大致可以分為概念模型與陳述模型兩大類?；谀Ｐ偷姆椒ㄗ岄_發(fā)者將注意力集中在重要的概念和屬性上，而非具體的技術(shù)與實(shí)現(xiàn)細(xì)節(jié)。在界面開發(fā)過程中，開發(fā)者先創(chuàng)設(shè)基本模型，描述所有的任務(wù)需求與它們的結(jié)構(gòu)；再創(chuàng)設(shè)抽象的用戶模型，通過隱喻的方式重新定義基本模型中的任務(wù)，描述任務(wù)場景，構(gòu)造任務(wù)樹；最后通過整體布局設(shè)計(jì)、交互設(shè)計(jì)與細(xì)節(jié)設(shè)計(jì)生成具體的用戶界面[15]。然而，創(chuàng)建實(shí)例化更低層次模型是一項(xiàng)乏味且耗時(shí)的工作，特別是大部分工作需要手工完成[16]。近年來，各種新式交互設(shè)備不斷出現(xiàn)，人機(jī)界面開發(fā)的工作量激增，開發(fā)者更加注重開發(fā)的效率?；谀Ｐ偷姆椒ㄓ捎谄浞爆嵭院筒豢蓮?fù)用性，應(yīng)用范圍越來越窄。

模式的概念來源于建筑學(xué)，是對常見問題的通用解決方案。界面模式通過說明性的文字、案例、草圖等闡述人機(jī)界面的詳細(xì)設(shè)計(jì)方案，開發(fā)者在模式的指導(dǎo)下完成界面開發(fā)[17]?；谀Ｊ降姆椒ㄊ悄壳白罹呖捎眯缘囊环N界面開發(fā)方法，采用軟件復(fù)用的思想，提供抽象的、半抽象的或具體的建模信息[18]。開發(fā)者不需從頭開始設(shè)計(jì)界面，而是在界面模式的基礎(chǔ)上完成界面開發(fā)[19]。界面模式的應(yīng)用通常需要界面模式庫（Interface Pattern Library）的支持，模式庫用來存儲(chǔ)和組織界面模式，方便用戶檢索、選擇和使用[20]。在過去的十年中，研究者已經(jīng)設(shè)計(jì)、開發(fā)和出版了多種具有代表性的界面模式庫，如Designing Interfaces Patterns[21]、Patterns in Interaction Design[22]、Patterns for Creating Winning Web Sites[23]、Yahoo！ Design Pattern Library[24]等。這些模式庫存儲(chǔ)了大量有價(jià)值、可復(fù)用的界面模式，為通用人機(jī)界面的設(shè)計(jì)與開發(fā)提供了豐富的解決方案。

本文認(rèn)為，基于模式的方法更適用于學(xué)習(xí)資源的界面開發(fā)，因?yàn)椋孩?基于準(zhǔn)則的方法要求開發(fā)者具有豐富設(shè)計(jì)知識(shí)和設(shè)計(jì)經(jīng)驗(yàn)，基于模型的方法要求開發(fā)者具備精確的任務(wù)描述與抽象建模能力，而基于模式的方法對開發(fā)者的設(shè)計(jì)能力與設(shè)計(jì)經(jīng)驗(yàn)要求并不高；② 界面模式提供了豐富的上下文信息、設(shè)計(jì)知識(shí)和使用經(jīng)驗(yàn)，能有效減少具體界面設(shè)計(jì)與技術(shù)實(shí)現(xiàn)花費(fèi)的時(shí)間與精力，提高開發(fā)的效率和質(zhì)量。

四、學(xué)習(xí)資源界面模式庫

界面模式庫是界面模式應(yīng)用的基礎(chǔ)。本文設(shè)計(jì)了一個(gè)學(xué)習(xí)資源界面模式庫（簡稱LRIP），用于存儲(chǔ)適用于學(xué)習(xí)軟件或?qū)W習(xí)資源的界面模式。在建設(shè)模式庫之前，必須先明確庫中界面模式的組織方式、描述方法以及存儲(chǔ)機(jī)制，在此基礎(chǔ)上實(shí)現(xiàn)模式的檢索、獲取、比較、分享、評價(jià)等具體功能。

（一）模式的組織

不同的界面模式庫有不同的應(yīng)用領(lǐng)域和用戶群體，組織與分類的策略也不盡相同。通用型界面模式庫多按功能或設(shè)計(jì)元素分類，如Designing Interfaces Patterns和Patterns in Interaction Design，而專用型模式庫則采用針對性較強(qiáng)的分類設(shè)計(jì)，比如Yahoo！ Design Pattern Library，它的用途是保持雅虎網(wǎng)站設(shè)計(jì)的一致性和品牌體驗(yàn)，庫中僅包括最基本的五個(gè)類別（布局、導(dǎo)航、選擇、富交互和社會(huì)化）。

LRIP屬于專用模式庫，它的組織結(jié)構(gòu)設(shè)計(jì)既要從應(yīng)用領(lǐng)域出發(fā)，也要考慮用戶群體（學(xué)習(xí)資源建設(shè)者）的特點(diǎn)。LRIP的組織結(jié)構(gòu)如圖1，先按學(xué)習(xí)方式分類，再按設(shè)計(jì)元素分類。

不同的學(xué)習(xí)方式對應(yīng)著不同的學(xué)習(xí)環(huán)境與學(xué)習(xí)設(shè)備，界面設(shè)計(jì)考慮的重點(diǎn)也不一樣。如泛在學(xué)習(xí)環(huán)境下的界面設(shè)計(jì)要重點(diǎn)考慮如何適應(yīng)多種終端設(shè)備，而在移動(dòng)學(xué)習(xí)環(huán)境下，界面設(shè)計(jì)要重點(diǎn)考慮如何利用有限的屏幕空間與開發(fā)平臺(tái)的差異（如iOS與Android的基礎(chǔ)控件設(shè)計(jì)差異很大）。因此，LRIP按學(xué)習(xí)方式將界面模式劃分為網(wǎng)絡(luò)學(xué)習(xí)、泛在學(xué)習(xí)和移動(dòng)學(xué)習(xí)三類。學(xué)習(xí)方式的下一層是界面設(shè)計(jì)元素，根據(jù)學(xué)習(xí)資源的內(nèi)容和呈現(xiàn)特點(diǎn)，定義了十個(gè)類別：組合模式、布局（Layout）、導(dǎo)航（Navigation）、搜索（Search）、輸入（Input）、靜態(tài)呈現(xiàn)（Static Presentation）、動(dòng)態(tài)呈現(xiàn)（Dynamic Presentation）、列表（List）、色彩（Color）和地圖（Map）。設(shè)計(jì)元素的下一層為具體的界面模式。

在使用模式進(jìn)行界面開發(fā)時(shí)，需要開發(fā)者選擇多個(gè)模式（設(shè)計(jì)元素）整合成具體的界面。對于缺乏設(shè)計(jì)經(jīng)驗(yàn)的學(xué)習(xí)資源建設(shè)者來說，完成這一任務(wù)可能會(huì)有困難。因此，LRIP在設(shè)計(jì)元素這一層次中新增了一類組合模式，將多個(gè)模式（子模式）有機(jī)地整合起來，為用戶提供一套完整的界面解決方案。

（二）模式的描述與存儲(chǔ)

模式的描述方法對于模式的組織、共享、檢索、比較和使用都十分重要，LRIP使用擴(kuò)充后的PLML（Pattern Language Markup Language）語言描述庫中的界面模式。PLML是一種通用的界面模式描述語言，有17個(gè)具體的描述性元素，能描述模式的名字、案例、場景、上下文、代碼等信息[25]。為了支持LRIP中的組合模式，我們對PLML語言進(jìn)行了擴(kuò)充，新增了Sub-patterns元素，用來描述組合模式對應(yīng)的子模式集合。

LRIP使用XML（Extensible Markup Language）文件來存儲(chǔ)界面模式的描述信息。XML是一種可擴(kuò)展標(biāo)記語言，具備結(jié)構(gòu)化特征，允許用戶自定義元素標(biāo)記，支持編程解析，其純文本格式十分適合網(wǎng)絡(luò)傳輸。將界面模式存儲(chǔ)在XML文件中，有利于模式的共享、檢索、選擇和管理。以下是一個(gè)組合模式UG001的部分代碼：

UG001<！—模式在庫中的唯一編號(hào)-->

課程PPT播放頁面，基于HTML5技術(shù)，支持多種設(shè)備上的自適應(yīng)呈現(xiàn)……使用HTML5技術(shù)提供的新標(biāo)簽，流式布局，色彩搭配上采用冷色系（綠藍(lán)白）通過響應(yīng)式設(shè)計(jì)實(shí)現(xiàn)自適應(yīng)呈現(xiàn)。下面是對界面設(shè)計(jì)原理與設(shè)計(jì)細(xì)節(jié)的詳述……

……<！--代碼段1-->

……<！--代碼段2-->

……<！—其他代碼-->

<！—子模式集 -->

<！—子模式UL001 -->

UL001

<！—子模式US001 -->

US001

……<！—后面是其他子模式-->

……<！—后面是其他元素的描述-->

五、基于模式的學(xué)習(xí)資源界面開發(fā)方法

基于模式的界面開發(fā)方法包括四個(gè)基本步驟：任務(wù)描述、模式選取、具體界面設(shè)計(jì)和技術(shù)實(shí)現(xiàn)。在進(jìn)行界面設(shè)計(jì)之前，開發(fā)者需要先確定界面對應(yīng)的任務(wù)，撰寫任務(wù)描述。標(biāo)準(zhǔn)的任務(wù)描述包括上下文信息、應(yīng)用場景和基本的功能需求。更細(xì)致一些的任務(wù)描述還包括交互結(jié)構(gòu)的定義（靜態(tài)操作與動(dòng)態(tài)操作的對話模型）和性能需求（響應(yīng)時(shí)間、操作步驟等）。缺乏經(jīng)驗(yàn)的開發(fā)者可能無法寫出完整和細(xì)致的任務(wù)描述，可以參考界面模式的Problem元素（用于問題描述）和Context元素（用于場景描述）。確定界面任務(wù)后，從模式庫選取最適合的界面模式。有兩種選取策略：一種是根據(jù)任務(wù)描述中出現(xiàn)的應(yīng)用領(lǐng)域與設(shè)計(jì)元素選擇多個(gè)對應(yīng)的子模式；另一種是選取與任務(wù)描述最為接近的組合模式。完成模式選取后，開發(fā)者借鑒模式提供的設(shè)計(jì)思路、設(shè)計(jì)細(xì)節(jié)、技術(shù)描述等，完成具體界面設(shè)計(jì)和技術(shù)實(shí)現(xiàn)。下面通過兩個(gè)實(shí)際案例展示方法的詳細(xì)流程和細(xì)節(jié)。

（一）移動(dòng)學(xué)習(xí)資源界面設(shè)計(jì)案例

任務(wù)描述：在智能手機(jī)上呈現(xiàn)課程的概念圖。

模式選?。焊拍顖D的圖像尺寸比較大，內(nèi)部的細(xì)節(jié)信息較多，通過等比縮放顯示在手機(jī)屏幕上很難看清楚，而放大圖像，然后拖動(dòng)瀏覽的形式不能很好地呈現(xiàn)概念圖的整體結(jié)構(gòu)。本例選取“移動(dòng)學(xué)習(xí)”類別下的靜態(tài)呈現(xiàn)模式MSP003，使用Overview+Detail可視化技術(shù)，設(shè)計(jì)思路與細(xì)節(jié)可以參考圖2。在屏幕的右上角提供了一個(gè)Overview視圖，其他空間呈現(xiàn)放大后的細(xì)節(jié)（Detail視圖），拖動(dòng)Overview視圖中的導(dǎo)航框可以瀏覽整個(gè)圖像。

圖2 MSP003模式的界面實(shí)例

具體界面設(shè)計(jì)：開發(fā)者根據(jù)模式提供的設(shè)計(jì)思路和學(xué)習(xí)資源的具體需求完成設(shè)計(jì)。

技術(shù)實(shí)現(xiàn)：移動(dòng)設(shè)備的平臺(tái)與開發(fā)工具差異較大，界面模式無法提供具體的程序代碼。開發(fā)者根據(jù)使用的移動(dòng)平臺(tái)自行完成技術(shù)實(shí)現(xiàn)。

（二）泛在學(xué)習(xí)資源界面設(shè)計(jì)的案例

任務(wù)描述：網(wǎng)站上課程的電子幻燈片（PPT）播放頁面，能以自適應(yīng)方式支持多種設(shè)備訪問。

模式選?。罕纠x擇“泛在學(xué)習(xí)”類別下的組合模式UG001來完成界面的開發(fā)。UG001采用HTML5技術(shù)，能在計(jì)算機(jī)和移動(dòng)設(shè)備（平板電腦、智能手機(jī)）上以自適應(yīng)的方式播放電子幻燈片。UG001由多個(gè)子模式組成：一個(gè)Layout模式（整體布局），兩個(gè)不相同的Navigation模式（上方導(dǎo)航欄和側(cè)方導(dǎo)航欄），一個(gè)Search模式（搜索框）和一個(gè)Dynamic Presentation模式（幻燈片播放控件）。UG001在PC上的界面如圖3所示，圖中的文本框標(biāo)識(shí)了對應(yīng)的子模式。

具體界面設(shè)計(jì)：完成模式選取后，可以調(diào)整組合模式UG001中的子模式，再進(jìn)行具體界面設(shè)計(jì)。如模式UG001中使用的Search模式（搜索框）比較簡潔，開發(fā)者可以在模式庫中選擇其他Search模式進(jìn)行替換（如圖5）。新的Search模式有豐富的提示信息，并提供快速檢索功能。

圖5 兩種Search子模式

技術(shù)實(shí)現(xiàn)： UG001提供了界面設(shè)計(jì)的思想與技術(shù)細(xì)節(jié)，包括布局設(shè)計(jì)、交互設(shè)計(jì)與色彩搭配設(shè)計(jì)的設(shè)計(jì)思路，也提供了一些核心的代碼片段，如HTML5中新語義元素的使用樣例、響應(yīng)式設(shè)計(jì)的實(shí)現(xiàn)方法、JQuery實(shí)現(xiàn)導(dǎo)航按鈕和下拉菜單的代碼等。界面開發(fā)者可以參考這些內(nèi)容進(jìn)行技術(shù)實(shí)現(xiàn)。

六、總結(jié)與展望

優(yōu)質(zhì)網(wǎng)絡(luò)學(xué)習(xí)資源既要有優(yōu)質(zhì)的學(xué)習(xí)內(nèi)容，也要有高質(zhì)量的人機(jī)界面。對于界面設(shè)計(jì)能力相對欠缺的開發(fā)者來說，為之提供標(biāo)準(zhǔn)化、結(jié)構(gòu)化、可復(fù)用的界面模式，不但能提升界面開發(fā)的效率，在設(shè)計(jì)質(zhì)量上也有一定的保障。另外，在使用界面模式的過程中，開發(fā)者可以從模式的描述信息中獲取界面設(shè)計(jì)原理與技術(shù)實(shí)現(xiàn)細(xì)節(jié)，既能積累設(shè)計(jì)經(jīng)驗(yàn)，也能學(xué)習(xí)更多的設(shè)計(jì)知識(shí)。所介紹的模式庫LRIP尚處于初建階段，在模式種類及功能上也有較大的提升空間，需要進(jìn)一步完善模式庫的架構(gòu)設(shè)計(jì)，添加更多的模式素材。

[參考文獻(xiàn)]

[1] 盧鋒，李青，曹梅，劉振波. 美國教育技術(shù)界學(xué)習(xí)資源觀的發(fā)展及其啟示[J]. 電化教育研究，2001，（07）：23-26.

[2] 陳時(shí)見，王沖. 論網(wǎng)絡(luò)學(xué)習(xí)資源的意義、功能與類型[J]. 電化教育研究，2003，（10）：50-54.

[3] Hillman， D.C.A.， Willis， D.J.， Gunawardena， C.N. Learner-interface interaction in distance education： an extension of contemporary models and strategies for practitioners[J]. American Journal of Distance Education，1994，8（2）：30-42.

[4] 陳麗，劉慧瓊. 媒體界面交互性設(shè)計(jì)的流程和原則[J]. 中國遠(yuǎn)程教育，2006，（4）：22-30.

[5] 王娟，劉名卓， 祝智庭. 高校精品課程應(yīng)用調(diào)查及其對精品資源共享課建設(shè)的啟示[J]. 中國電化教育，2013，（12）：40-46.

[6][17] Wendler，S.， Philippow，I. Requirements for a Definition of generative User Interface Patterns[A]. Proceeding of 15th International Conference on Human-Computer Interaction[C]. USA： Springer Berlin Heidelberg， 2013： 510-520.

[7] Perry， G.T.， Schnaid， F. A case study on the design of learning interfaces[J]. Computers & Education， 2012， 59（2）： 722-731.

[8] 楊現(xiàn)民，余勝泉. 泛在學(xué)習(xí)環(huán)境下的學(xué)習(xí)資源信息模型構(gòu)建[J]. 中國電化教育，2010，（9）：72-78.

[9] Squires， D. Usability and educational software design： special issue of interacting with computers[J]. Interacting with Computers， 1999， 11（5）： 463-466.

[10][15] Wendler S.， Ammon D.， Kikova T.， et al. Development of Graphical User Interfaces based on User Interface Patterns[A]. The Fourth International Conferences on Pervasive Patterns and Applications[C]. Nice： XPS， 2012： 57-66.

[11] Shneiderman B.， Plaisant C. 用戶界面設(shè)計(jì)：有效的人機(jī)交互策略[M]. 北京：電子工業(yè)出版社，2006.

[12][13] 理查德·E·邁耶. 多媒體學(xué)習(xí)[M]. 北京：商務(wù)印書館，2006.

[14] Kim D.， Kim D.J. Effect of screen size on multimedia vocabulary learning[J]. British Journal of Educational Technology， 2012， 43（1）： 62-70.

[16] Ahmed S.， Ashraf G. Model-based user interface engineering with design patterns[J]. Journal of Systems and Software， 2007， 80（8）： 1408-1422.

[18][20] Engel J.， Herdin C.， Maertin C. Exploiting HCI Pattern Collections for User Interface Generation[A]. The Fourth International Conferences on Pervasive Patterns and Applications[C]. Nice： XPS， 2012：36-44.

[19] Dearden A.， Finlay J. Pattern languages in HCI： A critical review[J]. Human computer interaction， 2006， 21（1）： 49-102.

[21] Tidwell， J. Designing Interfaces， Patterns for Effective Interaction Design[EB/OL]. [2014-06-12]. http：//www.designinginterfaces.com.

[22] van Welie， M. Patterns in Interaction Design[EB/OL]. [2014-06-12]. http：//www.welie.com.

[23] van Duyne， D.， Landay J.， Hong J. The Design of Sites， Patterns for Creating Winning Websites[M]. Indiana： Prentice Hall International， 2006.

[24] Yahoo！ Inc. Yahoo！ Design Pattern Library[EB/OL]. [2014-06-12]. http：//developer.yahoo.com/ypatterns.

[25] Sally Fincher. PLML： Pattern Language Markup Language[EB/OL]. [2014-06-12]. http：//www.cs.kent.ac.uk/people/staff/saf/patterns/plml.html.

收稿日期：2014-09-30

作者簡介：趙玉，講師，碩士，廣東行政職業(yè)學(xué)院電子信息系（510800）。

司國東，講師，碩士，華南農(nóng)業(yè)大學(xué)信息學(xué)院（510642）。

責(zé)任編輯 日 新

責(zé)任校對 日 新