sketchflow

I remember teaching user interface design courses back in the mid-nineties. In those courses there was a slide entitled “Rapid Prototyping,” and on that slide were all the reasons why rapid prototyping was a bad idea. Most of the reasoning centered around prototyping tools being so complex back then, they needed to be operated by developers; subsequently, the design process tended to be influenced by all design work needing to be interpreted through the lens of what a prototyper could actually achieve.

我记得上世纪90年代讲过用户界面设计课程。 在这些课程中，有一张名为“快速原型制作”的幻灯片，而在这张幻灯片上，都是快速原型制作是一个坏主意的所有原因。 当时大多数推理都围绕原型工具如此复杂，当时它们需要由开发人员来操作。 随后，设计过程往往会受到所有需要通过原型开发人员实际能够实现的工作来解释的设计工作的影响。

Fast forward to 2010 and there’s been a rethinking on prototyping. A slew of new prototyping tools have appeared over the past few years and they’re rapidly being adopted by interaction designers. I guess the creators of these tools never attended one of my courses!

快进到2010年，人们对原型设计有了重新思考。 过去几年中出现了许多新的原型制作工具，并且它们被交互设计人员Swift采用。 我猜这些工具的创建者从未参加过我的课程之一！

(As you read on, make sure you pay attention, because there’s a quiz at the end!)

(在继续阅读时，请确保注意，因为最后有一个测验 ！)

发生了什么变化？ (What Changed?)

In fact, two things changed to bring prototyping tools back into favor: the tools themselves and the task they’re being used to accomplish.

实际上，发生了两件事，使原型工具重新受到青睐：工具本身以及用于完成任务的任务。

• Prototyping tools today are much more designer-friendly. The adoption of user interface markup languages (like HTML, XAML, and MXML) our ability to build and run more sophisticated software today has made it easier to create design tools that work for designers, rather than developers.

  如今，原型制作工具对设计人员更加友好。 通过使用用户界面标记语言(例如HTML，XAML和MXML)，我们如今能够构建和运行更复杂的软件，这使得创建适用于设计人员而不是开发人员的设计工具变得更加容易。

• At the same time, the nature of what we’re designing is changing. As we move away from designs that are a series of relatively static pages or screens, to designingapplications that use fewer, more dynamic pages, it becomes harder to prototype these experiences using the traditional tools of paper prototyping and diagramming applications.

  同时，我们正在设计的性质正在发生变化。 随着我们从一系列相对静态的页面或屏幕的设计转移到设计使用更少，更多动态页面的应用程序，使用纸样原型和图表应用程序的传统工具来为这些体验提供原型变得越来越困难。

So we have perfect conditions for a new wave of prototyping tools: rising demand and increasing capability.

因此，我们为新一轮的原型工具创造了理想的条件：不断增长的需求和不断增强的能力。

微软的贡献：Expression Blend SketchFlow (Microsoft’s Contribution: Expression Blend SketchFlow)

Among this new breed of prototyping tools we find Microsoft Expression Blend SketchFlow (for the purposes of this tutorial, I’ll be referring to it as simply SketchFlow). While maintaining the Microsoft tradition of remarkably long product names, SketchFlow takes a fairly unique approach to prototyping.

在这种新型的原型工具中，我们可以找到Microsoft Expression Blend SketchFlow(就本教程而言，我将其简称为SketchFlow)。 在保留Microsoft产品名称过长的传统的同时，SketchFlow采用了一种非常独特的原型制作方法。

表达工作室 (Expression Studio)

First, I’d like to point out that SketchFlow is part of Microsoft’s Expression Studio range of design tools. After a lackluster history with design tools, Microsoft seems to be finally getting their act together with Expression Studio (disclaimer: I’ve previously worked at Microsoft). Expression Studio is up to its third release and comprises four or five products depending on how you count them:

首先，我想指出，SketchFlow是Microsoft Expression Studio设计工具范围的一部分。 在使用设计工具的乏味历史之后，Microsoft似乎终于可以与Expression Studio一起工作了(免责声明：我以前在Microsoft工作过)。 Expression Studio截至其第三版，包括四到五种产品，具体取决于您如何计算它们：

