利用桌面式網站革新網絡學習平臺的用戶體驗*

胡世清 林子華 郭超群

（深圳大學 師范學院教育信息技術系，廣東深圳 518060）

利用桌面式網站革新網絡學習平臺的用戶體驗*

胡世清 林子華 郭超群

（深圳大學 師范學院教育信息技術系，廣東深圳 518060）

影響基于網頁系統的網絡學習實效性的主要因素是用戶體驗問題，Windows桌面系統的用戶體驗完全優于網頁系統，利用RIA的Silverlight新技術可以成功地將桌面用戶體驗在網頁系統中實現。文章利用Silverlight技術實現了桌面式網站的架構組成設計、網頁內容的XPS呈現設計、網頁鼠標多態交互設計和網站實時在線更新與維護設計等，并將桌面式網站應用于網絡學習系統，有效地解決了網絡學習的用戶體驗問題。

網絡學習平臺；用戶體驗；RIA；桌面式網站

伴隨著技術的進步，學習的革命不斷發生，從傳統的基于黑板的課堂教學，到基于電視的遠程教學，到基于PPT加投影的計算機多媒體教學，再到今天的基于網絡學習平臺的網絡學習，技術不斷促進學習方式的變革。特別是隨著互聯網的出現和發展，產生了網絡課程、網絡學習社區、MOOC、微課等眾多網絡學習概念，網絡學習已得到廣泛認可。

盡管網絡學習已被廣泛地接受和使用，但網絡學習的實效并不夠理想，其主要問題出在技術方面。隨著計算機和網絡技術的飛速發展，硬件已經越來越不是問題了。影響網絡學習實效性的主要問題是軟件方面的問題，包括資源問題和平臺問題。就軟件平臺問題而言，又可分為功能問題和用戶體驗問題——功能問題關系到平臺是否可用；用戶體驗問題關系到平臺是否好用，決定學習者是否愿意用、是否喜歡用，進一步決定學習者是否有興趣參加網絡學習。當今，網絡學習平臺的功能已經基本完善，但用戶體驗方面不盡如人意，究其原因，主要是沒有理想的技術來支持和改善網絡學習平臺用戶的體驗。新的RIA網絡技術的出現，提供了改善網頁用戶體驗的技術手段，使通過技術手段改善網絡學習平臺的用戶體驗成為可能。

一 網絡學習與用戶體驗

1 用戶體驗與計算機用戶體驗

“用戶體驗（User Experience，UE）是一種純主觀的用戶在使用產品過程中建立起來的感受”，“通俗來講就是‘這個東西好不好用，用起來方不方便’”[1]。這個概念適用于任何產品。

計算機用戶體驗則是指用戶在使用計算機過程中的主觀感受。計算機的使用主要是通過輸入和輸出設備實現的，因此計算機的用戶體驗主要表現為信息的呈現方式和人機的交互方式，即計算機用戶體驗包括感官體驗和交互體驗。另外，也包括用戶對信息持續性更新的需求等。

2 兩種計算機系統的用戶體驗及發展

當今計算機系統的使用，主要有桌面系統和網頁系統兩種方式，它們各自發展。

1985年Windows 1的誕生具有劃時代的意義，從此開始了計算機圖形操作界面的體驗，但Windows 1交互仍主要依賴鍵盤，鼠標還不是標配。1990年Windows 3發布，設計了全新的窗口交互界面，以窗口方式呈現應用，以鼠標和鍵盤操作窗口元素。1995年Windows 95發布，Windows系統發生了質的變化，它的重大突破是專注于桌面，并為所有應用添加了圖標，鼠標可以更加靈活地操作圖標和窗口。2001年Windows XP發布，設計了全新的開始菜單。2006年Windows Vista發布，它帶來了高亮質感、玻璃通透感及透明狀的全新Aero視覺體驗。2009年Windows 7上市，推出了超級任務欄，改進了開始菜單，其Aero效果比Vista更加華麗，有碰撞效果、水滴效果。2012年發布的Windows 8新設計了Metro風格，Metro風格界面中，沒有了開始按鈕，也沒有了Windows圖標，操作方面以觸摸作為第一類輸入方法[2]。

可以說，桌面系統用戶體驗是伴隨著計算機操作系統的發展而不斷提升的。呈現方面從文字界面到圖形界面、從窗口界面到桌面界面、從平面效果到立體質感效果等，交互方面從鍵盤到鼠標、鼠標操作從單擊到拖曳（觸屏），說明了用戶體驗在不斷地演繹著革命性的創新。

另一方面，以IE為代表的網頁系統，從1995年的IE 1到2013的IE 10，信息呈現以文字、圖形的羅列為主，操作以鼠標單擊超鏈接為主，其用戶體驗并沒有發生實質性的變化。

