【交互设计】 绘制交互流程图的方法

flow-game-screenshot-1

这几天做IDEA

下面是如何绘制流程图的文章

放在这里,并写下自己的收获,方便以后查阅。

收获如下:
  1. 操作步骤是用户正常情况下完成某项操作所需的操作,而交互流程图(严格意义上叫程序流程图)表达是执行逻辑的路径,通俗地将是当用户点击某个按钮之后,程序执行命令的顺序。
  2. 在绘制流程图的时候应该和大致的页面相互对应起来,同步进行思考,保证设计每一个环节的紧密性,而不是最后页面出来之后再绘制流程图,或者再对照是否是按照流程来做的。

 

一、

学习产品设计初期肯定会遇到两个问题:

  • 第一,如何考虑更全面;
  • 第二,如何绘制交互流程图。

开始产品设计前先要考虑所有可能性,如何才能以线性流程图的方法组织所需的设计元素。小郑老师的《交互设计表格》中已经介绍了非常实用的表格穷举法,适合初学者使用。

流程图是产品经理和交互设计都必须掌握的技能,一张流程图可以省去需求文档和交互设计文档的很多文字描述,让技术人员一目了然地明白设计意图,便于组织程序的逻辑顺序。

绘制流程图准从简单的原则,流程图是设计师的产出物,体现设计意图,主要给技术人员和测试人员浏览,至于自己是如何思考不应体现在流程图中。别人也要早点回家被老婆,没有时间关心你如何的细心的考虑,也不关心用户会如何思考和操作的,请直接给他们展示设计的结果。

复杂和纠结留给自己,简单留给别人。对用户是这样,对工作同伴也是如此。

ixd-doc-flow-01

图例1:手机程序开机检查更新的流程图

 

流程图包括以下图形:

  • 矩形表示交互环节
  • 菱形表示问题判断
  • 箭头表示工作流方向
  • 也有用圆角矩形表示“开始”和“结束”,

个人一般不要该图形,因为从上而下的线性流程图。

  • 最顶部的图形或者箭头开始的部分是流程图的“开始”,如图例中,开启程序触发了事件,程序开始检查更新;
  • 最底部的图形或者箭头终止的部分是流程图的“结束”,如重启程序和不再提示表示本次事件结束,无须以图形区分表示“开始”和“结束”。

流程图容易和操作步骤混淆,比如《交互设计表格》中的登录框操作步骤是:

  1. 点击登录,弹出登录框
  2. 点击用户名输入框,输入用户名
  3. 点击密码输入框,输入密码
  4. 点击登录

操作步骤是用户正常情况下完成某项操作所需的操作,而交互流程图(严格意义上叫程序流程图)表达是执行逻辑的路径,通俗地将是当用户点击某个按钮之后,程序执行命令的顺序。更复杂的系统流程图可用于产品架构。

当用户点击的登录框之后,文字描述程序执行的顺序:

  1. 检查用户名是否为空。如为空,提醒用户“请您输入用户名”。
  2. 如果用户名设置要输入手机号码,还要检查手机号码是否是否以13/15/18开头的11位数字。
  3. 检查密码是否为空。如为空,提醒用户“请您输入密码”。
  4. 检查用户名是否是已用账户。程序提交数据与服务器数据进行比对。
  5. 如果不是,提醒用户“用户名不正确”。疑问:用户名有误和不存在是如何判断的? 检查密码是否与账户匹配。
  6. 如错误,提醒用户“密码输入不正确”。 现多数登录框将4和3合并,只提醒“用户名或密码不正确”,可能是告知用户过于准确的信息之后会增加盗号风险。
ixd-doc-flow-02
图例2,wap站验证用户手机号码

 

二、

“设计时,既应该关注让任务流畅,又需要让结构清晰。” 如果你认同了这个观点,那么,接下来的问题就是:应该怎么做呢?

下面介绍一个设计方法,这是一个用于兼顾“为流程”与“为结构”的信息架构(IA)的设计方法。是2010年底,我和seven共同分析总结出来的。在广州的“2010年首届中国交互设计体验日”中的工作坊上,我俩曾现场介绍过这个方法:

通常我们会在设计开始阶段分析出主要的用户任务,然后逐一任务画流程图。然后呢…直接开始画信息架构图(IA图)了,IA图怎么画呢?设计者凭空想象着画,靠经验,靠见识。IA树状图标明了主要页面的组织形式,然后再逐一页面的细致设计。之前画的流程图呢?似乎没用到。

