保障任务流畅的IA设计方法-页面简图法

九月 17th, 2011 43 Comments »

关于“为任务而设计”和“为结构而设计”的问题,之前曾经反复阐述过,如果你没印象了,可以先看下:《设计原则VS实际情况》和《为产品结构的设计,为用户任务的设计》。

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

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

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

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

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

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

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

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

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

上面这些页面简图就是这个产品要包含的主要页面了,把它们组织起来,使其有序,这就是
第三步:设计信息架构

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

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

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

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

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

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

有43 条对“保障任务流畅的IA设计方法-页面简图法”的评论

  1. 酷爱裸奔 说:

    图还是那么奔放……

  2. 橙 说:

    学习了…

  3. www.tclook.com 说:

    嘿嘿 博主搞设计的就是厉害 那个图 都那么有个性 支持一个 其实经常来你博客看文章的

  4. Seven 说:

    应该把那个NB的整体试图给放出来。

  5. chouyu 说:

    @seven:太多了,我努力的写了几天才把这个设计方法写成2000字以内,要是把整个试图都交代清楚了,估计至少得写成4尺长的页面。

  6. www.360yhk.com 说:

    非专业人士绝对看不懂啊 呵呵

  7. 桶 说:

    倒过来了吧?IA是产品的框架,是核心,是不变的,需要苗条而结实。任务是某个功能的行为表现,任务应该在IA的基础上去发挥,是可变的,譬如上传相册,你可以先建立一个相册,在相册里面上传照片,也可以上传照片之后再创建一个相册,甚至上传一个照片就可以,不一定要创建一个相册,没有人规定照片一定要放到相册里面。。。

    如果一个大的系统,这样做IA,累死人

  8. 唐彦也 说:

    发个水贴,对不住了
    BANG8A5B46A25BBD0462E47CDB31XIANGUO

  9. 知识产权 说:

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

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

  10. chouyu 说:

    @桶:如果先建立IA,这个IA是怎么建出来的呢?如果后面的任务不能在这个IA上良好的实现,怎么办呢?
    实际上,这个方法正是要解决这样的问题。

    对于大系统,这样做累不累… 我想,累不累不是我们要追求的目标,对不对才是。

  11. seo第一站 说:

    写的不错,顶顶!转载了~声明下~

  12. […] 来源:http://www.chouyu.com.cn/?p=342 […]

  13. […] 来源:http://www.chouyu.com.cn/?p=342 […]

  14. 互联网的一些事 说:

    好文章,转载到互联网的一些事(yixieshi.com)

  15. 汽车用品 说:

    以前没事来看看有咩有更新,无语 忘记了能订阅你的rss了

  16. 秋秋 说:

    wow有新文章啦,前来围观~*^-^*

  17. www.tclook.com 说:

    支持一个 再次来了 文章貌似没更新啊

  18. Jeoy 说:

    这个IA的建立是否基于用户的目的很强的操作,例子的搭配秀就是用户想要操作的目的,目的性很强且扩展度不高,那如果是想做一款听音乐的app,目的很简单,听音乐,但是它的目的性层次太低(主要目的就是听音乐),而扩展性太强(像显示歌词、演唱者分类,快速添加列表,批量删除,设置为铃声等等),那这个IA应该如何去做,是不是IA的适配性有一个范围?请chouyu @一下!

  19. yanyan 说:

    “设计方法只是给设计者提供一个更为靠谱儿的思路、框架,并不能代替设计者的头脑。”
    老臭,我喜欢这句话!恰当的设计方法有助于表达设计者的思想,用得好,也能帮助设计者修正甚至拓展思考。

  20. amy 说:

    写的太好了,学习!
    对新手帮助很大~!

  21. scutum 说:

    不错哦

  22. 桶 说:

    不知道是不是因为我们对IA的定义不同?我们做了产品分析,用研之后,会得到一系列的功能需求,用卡片分类。。。最后得到一个完整的IA。这个IA是符合用户认知模型的,是不变的,可以看看这次苹果主页,导航条就是我们的IA,所有的内容都可以通过导航去找到,但是任务是可以变的,可以去引导用户的,现在的苹果主页上,除了导航是一张jobs的缅怀照片(向jobs致敬)。但是丝毫不会影响你在这个网站的任务目标。。。任务设计的不确定性,我想,正是设计师他可以表现的风格所在,这当然也会产生一些糟糕的任务设计。

    我想你正在试图用一种万能的设计方法,然后把重心放在了任务设计上,试图达到无论设计什么都可以用这种方法去达到想要的效果,可是这限制了设计他本来的意义,设计他是自由的,对于我来说,如果设计的风格跟用户习惯有那么一点冲突,但是不会影响用户任务太多,我仍然偏向设计的自由。你说呢?

  23. 胶原蛋白哪个牌子好 说:

    我来看看了,

  24. chouyu 说:

    @桶:
    你第一段里所说的工作方式其实与我这里写的是类似的,只是你是将一个个“功能需求”作为一个个单元,对这些功能需求做IA设计。我觉得这未免还是有些笼统了。因为不同的功能需求中会包含相同的页面。
    你第二段中所说的“设计的风格”是什么呢?为什么会存在这样的设计风格呢?价值在哪里?存在这样一种东西,它不会很影响我们的目标,所以我们可以忍受它,那为什么要有它呢?少个捣乱的不好吗?

    这里介绍的这个方法是在强调任务在IA设计中的价值,原因是之前我们往往太忽视任务了。或者你可以理解为矫枉过正吧。当然这个方法也不是万能的,我在文章的最后两段说明了。
    一个设计方法一定要具有一定的普适性,才有价值,不然就称不上是设计方法了,只是针对单个项目的经验总结了。

  25. sky_pp 说:

    感觉没有多大用处,而且看起来不是很清晰,特别是会让人很累

  26. 轻疯自在 说:

    一点拙见,三张流程图更贴近于系统流程,虽然覆盖了用户任务,但个人感觉将业务流程与系统流程分开似乎更好。再有一点疑问,此种设计方法的输出物,是给谁看?开发人员?测试人员?还是用户?如果是给团队内的人来看,用业务流程图讲清楚业务(用户任务?),系统流程图说明如何落地,细节用UC+DEMO做诠释,似乎也够用了。

  27. 桶 说:

    对,不同的功能可能会包含相同的页面,甚至一个功能会有几个页面。。。因为下面还会继续做页面布局的工作,我想我们是侧重点不一样吧。。。

    设计风格,就是内容的表现形式吧。譬如说,你可以用“下一步”来引导用户继续下面的内容,你也可以像购物网站那种在上面有清晰的写着你到第几步了,。。。也譬如腾讯总是喜欢用诸如qq钱包这种窝状的对话框而不是直接链接到网页。。。我的意思就是说,引导用户去完成任务是可以多变的,根据不同的设计者有不同的形式,而不变的是架构。。还是那句话,可能是我们的侧重点不一样吧,呵呵

  28. […] 来自:臭鱼的交互设计 […]

  29. 冰棍 说:

    @桶
    臭鱼重点在说信息组织,归纳包含元素与处理元素是两个阶段.
    IA-UE-UI 随着层层递进,使用场景和每个功能点都会逐渐清晰
    您说的”下一步”与”路径指引”其实在具体环境具体页面中肯定有优劣之分,谈不上什么风格,不如说是取舍.

  30. 吃饭进行时 说:

    请问,您觉得交互设计这专业,它的技术点在哪里?是对逻辑的梳理?

  31. 臭鱼 说:

    @吃饭进行时:技术点在于理性的去思考设计

  32. 产品里的技术 说:

    大哥,流程图加个箭头吧,让它再像个流程图

  33. www.rijigu.com 说:

    这个图很严谨,学习一下

  34. 致远管带 说:

    转到我博客上了啊

  35. http://www.hitianmao.com/ 说:

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

  36. blackbird 说:

    任务流程是通过什么确定的呢,比如chouyu举得例子里要从收藏中选择已经做好的qq秀上传,但如果我根据经验判断,我的收藏里正好有合适的qq秀这种概率是很小的,用户的主要任务是新建一个qq秀并上传,而系统自动将新建的qq秀保存到收藏。

  37. 匿名 说:

    可以在网页的右侧添加个日志的列表吗?

  38. UxFACE 说:

    […] (转自:臭鱼的交互设计Blog,http://www.chouyu.com.cn/?p=342) posted in 交互设计 and tagged IA, 流程图, 简图法, 页面简图法 by admin. Bookmark the permalink. […]

  39. 嘟噜网 说:

    写的很好,学习了。

  40. […] 來源:http://www.chouyu.com.cn/?p=342 […]

  41. […] 源地址:http://www.chouyu.com.cn/?p=342 […]

  42. www.liquan.org 说:

    学习了…

  43. 轻风微鸣 说:

    看到你文章的前两段,我就是在结构和任务流程的关系,如果把一个产品比作一棵树,那么树枝,树干,树根都是结构,而当养分从地下部分输往地上部分时,这就是任务流程,从地上往地下部分运输也如此。而有时我们为了 让任务更快更顺畅,会走最短路线,很容易将这种运输体系搞乱,得不到养分,树便死亡。

发表评论

您的大名: