Silverlight技术白皮书-设计师如何使用SILVERLIGHT

开发人员使用SILVERLIGHT

2021-10-20

为Web应用程序创建一个吸引人的交互式应用，可以让用户更容易了解其内容，更吸引人使用。Microsoft Silverlight与Microsoft Expression Designer工具相结合，让你可以充分的发挥丰富的设计构想，并且完美的结合可视化的资源和丰富的数据达到一个富有创造性的环境。

引人注目的用户体验

不需要利用真正的矢量图形，动画和梯度等位图图形就能提供有吸引力的用户界面

当用户与一个企业进行沟通时，不管是在移动设备还是在 Web上还是在物理世界中，用户都期待更好的，功能更多，更易于使用的用户接口。每次从头开始设计用户界面，既费时又增加设计师的负担。虽然位图图形提供了极大的功能和控制接口，但它只能被用在固定的分辨率和指定的大小，在当今多屏，多设备，多分辨率的社会，应用程序要向这个方向转变，将增加设计师大量的工作。

Silverlight利用矢量图形，这个技术是独立的，并且允许设计师修改原始图形，并为不同的屏幕尺寸和分辨率迅速的调整和优化布局，同时仍旧保留使用基于像素的图像的方法。

使用Expression Blend使Silverlight的动画功能变得轻松，并且允许设计师向应用程序中添加需要在屏幕上显示的纹理，并且当用户使用的时候这些纹理会有什么反映。

整合高质量的视频来创建具有视觉冲击力和高级功能的品牌媒体应用程序

创建一个有效的高质量的视频体验，汇集了很多创建有视觉冲击力和令人兴奋的体验的不同元素。一个吸引人的用户体验，其实是由高品质，流畅的免费视频，利用动画的能力，视频叠加，广告插入技术和轻松自定义交互界面这些元素中的几个结合起来而形成好的用户体验。

Silverlight平台，Expression Encoder 和 Expression Blend一起，允许设计师快速的建立当今 Web中用户希望的高品质的Silverlight视频体验。Expression Encoder，在下面图例18所展现的，为Web程序准备的，采用压缩编辑视频文件，并且尽可能使用最新的高质量高性能的 VC-1解码方法，通过视频给予设计师所需要的控制，不管这些视频是否编码，独立，大批的还是实况录像。强大的 XAML，有添加标记的功能，可以被用来触发广告或者在指定的地方进行文字叠加，又或者让 Silverlight应用程序和Web页面中的其他元素进行更新，同时 XAML提供给设计者前所未有的空间去建立一个像我们在今年早些时候看到的， NBC的网络奥运直播这样有影响力的 Web视频体验。

**图 18：**Expression Encoder

Expression Encoder可以自动的使用完成预定义的Silverlight视频播放模板来封装一个视频。而且这个视频播放器可以使用自带的大量模板，或者使用具有交互设计特性的 Expression Blend从头开发的一个模板。

Expression Blend给设计师了一种快速建立拥有漂亮外观和感觉的 Silverlight视频播放器的体验，增加微小的动画，像 DVD一样的导航和全方位充分自定义的视频播放器控件，设计师可以为每个应用程序快速有效的定制播放器。使用 Expression Encoder可以大大增加设计师的生产力，完成的模板将被看做编码进程的一部分。

探索类似Deep Zoom这种崭新的模式，去创建如今下一代的交互式应用程序

DeepZoom给设计师提供了一种全新的设计应用程序或 Web程序的方式。设计师不必再去受限制于用户屏幕的分辨率，或者他们选择的传送技术的显示能力。 DeepZoom不仅提高了Web上图像的显示和交互能力，而且节省了带宽，因为它只去精确的传送指定分辨率的图片中的一部分图像。

是什么使设计师如此着迷于DeepZoom，事实上在Silverlight中，DeepZoom的图像和其他的图像是一样的。 DeepZoom图像与其他Silverlight图像的运行机制相同，并且可以由 Silverlight动画工具进行管理，而且DeepZoom可以在页面中加入平移和缩放的功能。