• Expression Blend: For building user interfaces for Silverlight, Windows, and Surface.

  Expression Blend：用于为Silverlight，Windows和Surface构建用户界面。

• Expression Blend SketchFlow (part of Blend): For prototyping user interfaces.

  Expression Blend SketchFlow(Blend的一部分)：用于制作用户界面原型。

• Expression Web: For building user interfaces for web standards.

  Expression Web：用于为Web标准构建用户界面。

• Expression Design: For creating graphic assets for the Web or Silverlight, Windows, and Surface.

  表达式设计：用于为Web或Silverlight，Windows和Surface创建图形资产。

• Expression Encoder: For preparing video assets for the Web or Silverlight, Windows, and Surface.

  表达式编码器：用于为Web或Silverlight，Windows和Surface准备视频资产。

You can check out the SitePoint article by Raena Jackson Armitage for more information on Expression Web. There will also be later articles in this series, which will cover Expression Blend and Expression Web in more detail.

您可以查看Raena Jackson Armitage的SitePoint文章，以获取有关Expression Web的更多信息。 本系列中还将有以后的文章，它们将更详细地介绍Expression Blend和Expression Web。

SketchFlow和Expression Blend (SketchFlow and Expression Blend)

It’s important to note the relationship between SketchFlow and Expression Blend. Expression Blend is the production tool for Silverlight, Windows (Windows Presentation Foundation), and Surface, whereas SketchFlow is a prototyping tool built on top of Expression Blend.

The fact that the prototyping tool is built on top of the production tool raises some interesting possibilities—which you may see as positive or negative, depending on your disposition:

• The positive is that you have access to all the production tool’s features, so you can take your prototype as deep as you want, by accessing production features like data binding, web services, third-party components, and, let’s face it, the entire Microsoft .NET platform. This also means you can more easily migrate your prototype (or parts of your prototype) into production if you wish.

• The downside of this access to the underlying production tools is that designers can be overwhelmed by the depth of functionality lurking just below the surface of SketchFlow. Being productive with SketchFlow does require you to understand some of the basic ideas of the Microsoft platform, which may be more that you wished for when you thought you were just going to draw boxes on some pages.

So SketchFlow is just for Microsoft projects?

Expression Blend is the production tool of choice if you’re designing for Microsoft Silverlight, Windows (WPF), or Surface. So if you’re prototyping for these platforms, choosing SketchFlow as your prototyping tool is a no-brainer—particularly since SketchFlow comes free with Expression Blend in the Expression Studio suite, or in many MSDN subscriptions.

If you’re prototyping for other platforms (including HTML/CSS/Ajax) then SketchFlow is certainly an option, especially if you already have Blend or SketchFlow experience. However, in this case—aswith most prototyping tools—you’ll be unable to migrate your prototype into production. You’ll have to build the production version from scratch.

Let’s Give It a Whirl

We’ll now have a look at how SketchFlow works. You might find it quite different from other prototyping tools of which you’re familiar.

The Case Study

For the sake of argument, let’s say I need to add a portfolio to my new website at www.automaticstudio.com.au. I’m imagining a feature that allows site visitors to browse through my portfolio of interaction design projects in a dynamic and engaging way.

I figure Microsoft Silverlight will be a good option for the dynamic elements, because:

• as a designer, I can create a cross-platform interactive experience in Expression Blend with little or no code

• I can easily integrate the Silverlight component with the surrounding HTML page

Create Your First SketchFlow Project

Getting started with SketchFlow is as simple as firing up Expression Blend. You can download an evaluation copy of Blend on Microsoft’s website (Windows only I’m afraid.)

When Blend starts you’ll be presented with a welcome screen. If you want to see what a SketchFlow prototype looks like, choose Samples, and open one of the “…Sketch” prototypes (to run the prototype, press F5 in Blend).

Figure 1. Expression Blend includes a few sample SketchFlow prototypes

When you’re ready to start on our own SketchFlow prototype, return to the welcome screen (Help>Welcome Screen), select Projects, and click New Project…. You can choose WPF for Silverlight 3 SketchFlow Application.

Figure 2. To start your own SketchFlow project, select New Project and Sliverlight 3 SketchFlow Application

The SketchFlow/Blend User Interface

