Silverlight之美

概述Silverlight为Web应用程序带来了更加丰富的交互性。与Adobe公司的 Flash相比，二者都是基于互联网技术的互动架构，同样可以显示矢量图形、动画和视频，并可以运行在多种 *** 作系统甚至移动设备上。Silverlight在用户体验方面同样出色，例如其富媒体体验、动画效果、滤镜特效、3D引擎以及简洁明了的原型设计等等，其实目前Silverlight框架已经很完善，但缺少的正是像Flash一样

Silverlight为Web应用程序带来了更加丰富的交互性。与Adobe公司的 Flash相比，二者都是基于互联网技术的互动架构，同样可以显示矢量图形、动画和视频，并可以运行在多种 *** 作系统甚至移动设备上。Silverlight在用户体验方面同样出色，例如其富媒体体验、动画效果、滤镜特效、3D引擎以及简洁明了的原型设计等等，其实目前Silverlight框架已经很完善，但缺少的正是像Flash一样拥有大量的界面设计师，如果在Silverlight项目中拥有较强的用户体验设计人员，那Silverlight之美才能发挥出来。下面我们就来一起分享一下Silverlight在商业应用中的魅力到底在哪里？

相关厂商内容

7月12，VMware网络云博会，iPhone4S,iPad,XBox360等你拿，点击了解详情

强大的用户体验

Silverlighth具有强大的用户体验及用户交互性，可以提供给使用者绚丽完美的效果，整个体验都是以用户为中心、以人为本，着重于研究用户情感，也就是互动过程中的瞬间用户体验，并将这一理念贯穿在一切设计、创新的过程当中。Silverlight以产品吻合用户的需求、简洁明了的 *** 作、友好的用户界面、有吸引力的视觉设计，创造出以用户黏度为首要体验的设计目标。

我们一起来看看中国人寿及中国人保在Silverlight领域中的用户体验案例：

中国人寿养老金精算咨询系统（PACS）系统登录界面以黑色渐变为背景，以中国人寿的绿色为跳跃色，突出登录控件，让用户可以很快定位主体功能。

图1 中国人寿养老金精算咨询系统（PACS）——登录界面

在数据映射功能中采用二次贝塞尔曲线，以动画形式进行数据项关联，可以增加使用过程中的趣味性，当数据项类型不匹配时采用高亮色主动提示方式，使用户在拖拽时避免了错误的发生。

图2 中国人寿养老金精算咨询系统（PACS）——数据映射

中国人寿受托业务办理界面中，引入对有无任务的差异显示，提高用户的关注度，并通过动画提示增强交互感。

图3 中国人寿受托业务办理界面

中国人寿数据校验工具在主界面底层添加了绚丽的粒子特效动画，丰富了界面的动感。

图4 中国人寿数据校验工具

中国人保的经营管理账户系统采用轮流交换的动画模式对五个指标进行动态展示。

图5 中国人保经营管理账户系统界面

在文件管理界面采用书架式的动画展现方式，使用户体验更加贴近自然。

图6 中国人保经营管理账户系统——书架

虽然Silverlight与面世多年的Flash应用在数量上还相去甚远，但在国际与国内也陆续开始受到设计者关注，并出现了一些在用户体验方面值得称道的案例，下面我们就来一起了解一下：

腾讯Silverlight QQ：

 

 

图7 腾讯Silverlight QQ

微软Silverlight数码学校宿舍：

图8 微软Silverlight数码学校宿舍

微软sql Server团队计算工具——sql Server Value Tool：

图9 微软sql Server团队计算工具 sql Server Value Tool

新浪财经Silverlight版：

图10 新浪财经Silverlight版

国外的Silverlight航空订票系统：

图11 Silverlight航空订票系统

集成Office Ribbon UI的在线Visio作图工具：

图12 在线Visio作图工具

Silverlight版商业CRM系统：

图13 Silverlight版商业CRM系统——登录界面

图14 Silverlight版商业CRM系统——主界面

台湾旅游网站，以皮夹式的书签作为交互方式：

