利用桌面式网站革新网络学习平台的用户体验*

胡世清 林子华 郭超群

（深圳大学 师范学院教育信息技术系，广东深圳 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日