Let’s have a quick look at the Expression Blend user interface. What you’ll first notice is that there’s a lot going on! No need to panic, though.

Figure 3. The Expression Blend UI can be overwhelming at first

The Blend user interface itself is quite busy on its own, and SketchFlow just adds more features. My advice is: do yourself a favour and get rid of some of the panels and tools you won’t need at first.

If you want to clean up the Blend workspace, close the following for now:

• SketchFlow Animation panel

• Resources panel

• Data panel

• States panel

• Projects panel (If you’re a .NET programmer, have a quick look first—you’ll see that SketchFlow projects are standard .NET Visual Studio projects.)

Once you’ve done that, the UI looks more approachable, as shown in Figure 4, “The SketchFlow user interface after a bit of tidying up”.

Figure 4. The SketchFlow user interface after a bit of tidying up

Let’s have a look around.

Artboard

The artboard is probably fairly obvious; it’s where we’ll lay out the screens of our application.

Figure 5. The Artboard shows the contents of your application’s screen

SketchFlow Map

The SketchFlow Map is an important part of SketchFlow—it’s where we draw out the flow of our application, and it’s where you should normally start when creating a SketchFlow prototype.

Figure 6. The SketchFlow Map is where you’ll normally start a SketchFlow project

Objects and Timeline Panel

The Objects and Timeline panel shows you a hierarchical view of the contents of your screen. (Adobe users beware—by default it’s in the reverse order of what you’re used to.)

Figure 7. The Objects and Timeline panel shows you the contents of the current screen

Properties Panel

Another panel you’ll spend a lot of time in is theProperties panel, where you manipulate the properties of the currently selected item. This is the first place where the full extent of the underlying platform shows itself—thereare a lot of properties!

Figure 8. The Properties panel is where you’ll set the attributes of items in your screens

Start with the Screen Flow

The first step in most SketchFlow projects is to map out the flow of your application. On the SketchFlow Map panel, you can drag out a series of screens and connect them up with arrows to show the main user paths through your application.

Figure 9. The SketchFlow Map lets you map out the flow of your application

The SketchFlow Map is probably my favorite feature of SketchFlow. Using it encourages you to consider flow before you think about the contents of individual screens. Ultimately, it’s the flow that causes the most usability problems, and it’s also the most difficult (and expensive) to fix if you get it wrong.

While the SketchFlow Map is made up of screens, my advice is to avoid worrying about what is or is not a screen at first. Just use the SketchFlow Map to draw out the main sequences of actions your users will take. Once you have that flow nailed down, it’ll be much easier to translate those steps into screens.

请务必注意SketchFlow和Expression Blend之间的关系。 Expression Blend是Silverlight，Windows(Windows Presentation Foundation)和Surface的生产工具，而SketchFlow是在Expression Blend之上构建的原型工具。

原型工具构建在生产工具之上的事实带来了一些有趣的可能性-根据您的性情，您可能会认为是正面的还是负面的：

• 积极的一面是您可以访问所有生产工具的功能，因此您可以通过访问生产功能(如数据绑定，Web服务，第三方组件以及整个我们面对的整个功能)，将原型扩展到所需的深度。 Microsoft .NET平台。 这也意味着您可以根据需要更轻松地将原型(或原型的一部分)迁移到生产中。

• 对底层生产工具的这种访问的不利之处在于，设计人员可能会因为潜伏在SketchFlow表面之下的功能深度而感到不知所措。 要使SketchFlow富有成效，确实需要您了解Microsoft平台的一些基本概念，而当您认为只想在某些页面上绘制框时，可能更需要这些。

那么SketchFlow仅适用于Microsoft项目吗？

如果要为Microsoft Silverlight，Windows(WPF)或Surface设计，则Expression Blend是首选的生产工具。 因此，如果要在这些平台上进行原型制作，那么选择SketchFlow作为原型制作工具就很容易了-尤其是因为SketchFlow在Expression Studio套件或许多MSDN订阅中随Expression Blend一起免费提供。

如果您要为其他平台(包括HTML / CSS / Ajax)制作原型，那么SketchFlow当然是一个选择，尤其是如果您已经具有Blend或SketchFlow经验。 但是，在这种情况下(与大多数原型工具一样)，您将无法将原型迁移到生产中。 您必须从头开始构建生产版本。

