胡世清 林子華 郭超群

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

利用桌面式網(wǎng)站革新網(wǎng)絡學習平臺的用戶體驗*

胡世清 林子華 郭超群

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

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

網(wǎng)絡學習平臺；用戶體驗；RIA；桌面式網(wǎng)站

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

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

一 網(wǎng)絡學習與用戶體驗

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

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

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

2 兩種計算機系統(tǒng)的用戶體驗及發(fā)展

當今計算機系統(tǒng)的使用，主要有桌面系統(tǒng)和網(wǎng)頁系統(tǒng)兩種方式，它們各自發(fā)展。

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

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

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

3 提升網(wǎng)絡學習用戶體驗的必要性

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

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

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

二 桌面式網(wǎng)站的概念與實現(xiàn)技術

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

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

三 桌面式網(wǎng)站的設計

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

1 呈現(xiàn)體驗設計

（1）桌面式網(wǎng)站的框架組成設計

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

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

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

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

圖1 桌面式網(wǎng)站總體架構

圖2 正在打開的XPS文檔網(wǎng)頁

（2）網(wǎng)頁窗口內(nèi)容設計

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

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

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

2 交互體驗設計

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

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

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

3 更新與維護設計

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

（1）網(wǎng)站結(jié)構的管理維護與更新

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

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

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

圖3 應用管理程序界面

圖4 網(wǎng)頁文件管理界面

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

（2）網(wǎng)站文件及其內(nèi)容的更新

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

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

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

四 桌面式網(wǎng)站的網(wǎng)絡學習平臺應用

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

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

圖5 課程計劃

圖6 網(wǎng)站公告

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

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

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

五 結(jié)束語

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

用戶體驗對于計算機使用者來說越來越重要，未來的用戶體驗將會不斷地創(chuàng)新和發(fā)展。未來的計算機用戶體驗具體是什么樣？界面呈現(xiàn)體驗方面或?qū)⑾蛄Ⅲw感、通透感、動態(tài)效果發(fā)展？操作交互體驗方面或?qū)⑾蚴种赣|屏、語音控制發(fā)展？一切皆有可能，一切都在進行中，對此我們將拭目以待。我們有理由相信:新的用戶體驗將越來越多地滿足用戶網(wǎng)絡學習的體驗需要，將為用戶提供越來越舒適、愉悅的學習環(huán)境。

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

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

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

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

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

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

[7]郭麗娜,任劍鋒.基于Silverlight的可視化協(xié)作知識建構工具的設計與實現(xiàn)[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年全國教育科學“十一五”規(guī)劃課題“RIA新技術條件下網(wǎng)絡協(xié)作學習模式及虛擬社區(qū)學習環(huán)境的研究”（項目編號：DCA100202）的研究成果。

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

2014年9月23日