下载后可任意编辑信息架构如何将流程图转化为面1下载后可任意编辑信息架构: 如何将流程图转化为页面
关于”为任务而设计”和”为结构而设计”的问题, 之前曾经重复阐述过, 假如你没印象了, 能够先看下: 《设计原则 VS 实 际情况》和《为产品结构的设计 , 为用户任务的设计 》
”设计时, 既应该关注让任务流畅, 又需要让结构清楚
” 假如你认同了这个观点, 那么, 接下来的问题就是: 应该怎么做呢
下面介绍一个设计方法, 这是一个用于兼顾”为流程”与”为结构”的信息架构(IA)的设计方法
是 底, 我和 seven 共同分析总结出来的
在广州的” 首届中国交互设计体验日”中的工作坊上, 我俩曾现场介绍过这个方法: 一般我们会在设计开始阶段分析出主要的用户任务, 然后逐一任务画流程图
然后呢…直接开始画信息架构图(IA 图)了, IA图怎么画呢
设计者凭空想象着画, 靠经验, 靠见识
IA 树状图标明了主要页面的组织形式, 然后再逐一页面的细致设计
之前画的流程图呢
流程图是保证最终的产品能任务流畅的, 假如能在 IA 的设计过程中切有用上流程图, ”为任务流畅”就能保障了
这里要介绍的就是一个将流程图有效融合到 IA 设计过程中的设计方法—页面简图法: 第一步: 画流程图 结合一个实例来看: 这是一个基于 QQ 秀商城的网站产品
起个名字叫: 搭配秀
用户 A 上传一张真实人物图片, 展示在这个网站中
用户 B 看到这张图片后, 照此搭配出一套 QQ 秀形象, 与之匹配
搭配好的一对作品也会展示在网站中
2下载后可任意编辑 我们先画流程图, 首先总结了这样几个用户任务: 提交待完成的真实人物照片;完成作品;随便看看
三个任务的流程图如下: 为什么流程图没有作用到 IA 设计过程中
最终的产品是一个个页面的集合, IA 是这些页面的组织形式, IA 图