流程图\ `1 `__ ===================================================== 画流程应该是最基本最必要的技能。但往往大多数新产品人却对流程的概念异常模糊。 下面将讲解定义、分类以及画法,及各种流程图的特点。 流程图 ------ 流程——顾名思义:水流的路程;事物进行中的次序或顺序的布置和安排。流程是自然而然就存在的,它可以不规范,可以不固定,可以充满问题。 由两个及以上的步骤,完成一个完整的行为的过程,可称之为流程;注意是两个及以上的步骤。 流程图的核心就在于如何排布事物进行的次序,不同的顺序可能造成截然不同的结果。 目的 ---- 1. 流程图为产品设计基石,可以保证产品的使用逻辑合理顺畅 2. 展现了基于用户选择的状态、页面视图和内容,更好地传达需求,用流程图来更好地表达产品逻辑 3. 查漏补缺,检验是否有遗漏的分支流程 组件 ---- .. figure:: ../img/flow_chart_part.png 组件 分类 ---- 流程图以描述对象分类,包括:业务流程图、页面流程图、功能流程图、数据流程图等。 业务流程图(Transaction Flow Diagram, TFD) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ “大象塞进冰箱”–分解 抽象地描述事物进行的次序和顺序,不涉及具体操作与执行细节。在互联网软件行业通常指脱离产品设计的用户行为流程。业务流程图是一种系统分析人员都懂的共同语言, 用来描述系统组织结构、业务流程。 页面流程图(Page Flow Diagram) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 定义:指电子产品具体所呈现的页面跳转流程图。其承载了业务流程图所包含的业务流转信息。 页面流程图依然是包含在业务流程图的。这恰恰符合定义中的要求,同时也印证了页面流程图的正确性。 我们将抽象的业务,映射在了具象的页面上,用软件的页面承载起了业务需求。而以上就是由业务流程图到页面流程图的转化过程。 功能流程图(Function Flow Diagram) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 定义:指单页面内或多页面之间的功能操作流程,其包含在页面流程中。 任何功能都是被包含在页面内的,但一个页面内往往不止一个功能,所以单单页面流程图可能无法完整表达所有流程,而这时就需要用功能流程图来更加具体表达每个页面内所包含的功能。 数据流程图(Data Flow Diagram) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 定义:特指软件产品中,描述数据在不同节点被处理的过程所画的图表。主要表达计算机程序对于业务的实现原理。用户在功能流程图中的每一个操作,对应都会反映在数据流程图中。同时,数据流程图也可以叫程序流程图(Program Flow Diagram)。 它是一种能全面地描述信息系统逻辑模型的主要工具。它可以利用少数几种符号综合的反映出信息在系统中的流动、处理和存储的情况。数据流程图具有抽象性和概括性。 每个流程图中都有一个核心伴随着不同操作在整个系统中不断流转。比如业务流程图大多以人为核心,每个节点都是在传递人的不同行为。而页面流程图和功能流程图也类似,都是以人的操作行为为核心,在不同页面和功能间进行流转。但数据流程图不同,它是以数据为核心,展示整个系统中,数据是如何被处理的。其更偏技术思维,更多的是展现后台程序的实现原理。所以,常常是开发人员绘制此图,而产品经理涉及较少。 理解业务 ~~~~~~~~ 分别展示了一个产品的业务流程、页面流程、功能流程和数据流程。从中可以发现,由业务到页面,再到功能,再到数据处理,是顺序拓展的。一个产品的页面或功能,不是凭空出现的,而是依据业务层的各个节点和流程进行设计的。这就是为什么在做产品设计时一定要先理解业务的原因。 尽量将业务、页面、功能和数据区分清楚,并且逐层递进,不要把多种类型的流程图混杂一起。这样反而会将思想搞得混乱。 颗粒度 ------ 流程图的细致程度。 我在画流程图时也常常会犹豫纠结,这个功能点用不用描写得更详细?这条分支用不用标出来?这个和服务器的交互事件用不用在流程图体现?等等这些问题,也都是产品经理在日常画图时会遇到的。 流程图的结构 ------------ 流程图中大致包含四种结构:顺序结构、条件结构(又称选择结构)、循环结构。基本上大多数流程图都是由这三种结构组成的。 线框图 `2 `__ ------------------------------------------------------------------------------------------------ 线框图只需要使用线条、方框和灰阶色彩填充,是低保真设计图。 \*线框图主要呈现主体信息群,勾勒结构和布局,表达用户交互界面的主视觉和描述。 线框图是一种低保真且静态的呈现方式,产品经理通常使用纸笔来表达自己的想法。 包括:内容大纲:这个产品包含什么内容信息结构、布局:这个产品的内容怎么放用户交互界面:这个产品用户怎么操作 更多图 ------ 蜘蛛图 气泡图 散布图 案例 ---- AI落地 ~~~~~~ 一个AI产品从需求到落地,大概需要经历以下环节: 需求分析→数据采集→数据清洗→数据标注→训练迭代→测试验证→交付模型→生产环境部署