SketchFlow:第一款真正意义上的原型设计工具
【51CTO精选译文】上周五微软发布了最新的Microsoft Expression Blend 3 + SketchFlow RC（60天试用版下载，与Silverlight 3的正式版同一天发布）。本文将会SketchFlow的新方向进行简要介绍。SketchFlow是新加入Expression Blend的一个插件，主要用于程序的原型设计。在此以前，我们设计程序的原型时有两个主要问题让人头痛：一是创建能引起人们兴趣的原型非常耗时，二是不能准确地沟通设计思想，让人信服很难。由于在原型设计的初期，很多仅仅是一个初步的想法，具有不确定性，就不能向正式设计软件那样弄得有模有样，只需要准确地将设计人员所想表达出来即可。SketchFlow是第一款真正意义上的原型设计工具。一起来领略一下它的强大功能吧。
SketchFlow映射
在SketchFlow中，你可以使用SketchFlow映射展示建模流程，导航和应用程序结构。SketchFlow原型是由一组屏幕组成的，你可以讲屏幕想象为窗口或对话框，但在原型设计的早期，我更愿意将其看做一块白板，我可以在上面天马行空地绘制草图，随着原型的不断优化和改进，渐渐在脑海中勾勒出了真正的UI模样，然后使用真正的UI替代草图，在SketchFlow映射中，一个屏幕表示一个有颜色的方框。
图 1 SketchFlow映射中的屏幕
在映射中的屏幕可以相互连接，原型在运行时可以由一个屏幕导航到另一个屏幕，看起来和PowerPoint中幻灯片播放差不多，但映射并不是一个单一的列表，它可以将幻灯片连接到任何你喜欢的图片，一个屏幕可以导航到多个其它屏幕，也可以从其它屏幕导航回来，导航是用光滑的彩色箭头从一个屏幕连接到另一个屏幕的。
图 2 SketchFlow映射中的导航连接
SketchFlow映射中总有一个开始屏幕，当你开始运行原型时第一个显示的就是这个屏幕，你可以使用任何屏幕作为开始屏幕。
图 3 SketchFlow映射中开始屏幕
许多时候，当你构思UI时往往想到的是组件，例如，当你构思一个购物页面时，你想到的会是目录区域、购物车和菜单，在你的原型中以思维导图的方式显示这些应用组件是非常有用的。这里要用到的就是SketchFlow的组件屏幕，组件屏幕和其它屏幕类似，但它不能导航，相反，它们可以插入到一般的屏幕中，插入方式和在页面中插入菜单一样，或者说象在建筑设计软件中在厨房地板规划时插入一个表符号一样，在多个屏幕上可以使用相同的组件，组件屏幕在SketchFlow映射中显示为油罐模样。
图 4 SketchFlow映射中的组件
组件和使用它的屏幕之间使用虚线箭头连接。可以导入PowerPoint幻灯片创建一系列屏幕，但目前导入的每张幻灯片只能是一张图片。
SketchFlow风格
因为SketchFlow是放在Blend中的，因此可以使用内置的WPF或Silverlight UI控件或布局面板，而且还有大量的第三方控件可以使用。
标准控件用于准开发上非常好，但用于原型设计就有点不恰当了，因为原型主要是表达结构和概念，为此SketchFlow专门引入一套风格，让标准控件看起来和原型一致，弯曲的线条，潦草的字体，但控件的作用是一致的，只是外观上看起来有点不同而已，控件模板允许我们快速更换其皮肤。
图 5 草图风格和标准风格的控件外观
播放器
只要原型中有SketchFlow映射，不管映射中是否有屏幕，这时原型都是可以运行的。SketchFlow播放器是用于执行原型的程序，在播放原型时就可以进行人机交互了，如果你的原型是WPF，那么播放器就是一个应用程序，如果你的原型是Silverlight，那么播放器就运行在浏览器中。
无论哪种方式，播放器都是原型的一部分，你可以同时分发它们。SketchFlow播放器有两个重要的功能：探索和反馈。这样可以多人同时对原型交流自己的意见，并进行标记，也可以提交反馈，并可以导出这些内容。
图 6 在播放器中进行直观的交流，表达自己的意见
在上面这个图中红色和绿色的标记就是在播放器中增加的反馈，当然也可以在左边输入文本注释。
设计文档
几乎所有设计项目都需要设计文档，SketchFlow可以将原型导出为Word文档，文档包含了映射的屏幕截图，也包含了组件和组件屏幕，还有一个内容表和图片表，这可以省去不少工作时间，因为在准备项目报告时就需要这些资料。SketchFlow使用你计算机上的默认Word模板，你可以进行模板定制。
动画制作
在原型设计早期，我们希望能够快速简单地沟通设计理念，动画就是进行快速沟通的有效方式，SketchFlow提供了一整套动画制作工具，你可以为一个屏幕创建许多动画，也可以在播放器中显示动画，因此在展示原型时又多了一个有力的表现方法。
SketchFlow提供动画是基于帧的，但它与一般的关键帧方式有点不一样，SketchFlow提供了一个特殊的动画方法“SketchFlow动画”，它以动画的形式一步一步显示这些UI是什么，它和粘土动画有点类似，首先增加一个故事板帧，然后按你喜欢的方式布局屏幕，再反复重复这个过程。
对每个故事板帧，你可以设置一个停留时间（帧的显示时间）和过渡时间（从上一帧到本帧的过渡时间）。
图 7 SketchFlow动画
状态
如果你以前曾经用过Blend，那你一定了解SketchFlow中状态的概念，状态是从Blend 2 SP1才引入的概念，状态在所有UI上都非常流行，如按钮在按下、经过和禁用时都可以有不同的视觉状态，一个Web页面可以根据用户的登录和注销状态来显示不同的颜色，屏幕上的组件也可以放大缩小等等。
原则上我们可以在原型中通过使用不同的屏幕构建不同的状态，例如我们有一个屏幕显示网站的正常状态，还有一个屏幕显示用户登录后的状态。
实际上视觉状态就是屏幕的快照，当你在视觉状态之间切换时，实际上是从一个快照切换到另一个快照，状态很容易创建，只需添加一个，然后按你的意愿规划屏幕的内容即可。
状态也可以使用组进行管理，这样你就可以在一个屏幕上重叠多个状态。状态也可以包括动画，状态之间可以实现平滑的过渡，下面的截图显示了预置的过渡功能。
图 8 预置的过渡功能
线路导航和状态改变
使用播放器探索原型真的非常有用，但在某些时候需要在屏幕的真实UI控件上实现线路导航和状态改变，在SketchFlow中，你可以不用编码就可以与线路导航，状态改变和其它行为进行交互，因为导航和状态改变在原型开发中是公用的，SketchFlow引入的捷径UI也就是为了这个目的。
Blend 3特性简介
Adobe Photoshop和Illustrator导入：能够一层不变地导入，保持文件的图层、矢量数据和文本信息，同时还可以转换PSD文件；
数据绑定：建立工作数据绑定列表和主从细信息视图；
行为：行为和数据一起可以创建更深层次的交互，以前是需要手工编码才能实现的；
工作区：可以在Blend中创建并保存自己的工作区，在不同原型设计阶段可以定义不同的工作区。
更多SketchFlow的功能介绍可参考Expression Blend 3新工具：用SketchFlow来设计原型一文。