图15 台湾旅游网站

借助Silverlight的组件化优势，可以轻松实现内嵌动画、视频、图片甚至自定义控件的翻页效果。

图16 使用Silverlight实现读书时的翻页效果

在游戏方面，Silverlight也逐渐显示出无端网游的优势。

欧洲某Silverlight在线即时战略游戏画面：

图17 欧洲某Silverlight在线即时战略游戏

国内无端网游应用：

图18 无端网游应用

用Silverlight实现的GIS应用：

图19 用Silverlight实现的GIS应用

看了这些实例，大家没有没觉得用Silverlight做出来的东西特别美呢？

超炫的动画效果

Silverlight弥补了微软网页中动画效果的缺陷，它可以很轻松地制作一个简单的动画，使界面看起来不那么生硬。而如果想在传统的网站中使用JavaScript实现相同的动画效果，那就需要相当的技术功底和相关经验。下面就和大家分享一下Silverlight动画效果实现方式。

A、故事板：Silverlight与Flash一样的是基于时间线的故事板，通过每个关键帧所在的时间点上的不同状态串联成动画效果。

以下卡通人物动画就是运用不同关键帧显不同状态所产生的连贯动画。

图20 动画展示之一

图21 动画展示之二

图22 动画关键帧展示

B、状态动画：Silverlight中的大部分控件可以制作基于状态的动画，鼠标移上移下、按钮获得焦点及点击状态、控件之间切换的状态动画等等，这些都可以在Silverlight轻松实现，而flash中除了按钮有这个可轻松实现的状态动画外，要想有其它状态动画就得借助于AS的功效了。

下图是Silverlight按钮控件里自带的多种状态，比Flash里的相同部分多出很多。

图23 按钮自带状态展示

C、滤镜动画：Silverlight中还有三十多种滤镜可以使用，每种滤镜取值变化也可以产生美妙的动画效果，而Flash里自带的滤镜也就那么几种。

图24 Silverlight滤镜效果

以下是运用滤镜ZoomBlurEffect产生的动画效果， *** 作如图：

第一步：第一个关键帧取值。

图25

第二步：第二个关键帧取值。

图26

第三步：最后效果的变化情况如图所示：

图27

这样一个很酷的显示动画就这么简单的完成了！

D、完全编码动画：中国人寿数据校验工具界面底层的绚丽粒子动画，鼠标跟随特效，主要采用Silverlight中的BitmapImage类来实现，这需要开发人员进行编码，这里就不再详述。

图28 绚丽粒子动画效果展示

界面设计和代码分开

Silverlight把用户界面设计和底层逻辑分开可以大大提高应用程序开发生命周期的生产率，结合使用Microsoft Expression和Microsoft Visual Studio，用户界面设计人员和开发人员能够发挥各自所长，改进相互间的合作，二者同时进行设计与编码。不用像传统的开发，需要设计人员先完成最终版的HTML文件制作，然后提交给开发人员，这时开发人员才能开始进行编码，此后设计人员的工作也就是配合开发人员调试界面及优化系统。

图29 设计与编码分离

图中xaml文件是由设计师来掌控，而cs文件则是由开发人员来掌控，每一个xaml文件都会有一个独立的cs文件，在开发人员开发的同时设计人员同样可对相同的界面进行设计。设计师将简要的xaml文件提交给开发人员后可以关注更多的界面细节问题，如故事板和控件状态转换的效果。

原型设计

在Silverlight设计工具Blend中包含了原型开发工具SketchFlow，它能帮助我们做这几件事：

设计师和客户的桥梁 使需求与交付物更为明确（涂鸦风格画原型图，显得更清晰） 快速的UI设计（关注界面的整体感觉而不是细枝末节） 吸引客户的原型（有趣味性）

SketchFlow做的原型是能够交互的，一点它可以切换，一动它可以就做业务逻辑。这样的原型，用户看起来非常直观，设计师或需求人员与客户交流起来也更容易，这样就避免了最终交付物与客户需求的差异。以下是在做精算咨询系统时的原型图与最终成型系统截图对比。