3 提升網絡學習用戶體驗的必要性

“網上教學是以學生為中心的，強調學生的‘學’”[3]，即網絡學習主要是學生自主學習，學生對著計算機開展學習，計算機的用戶體驗直接影響學習者的興趣與意志。

網絡學習主要通過網絡學習平臺進行學習，而網絡學習平臺基本都是基于網頁系統建立的，因此網絡學習實質上是通過瀏覽器進行網頁瀏覽來實現，即網頁系統的用戶體驗設計決定了學習者的學習感受，進一步決定了學習者的學習興趣與學習效率。我們已知網頁用戶體驗并不令人滿意，結果是“不舒適的網絡學習環境致使學習者難以保持長時間的網上學習是網絡學習者面臨的最主要問題”[4]，即網頁系統的用戶體驗對于網絡學習具有制約作用。

Windows基于桌面的呈現方式與操作方式已為人們所接受與熟悉，如能將Windows桌面系統移植到網頁中，將極大地提升網頁的用戶體驗，進一步可給網絡學習平臺的建設帶來革命性的改觀。2007年田俊華、李藝[5]就發文指出，Web學習環境“其建構模式應借鑒主流應用程序的發展趨勢，逐步拋開以頁面為單元的傳統設計模式，吸取桌面應用程序中積累的用戶體驗”，提出一種有效的解決網頁體驗的技術途徑，但當時實現這樣網絡學習平臺的技術條件尚未成熟。

二 桌面式網站的概念與實現技術

桌面式網站是將桌面元素移植到網頁中，使網頁看起來和桌面系統一樣，操作上也類似于桌面系統，具有鼠標的多樣操作性。桌面式網站即在網頁中要實現像Windows一樣的呈現、像Windows一樣的操作，使桌面進入網頁內。

傳統網頁開發是基于HTML語言的開發，它的呈現模式以文本為基礎，無法滿足桌面式網站的開發需求。RIA即豐富的因特網應用程序，是為解決用戶的體驗問題而誕生的，它克服了基于HTML表現層的頁面式單調體驗，能實現豐富的界面元素及特效，為用戶提供了全方位的視覺體驗。目前Microsoft公司的Silverlight是一種比較成功的RIA客戶端開發技術，它的媒體支持度、豐富的界面功能和跨平臺性能等都非常強大。Silverlight使用.NET托管代碼，以XMAL為用戶界面描述語言，轉換成具體內容顯示在網頁上。

三 桌面式網站的設計

“用戶體驗設計的目標是提高用戶對于某個服務或者產品感官接受度，增強用戶對于該服務或者產品的認可度，進而提高用戶粘度”[6]，感官接受度主要體現在界面呈現和人機交互方面。

1 呈現體驗設計

（1）桌面式網站的框架組成設計

傳統網頁是文字圖片的羅列，利用Silverlight技術開發的桌面式網站則完全顛覆這種網頁格局。圖1窗體內是一個桌面式網站，該網站的網頁具有和Windows桌面系統完全類似的桌面、圖標、窗口、開始菜單、任務欄等元素，具有和Windows一樣的視覺體驗。

桌面式網站初始時，各主題網頁以圖標形式排列于桌面，即桌面上只有圖標，鼠標單擊圖標可以打開主題網頁窗口，查看網頁具體內容——這與Windows桌面系統完全類似。

桌面式網站的網頁內容通過打開窗口得以展現，每個主題網頁窗口由網頁內容（右上）、菜單按鈕（左）和瀏覽控制按鈕（右下）組成，如圖2所示。利用菜單按鈕可控制本主題多個網頁內容的切換，利用瀏覽按鈕可控制本主題同一網頁內容的翻頁瀏覽。窗口菜單按鈕和瀏覽按鈕相當于傳統網頁的導航鏈接，這是桌面式網站解決超鏈接技術的一種創新嘗試。

傳統網頁窗口的打開與關閉沒有動畫效果，桌面式網站的窗口切換可以實現窗口出入的動畫效果，且可以實現三維動畫效果，讓用戶在使用網站的同時獲得更佳的視覺享受。圖2顯示了正在打開網頁窗口的三維動畫效果。

圖1 桌面式網站總體架構

圖2 正在打開的XPS文檔網頁

（2）網頁窗口內容設計

網頁內容是網站的核心，如何使網頁內容呈現出令人滿意的視覺效果，是網站用戶體驗設計最重要的內容。傳統網頁的內容排版是在網頁開發時設計的，主要以文圖排列方式設計，界面呆板且不易更改。桌面式網站的所有靜態窗口內容創新性地使用Office文檔作為網頁內容，即每一個主題網頁窗口展現的就是一個Office文檔。圖2的窗口網頁就是這樣一種圖文并茂的Word文檔。

