SketchFlow 概述

Microsoft Expression Blend 包含一组新功能，它们专门设计为让用户更轻松快速地创建、传达和审阅交互式应用程序及交互式内容的原型。这组功能称为 SketchFlow。

SketchFlow 原型是实际的 Windows Presentation Foundation (WPF) 或 Microsoft Silverlight 应用程序。您可以生成原型项目，运行它，然后在原型中进行浏览（即使您只有原型的初始草图）。

SketchFlow 原型可以很简单，也可以很复杂，具体视您执行的项目的需要而定。例如，原型可以是包含备注的草图或包含少量备注的幻灯片线性序列（演示在美工板上绘制的工作流），也可以是在“SketchFlow 图”面板中画出轮廓的复杂图形，其中包含单个屏幕上的可重复使用的元素（组件屏幕）和屏幕之间的导航（导航连接）。

SketchFlow 包含多个工具，可让您的原型具备交互性，以便更贴切地模仿生产应用程序的流程。例如，利用 SketchFlow，您可以执行下列工作：

• 从简单的原型（应用程序屏幕上只有一幅草绘的站点地图和简略写下的少量备注）开始，后续不断优化原型。

• 绘制用户界面 (UI) 元素，或从常用的绘图程序中导入这些元素。

• 制作原型动画，在用户和应用程序之间建立直观的交互表现形式。

• 使用完整的标准 UI 元素和自定义控件库。

• 即时创建示例数据，轻松生成数据驱动的 UI，并向数据添加样式。

• 通过使用内置的行为，无需编写代码即可建立交互性。行为是可扩展的，从而可以轻松将自定义行为添加到您的原型制作工具箱中。

• 编写代码以创建自定义元素，或者使用开发团队预建的元素。

美工板

SketchFlow 为您提供两种设计视图：美工板和“SketchFlow 图”面板。美工板为您提供各个屏幕的视图，在这些屏幕上，您可以使用 Expression Blend 中的任何绘图工具进行绘图，可以导入来自 Adobe Photoshop 的图像，以及可以使用 Expression Blend for WPF 和 Silverlight 中的全套控件。您还可以使用状态来显示特定元素的不同状态，或者使用动画来表示与屏幕上的元素进行的交互。

有关详细信息，请参阅在美工板上创建内容。

“SketchFlow 图”面板

可以轻松在“SketchFlow 图”面板中草绘出原型的结构。当您在 SketchFlow 中工作时，此面板出现在 Expression Blend 应用程序的底部。当您处理其他类型的 Expression Blend 项目时，此面板不会出现。

“SketchFlow 图”面板是应用程序流的直观表示，它从第一个屏幕开始，并且跟随用户的交互，一直到最后一个操作。

有关详细信息，请参阅创建应用程序流。

屏幕

原型中的每个屏幕由“SketchFlow 图”面板中的一个节点表示。您可以快速轻松地创建新的组件屏幕或导航屏幕。您可以拥有表示各个屏幕的独立节点，并且可以创建连接以表示各个屏幕之间的连接。

SketchFlow 中有两种类型的屏幕：普通屏幕（有时称为导航屏幕）和组件屏幕。普通屏幕表示您可以导航到的地方。组件屏幕是可重复使用的内容块，或者是可以在多个导航屏幕（例如菜单或播放列表）中重复使用的功能。可以直接在“SketchFlow 图”面板中创建组件屏幕，也可以通过用屏幕上的内容构成组件来创建组件屏幕。

换言之，可以通过直接在“SketchFlow 图”面板中创建新的组件屏幕、组件连接、导航屏幕和导航连接，直接在“SketchFlow 图”面板中定义应用程序的导航和成分。

导航连接

导航连接表示屏幕之间的导航。两个屏幕之间的导航连接意味着，您的应用程序的用户将能够使用由连接间接表示的导航，直接从一个屏幕导航到另一个屏幕。

利用导航连接，可以直接在“SketchFlow 图”面板中快速创建应用程序流的高级视图。

有关详细信息，请参阅创建应用程序流。

组件连接

