SketchFlow:第一款真正意义上的原型设计工具

译文
开发 开发工具 后端
SketchFlow做为微软Expression Blend 3中新加入的工具,与Silverlight 3同一天发布。Expression Blend 3实现了对Silverlight 3的充分支持,而SketchFlow则被评价为第一款真正意义上的原型设计工具。

【51CTO精选译文】上周五微软发布了最新的Microsoft Expression Blend 3 + SketchFlow RC(60天试用版下载,与Silverlight 3的正式版同一天发布)。本文将会SketchFlow的新方向进行简要介绍。SketchFlow是新加入Expression Blend的一个插件,主要用于程序的原型设计。在此以前,我们设计程序的原型时有两个主要问题让人头痛:一是创建能引起人们兴趣的原型非常耗时,二是不能准确地沟通设计思想,让人信服很难。由于在原型设计的初期,很多仅仅是一个初步的想法,具有不确定性,就不能向正式设计软件那样弄得有模有样,只需要准确地将设计人员所想表达出来即可。SketchFlow是第一款真正意义上的原型设计工具。一起来领略一下它的强大功能吧。

51CTO编辑推荐:走向银光 —— 一步一步学Silverlight

SketchFlow映射

在SketchFlow中,你可以使用SketchFlow映射展示建模流程,导航和应用程序结构。SketchFlow原型是由一组屏幕组成的,你可以讲屏幕想象为窗口或对话框,但在原型设计的早期,我更愿意将其看做一块白板,我可以在上面天马行空地绘制草图,随着原型的不断优化和改进,渐渐在脑海中勾勒出了真正的UI模样,然后使用真正的UI替代草图,在SketchFlow映射中,一个屏幕表示一个有颜色的方框。

图 1 SketchFlow映射中的屏幕 
图 1 SketchFlow映射中的屏幕

在映射中的屏幕可以相互连接,原型在运行时可以由一个屏幕导航到另一个屏幕,看起来和PowerPoint中幻灯片播放差不多,但映射并不是一个单一的列表,它可以将幻灯片连接到任何你喜欢的图片,一个屏幕可以导航到多个其它屏幕,也可以从其它屏幕导航回来,导航是用光滑的彩色箭头从一个屏幕连接到另一个屏幕的。

图 2 SketchFlow映射中的导航连接 
图 2 SketchFlow映射中的导航连接

SketchFlow映射中总有一个开始屏幕,当你开始运行原型时第一个显示的就是这个屏幕,你可以使用任何屏幕作为开始屏幕。

图 3 SketchFlow映射中开始屏幕 
图 3 SketchFlow映射中开始屏幕

许多时候,当你构思UI时往往想到的是组件,例如,当你构思一个购物页面时,你想到的会是目录区域、购物车和菜单,在你的原型中以思维导图的方式显示这些应用组件是非常有用的。这里要用到的就是SketchFlow的组件屏幕,组件屏幕和其它屏幕类似,但它不能导航,相反,它们可以插入到一般的屏幕中,插入方式和在页面中插入菜单一样,或者说象在建筑设计软件中在厨房地板规划时插入一个表符号一样,在多个屏幕上可以使用相同的组件,组件屏幕在SketchFlow映射中显示为油罐模样。

图 4 SketchFlow映射中的组件 
图 4 SketchFlow映射中的组件

组件和使用它的屏幕之间使用虚线箭头连接。可以导入PowerPoint幻灯片创建一系列屏幕,但目前导入的每张幻灯片只能是一张图片。

SketchFlow风格

因为SketchFlow是放在Blend中的,因此可以使用内置的WPF或Silverlight UI控件或布局面板,而且还有大量的第三方控件可以使用。

标准控件用于准开发上非常好,但用于原型设计就有点不恰当了,因为原型主要是表达结构和概念,为此SketchFlow专门引入一套风格,让标准控件看起来和原型一致,弯曲的线条,潦草的字体,但控件的作用是一致的,只是外观上看起来有点不同而已,控件模板允许我们快速更换其皮肤。

图 5 草图风格和标准风格的控件外观 
图 5 草图风格和标准风格的控件外观

播放器

只要原型中有SketchFlow映射,不管映射中是否有屏幕,这时原型都是可以运行的。SketchFlow播放器是用于执行原型的程序,在播放原型时就可以进行人机交互了,如果你的原型是WPF,那么播放器就是一个应用程序,如果你的原型是Silverlight,那么播放器就运行在浏览器中。

无论哪种方式,播放器都是原型的一部分,你可以同时分发它们。SketchFlow播放器有两个重要的功能:探索和反馈。这样可以多人同时对原型交流自己的意见,并进行标记,也可以提交反馈,并可以导出这些内容。

图 6 在播放器中进行直观的交流,表达自己的意见 
图 6 在播放器中进行直观的交流,表达自己的意见