图30 原型图与最终成型系统截图对比

还有涂鸦风格画原型图，这是与需求对接的最初原型图，以下是示例图。

图31 SketchFlow 控件组件列表图

图32 最初原型图

与Photoshop、Illustrator的转换

图33 psd与ai格式的文件导入到blend里的 *** 作方法

在Silverlight开发过程中，前期的设计主要使用的工具是Microsoft Expression Design以及Microsoft Expression Blend，它就相当于Adobe出的Photoshop、Illustrator以及Dreamweaver，Design设计完成后可直接存成xaml格式文件，然后在导入到Blend项目文件中即可使用，但目前的Design工具没有Photoshop、Illustrator强大，所以喜欢用Photoshop或Illustrator工具的设计师们也可以很方便的将设计好的文件直接导入到Blend项目文件中运用（ *** 作如下图），这对传统美工的继承能力是非常强的，也很人性化。Photoshop和Illustrator里的层级关系在Blend中同样存在，psd格式文件导入到Blend里的图层都被转成了Image和TextBlock控件，为了减轻整个项目文件的“体重”，可以将里面的Image控件在Blend画布里改装成矢量图形；ai格式文件导入后仍然是矢量路径path控件，可方便进行形状、颜色修改，也不用返回到Illustrator里修改了。这样前端的设计就大功告成了！不用像传统的HTML网页一样设计好后还需要进行切图重新排版布局及繁琐的CSS编写，这样大大减少了设计师们的工作量，让设计师们把主要精力都放在前端界面的设计创意上。

近期微软宣布，Silverlight 5会在2011年的上半年发布beta测试版，并在下半年早期正式发布。Silverlight 5相比4增加了很多新特性，例如使用更平滑的动画获得更好的用户界面体验；文字方面的提升包括多栏文字和包含链接的文字、文本清晰度的提升、对OpenType支持的改善；图像方面的提升包括GPU API、在GPU上直接渲染、在IE 9上的硬件加速等。但在此声明发布之后，开发者很快就开始发表感想，并提出很多问题。不论Silverlight 5将为我们带来什么，这都是一个非常值得期待的事情，它的升级会让设计师们更加的疯狂，在强大的Silverlight功能支持下，会创造出更出色的用户体检，更酷更炫的界面效果，让我们相信，Silverlight将会不断地带给我们惊喜，同时也祝愿它一步一步踏上美的巅峰！

关于作者

杨娜娜，东南融通商业智能软件开发部UI设计师，中国人寿与中国人保Silverlight项目用户体验工程师，拥有多年网站及应用系统界面设计经验。目前负责中国人寿养老金咨询系统 (PACS)、中国人寿养老金网上服务平台与中国人保PICC经营账户管理系统的UI界面设计，得到客户一致好评。

杨李丹，东南融通商业智能软件开发部业务分析师，拥有多个企业级应用业务分析经验，目前负责中国人寿养老金咨询系统 (PACS)、中国人寿养老金网上服务平台与中国人保PICC经营账户管理系统需求分析工作。

以下是本文是提到的部分案例链接，大家要是有好的也可以直接粘过来共享~~

腾讯Silverlight QQ:
slqq.qq.com/

微软Silverlight数码学校宿舍：
www.microsoft.com/student/en-US/digitaldorm/def...

微软sql Server团队计算工具——sql Server Value Tool：
www.microsoft.com/sqlserver/2008/en/us/value-ca...

新浪财经Silverlight版：
vip.stock.finance.sina.com.cn/silverpulse/

国外的Silverlight航空订票系统：
www.preiskombirechner.ch/Preis_Kombi_Rechner.eb...


Silverlight版商业CRM系统：
labs.cas.de/silverlight/CASCRMSL3/

台湾旅游网站，以皮夹式的书签作为交互方式：
eservice2.evaair.com/EABcsPage.aspx

无端网游应用
silverfuture.cn/#

 

