译文：SketchFlow Map 小型教程一

原文链接：http://electricbeach.org/?p=302

首先，让我们创建一个新的项目。如果你是第一次打开Blend，你应该可以看到如下的欢迎画面：

选择New Project…，在之后的对话框里，选取Silverlight 3 SketchFlow Application，如下所示，然后单击OK。

以下是你启动一个新项目后Blend的样子：

在美术板周围有很多的UI在我们的第一个原型中并不需要。Blend有新的工作空间管理功能，可以让你创建自己的工作空间。在本教程中我要用一个隐藏了所有我不需要的东西的工作空间。如下所示：

添加屏幕

当你刚刚打开一个新的SketchFlow项目的时候SketchFlow Map看起来会是这个样子：

蓝色的矩形代表着一个屏幕，你可以从它周围的空无一物看到，当前它是独立的。SketchFlow里的每一个屏幕当然都有相应的内容，你可以在Blend的艺术板上编辑它们。

在我们给那个孤独的屏幕添加一些伙伴之前，让我们往它里面放一些内容。请记住，在一个新的原型中把屏幕非正式地看成白板通常是有用的。所以，我们只要在上面粘贴一点笔记就行了。

在工具栏上点击“>>” 图标，弹出资产工具：

 

打开SketchFlow分类，和子分类Styles，然后点击“SketchStyles” （见图片中的箭头）。这是你可以获得的素描式控件清单：

拖动“Note – Sketch”项目（箭头所指）到美术板上。你会得到一个你可以输入东西的区域：

输入一些文字，例如“Hello World – a sticky note for my first prototype”，然后按Esc键退出文本编辑器（按回车的话只会给你带来新的一行）：

让我们回到SketchFlow Map上那个孤独的屏幕(screen)。要创建一个新的屏幕(screen)，我们有两种选择。让我们都尝试一下。最有趣的选项是使用在那个屏幕本身上的一个小的可折叠的UI来拖动出一个新的屏幕。将你的鼠标悬停在屏幕(screen)上：

通过点击并拖动左侧的图标来拖动出一个新的屏幕(screen)：

这就是你拖动的同时所看到的---一个新的屏幕就像第一个的幻象：

松开鼠标 - 瞧 - 你的第二个屏幕(screen)，很高兴地通过一个蓝色箭头连接到第一个屏幕上，这是一个导航连接。

你也可以看到那个新的屏幕现在是被选定的（白光），而美术板现在显示的是一个空的新的画面。

简而言之，通过拖动屏幕(screen)可折叠菜单上最左边的图标，我们创建了第二个屏幕，并通过导航连接连接到第一个屏幕上。

为了说明这意味着什么，让我们先添加一些内容到这第二个屏幕(screen)上。用铅笔工具随便画点东西。铅笔工具在这里：

选中它，并随便画一下：

注意：如果你刚刚开始使用Blend，默认情况下的铅笔工具会创建被填充的形状。这对铅笔工具来说并不太合理，但如果你画的东西看起来像被切断了，你可能要选择所有的涂鸦，并设置填充(Fill)属性为“No Brush” 。您可以像往常一样通过按Ctrl - A来选择所有。填充(Fill)属性在这：

 

 

播放
好，到目前为止我们有两个屏幕(screen)，其中一个是记事贴，另一个是一些涂鸦。让我们运行这个惊人的原型：按F5或选择项目 > 运行项目...

这是在Internet Explorer中的你的微型原型：

这个播放器在左边提供了额外的用户界面，可让你浏览和探索你的原型，即使就像我们的例子里的那样，只是一对屏幕而没有任何实际的用户界面。

 

回到地图

让我们回到地图。我之前说过，有两种基本的方式来创建一个新的屏幕。一是从现有的节点上拖动出来。第二种方法是使用地图工具栏创建一个新的、完全无关的节点：

结果看起来是这个样：

正如你在右边所所看到的，一个新的无关联的屏幕被创建在你的地图中间（它看起来像是在右边因为在我们的屏幕截图中将它裁剪了）。你还可以看到该屏幕被选中。

利用这个机会，迅速地将另一个记事贴拖到上面，只要说个“Hi”。

 

下站：连接在这里

在一个有联系的世界中，我们不想让这个新屏幕孤零零的存在。当然我们可以将它连接到我们已经有的屏幕上。同样，有两种方法可以做到这一点。

我们从捷径开始。

在屏幕3上按住鼠标并在地图中拖动它。正如你所看到的，它的幻象会跟着鼠标移动：

现在，看看如果你拖动幻象到现有的屏幕上会发生什么事：

幻象被一条白色的连接线所替代，告诉你你会得到一个连接如果你只是松开鼠标。或者换句话说，你可以通过拖动屏幕1到屏幕2上来连接屏幕1和屏幕2。结果看起来会是这样：

现在我们看看第二种方法。还记得屏幕的那个小的可折叠菜单？

要连接到屏幕上，我们可以使用菜单左边数过来的第二个按钮：

尝试从屏幕1拖动到屏幕3 ：

拖放到一个在同一方向上但是还没连接着的屏幕上，即可大功告成。

只是为了完整性，尝试从屏幕3连接回屏幕1 ：

结果，您得到两个并行的连接，每个朝向不同的连接方向，从屏幕上1至屏幕3 ，另一个返回。

颜色和其他显示选项

在我们结束之前，还有一些有用的东西要介绍：

屏幕和连接可以有不同的颜色。要为节点设置颜色，调处悬停菜单使用最右边的那个按钮。一个调色板会弹出来：

 

你还可以更改默认颜色。转到Project>SketchFlow Project Settings

此外，你还可以调暗连接和屏幕(screen)，来使地图更清晰和更容易阅读。基本上来说，这个功能所作的就是自动地调暗所有不是以所选的节点为开始或结尾的连接，例如：

调暗之后，屏幕1和屏幕3之间的连接变得暗了很多。在复杂的地图上这会产生很大的差别。