首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 心情日记 > 正文

    [保障任务流畅的IA设计方法-页面简图法]机构运动简图

    时间：2018-08-11来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

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

    “设计时，既应该关注让任务流畅，又需要让结构清晰。”

    如果你认同了这个观点，那么，接下来的问题就是：应该怎么做呢?

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

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

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

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

    第一步：画流程图

    结合一个实例来看：这是一个基于QQ秀商城的网站产品。起个名字叫：搭配秀。用户A上传一张真实人物图片，展示在这个网站中。用户B看到这张图片后，照此搭配出一套QQ秀形象，与之匹配。搭配好的一对作品也会展示在网站中。

    我们先画流程图，首先总结了这样几个用户任务：提交待完成的真实人物照片;完成作品;随便看看。三个任务的流程图如下：

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

    为什么流程图没有作用到IA设计过程中?

    最终的产品是一个个页面的集合，IA是这些页面的组织形式，IA图上的每一个节点就是一个页面。流程图的研究对象不是一个个页面，而是一个个行为，所以，在IA的设计中不知该如何使用流程图。

    有时候整个IA设计完成后，设计者们还能想起来当初画过流程图，可能会翻出流程图来，校验一下设计出来的方案，看方案是否能让这些任务顺利。设计过程中并没为流程而设计，事后的校验要想有好结果，恐怕要靠好运气了。

    肿么办?

    因为流程图的研究对象是行为而不是页面，所以，在最终的基于页面的产品设计方案中难以应用，那么，我们想办法把流程图的研究对象转化成页面就成了呗~

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

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

    转换时，只要粗略想好每个页面大致的设计就好了，比如：这是一个列表页;这是一个登录页…

    这些比页面原型更为简略的图是为了后面搭建IA用的，所以异常简略，你甚至可以只是给每个页面一个名字就够了，此时无需过多考虑每个页面内的具体设计。给这些超简略的图起个名字：页面简图。

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

    第三步：设计信息架构

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

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

    • 有些页面是重复的，只保留一个就好;

    • 保留页面间跳转的那些链接、按钮，它们是任务流畅的保障;

    • IA的设计更侧重于关注合内容逻辑，易学习性。

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

    总结

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

    产品的最终包含的页面是来自于第一步的一个个流程，并且在第二步、第三步中都一直保留着页面间的跳转，这些都保证了“为流程而设计”。

    第三步是专门的设计IA，待组织的这些页面是根据任务流程一串串的，类似“选图片”与“写描述”一定是得归在一堆儿的。IA的设计也会更有依据了。“为结构而设计”也能做的更好了。

    页面简图法的三个步骤，每一步都是在设计，流程该怎么设计?怎么翻译成页面简图?信息架构如何组织?不同的设计者会给出不同的结果。

    设计方法只是给设计者提供一个更为靠谱儿的思路、框架，并不能代替设计者的头脑。

    如果你尝试着应用这个方法，可能会发现，在有些时候，这个方法显得没啥价值，比如，要设计一个图形工具类的产品，靠经验就能判断出显然只有一个主界面，各种流程都是围绕着这个主界面展开的，第二步翻译出来的页面简图会都比较接近，而第三步更是没啥干的，而即使不用这个方法，之前就已经能判断出总共只有一个主界面。

    针对特殊的产品，还应该有更多的更有针对性的设计方法，我之后应该还会总结出一些。与那些未来将诞生的设计方法相比，这里的这个方法应该说是更为通用、普适的。

    文章来源：臭鱼的交互设计 转载请注明出处链接。

    • [保障任务流畅的IA设计方法-页面简图法]机构运动简图 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文[保障任务流畅的IA设计方法-页面简图法]机构运动简图由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.