在上面这个图中红色和绿色的标记就是在播放器中增加的反馈,当然也可以在左边输入文本注释。

设计文档

几乎所有设计项目都需要设计文档,SketchFlow可以将原型导出为Word文档,文档包含了映射的屏幕截图,也包含了组件和组件屏幕,还有一个内容表和图片表,这可以省去不少工作时间,因为在准备项目报告时就需要这些资料。SketchFlow使用你计算机上的默认Word模板,你可以进行模板定制。

动画制作

在原型设计早期,我们希望能够快速简单地沟通设计理念,动画就是进行快速沟通的有效方式,SketchFlow提供了一整套动画制作工具,你可以为一个屏幕创建许多动画,也可以在播放器中显示动画,因此在展示原型时又多了一个有力的表现方法。

SketchFlow提供动画是基于帧的,但它与一般的关键帧方式有点不一样,SketchFlow提供了一个特殊的动画方法“SketchFlow动画”,它以动画的形式一步一步显示这些UI是什么,它和粘土动画有点类似,首先增加一个故事板帧,然后按你喜欢的方式布局屏幕,再反复重复这个过程。

对每个故事板帧,你可以设置一个停留时间(帧的显示时间)和过渡时间(从上一帧到本帧的过渡时间)。

图 7 SketchFlow动画 
图 7 SketchFlow动画

状态

如果你以前曾经用过Blend,那你一定了解SketchFlow中状态的概念,状态是从Blend 2 SP1才引入的概念,状态在所有UI上都非常流行,如按钮在按下、经过和禁用时都可以有不同的视觉状态,一个Web页面可以根据用户的登录和注销状态来显示不同的颜色,屏幕上的组件也可以放大缩小等等。

原则上我们可以在原型中通过使用不同的屏幕构建不同的状态,例如我们有一个屏幕显示网站的正常状态,还有一个屏幕显示用户登录后的状态。

实际上视觉状态就是屏幕的快照,当你在视觉状态之间切换时,实际上是从一个快照切换到另一个快照,状态很容易创建,只需添加一个,然后按你的意愿规划屏幕的内容即可。

状态也可以使用组进行管理,这样你就可以在一个屏幕上重叠多个状态。状态也可以包括动画,状态之间可以实现平滑的过渡,下面的截图显示了预置的过渡功能。

图 8 预置的过渡功能 
图 8 预置的过渡功能

线路导航和状态改变

使用播放器探索原型真的非常有用,但在某些时候需要在屏幕的真实UI控件上实现线路导航和状态改变,在SketchFlow中,你可以不用编码就可以与线路导航,状态改变和其它行为进行交互,因为导航和状态改变在原型开发中是公用的,SketchFlow引入的捷径UI也就是为了这个目的。

Blend 3特性简介

Adobe Photoshop和Illustrator导入:能够一层不变地导入,保持文件的图层、矢量数据和文本信息,同时还可以转换PSD文件;

数据绑定:建立工作数据绑定列表和主从细信息视图;

行为:行为和数据一起可以创建更深层次的交互,以前是需要手工编码才能实现的;

工作区:可以在Blend中创建并保存自己的工作区,在不同原型设计阶段可以定义不同的工作区。

更多SketchFlow的功能介绍可参考Expression Blend 3新工具:用SketchFlow来设计原型一文。

原文:SketchFlow Concepts: An Overview

作者:electric beach网站

【编辑推荐】

  1. Expression Blend 3与SketchFlow发布
  2. Expression Blend 3新工具:用SketchFlow来设计原型
  3. 微软发布Silverlight 3正式版 新增50多项功能
  4. 微软Silverlight 3挑战Adobe AIR
  5. 图解Silverlight 3的7个新功能
责任编辑:yangsai 来源: 51CTO.com
相关推荐

2015-08-31 20:36:51

微简

2019-10-31 11:22:15

物联网数据安全

2014-08-19 10:14:47

App应用原型设计工具

2012-04-26 09:44:41

Cargo-BotiPad编程工具

2015-09-08 10:44:15

MIAOW图形处理器开源

2009-07-14 10:55:26

Expression SketchFlow

2015-08-31 17:45:14

微简

2010-05-31 15:03:27

无线一点通测试工具Fluke Netwo

2009-03-24 08:41:45

Dell智能手机移动OS

2017-04-20 12:56:46

原型设计工具

2012-04-04 12:40:37

HTC

2013-03-08 17:28:53

飞鱼星企业级路由器移动互联网

2011-07-13 10:54:08

宝德游戏云平台云计算

2010-08-11 10:32:41

龙芯产品封装

2011-09-16 14:55:47

HTML 5

2023-03-29 23:40:24

2016-03-17 14:26:09

QLogic

2014-04-25 11:12:16

BootstrapBootstrap工具

2013-10-15 10:29:44

天天酷跑手游
点赞
收藏

51CTO技术栈公众号