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