PPTV 正式对外推出了 Silverlight版的在线网络电视了！Silverlight是一种类似Flash的技术，它提供内容丰富，视觉效果绚丽的交互体验。相比普通的Flash版，PPTV 的 Silverlight特效看起来更炫,速度更快！

 

http://silverlight.pptv.com/

 

 

 

下面是一家多媒体网站

它的效果十分炫

 

播放器界面

 

商品展示界面

搜索结果界面

网站地址：http://plus.mixplay.tv/videosonline/home

 

Silverlight网站大集合

1.国外的一家电视网站http://plus.mixplay.tv/videosonline/home#videos-de.home:plus

 

2.条形码http://www.neodynamic.com/demo-faq/barcode-silverlight/134/SilverlightBarcodePhotoIdCardOnline/Default.htm

 

3.http://www.neodynamic.com/Silverlight/barcode-builder/

 

4.http://www.neodynamic.com/Silverlight/barcode-builder/

 

5.http://demos.planetsoftware.com.au/YearViewDemo2/YearView.aspx

 

6.http://agkdesign.net/cogged/default.html

 

7.http://www.wattyl.com.au/Designer/Pages/default.aspx?SpaceName=Bedroom%20R175

 

8.http://www.orthogonal.com.au/computers/boxes/

 

9.http://home.clickview.com.au/v10/Player10.aspx?v=9BAAD

 

10.http://www.house-of-innovation.com/

 

11.http://www.powerofresearch.eu/

 

12.http://www.computereasebd.com/election/dashboard.html

13.http://usfromdhaka.com/shamrat231/

 

14.http://www.silverwave.be/bookmarks/Bookmark/SilverLight

 

15.http://www.julianaverissimo.arq.br/

 

16.http://www.netfabrica.com.br/games/genius/

 

17.http://www.carrotemdono.com.br/

 

18.http://toratora.com.br/varejistas.html

 

19.http://www.otimizecortes.com/calculadora_roi/calculadora_roi.aspx

 

20.http://www.thumba.net/

 

21.http://www.elitemodelsbrasil.com/#/Home

@H_403_743@

 

22。http://mindfusion.eu/demos/plannerlite/OnlineDemoIntroPage.html

23.http://magnifyingglass.50webs.com/

24.http://www.wheelzthegame.com/

25.http://www.urbaninferno.com/Comics/Prologue

在此Silverlight网站中http://www.completit.com，提供了许多Silverlight网站链接，用于演示，相当漂亮

 

 

每页都有网站

1. 银光中国网给我们提供了上百例Silverlight的网站示例，感兴趣的朋友可以到此网站浏览

 

 2.silverlight版QQ想必大家也熟悉了

 

 3. 四海伟业

 

4.http://www.pureblue.co.nz/silverlightsurface/

 

 

5.MSN twilight 网站http://msntwilight.com/

 

6.http://www.eslassistant.com/

 

7.股票交易系统http://www.millionid.com/

 

8.体重计算器http://akmotte.fr/poids.html

 

9.windows4all在线模拟Vista http://www.silveos.com/

 

10. http://www.microsoftrnd.co.il/#/home

 

11.搜狐数码-微软silverlight http://digi.it.sohu.com/s2009/silverlight/

 

12.图片浏览 http://www.panaglobe.com/PhotoBrowser.aspx?ID=25d33ff6-bb5c-4398-8082-52b06bd8d2d5

 

13.白宫地图：http://app.colaab.com/R/2171fed2-f060-4c2b-b187-9bc10095ec9f

 

14.微软核心基础架构优化-IT虚拟化产品网站：http://www.microsoft.com/china/CIO/default.mspx

 

15.快乐品茗B2C网站的酷炫新体验：http://www.teapop.cn/cool/

 

16.http://www.garrison.co.kr/

 

17.http://www.essilor.com.mx/

 

 

附：反编译工具下载（包含可导出文件插件）：http://files.cnblogs.com/salam/reflector.rar

总结

以上是内存溢出为你收集整理的Silverlight之美全部内容，希望文章能够帮你解决Silverlight之美所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。