1、 本 科 毕 业 论 文 基于 Silverlight 技术的界面设计 研究和实现 Research and Implementation of Interface design based on Silverlight technology 姓 名： 学 号： 学 院：软件学院 系：软件工程 专 业：软件工程 年 级： 指 导 教 师： 年 月I 摘 要 随着互联网的飞速发展，人们每天使用互联网的次数和时间不断增加 。 传统的 HTML 页面已经渐渐脱离时代的发展，无法满足人们的需求。开发出 具有高度互动性、丰富用户体验以及功能强大的客户端 才是大势所趋，“ RIA(Rich Interne
2、t Applications)富互联网应用 ”应运而生。 客户机在 RIA 中的作用不仅是展示页面，它可以在幕后与用户请求异步地进行计算、传送和检索数据、显示集成的用户界面和综合使用声音和图像，这一切都可以在不依靠客户机连接的服务器或后端的情况下进行。 1 Web 经过近多年的发展，随着 Web 2 0 应用的成熟，原有的界面正在发生一个飞跃。带宽更宽、本地 PC 机越来越高速，传统的桌面程序不断的向 Web迁移，所有的一切都在加速，这最终引起 Web 界面的一场新的变革。下一代 Web界面技术将具有更强的语义特征，更强的矢量支持，更强的二维表现力，并且支持方便的动画特效，具有一定的三维表现效
3、果，强大的视频表现能力。 2 Microsoft Silverlight 是微软所发展的 Web 前端应用程序开发解决方案，是微软 RIA 策略的主要应用程序开发平台之一，以浏览器的插件方式，提供 Web 应用程序中多媒体服务和高交互性的前端应用程序解决方案。 本文以 Microsoft Silverlight 技术为研究对象， 主要任务是 开发出 具有高度互动性、丰富用户体验以及功能强大的 电子杂志 。 主要工作包括三个方面 ： 第一，设计 出具有高度用户体验性、丰富视觉特效的界面 ；第二，针对 这个界面进行具有高度交互性的控件开发 ；第三，完成了一个满足需求的 电子杂志 。 论文从项目背景
4、出发，介绍了 Microsoft Silverlight 开发的背景和研究价值。然后，详细介绍了 具有高用户体验性的图像与视觉特效的设计与实现 ，以及 具有良好交互性的 控件的 设计 与实现 。再次，论文详细阐述了 具有高度互动性和丰富用户体验性程序的 需求，具体 介绍了 基于 Silverlight 技术的 电子杂志 的 设计及其实现，最后论文针对 Silverlight 电子杂志 进行了分析和评价，并指明了下一步的改进计划。 关键词： Microsoft Silverlight； 富互联网应用 ； 用户体验性 ； 互动性； II Abstract With the rapid develo
5、pment of Internet, the frequency and time which people have used in the Internet every day is increasing greatly. The traditional HTML page can not meet peoples needs. Developing a client with highly interactive, rich user experience is a general trend. “RIA (Rich Internet Applications) Rich Interne
6、t Applications,“ came into being. Client in the RIA is not only to show a display page, but also user requests asynchronously to calculate transmission and retrieval of data, showing the integrated user interface and the integrated use of sound and images, all of this you can not rely on the client
7、connected to the server. The original interface is taking place in a leap with the development of Internet. Bandwidth become wider and the speed of local PC become faster. Traditional desktop program is transferring to the Web. Eventually this will lead to a new Web interface changes. Next Generatio
8、n Web Interface Technology will have more semantic features, enhanced vector support, a stronger two-dimensional expression, and support to facilitate the animation effects, the performance of a certain three-dimensional effect, powerful video performance capabilities. Microsoft Silverlight is Micro
9、softs Web front application development solutions, it is a browser plug-in, providing highly interactive multimedia services and front-end application solutions in the Web application. In this question for discussion, we mainly have a research in Microsoft Silverlight, the main task is to develop a
10、highly interactive, rich user experience and powerful electronic magazine. It includes three aspects: first, design a interface with highly user experience and rich visual effects; second, development a interface with highly interactive control, complete e-magazine. The beginning of the paper introd
11、uced the background of the project, introduced the background of the system and research value. Second, detailing the design and implementation of a e-magazine. Third, the paper elaborated the systems requirement, specifically introduced the system design and implementation. Finally, some possible i
12、mprovements and future works were presented. Keywords: Microsoft Silverlight; Rich Internet Applications; User experience; interaction III 目 录 第一章 绪论 . 1 1.1 引言 . 1 1.2 论文组织结构 . 2 第二章 研究背景及意义 . 3 2.1 Web 应用程序的发展现状 . 3 2.1.1 现有 Web 应用程序的特征与不足 . 3 2.1.2 理想中的 Web 应用程序 . 4 2.2 RIA(富互联网应用技术 ) . 4 2.3 Sil
13、verlight 技术概述 . 6 2.3.1 Silverlight 技术的起源与发展 . 6 2.3.2 SilverLight 技术的优势 . 7 2.3.3 Silverlight 与 Flash 的比较 . 9 2.4 其他系统技术介绍 . 11 2.4.1 ASP.NET 简介 . 11 2.4.2 Expression Blend 3 工具简介 . 12 2.5 本章小结 . 12 第三章 基于 SILVERLIGHT 的电子杂志设计 . 14 3.1 Silverlight 项目框架设计方案 . 14 3.1.1 Silverlight 电子杂志框架设计方案 . 17 3.2
14、提高用户体验性和软件交互性的分析与设计 . 19 3.2.1 用户体验性设计 . 19 3.2.2 电子杂志的用户体验性设计 . 21 3.3 本章小结 . 22 第四章 SILVERLIGHT 电子杂志的实现 . 23 4.1 电子杂志概述与功能 . 23 4.1.1 开发背景与目标 . 24 4.1.2 电子杂志功能 . 25 4.2 Silverlight 电子杂志的具体实现 . 26 4.2.1 杂志首页图片 360 度运动效果的实现 . 28 4.2.2 杂志绚丽翻页效果的实现 . 30 4.3 本章小结 . 32 IV 第五章 电子杂志测试及运行结果 . 33 5.1 系统测试 .
15、 33 5.2 运行结果 . 34 5.2.1 杂志首页运行结果 . 34 5.2.2 单个杂志的运行结果 . 35 5.3 本章小结 . 36 第六章 总结与展望 . 37 6.1 论文 总结 . 37 6.2 工作展望 . 38 参考文献 . 39 致 谢 . 40 V Content CHAPTER 1 PREFACE .1 1.1 Introduction .1 1.2 The structure of this paper.2 CHAPTER 2 BACKGROUND AND SIGNIFICANCE .3 2.1 Web Applications Development Statu
16、s.3 2.1.1 Characteristics of existing Web applications with less than . 3 2.1.2 The ideal Web application . 4 2.2 RIA (Rich Internet Application Technology).4 2.3 Technical Overview Silverlight .6 2.3.1 origin and development of Silverlight technology. 6 2.3.2 Silverlight technology advantages . 7 2
17、.3.3 Silverlight comparison with Flash . 9 2.4 Other Systems Technology Introduction. 11 2.4.1 ASP.NET Introduction . 11 2.4.2 Expression Blend 3 Tool Description . 12 2.5 Chapter Summary.12 CHAPTER 3 SILVERLIGHT-BASED ELECTRONIC MAGAZINE DESIGN .14 3.1 Silverlight framework of the project design .1
18、4 3.1.1 Silverlight framework design electronic magazine. 17 3.2 user experience and interactive analysis and design.19 3.2.1 User Experience Design. 19 3.2.2 e-magazines user experience design . 21 3.3 Chapter Summary.22 CHAPTER 4 SILVERLIGHT IMPLEMENTATION OF E-MAGAZINES .23 4.1 Overview and featu
19、res electronic magazine .23 4.1.1 Background and objectives of the development .24 4.1.2 e-magazines features .25 4.2 Silverlight concrete realization of e-magazine.26 4.2.1 Journal Home Pictures 360-degree movement effect to achieve. 28 4.2.2 Effect of Implementation Journal of gorgeous flip . 30 4
20、.3 Chapter Summary.32 VI CHAPTER 5 E-MAGAZINE TESTS AND THE RESULTS OF RUNS.33 5.1 System test .33 5.2 Run Results .34 5.2.1 the results of Journal home . 34 5.2.2 the results from a single magazine . 35 5.3 Chapter Summary.36 CHAPTER 6 SUMMARY AND FUTURE WORKS .37 6.1 Summary of this paper .37 6.2
21、Improvements and future works .38 REFERENCES .39 ACKNOWLEDGEMENTS .40 第一章 绪论 1 第一章 绪论 1.1 引言 随着互联网的飞速发展， 互联网 深刻地改变了人们的生活方式，将人们的视野扩展到天之尽头，信息地球村的梦想似乎就要实现。 互联网同样深刻地影响着人们的工作方式和商业模式， B2B、 B2C、 Web 应用程序，将人们的生产率推到一个崭新的高度。 互联网的诞生，真正意义上的 Web 应用程序走上历史的舞台。浏览器 /服务器体系的应用程序（即 B/S 结构）成为企业和软件研发人员争先追捧的技术新贵。在这种体系结构下，
22、客户端不再需要进行特别的软件部署，只要安装得有浏览器，管理员就可以在服务器端通过互联网将文档和资 讯发布给全世界的用户。正所谓“ 有得必有失 ” ，快捷而广泛部署的代价就是客户端的功能受限，随着软件应用环境日益的复杂化，这个缺陷也变得越来越严重。 3 如今的 Web 应用技术 不再能够胜任更为高级的应用环境，尤其是某些领域的应用系统 （如快速实时交互、复杂数据处理、用户体验深刻的系统）。 在这个大环境下，许多新技术应运而生， Microsoft Silverlight 就是其中之一， Silverlight是微软所发展的 Web 前端应用程序开发解决方案，是微软 RIA 策略的主要应用程序开发
23、平台之一，以浏览器的插件方式，提供 Web 应用程序中多媒体服务和高交互性的前端应用程序解决方案。 在企业应用方面， RIA 策略同样必不可少， 随着 EAI 技术在企业应用不断深入，整个企业的异构系统、应用、数据源等等环节被紧密联系在一起，各个重要、独立的内部系统实现了良好的数据交互并且紧密实现了无缝共享。由此必须有一个功能强大的、更加人性化的企业门户 。 作为与用户交互的前端来提升用户体验，给他们更加人性化的所需信息，并能带来舒适的感受， 可以说在很大程度上靠这些细节部分加强企业的软实力。 Silverlight 技术的引入可使门户的前端界面具有高度互动性和丰富 的表现力。 4 针对 富互
24、联网应用 的 Web 前端应用程序开发 问题， 本 毕业设计 通过研究Microsoft Silverlight 技术 ，结合当代 Web 前端界面的需求，开发出具有高度互动基于 Silverlight 技术的界面设计研究和实现 2 性，丰富用户体验性的 Silverlight 电子杂志 。该 电子杂志 具有高用户体验性的图像与视觉特效，例如图片 360 度环绕运动效果；具有良好交互性的控件触发，例如 电子杂志 的绚丽翻页效果。 通过 Silverlight 电子杂志 的开发，探讨如何实现富互联网应用的高度互动性和丰富表现力，以及用户体验在各个领域的可行性和重要性。 1.2 论文组织结构 本论
25、文共分为六章，论文首先分析了 当代 Web 应用程序 的不足，以及富互联网应用的重要性 。 结合 Microsoft Silverlight 技术 在 RIA（富互联网应用）的开发支持 ，介绍了毕业设计项目的背景和研究价值，引出了论文所 做 的主要工作内容。紧接着论文简单概述了毕业设计项目中所用到的各项技术，并针对 互联网应用的高度互动性和丰富表现力的需求，提出具有高度交互性和丰富用户体验性的Silverlight 电子杂志 解决方案。然后论文就项目中的两个技术难点 图像与视觉特效 ，动态 翻页效果 ，详细阐述了 Silverlight 电子杂志 的设计。 在系统实现方面，论文详细介绍了 Si
26、lverlight 电子杂志 使用的技术要点： 基于 A 的Silverlight 开发框架， Expression Blend 3 的界面辅助开发。 论文具体安排如下： 第一章 简单介绍了 当代 互联网的发展 ，以及 RIA（富互联网应用）的重要性。结合 Microsoft Silverlight 技术 ， 提出了毕业设计的背景、目标和研究价值。 第二章 详细介绍了 Web 应用程序的发展现状以及特征，不足之处，并且详细介绍了 Microsoft Silverlight 技术 的 背景和优势，最后介绍了 程序 中所使用的各项技术 及各项技术的国内外发展现状 。 第三章 详细介绍了 Silve
27、rlight 电子杂志 在用户体验性和交互性方面的 设计。 第四章 介绍了 Silverlight 电子杂志 的实现。详细阐述了 Silverlight 电子杂志的 背景，目标和具体功能。并且 详细介绍 杂志 首页图片 360 度运动效果的实现 和杂志 绚丽翻页效果的实现 。 第五章 介绍了 Silverlight 电子杂志 的 测试和运行结果 。 第六章 最后论文总结了 毕业设计 所做的工作，并且指明了下一步的改进 计划 。主要是 在 用户体验方面 的改 进计划 。第 二 章 研究背景及意义 3 第二章 研究背景及意义 2.1 Web 应用程序的发展现状 Web 应用程序有两种模式 C/S、
28、 B/S。 C/S 是客户端 /服务器端程序，也就是说这类程序一般独立运行。而 B/S 就是浏览器端 /服务器端应用程序，这类应用程序一般借助 IE， Firefox，遨游 等浏览器来运行。 WEB 应用程序一般是 B/S 模式。Web 应用程序首先是 “ 应用程序 ” ，和用标准的程序语言，如 C、 C+等编写出来的程序没有什么本质上的不同。然而 Web 应用程序又有自己独特的地方，就是它是基于 Web 的，而不是采用传统方法运行的。 Web 应用程序发 展至今已有多年， 如今的 Web 应用技术 不再能够胜任更为高级的应用环境，尤其是某些领域的 应用系统 （如快速实时交互、复杂数据处理、用
29、户体验深刻的系统）。 在这个大环境下，许多新技术应运而生，例如 HTML 5+CSS3+javascript 技术 ； Flex AIR Flash 技术； Silverlight、 Moonlight 和 WPF。 那么究竟 Web 应用程序有哪些特征和不足之处呢？我们又应该开发出怎样的Web 应用程序以满足客户的需求呢？ 2.1.1 现有 Web 应用程序的特征与不足 在上一节中我们分析了 Web 应用程序的发展和 优势，下面我们来详细分析Web 应用程序的特征和不足： 1. 操作复杂性。由于受传统 Web 应用程序的局限性，当进行一个多步骤或多选项的事务时，用户要么会看到一份很长的、笨拙的页面；要么就得通过反复翻转若干网页、令人沮丧地执行操作步骤。 2. 数据复杂性。为了高效率地表达复杂的数据，是现有 Web 应用程序所面临的巨大挑战。理想的图形工具应该能够既操作简便，又能生动明了地展示各种错综复杂的数据信息。 3. 交互复杂性。互动性需求的应用程序使得交互的问题变得日益突出，用户的耐心变得越来越少，他们的要求是要向桌面应 用程序的速度靠齐。一味地提升服务器和网络的速度既不现实又不经济，一种可行的技术方案就是采用高度互