微軟公司開發了一種新的Office保存格式——XPS文檔格式，它與Office普通文檔具有相同的顯示效果。XPS是基于WPF的XAML置標語言的文檔，可以被Silverlight解析和重繪。因此，桌面式網站的靜態網頁都可用Office進行設計，只需將Office文檔另存為XPS文檔即可。

Office文檔幾乎人人都會編輯，因此桌面式網頁內容可由任何人進行編輯，不需要專業的網頁開發人員。同時Office文檔可以實現非常滿意的用戶體驗效果:絢麗的色彩、美化的字體、多樣的效果、整潔的排版等。桌面式網站將Office的用戶體驗移植到網頁上，極大地提高了網頁的用戶體驗效果。

2 交互體驗設計

網站操作的主要目的是瀏覽網頁內容，必要時應移動或縮放網頁內容以達到最佳視覺瀏覽效果。而傳統網頁內容的位置與大小，一般不能通過鼠標的簡單操作來改變。

桌面式網站的網頁窗口可以利用鼠標滾輪來改變窗體中網頁內容的大小，即窗口大小不變，窗口中的內容隨鼠標滾輪的滾動而按比例改變大小，實現網頁內容的縮放控制。另外，窗口網頁內容的位置也可以利用鼠標拖曳在網頁窗口內改變，實現網頁的滾動瀏覽。這樣的設計使用戶可以得心應手地進行網頁瀏覽，提升了用戶網頁操作的愉悅感和網頁呈現的視覺效果。

由于桌面式網站的網頁內容主要是Office文檔，無超鏈接，頁面的切換需另辟蹊徑。桌面式網站通過鼠標單擊窗口內的菜單按鈕與瀏覽控制按鈕，實現窗口內多頁面之間的切換。

3 更新與維護設計

提高用戶體驗不僅僅限于呈現與交互，網頁更新也是一個非常重要的用戶體驗指標。利用Silverlight技術可以實現應用程序的動態增減和網頁文件的動態替換，所有與這些功能相關的程序和文件操作可以設計成像Windows一樣的方式進行管理。

（1）網站結構的管理維護與更新

傳統網站一經建好后，用戶很難更改網站結構；要更改網站結構，需由開發人員利用網站開發工具進行更改。桌面式網站設計了后臺桌面式應用管理程序，可以對構成網站結構的桌面圖標、網頁窗口的層級菜單隨時進行增加、刪除、更改和編輯操作，進而改變網站的結構，真正做到動態維護網站。圖3是后臺桌面式應用管理程序界面，可實現如下管理功能:

通過單擊“添加應用”按鈕，可以增加一項主題網頁條目，之后在相應文本框內輸入主題網頁的名稱、圖標在桌面的位置、圖標文件的路徑等，即可在桌面添加新的主題網頁圖標；也可以在相應的文本框內修改“標題”、“序號”、“圖標”等，并單擊“更改應用”按鈕確認更新桌面主題網頁的圖標；如果單擊某一主題網頁條目后直接單擊“刪除應用”按鈕，則可刪除這一主題網頁條目，同時刪除桌面對應的主題網頁圖標。

通過單擊某一主題網頁條目，再單擊“添加子菜單”按鈕，即出現該主題網頁的子菜單編輯欄，通過在相應文本框內輸入菜單名稱、層級位置、打開的文件名稱等，即可在該主題網頁窗口內添加新的網頁菜單；通過單擊子菜單編輯欄的“刪除”按鈕，可以刪除子菜單。

圖3 應用管理程序界面

圖4 網頁文件管理界面

利用以上管理功能，初始提交的網站可以是沒有任何圖標的桌面，之后完全由用戶根據需要自行增加圖標及子菜單，構建出自己所需的網站結構，這相當于實現了用戶自建網站的功能。

（2）網站文件及其內容的更新

網站結構建立過程中給出了每個層級菜單對應的網頁文件，這些網頁文件也是可以更新的。通過更新網頁文件，可以實現網站內容的更新。圖4是后臺桌面式網頁文件管理界面。

通過單擊某一文件圖標選擇該文件，單擊“刪除文件”按鈕，即可刪除該文件。再單擊“上傳文件”按鈕，將新文件上傳到網站，這樣通過文件的更替即可完成網頁內容的更新。

以上設計實現了網頁文件的更替，但文件的內容如何更新呢？傳統網頁更新十分不便，即使網頁上的一個錯字，也需要網絡管理人員利用網頁編輯軟件進行修改，之后再發布到網站上。桌面式網站的每一個靜態頁面都對應一個Office文檔，因此網頁的修改變得十分容易。通過在Office中編輯文件就可完成網頁內容的更新，這給網站維護提供了相當大的便捷。

四 桌面式網站的網絡學習平臺應用

