业务流程图，产品流程图，功能架构图，信息架构图，操作流程图，页面流程图，图图图..

在实习的公司最近刚接手一个云平台产品的交互设计，需要对产品进行全面系统的了解。由于背景知识非常欠缺，经验也不足，光是在网页上随随便便点击几下的“观光式”了解是远远不够的。如果是做一个从0-1的产品，业务是明确的，为了帮助交互设计师思考，可以先出业务流程图（一般这是产品经理出，如果团队的PM很弱，交互设计师就承担这部分的工作），然后功能架构图，但在了解一个已成型的产品的时候，要逆向思维，先梳理已有产品的功能架构图，然后提炼业务流程图。在了解这些图如何绘制的时候，又发现了其他各种图......业务流程图，产品流程图，功能架构图，信息架构图，操作流程图，页面流程图，图图图...于是觉得非常有必要整理一下了。

 

这些图都是帮助设计师思考的，单独看字面意思都好理解，看图也大约明白他们的意思以及如何绘制，但放在一起就很容易混淆了，另外最困扰我的是他们如何使用，以及在思考过程中分别担任的角色。本文并非专业的绘图教程，只是希望梳理清晰这些图是什么，分别用在设计过程的哪个环节等，具体绘制我也是在网上找大牛写的文章，觉得有用的会以链接形式附上。

 

以下内容结合了在网上长时间冲浪获得的信息和自己的理解。

 

一、业务流程图和产品流程图

用于开始界面设计的前一个阶段，定义产品和梳理需求。

参照百度百科稍作修改整理的定义：业务流程图(Transaction Flow Diagram，TFD)是一种描述系统内各人员之间的业务关系、作业顺序和信息流向的图表，一种用图形方式反映实际业务处理过程的“流水账”。而产品流程图，在产品定位和设计流程中的作用与业务流程图差别不太大，我认为从帮助设计师思考的角度出发，这两者是可以“约=”的。

可用5W法明确一些关键信息：

who  简单来说，就是会使用这个产品A的所有人；

what  这些人都在A上做什么，完成哪些阶段性的事这些事是有时间顺序的；

when  这些人什么时候使用A，白天还是晚上，A的不同功能在使用时间或顺序上有什么不同；

where  这些人在哪里使用A，室内还是室外，环境有哪些特点；

why  对用户产生哪些帮助，能解决用户的什么问题，对用户产生什么好处；

 

关于业务流程图的要点：

• 谁在什么时候做了什么，解决了什么问题；

• 涉及到多个角色，拿淘宝来说，包括用户、商家、物流、客服等；

• what部分不要拆的太细，太细会影响对产品的宏观理解，宏观理解不到位后期就很难focus在产品的初衷；

 

参考链接：

http://www.woshipm.com/pd/1840908.html

二、功能架构图和信息架构图

用于界面设计中，帮助明确页面包含的功能点和所有信息。

首先明确两者不同之处在“功能”和“信息”。信息架构是具体到页面上的每一个组件每一个文字每一个符号，是对产品每个页面的所有信息的罗列；功能架构是对产品功能点的提炼，一个功能经常贯穿产品同层级的多个页面。也许你会说，单纯的信息也有传递信息的功能，也和用户发生交互了呀，但我们在绘制功能架构图的时候一般会将两者区别开来。

若是设计一个从0-1的产品或功能板块，先梳理功能架构再梳理信息架构。从帮助设计师思考的角度考虑，我认为功能架构相对信息架构来说，更为必不可少。

或者简单来说（这是带我的交互设计师告诉我的，觉得很好记也很有用），把自己想象成一个产品经理，在构思一个新产品的时候，每个页面有哪些功能，这些功能构成了功能架构。比如一个图文板块，信息架构会包含图片、标题、时间、星级等，但产品经理在明确页面功能（也就是梳理功能架构）的时候不会考虑到这么细的信息。

设计师根据产品经理给的功能架构图，梳理信息架构图，为绘制原型图做好充分准备。

参考链接：

http://www.woshipm.com/pmd/838667.html

http://www.woshipm.com/pmd/844937.html

三、页面流程图和操作流程图

页面流程图是指产品所有页面的流向关系。页面流程图是详细版的业务流程图，是用页面表示的操作流程图，用于梳理流程和逻辑较为复杂的产品，也是为原型图做准备。

参考链接：

https://www.jianshu.com/p/000fd5d53823

http://www.woshipm.com/rp/651734.html

文章内容不长，也没有案例和图示做辅助，只希望能用简短的文字解决基本的困惑，让读完的你可以不在看到这些图就满脸黑人问号。设计小白会继续加油嗒！