SketchFlow 概述

  • 项目
important note重要须知：

SketchFlow 仅在 Expression Studio Ultimate 中可用。

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 文件，之后可以作为独立的文件发送给设计者。

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

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

发布到 SharePoint

创建了 Expression Blend SketchFlow 项目之后，可以将项目发布到 Microsoft SharePoint 文档库中。有权查看 SharePoint 网站上的内容的任何人都可以访问此 SketchFlow 项目。

审阅者可以通过将其反馈发布到 SharePoint 网站中与其他利益干系人分享这些反馈。

有关发布到 SharePoint 的详细信息，请参阅发布到 SharePoint。

转换原型

可以从 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 项目。

Microsoft Corporation 版权所有 ⓒ 2011。保留所有权利。