网站内容发布流程图(交互设计中如何帮助设计师思考的全面系统了解？（上）)

　　网站内容发布流程图(交互设计中如何帮助设计师思考的全面系统了解？（上）)

　　实习公司刚接手一个云平台产品的交互设计，需要对产品有一个全面系统的了解。由于缺乏背景知识和经验，仅仅点击几下网页“观光”的理解是远远不够的。如果您正在制造 0-1 产品，则业务很清楚。为了帮助交互设计师思考，可以先上业务流程图（一般这个是产品经理，如果团队的PM很弱，交互设计师会承担这部分的工作），然后是功能架构图，但是当你理解一个成型的产品时，你要逆向思考，先梳理现有产品的功能架构图，再细化业务流程图。当我了解如何绘制这些图表时，我发现了其他各种图表......业务流程图，产品流程图，功能架构图，信息架构图，运营流程图，页面流程图，图表和图表。..所以我觉得有必要整理一下。

　　这些图片是为了帮助设计师思考。单单从图片的字面意思就很容易理解。看图就可以理解它们的含义以及如何绘制它们，但是将它们放在一起时很容易混淆。最让我烦恼的另一件事是他们如何使用它们。以及他们各自在思考过程中的作用。本文不是专业的绘图教程。只是希望能梳理清楚这些图纸是什么，用在了设计过程的哪一部分。具体的图纸我也在网上找了大牛写文章。如果有用，将以链接的形式呈现。附。

　　以下内容结合了长时间上网所得的资料和本人的理解。

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

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

　　参考百度百科修改整理定义：业务流程图（Transaction Flow Diagram，TFD）是描述系统中人员之间的业务关系、工作顺序和信息流向的图表，以图形方式反映实际业务处理过程的“流水账”。至于产品流程图，产品定位和设计流程的作用与业务流程图没有太大区别。我觉得从帮助设计师思考的角度来说，两者可以是“约=”。

　　5W法可以用来澄清一些关键信息：

　　简单的说，谁会使用这个产品A；

　　这些人在A上做了什么，完成这些事情的时间顺序是什么阶段；

　　这些人什么时候用A，白天还是黑夜，A的不同功能的使用时间或顺序有什么区别；

　　这些人在什么地方使用A，室内还是室外，环境特点是什么；

　　对用户有什么帮助，能为用户解决什么问题，给用户带来什么好处；

　　关于业务流程图的要点：

　　参考链接：

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

　　用于界面设计，帮助阐明页面中收录的功能点和所有信息。

　　首先，明确两者的区别是“功能”和“信息”。信息架构特定于页面上的每个组件、文本和符号，是产品每个页面上所有信息的列表；功能架构是对产品功能点的细化，一个功能往往贯穿同一层级的多个产品。页。你可能会说简单的信息也具有传递信息和与用户交互的功能，但是我们在绘制功能架构图时一般会区分这两者。

　　如果你是从0-1设计产品或功能部分，先梳理功能架构，再梳理信息架构。从帮助设计师思考的角度来看，我认为功能架构比信息架构更重要。

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

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

　　参考链接：

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

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

　　参考链接：

　　文章 内容不长，也没有案例和插图来辅助。只希望能用短文解决基本的困惑，让你看完这些图片，面对黑色的问号，看不到这些图片。设计小白会继续加油的！