让我们旋转一下

现在我们来看看SketchFlow的工作原理。 您可能会发现它与您熟悉的其他原型工具完全不同。

个案研究

为了争辩，假设我需要在我的新网站www.automaticstudio.com.au上添加投资组合。 我正在构想一种功能，它允许站点访问者以一种动态且引人入胜的方式浏览我的交互设计项目组合。

我认为Microsoft Silverlight将是动态元素的不错选择，因为：

• 作为设计师，我几乎不需要编写代码就可以在Expression Blend中创建跨平台的交互体验。

• 我可以轻松地将Silverlight组件与周围HTML页面集成在一起

创建您的第一个SketchFlow项目

SketchFlow入门就像启动Expression Blend一样简单。 您可以在Microsoft网站上下载Blend的评估版 (恐怕只有Windows)。

Blend启动后，您将看到一个欢迎屏幕。 如果要查看SketchFlow原型的外观，请选择Samples，然后打开一个“…Sketch”原型(要运行该原型，请在Blend中按F5键)。

图1. Expression Blend包含一些示例SketchFlow原型

当您准备开始使用我们自己的SketchFlow原型时，请返回欢迎屏幕(“帮助”>“欢迎屏幕”)，选择“项目”，然后单击“新建项目…”。 您可以为Silverlight 3 SketchFlow应用程序选择WPF。

图2.要启动自己的SketchFlow项目，请选择New Project和Sliverlight 3 SketchFlow应用程序

SketchFlow /混合用户界面

让我们快速看一下Expression Blend用户界面。 您首先会注意到，发生了很多事情！ 不过，不必惊慌。

图3.最初，Expression Blend UI可能让人不知所措

Blend用户界面本身非常繁忙，而SketchFlow只是添加了更多功能。 我的建议是：帮自己一个忙，摆脱一些起初不需要的面板和工具。

如果要清理Blend工作区，请暂时关闭以下内容：

• SketchFlow动画面板

• 资源面板

• 数据面板

• 国家小组

• 项目面板(如果您是.NET程序员，请先快速看一下-您会看到SketchFlow项目是标准的.NET Visual Studio项目。)

完成此操作后，UI看起来更加平易近人， 如图4所示： “经过一些整理之后，SketchFlow用户界面” 。

图4.经过整理后的SketchFlow用户界面

让我们看看周围。

画板

画板可能相当明显。 这是我们布置应用程序屏幕的地方。

图5. Artboard显示了应用程序屏幕的内容

SketchFlow地图

SketchFlow映射是SketchFlow的重要组成部分，它是我们绘制应用程序流程的地方，也是创建SketchFlow原型时通常应该在其中开始的地方。

图6. SketchFlow Map是您通常开始SketchFlow项目的地方

对象和时间线面板

“对象和时间轴”面板向您显示屏幕内容的分层视图。 (Adobe用户要当心-默认情况下，它的使用顺序与您习惯的相反。)

图7. Objects and Timeline面板显示了当前屏幕的内容

属性面板

您将在其中花费大量时间的另一个面板是“属性”面板，您可以在其中操纵当前所选项目的属性。 这是基础平台完整展示自己的第一个地方-有很多属性！

图8.在Properties面板中，您可以在屏幕上设置项目的属性

从屏幕流程开始

大多数SketchFlow项目的第一步是绘制应用程序流程。 在SketchFlow地图面板上，您可以拖出一系列屏幕，并用箭头将它们连接起来，以显示通过应用程序的主要用户路径。

图9. SketchFlow Map使您可以映射应用程序的流程

SketchFlow地图可能是我最喜欢的SketchFlow功能。 使用它鼓励您在考虑各个屏幕的内容之前先考虑流程。 最终，导致最易用性问题的是流程，如果弄错了，修复也是最困难(也是最昂贵)的。

虽然SketchFlow地图是由屏幕组成的，但我的建议是避免起初担心什么是屏幕还是什么屏幕。 只需使用SketchFlow地图绘制用户将要执行的主要操作序列即可。 一旦确定了流程，将这些步骤转换为屏幕将更加容易。

翻译自: https://www.sitepoint.com/rapid-prototyping-sketchflow/

sketchflow