網(wǎng)絡學習資源的界面開發(fā)方法研究
2015-09-10 07:22:44趙玉司國東
中國遠程教育 2015年1期
趙玉 司國東
【摘 要】
界面是學習者與網(wǎng)絡學習資源間信息交互的主要通道，對學習效果有著至關重要的影響。但從國內網(wǎng)絡精品課程與精品資源的應用現(xiàn)狀看，界面設計不完善的問題仍然比較常見，一個主要的原因是資源建設者缺乏有效的界面開發(fā)方法。本文分析了學習資源界面開發(fā)的難點，給出了一種基于模式的網(wǎng)絡學習資源界面開發(fā)方法，并通過實例展示了界面開發(fā)的詳細過程。
【關鍵詞】 網(wǎng)絡學習資源；界面開發(fā)；界面模式
【中圖分類號】 G434 【文獻標識碼】 A 【文章編號】 1009—458x（2015）01—0065—06
一、引言
學習資源是教育技術的兩大研究對象之一。美國教育傳播與技術協(xié)會（AECT）（1994）界定了廣義的學習資源概念——支持學習所用到的全部資源，如軟硬件支持系統(tǒng)、教學材料與環(huán)境等[1]。隨著遠程教育的快速發(fā)展，對學習資源這一概念的理解也發(fā)生了變化。我們討論的學習資源特指網(wǎng)絡學習資源，即學習者利用網(wǎng)絡手段開展學習活動所需的各種網(wǎng)絡信息資源[2]。近十年來，教育技術領域的研究者在網(wǎng)絡學習資源的發(fā)展趨勢、技術標準、應用模式、組織結構、開發(fā)方法等方面展開了細致的研究，但在學習資源的界面設計與開發(fā)方面，由于涉及教育學、認知心理學、人機交互、藝術設計等多個學科，有針對性的研究還比較少。
網(wǎng)絡學習資源的人機界面是學習者與學習內容間信息交互的主通道[3]。學習者通過界面訪問學習資源，獲取知識和信息。界面的質量直接決定了學習交互的質量，對學習效果有著至關重要的影響。從目前國內網(wǎng)絡學習資源的建設現(xiàn)狀看，界面設計不完善的現(xiàn)象仍然比較常見[4]。研究表明，界面問題已經(jīng)成為影響我國網(wǎng)絡精品課程和資源應用的一個主要因 素[5]。
二、學習資源界面開發(fā)的難點與現(xiàn)狀
（一）學習資源界面開發(fā)的難點
界面設計是學習資源界面開發(fā)的主要難點。通用軟件的界面設計有三個基本需求[6]：① 提供充足的交互方法，讓用戶通過界面能訪問到軟件的邏輯層和數(shù)據(jù)層；② 使用圖形化、可視化設計，提供高效的交互機制，讓用戶的工作更有效率；③ 考慮未來可能產生的新需求。學習資源的界面設計首先要滿足這些基本需求，同時也要考慮資源使用過程中的“教與學”問題[7]?！敖獭睆娬{了資源的內容設計（教學設計），而“學”則強調了資源的界面設計。另外，通用軟件的界面設計強調信息傳遞與交互操作的效率，而學習資源的界面設計則更關注如何在交互的過程中促進學習認知與降低認知負荷，效率問題則在其次。
除此之外，信息技術的發(fā)展也對學習資源的界面開發(fā)提出了更高的要求。近年來，各種新式的學習設備不斷涌現(xiàn)（如智能手機、平板電腦等），但在硬件方面（屏幕尺寸、分辨率、外部按鈕等）缺乏統(tǒng)一的標準，加上操作系統(tǒng)（iOS、Android、Windows Phone等）的差異，有著完全不同的交互特性和界面設計理念。應用環(huán)境的多樣性和技術環(huán)境的異構性使得界面開發(fā)任務更加繁重，難度更大。
（二）學習資源界面開發(fā)的現(xiàn)狀
學習資源界面的開發(fā)缺少通用的、標準化的方法。網(wǎng)絡學習資源的建設已有多種國際化標準，如SCORM、LOM等。這些標準在學習資源的內容封裝、組織結構、元數(shù)據(jù)、排序與導航方法、LMS交互機制等方面制定了詳細的技術規(guī)范[8]，但在具體的界面設計和開發(fā)方面，卻沒有提供有效的處理方法。另外，學習資源的建設者多為一線教師或教育技術人員，比較熟悉教學內容和教學設計方法，也具備一定的技術能力，卻并不了解界面設計領域的工作內容和界面開發(fā)方法，普遍缺乏界面設計思想[9]。結果是許多學習資源和教學系統(tǒng)的界面交互性非常差，難以滿足有效學習的需求。如文本沒有進行排版和結構化處理、布局不合理、色彩搭配問題、缺乏一致性、字體過大（或過小）、交互設計不符合用戶習慣等。因此，如何提供有效的界面開發(fā)方法，幫助學習資源建設者解決界面設計需求與技術實現(xiàn)上的困難，是提升界面質量、讓學習資源真正用到實處的一個關鍵問題。
三、常用的界面開發(fā)方法
界面開發(fā)是一項復雜、繁瑣和費時的工作，開發(fā)者需要有效的界面開發(fā)方法和工具來輔助建模和實現(xiàn)。從早期的用戶界面管理系統(tǒng)，到目前比較流行的用戶界面模式[10]，人機交互領域的研究者做了大量的探索與實踐。目前比較常用的界面開發(fā)方法包括基于準則的方法、基于模型的方法和基于模式的方法。
準則也稱為原則或法則，是設計知識的歸納和總結。界面準則能為界面開發(fā)者提供設計建議，比如人機交互領域的八項黃金法則[11]、教育技術領域的多媒體信息設計原則[12]等。在使用準則開發(fā)人機界面時，缺乏經(jīng)驗的開發(fā)者常常會遇到以下兩個問題：第一，準則過于簡潔和抽象，難以理解，只包含設計知識，并沒有包含使用這些設計知識的經(jīng)驗與方法；第二，準則存在著局限性，可能不適用于所有的場景，一些不同的設計準則甚至相互矛盾，如空間接近原則（Spatial Contiguity Principle）指出相關的圖像與文字鄰近呈現(xiàn)時學習效果更好[13]，但Kim等[14]的實驗研究卻有不同的結論；在多媒體英語詞匯學習時，空間接近原則并沒有發(fā)揮明顯的作用，是否呈現(xiàn)與詞匯相關的圖像對學習效果并沒有顯著影響。對于缺乏設計知識與設計經(jīng)驗的學習資源建設者來說，基于準則的方法并不適用，相互矛盾的準則讓他們更加迷惑。
界面模型的作用是表達界面中的概念、需求和構成等，大致可以分為概念模型與陳述模型兩大類?；谀Ｐ偷姆椒ㄗ岄_發(fā)者將注意力集中在重要的概念和屬性上，而非具體的技術與實現(xiàn)細節(jié)。在界面開發(fā)過程中，開發(fā)者先創(chuàng)設基本模型，描述所有的任務需求與它們的結構；再創(chuàng)設抽象的用戶模型，通過隱喻的方式重新定義基本模型中的任務，描述任務場景，構造任務樹；最后通過整體布局設計、交互設計與細節(jié)設計生成具體的用戶界面[15]。然而，創(chuàng)建實例化更低層次模型是一項乏味且耗時的工作，特別是大部分工作需要手工完成[16]。近年來，各種新式交互設備不斷出現(xiàn)，人機界面開發(fā)的工作量激增，開發(fā)者更加注重開發(fā)的效率?；谀Ｐ偷姆椒ㄓ捎谄浞爆嵭院筒豢蓮陀眯?，應用范圍越來越窄。
模式的概念來源于建筑學，是對常見問題的通用解決方案。界面模式通過說明性的文字、案例、草圖等闡述人機界面的詳細設計方案，開發(fā)者在模式的指導下完成界面開發(fā)[17]?；谀Ｊ降姆椒ㄊ悄壳白罹呖捎眯缘囊环N界面開發(fā)方法，采用軟件復用的思想，提供抽象的、半抽象的或具體的建模信息[18]。開發(fā)者不需從頭開始設計界面，而是在界面模式的基礎上完成界面開發(fā)[19]。界面模式的應用通常需要界面模式庫（Interface Pattern Library）的支持，模式庫用來存儲和組織界面模式，方便用戶檢索、選擇和使用[20]。在過去的十年中，研究者已經(jīng)設計、開發(fā)和出版了多種具有代表性的界面模式庫，如Designing Interfaces Patterns[21]、Patterns in Interaction Design[22]、Patterns for Creating Winning Web Sites[23]、Yahoo！ Design Pattern Library[24]等。這些模式庫存儲了大量有價值、可復用的界面模式，為通用人機界面的設計與開發(fā)提供了豐富的解決方案。
本文認為，基于模式的方法更適用于學習資源的界面開發(fā)，因為：① 基于準則的方法要求開發(fā)者具有豐富設計知識和設計經(jīng)驗，基于模型的方法要求開發(fā)者具備精確的任務描述與抽象建模能力，而基于模式的方法對開發(fā)者的設計能力與設計經(jīng)驗要求并不高；② 界面模式提供了豐富的上下文信息、設計知識和使用經(jīng)驗，能有效減少具體界面設計與技術實現(xiàn)花費的時間與精力，提高開發(fā)的效率和質量。
四、學習資源界面模式庫
界面模式庫是界面模式應用的基礎。本文設計了一個學習資源界面模式庫（簡稱LRIP），用于存儲適用于學習軟件或學習資源的界面模式。在建設模式庫之前，必須先明確庫中界面模式的組織方式、描述方法以及存儲機制，在此基礎上實現(xiàn)模式的檢索、獲取、比較、分享、評價等具體功能。
（一）模式的組織
不同的界面模式庫有不同的應用領域和用戶群體，組織與分類的策略也不盡相同。通用型界面模式庫多按功能或設計元素分類，如Designing Interfaces Patterns和Patterns in Interaction Design，而專用型模式庫則采用針對性較強的分類設計，比如Yahoo！ Design Pattern Library，它的用途是保持雅虎網(wǎng)站設計的一致性和品牌體驗，庫中僅包括最基本的五個類別（布局、導航、選擇、富交互和社會化）。
LRIP屬于專用模式庫，它的組織結構設計既要從應用領域出發(fā)，也要考慮用戶群體（學習資源建設者）的特點。LRIP的組織結構如圖1，先按學習方式分類，再按設計元素分類。
不同的學習方式對應著不同的學習環(huán)境與學習設備，界面設計考慮的重點也不一樣。如泛在學習環(huán)境下的界面設計要重點考慮如何適應多種終端設備，而在移動學習環(huán)境下，界面設計要重點考慮如何利用有限的屏幕空間與開發(fā)平臺的差異（如iOS與Android的基礎控件設計差異很大）。因此，LRIP按學習方式將界面模式劃分為網(wǎng)絡學習、泛在學習和移動學習三類。學習方式的下一層是界面設計元素，根據(jù)學習資源的內容和呈現(xiàn)特點，定義了十個類別：組合模式、布局（Layout）、導航（Navigation）、搜索（Search）、輸入（Input）、靜態(tài)呈現(xiàn)（Static Presentation）、動態(tài)呈現(xiàn)（Dynamic Presentation）、列表（List）、色彩（Color）和地圖（Map）。設計元素的下一層為具體的界面模式。
在使用模式進行界面開發(fā)時，需要開發(fā)者選擇多個模式（設計元素）整合成具體的界面。對于缺乏設計經(jīng)驗的學習資源建設者來說，完成這一任務可能會有困難。因此，LRIP在設計元素這一層次中新增了一類組合模式，將多個模式（子模式）有機地整合起來，為用戶提供一套完整的界面解決方案。
（二）模式的描述與存儲
模式的描述方法對于模式的組織、共享、檢索、比較和使用都十分重要，LRIP使用擴充后的PLML（Pattern Language Markup Language）語言描述庫中的界面模式。PLML是一種通用的界面模式描述語言，有17個具體的描述性元素，能描述模式的名字、案例、場景、上下文、代碼等信息[25]。為了支持LRIP中的組合模式，我們對PLML語言進行了擴充，新增了Sub-patterns元素，用來描述組合模式對應的子模式集合。
LRIP使用XML（Extensible Markup Language）文件來存儲界面模式的描述信息。XML是一種可擴展標記語言，具備結構化特征，允許用戶自定義元素標記，支持編程解析，其純文本格式十分適合網(wǎng)絡傳輸。將界面模式存儲在XML文件中，有利于模式的共享、檢索、選擇和管理。以下是一個組合模式UG001的部分代碼：
UG001<！—模式在庫中的唯一編號-->
課程PPT播放頁面，基于HTML5技術，支持多種設備上的自適應呈現(xiàn)……
……<！--代碼段1-->
……<！--代碼段2-->
……<！—其他代碼-->
<！—子模式UL001 -->
UL001
<！—子模式US001 -->
US001
……<！—后面是其他子模式-->
……<！—后面是其他元素的描述-->
五、基于模式的學習資源界面開發(fā)方法
基于模式的界面開發(fā)方法包括四個基本步驟：任務描述、模式選取、具體界面設計和技術實現(xiàn)。在進行界面設計之前，開發(fā)者需要先確定界面對應的任務，撰寫任務描述。標準的任務描述包括上下文信息、應用場景和基本的功能需求。更細致一些的任務描述還包括交互結構的定義（靜態(tài)操作與動態(tài)操作的對話模型）和性能需求（響應時間、操作步驟等）。缺乏經(jīng)驗的開發(fā)者可能無法寫出完整和細致的任務描述，可以參考界面模式的Problem元素（用于問題描述）和Context元素（用于場景描述）。確定界面任務后，從模式庫選取最適合的界面模式。有兩種選取策略：一種是根據(jù)任務描述中出現(xiàn)的應用領域與設計元素選擇多個對應的子模式；另一種是選取與任務描述最為接近的組合模式。完成模式選取后，開發(fā)者借鑒模式提供的設計思路、設計細節(jié)、技術描述等，完成具體界面設計和技術實現(xiàn)。下面通過兩個實際案例展示方法的詳細流程和細節(jié)。
（一）移動學習資源界面設計案例
任務描述：在智能手機上呈現(xiàn)課程的概念圖。
模式選取：概念圖的圖像尺寸比較大，內部的細節(jié)信息較多，通過等比縮放顯示在手機屏幕上很難看清楚，而放大圖像，然后拖動瀏覽的形式不能很好地呈現(xiàn)概念圖的整體結構。本例選取“移動學習”類別下的靜態(tài)呈現(xiàn)模式MSP003，使用Overview+Detail可視化技術，設計思路與細節(jié)可以參考圖2。在屏幕的右上角提供了一個Overview視圖，其他空間呈現(xiàn)放大后的細節(jié)（Detail視圖），拖動Overview視圖中的導航框可以瀏覽整個圖像。
圖2 MSP003模式的界面實例
具體界面設計：開發(fā)者根據(jù)模式提供的設計思路和學習資源的具體需求完成設計。
技術實現(xiàn)：移動設備的平臺與開發(fā)工具差異較大，界面模式無法提供具體的程序代碼。開發(fā)者根據(jù)使用的移動平臺自行完成技術實現(xiàn)。
（二）泛在學習資源界面設計的案例
任務描述：網(wǎng)站上課程的電子幻燈片（PPT）播放頁面，能以自適應方式支持多種設備訪問。
模式選?。罕纠x擇“泛在學習”類別下的組合模式UG001來完成界面的開發(fā)。UG001采用HTML5技術，能在計算機和移動設備（平板電腦、智能手機）上以自適應的方式播放電子幻燈片。UG001由多個子模式組成：一個Layout模式（整體布局），兩個不相同的Navigation模式（上方導航欄和側方導航欄），一個Search模式（搜索框）和一個Dynamic Presentation模式（幻燈片播放控件）。UG001在PC上的界面如圖3所示，圖中的文本框標識了對應的子模式。
具體界面設計：完成模式選取后，可以調整組合模式UG001中的子模式，再進行具體界面設計。如模式UG001中使用的Search模式（搜索框）比較簡潔，開發(fā)者可以在模式庫中選擇其他Search模式進行替換（如圖5）。新的Search模式有豐富的提示信息，并提供快速檢索功能。
圖5 兩種Search子模式
技術實現(xiàn)： UG001提供了界面設計的思想與技術細節(jié)，包括布局設計、交互設計與色彩搭配設計的設計思路，也提供了一些核心的代碼片段，如HTML5中新語義元素的使用樣例、響應式設計的實現(xiàn)方法、JQuery實現(xiàn)導航按鈕和下拉菜單的代碼等。界面開發(fā)者可以參考這些內容進行技術實現(xiàn)。
六、總結與展望
優(yōu)質網(wǎng)絡學習資源既要有優(yōu)質的學習內容，也要有高質量的人機界面。對于界面設計能力相對欠缺的開發(fā)者來說，為之提供標準化、結構化、可復用的界面模式，不但能提升界面開發(fā)的效率，在設計質量上也有一定的保障。另外，在使用界面模式的過程中，開發(fā)者可以從模式的描述信息中獲取界面設計原理與技術實現(xiàn)細節(jié)，既能積累設計經(jīng)驗，也能學習更多的設計知識。所介紹的模式庫LRIP尚處于初建階段，在模式種類及功能上也有較大的提升空間，需要進一步完善模式庫的架構設計，添加更多的模式素材。
[參考文獻]
[1] 盧鋒，李青，曹梅，劉振波. 美國教育技術界學習資源觀的發(fā)展及其啟示[J]. 電化教育研究，2001，（07）：23-26.
[2] 陳時見，王沖. 論網(wǎng)絡學習資源的意義、功能與類型[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] 陳麗，劉慧瓊. 媒體界面交互性設計的流程和原則[J]. 中國遠程教育，2006，（4）：22-30.
[5] 王娟，劉名卓， 祝智庭. 高校精品課程應用調查及其對精品資源共享課建設的啟示[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)民，余勝泉. 泛在學習環(huán)境下的學習資源信息模型構建[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. 用戶界面設計：有效的人機交互策略[M]. 北京：電子工業(yè)出版社，2006.
[12][13] 理查德·E·邁耶. 多媒體學習[M]. 北京：商務印書館，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è)學院電子信息系（510800）。
司國東，講師，碩士，華南農業(yè)大學信息學院（510642）。
責任編輯 日 新
責任校對 日 新
