本文介绍了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 绚丽粒子动画效果展示
\
扫一扫
180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