DeepZoom已经被很多网站所应用到实际，比如雷诺Laguna Coupe (http://www.laguna-coupe.com/silverlight)和Kelly Blue Book (http://www.kbb.com/kbb/PerfectCarFinder/PhotoEdition.aspx )

**图 19：**Kelly Blue Book网站的汽车查看器使用DeepZoom 让用户可以看到一系列的汽车

强大的技术

利用高度可定制化的控件，为你的应用程序快速的设计一个好看的外观和感觉，现在可以不用受限制于代码。

当如今的网络消费者使用Web时，他们希望能够获得更有活力和更流畅的用户体验。而 Silverlight可以让设计师提供一个与众不同，全新的，主题明确的应用程序。这些可以使用户更快速的找到他们所需要的信息，更容易做出复杂的决定，并且可以使用户在网站上停留的时间更长，同时也帮助企业能更有效的吸引和留住他们的客户。

去建立一个高度自定义的全新的应用，其所使用的组件也同样需要能让设计师轻松的定义。 Silverlight 和 Expression Blend全都给设计师提供了一种快速且强大的在每个控件内部进行可视化操作，修改或者全部重新设计控件的样式和每一个独立元素的感受的途径。

开发者可以扩展Silverlight控件提供的方法，并且通过Expression Blend中的属性检查器将扩展后的控件展示给设计师。

通过Expression Blend，Silverlight中的Visual State Manager可以被设计师利用。Visual State Manager允许状态由Silverlight控件模板的内部触发，并允许设计师去控制控件是如何响应，比如“鼠标经过”和“按压”这种事件的。

除了这些，Visual State Manager还允许设计师使用一种样式去设置多个控件的属性，也允许设计师快速设计和部署大量变化的应用程序。

为你的应用程序精确的准备内容，以便符合多变的网格和布局。

创建一个好的Web应用程序，要求设计师对元素的位置，元素间彼此的相对大小有完全的掌控。 Silverlight中的布局控件可以让设计师用他们需要的，可以提供给用户引人注目的用户体验的完美的像素，输出他们的用户界面。设计师仍然拥有对所有控件的全部控制，用户界面是如何标尺的，这样确保设计师提供的是一个抛开屏幕尺寸和分辨率的最佳的用户体验。

通过完美的使用XAML，一个你的图形的强大标记格式，可以使图形和控件交给开发人员的时候，完全保持一致。

以前，设计师从来不敢保证他们的图形和用户界面传到应用程序开发过程的时候还是保持与原设计完全一致。一旦图形交给开发人员，设计师就基本上失去了对图形的控制，并且开发人员就有了一个不可能完成的任务，必须去使用代码重新创建一个设计师可视化创建的用户界面。

不可避免的就是设计师所设计的一些微妙的细节将不复存在；无论是用代码实现复杂的可视化元素，还是仅仅由于产品工期的时间限制，完成的应用程序从来都不会与设计师的初衷完全一样。

此外，改变应用程序的视觉效果是一个十分痛苦的过程，因为这个操作必须将从设计到开发的全部流程重新执行。

Silverlight就通过XAML解决了这个问题，它是使用建立在标记语言基础上的本地文本来描述图形的。图 20展示的就是一个用XAML标记图形的例子。

<Ellipse HorizontalAlignment="Stretch" Margin="194,90,109,68" VerticalAlignment="Stretch" StrokeThickness="20">
    <Ellipse.Stroke>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF1F1EF2"/>
        <GradientStop Color="#FFFFFFFF" Offset="1"/>
    </LinearGradientBrush>
    </Ellipse.Stroke>
    <Ellipse.Fill>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF90B1EC"/>
        <GradientStop Color="#FF0F5CE4" Offset="1"/>
    </LinearGradientBrush>
    </Ellipse.Fill>
</Ellipse>

**图 20：**在 Blend中画的Linear Gradient; 并使用 XAML展示

在Expression Design中，设计师可以使用相同的专业插图和绘画工具，他们也可以使用以前使用过的第三方的设计工具。因为最后导出的所有图形，都将以 Silverlight中的本地图形格式XAML保存。要使图形添加互动性和贴近生活的用户体验，设计师将 XAML文件导入到Expression Blend中。Expression Blend对图形使用同一种格式，XAML，它允许设计师导入，并且继续对图形进行完全精确的控制。参看图例 20中的例子。

一旦设计完成了，开发人员可以在 Visual Studio项目中直接使用相同的XAML文件（Visual Studio 和Expression Blend也使用同样的项目文件格式）。这样，在全部的应用程序设计过程中，都将使用完全相同的 XAML图形。

设计师可以最终创建资源，因为他们的设计将会被自始至终的贯穿于整个设计开发流程。从Expression Blend中的Expression Design到Visual Studio，图形，用户界面元素和设计资源都从设计阶段到成品，完美的衔接。设计师的最初设计理念，将会没有任何更改的全部保留下来。

加速的结果

使用Expression Blend快速的替代你的Silverlight应用程序的最终的用户界面，图形和功能。

设计师和开发人员可以无间的进行合作，分享 Silverlight项目，代码和设计，已达到更高的效率和质量。设计师可以快速的创建一个吸引人的丰富的用户体验，而开发人员则可以马上使用这个应用的底层代码。这个过程没有任何需要更改的地方，也没有用代码实现图形的乐趣，仅仅是简单的从设计师平稳过渡到开发人员。

将XAML用户界面从底层应用代码分开的 Silverlight流程，使得设计师和开发人员在不影响其他工作的情况下，可以反复快速的使用应用程序的设计和代码。

这将带来创造性的解放，也推动了应用程序设计的边界。这个创造性的自由，对于两方面来说就是解放。设计师可以在 Expression Blend中不断完善和优化用户设计，并且更晚的应用于应用程序设计环节，因为这些都不会造成当设计整合到最终的应用程序的时候，增加开发团队的额外工作。而开发人员则不必再为最后一刻因为设计改变了而影响应用程序代码的完整性而担心。

**图 21：**在 Expression Blend 建立 EasyJet站点

在创建 EasyJet网站的过程中，设计师同样使用 Microsoft Expression® Studio来处理设计和媒体应用。在这套工具中， Microsoft Expression Blend™提供了一个可以为 Web和桌面应用程序创建更丰富交付的专业设计工具。 Beau Ginbey，交互设计师，高兴的说“ Expression Blend给我们提供了确保我们的设计可以完美的和开发人员合作的功能，给我们了最终完美的像素。它打破了用户体验和开发团队之间可能存在的障碍，帮助他们在一个大型的项目中共同工作，而不是分块单独的工作。”

可以使用现有的设计工具和很多业界标准的格式的资源，比如PSD，AI和JPEG。

设计环节最重要的一方面就是设计师如何实现他们已经想好的想法和理念。

当设计师们仍然需要利用其他的设计工具，比如 Adobe Photoshop 和 Adobe Illustrator去将图形和可视化元素导入到Expression设计工具时，他们将享受在Silverlight平台上的创作的自由。

可以使用业界标准的文件格式，诸如 PSD，AI和JPEG，以及自始至终贯穿于设计过程的加强了设计师和开发人员合作的 XAML，提高了设计师不需要改变他们的工作习惯，就能创建出与他们当初设计的完全相同的应用程序的能力。

**图 22：**使用 Expression Blend 将一个PNG图像导入XAML.

将你的应用程序部署到所有可以支持Silverlight的平台上，你将会发现，在所有平台上的所有浏览器都会呈现出和设计时完全一直的外观和感受。

设计师主要关心他们的作品的视觉完整性，同样，开发人员则关心他们的代码的质量和可靠性。在如今，设计师在 Web的设计中最令人沮丧的是，在不同的机器，浏览器和平台上，按照原来的设计，并不能完整的复制任何层面。

不同的显示器分辨率，不同的屏幕 DPI，许多浏览器所提供的不同引擎，都可以导致显示出来的设计，与设计师想要提供的设计不同。

Silverlight在提供了一个跨浏览器跨平台的强大的运行时，它给了设计师信心，不管应用程序在什么地方运行，他们的设计都会完整的保留下来。

由于有了一个项目在不同平台和不同浏览器上的一致解释和播放这个功能，设计师可以将精力完全放在整个应用程序用户体验的设计上，而不用去考虑为了在不同平台得到相同的效果，而去不断的修改应用程序的 UI。

从整个开发过程的最初理念，到最终的应用程序，从最终将应用程序部署到不同的平台和浏览器中， Silverlight平台，Expression tools 和 Visual Studio实现设计师初衷的能力被完全证实。

上一篇：Silverlight技术白皮书-开发人员使用SILVERLIGHT

下一篇：Silverlight技术白皮书-附录 1

通过