Silverlight之美

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

• 强大的用户体验

  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经营账户管理系统需求分析工作。

感谢张凯峰对本文的策划及审校。