流程图是保证最终的产品能任务流畅的,如果能在IA的设计过程中切实用上流程图,“为任务流畅”就能保障了。

这里要介绍的就是一个将流程图有效融合到IA设计过程中的设计方法—页面简图法:

第一步:画流程图

结合一个实例来看:这是一个基于QQ秀商城的网站产品。起个名字叫:搭配秀。用户A上传一张真实人物图片,展示在这个网站中。用户B看到这张图片后,照此搭配出一套QQ秀形象,与之匹配。搭配好的一对作品也会展示在网站中。 我们先画流程图,首先总结了这样几个用户任务:提交待完成的真实人物照片;完成作品;随便看看。三个任务的流程图如下:

为什么流程图没有作用到IA设计过程中? 最终的产品是一个个页面的集合,IA是这些页面的组织形式,IA图上的每一个节点就是一个页面。流程图的研究对象不是一个个页面,而是一个个行为,所以,在IA的设计中不知该如何使用流程图。 有时候整个IA设计完成后,设计者们还能想起来当初画过流程图,可能会翻出流程图来,校验一下设计出来的方案,看方案是否能让这些任务顺利。设计过程中并没为流程而设计,事后的校验要想有好结果,恐怕要靠好运气了。 肿么办? 因为流程图的研究对象是行为而不是页面,所以,在最终的基于页面的产品设计方案中难以应用,那么,我们想办法把流程图的研究对象转化成页面就成了呗~

ixd-doc-flow-03

 

第二步:将流程图转换为页面简图

转换时,只要粗略想好每个页面大致的设计就好了,比如:这是一个列表页;这是一个登录页… 这些比页面原型更为简略的图是为了后面搭建IA用的,所以异常简略,你甚至可以只是给每个页面一个名字就够了,此时无需过多考虑每个页面内的具体设计。给这些超简略的图起个名字:页面简图。

上面这些页面简图就是这个产品要包含的主要页面了,把它们组织起来,使其有序,这就是

ixd-doc-flow-04

ixd-doc-flow-05

ixd-doc-flow-06

 

第三步:设计信息架构

ixd-doc-flow-07

在第三步中需要说明的几个问题:

  • 有些页面是重复的,只保留一个就好;
  • 保留页面间跳转的那些链接、按钮,它们是任务流畅的保障;
  • IA的设计更侧重于关注合内容逻辑,易学习性。

通过这三步的设计方法,产品的架构就搭建好了。页面简图中已经对每个页面有了大致的设计,现在完成了IA,接下来就可以去细致的设计每个页面了。

 

总结

页面简图法是一个信息架构的设计方法。这个方法通过页面简图将流程图翻译为页面和页面间的跳转关系,再组织这些页面,形成信息架构(IA)。

产品的最终包含的页面是来自于第一步的一个个流程,并且在第二步、第三步中都一直保留着页面间的跳转,这些都保证了“为流程而设计”。 第三步是专门的设计IA,待组织的这些页面是根据任务流程一串串的,类似“选图片”与“写描述”一定是得归在一堆儿的。IA的设计也会更有依据了。“为结构而设计”也能做的更好了。

页面简图法的三个步骤,每一步都是在设计,流程该怎么设计?怎么翻译成页面简图?信息架构如何组织?不同的设计者会给出不同的结果。 设计方法只是给设计者提供一个更为靠谱儿的思路、框架,并不能代替设计者的头脑。

如果你尝试着应用这个方法,可能会发现,在有些时候,这个方法显得没啥价值,比如,要设计一个图形工具类的产品,靠经验就能判断出显然只有一个主界面,各种流程都是围绕着这个主界面展开的,第二步翻译出来的页面简图会都比较接近,而第三步更是没啥干的,而即使不用这个方法,之前就已经能判断出总共只有一个主界面。 针对特殊的产品,还应该有更多的更有针对性的设计方法,我之后应该还会总结出一些。与那些未来将诞生的设计方法相比,这里的这个方法应该说是更为通用、普适的。

 
 
 
顶部图片来源:http://thatgamecompany.com/games/flow/
文章及图片来源:http://blog.sina.com.cn

 

 

订阅评论
提醒
guest
0 评论
内联反馈
查看所有评论