當今網絡學習平臺種類繁多，但平臺功能基本類似，一般都包括課程基本信息、公告通知、課程播放、資源管理等基本元素。桌面式網站在實現這些功能方面具有獨特的用戶體驗效果。

學習網站必須提供關于課程的各種描述信息，包括課程介紹、教學團隊、課程計劃等。所有這些課程信息基本都是靜態內容，都可以用Office編輯生成XPS文檔。桌面式網絡學習平臺可直接上傳這些XPS文檔，使之成為桌面式網站的靜態網頁圖標及窗口，圖5是課程計劃。

圖5 課程計劃

圖6 網站公告

學習網站一般都需要發布關于課程學習相關的公告與通知，桌面式網絡學習平臺公告的內容同樣可以采用Office文檔直接編寫，生成XPS文檔，直接上傳到網站上。這樣的公告可以是包含精細編輯的圖文并茂的Office文檔，圖6是網站公告的瀏覽界面。

網絡學習平臺的學習功能是平臺的核心，如同課堂學習需要教師的講解和教學PPT的觀看，網絡學習平臺主要通過學習者觀看教學PPT和教學視頻來完成學習。桌面式網絡學習平臺中的PPT是發布為XPS格式的PPT文檔，可以直接在桌面式網站中瀏覽。另外，可以通過網頁窗口內容的動態切換效果實現PPT的動態效果，使網頁窗口的3D切換效果更加絢麗。

網絡學習平臺必須提供豐富多樣的學習資源幫助學習者學習，資源管理包括學習資源的上傳和下載。RIA桌面式網絡學習平臺的資源上傳，可以采用和前面添加網頁類似的方式實現。

五 結束語

網絡學習是一種新型的學習方式，是學習革命的發展趨勢，一切制約網絡學習的技術問題終究會得到解決。RIA新技術對于革新網頁設計是卓越的，文章利用RIA技術設計的桌面式網站，有效解決了網絡學習用戶體驗的瓶頸問題，提升了網絡學習者的興趣與效率。

用戶體驗對于計算機使用者來說越來越重要，未來的用戶體驗將會不斷地創新和發展。未來的計算機用戶體驗具體是什么樣？界面呈現體驗方面或將向立體感、通透感、動態效果發展？操作交互體驗方面或將向手指觸屏、語音控制發展？一切皆有可能，一切都在進行中，對此我們將拭目以待。我們有理由相信:新的用戶體驗將越來越多地滿足用戶網絡學習的體驗需要，將為用戶提供越來越舒適、愉悅的學習環境。

[1]百度百科.用戶體驗[OL].〈http://baike.baidu.com/subview/274884/5077647.htm?fr=Aladdin.〉

[2]多圖回顧:Windows歷代Logo與版本變化[OL].〈http://wenku.baidu.com/view/8755872e3169a4517723a315.html.〉

[3]黃榮懷,張振虹,陳庚,等.網上學習：學習真的發生了嗎?——跨文化背景下中英網上學習的比較研究[J].開放教育研究,2007,(6):12-24.

[4]李奉華,楊雪,黃海林.基于RIA技術的網絡學習者體驗分析與模型設計[J].現代教育技術,2010,(2):81-84.

[5]田俊華,李藝.基于桌面風格的Web集成學習環境建設[J].中國電化教育,2007,(11):107-109.

[6]馮翔,吳永和,祝智庭.智慧學習體驗設計[J].中國電化教育,2013,(12):14-19.

[7]郭麗娜,任劍鋒.基于Silverlight的可視化協作知識建構工具的設計與實現[J].電化教育研究,2012,(4):72-75.

Improving User Experience of Online Learning Platform Using Desktop Web

HU Shi-qing LIN Zi-hua GUO Chao-qun
(Shenzhen University Normal college Education information technology department, Shenzhen, China 518060)

The main factor affecting the effect of online learning is user experience and user experience of Windows desktop system completely outmatches against Web system. User experience of Windows desktop system can be realized by using RIA Silverlight technique. This paper realized the architecture design of desktop web, XPS presentation design of Webpage, the polymorphic design of mouse interaction and real-time update and maintain design of website etc by using Silverlight technique. And the desktop web is used in network learning system, result in effectively solving the problem of user experience in network learning.

online learning platform; user experience; RIA; desktop web

G40-057

A【論文編號】1009—8097（2015）06—0115—06【DOI】10.3969/j.issn.1009-8097.2015.06.018

編輯:小西

本文為 2010年全國教育科學“十一五”規劃課題“RIA新技術條件下網絡協作學習模式及虛擬社區學習環境的研究”（項目編號：DCA100202）的研究成果。

胡世清，教授，碩士，研究方向為計算機與網絡技術的教育教學應用研究，郵箱為hushiqing@tom.com。

2014年9月23日