SketchFlow - 用于原型设计交互式应用程序的工具

• 下载源代码 - 1.28 MB

整篇文章基于 Mix09 上精彩的 SketchFlow 视频，其中 Christian Schormann 介绍了 SketchFlow 的一些非常酷的功能。

引言

在当今世界，优秀的产品的确离不开出色的设计。历史上，软件行业并未真正重视设计过程的早期阶段。

为了创造出色的设计，某些出色的流程会有很大的帮助，而且能够快速有效地探索、沟通和评估设计理念的方式尤其有用。

在设计过程的后期进行草图绘制和原型制作是探索众多想法的绝佳技巧。软件行业变得非常复杂，尤其是在它变得高度动态的意义上。在过去的一年里，软件的动态交互程度有了很大的增长，用户的需求也在增长，而使用传统的设计工具很难有意义地绘制动态交互性。

我们今天使用的许多设计工具实际上是为生产目的而设计的。它们的主要目标是创建具有精美质量的最终资产，而不是快速的非正式草图。

SketchFlow 是一个能够帮助您并指导您从设计过程的第一步到最终生产的产品。SketchFlow 非正式且快速，它使您能够以经济高效的方式为动态交互绘制大量想法。SketchFlow 还解决了从粗略草图演变为动态原型的问题，并将其演变为一个逼真的原型，以传达您的想法和灵感。

SketchFlow 目标

SketchFlow 在 Expression Blend 中是一个创建动态原型的出色工具，用于

• 快速、大量、可随意丢弃且经济实惠地试验动态用户体验
• 将手绘草图或数字创建的草图转化为生动的动态原型
• 向流程中的其他利益相关者传达设计意图
• 收集和评估利益相关者的反馈
• 创建设计规范文档
• 提供即时商业价值：快速、经济高效地为客户提供引人注目的提案

沟通和收集反馈在原型制作的整个过程中可能被严重低估。创建原型是草图绘制、交互式、协作式和团队活动。创建软件设计是一项多学科活动。因此，传达设计理念非常重要。

我们中的许多人在最初的设计阶段并没有真正获得报酬。在企业环境中，我们有一个尚未获批的产品提案，因此快速创建原型非常重要。原型应该宣传一个能够让人们对该想法感到兴奋的想法，并以有效的方式宣传我们想要做的事情，从而带来重要的即时商业价值。

那么，让我们用 SketchFlow 构建一个简单的原型吧！

设置工作区

当您第一次打开 Expression Blend 时，会出现以下默认屏幕。单击新建项目链接。

接下来，您将看到一个包含多个选项的对话框。

将项目命名为 PrototypeStart，然后单击确定按钮。SketchFlow 允许我们创建 Silverlight 和 WPF 应用程序。此时，您的工作区可能看起来与此类似。

让我们转到“窗口”菜单，然后选择菜单中的“另存为新工作区…”。将工作区命名为“SketchFlow”并保存。

画板

屏幕的顶部是画板。这个屏幕是您实际导入和处理草图，或使用 SketchFlow 中可用的控件和绘图工具从头开始创建元素的地方。

SketchFlow 地图

屏幕中紧挨着画板下方、占据大部分空间的部分是 SketchFlow 地图。

将鼠标悬停在蓝色的标记屏幕上，您应该会在其下方看到一个面板出现。您可以创建新屏幕，或者创建连接到现有屏幕的新屏幕。现在，花些时间使用流程画布，看看是否能让您的屏幕和连接器看起来像这样。

向导航流程添加内容

让我们转到“开始”屏幕，使用绘图工具进行绘制，并拖出标签，使屏幕看起来像这样。

让我们转到“欢迎”屏幕。在左上角添加一个标题。为欢迎屏幕添加一个背景图像。

Blend 允许我们访问大量控件（WPF/Silverlight）供 SketchFlow 项目使用。要查看项目列表，请从工具菜单中转到“资源”视图。在此原型中，我们将使用“SketchFlow”类别下的可用资源。这些资源具有草图风格，但功能与任何普通控件（如按钮、文本框、列表框等）相同。

分享您的作品并获取反馈

在概念化的早期阶段分享您的作品并获得反馈是设计项目的一个关键部分。SketchFlow 使分享您的动态原型并获得反馈变得极其容易。

请看下面，您的应用程序在运行时使用 SketchFlow 播放器时的样子。

反馈面板

您可以使用绘图工具创建反馈，也可以通过键入文本创建反馈。您可以保存反馈并将其发送给设计师。然后，设计师可以通过将反馈文件导入 SketchFlow 项目来开始处理反馈。

动画

在 SketchFlow 中，您可以使用动画来演示应用程序中不同交互的显示方式。SketchFlow 动画允许您快速创建动画，从而快速模拟高级交互。

例如，在“绑定”页面中，如果用户单击“查看购物车”按钮，我们希望显示一个购物车列表窗口；单击“实时聊天”按钮，我们希望打开实时聊天窗口。

SketchFlow 中的动画基于 Expression Blend 内置的 Visual State Manager 系统。我们需要做的事情非常简单。我们只需要创建一个状态，并在其中创建帧，并将它们与特定按钮关联起来，这样当用户单击按钮时，特定帧应该以轻微的动画效果出现在屏幕顶部。

设计文档

在任何时候，如果您正在制作原型，SketchFlow 都允许您创建设计文档。您可以转到文件菜单并选择“导出到 Microsoft Word”。

在选择了适当的设置后，您的文档就会被创建。该文档将创建一个目录，显示应用程序的流程，并提供嵌入在 SketchFlow 项目中的图集和运行时注解。

摘要

在本文中，我们学习了 SketchFlow 的所有基本功能，并了解了如何快速、交互式地创建动态原型。