与导航连接一样，您直接在“SketchFlow 图”面板中创建组件连接。导航连接表示贯穿应用程序的导航，而组件连接表示组件显示在它连接到的导航屏幕上。例如，如果您的设计包含重要的网页元素（例如页眉、页脚和导航栏），则您可以直接在美工板上拖动这些元素，或者创建三个不同的组件节点以分别表示这三个重要的元素，然后在整个项目中重复使用这些元素。

有关详细信息，请参阅创建应用程序流。

SketchFlow 动画

通过使用“SketchFlow 动画”面板，可以轻松创建动画以表示屏幕上的交互式元素。SketchFlow 动画可让您快速轻松地创建简单的动画书样式的动画序列，而无需您了解如何使用 Expression Blend 中提供的关键帧动画工具。

有关详细信息，请参阅添加交互性。

示例数据

Expression Blend 让您无需访问实时数据即可轻松制作出数据驱动的用户界面的原型。您可以使用“数据”面板来生成有意义的示例数据，或者从 XML 文件导入示例数据。示例数据在设计时可供美工板上的控件使用。您可以详尽地自定义示例数据的详细信息，并且可以在运行时轻松地在使用示例数据和使用实时数据之间切换。

有关详细信息，请参阅创建示例数据。

SketchFlow 样式

在创建原型时，您可能想实现手工草绘的外观。SketchFlow 附带了一组适用于 WPF 和 Silverlight 标准控件的外观，它们可以给您的应用程序加上手工草绘的外观。您可以使用基本形状，为您可能拥有的任何自定义控件创建自己的草绘外观模板。通过在原型中使用 SketchFlow 样式，将更突出应用程序流而不是完成的外观，从而使审阅者专注于审阅交互式设计而不是应用程序的图形设计。这样做避免了错误设立的期望和令人误解的反馈（可能起因于在设计阶段早期外观就过于精美的原型）。

SketchFlow 播放器

您随时都可以生成项目、运行项目然后在 SketchFlow 播放器中查看项目，它是一个运行时环境，可按照应用程序流的设计播放应用程序流。

SketchFlow 通过在一个独立的播放器中运行原型来做到这一点，该播放器可让您单击浏览原型、在 UI 中更改状态和运行动画。SketchFlow 播放器还可让您轻松将原型分发给审阅者和收集反馈。您可以直接在原型上绘图和添加批注。可以在 Expression Blend 中查看在 SketchFlow 播放器中收集的反馈，设计者随后可以在该软件中评估和实施这些反馈。

有关详细信息，请参阅预览原型。

注释和反馈

注释是 Expression Blend 中的新功能，它也可用在 SketchFlow 项目中。当您在“设计”视图中工作时，通过使用注释功能，您可以为自己和他人留下备注，或者跟踪来自其他团队成员的反馈。可以隐藏注释，以更便于您查看当前项目。之后，如果想审阅注释，则可以使它们显示出来。

审阅者也可以使用“反馈”面板，在 SketchFlow 播放器中留下反馈。反馈保存为 .feedback 文件，之后可以作为独立的文件发送给设计者。

有关注释的详细信息，请参阅注释文档。

有关反馈的详细信息，请参阅留下关于原型的反馈。

转换原型

可以从 Microsoft Office PowerPoint 演示文稿创建 SketchFlow 原型。也可以将 Adobe Photoshop (.psd) 和 Adobe Illustrator (.ai) 图像导入到 SketchFlow 原型中。您随时都可以直接从原型创建 Microsoft Word 文档。

SketchFlow 项目是标准的 Microsoft Visual Studio 解决方案，因此可以在 Visual Studio 中编辑这些项目。在批准了原型后，可以通过从原型文件中删除 SketchFlow 数据，将原型项目转换为生产项目。在删除了 SketchFlow 数据后，项目将按照与任何其他 Expression Blend 项目相同的方式起作用。

有关详细信息，请参阅转换原型。

结束语

总而言之，SketchFlow 可让您轻松草绘出概念性的应用程序。一开始时，您可以只是创建一系列屏幕，然后开始绘图。在您逐渐完善构思时，您可以添加交互式元素，以使原型按照您的需要贴近成品，传递出您想传达的设计构思。审阅者可以使用 SketchFlow 播放器来查看应用程序流，然后直接在项目中以注释的形式留下反馈。在加入了反馈并且完成了原型后，可以将原型项目移交给开发人员，以转换为最终的 Expression Blend 项目。