关于流程图元素定义、结构分类;以及,我有一些技巧告诉你

流程图很重要,在开发和测试中,重要性胜于PRD等文档,因此多练习,培养规范的绘制习惯和绘制思路,会减少很多不必要的沟通,也会让PM对产品的脉络更加了然于心,庖丁解牛就是这个道理了。
前前后后做了四五个项目,确定需求后,交互、UI都要求绘制流程图,每次都达不到预期效果。自己总结了一下,工具很多,我基本都接触了,万变不离其宗,再好用的工具也用过,始终不如意,想来想去还是觉得流程图的功底不够。
网上搜罗一大圈,大家都各有各的绘制方法,元素的定义也不统一,这并不是什么好事情。所以今天整理了一下流程图的绘制基本规范,供大家参考学习。
单独为项目管理做的流程图规范并没有,目前的流程图规范基本都是为企业和工业,研究了一些相关的资料和我大学时候的相关课件笔记,做了一些优化,希望可以更适应互联网产品的流程图绘制。

一、流程图绘制的核心

绘制流程图是梳理思路的最好方法,没有之一。在产品处于想法过渡到模型的阶段,流程图对模型建构起了提纲挈领的作用。流程图对应用户体验要素中的结构层或者范围层,可以梳理功能模块、业务流程、使用路径。绘制流程图一定要注意,太乱、太复杂的流程图不是真的多难,是你自己没有梳理好,这个时候一定要反思。

二、流程图元素定义

参考:标准流程图制作规范讲义(百度文库)

二、流程图结构分类

1.循序结构

定义:根据流程图的步骤,依次执行,符合理想状态下的流程图,也是流程图主轴的基本结构。这也符合我之前在登陆注册中提到的一个概念——正常功能和异常处理。
语法解读:DO 任务1——then do 任务2
适用场景:流程图中的主要步骤或环节,按照产品设计依次进行。

2.二元选择结构

定义:二元选择结构是最常见的,我们经常遇到需要处理“是”或“否”、“确定”或“取消”这样的组合式选择。最常用的元素就是”判断决策”。
语法解读:if 条件成立,then do 选择1;or do选择2。
适用场景:二元选择结构出现在决策选择环境下,一般都是二元组合式选项,必选其一,或者只有其一。当选择二者之一时,也对应不同的路径。

3.多重选择结构

定义:流程图依据条件或者类型,提供两个以上的选项或者方案,且互相之间不是组合式选项,并列存在,不冲突。
语法解读:for条件P case1 do方案1
Case2 do方案2
Case3 do方案3
………
适用场景:当条件或者类型固定后,程序给出多个同层次的选择和方案,自由选择,每个方案都按照程序设定给出路径。

4.重复结构

定义:条件本身的满足状态处于可激活状态,通过重复某一要素可满足该状态,从而实现程序目的。重复结构只有当条件为真时才继续其他程序。
语法解读:repeat do 程序 until条件满足
适用场景:可重复可逆的操作,先进行程序处理,再确定是否满足条件。该操作会对条件产生能动作用,并最终有可能满足条件,从而结束重复,进入出口。

5.DO-while结构

定义:该结构和多重选择结构相似,区别在于,当条件为false时,不再重复。
语法解读:while条件,do程序,end
适用场景:先判断条件是否满足,再决定是否继续重复该操作。

三、流程图绘制原则

1.流程中每个元素内必须键入key word,主轴尤其如此,旁支需要备注的,采用备注元素不影响当前流程顺序的前提下选取合理位置备注,务必简明扼要。
2.当某流程出现选择或决策结果时,需要认真走查,避免出现漏洞,导致流程无法形成闭环,功能缺失。
3.绘制时,考虑流程图全局,合理安排绘制路线,尽量绘制的简单明晰。绘制必须遵从从上自下,从左至右的顺序,为了提高流程图的逻辑性,可以在每个元素上用阿拉伯数字进行标注。
4.处理程序需要形成闭环。坚持一个入口,一个出口的特性,使得流程图在逻辑上不出现缺失(该特性仅适用流程图内部部分流程)
5.路径应避免交叉。
6.统一路径的指示方向只有一个。

四、绘制小窍门

1、拆分模块。经常会遇到业务说“这个功能我们也要”‘大概就是这个样子’,虽然这是很不负责的言论,但是作为PM要针对业务提出的总体目标或者需求,进行分割,例如用户下单可以分为登陆、浏览商品、编辑订单、支付动作、完成/未完成。按照这种小的模块来绘制流程图会很清晰,而不至于乱糟糟的一团,还不如不绘制。
2、子流程巧用。有很多的小模块可以不听的复用,但是在整个大的流程中,不听的绘制重复的模块是很费时间,也会弱化流程图的清晰感。其实频繁复用的子流程作为“图例”来使用是最好不过的,没必要浪费时间重复绘制,费力不讨好。
3、泳道图之间关联尽量单一。绘制泳道图是处理多角色、多系统、多模块的复杂需求的最好方法。泳道图的本质就是希望可以通过角色、系统、模块的划分将复杂的功能梳理切割清晰,因此多模块之间的关联尽可能单一,实际中也不存在多联系线条的情况(可自己验证),因此如果泳道之间多条关联,最好自己反思下是不是模块切割的不合理,绘制图不够简洁。
本文由 @白三 原创发布于人人都是产品经理。未经许可,禁止转载。

线框流程图:一款用于工作流程或APP的UX交付

介绍

在UX领域,线框图是一种常见的的用来表现页面层级布局理念的交付,然而,流程图对于记录复杂的工作流程和用户任务是十分有用的。
尽管这两种交付都普遍用于UX领域,然而它们并不是交流设计想法的最佳工具,尤其是在记录没有很多独特页面,却有一些会因用户交互而内容(或布局)产生动态变化的多核页面的手机、桌面、或者 Web APP 的时候。
最近几年,一种可供选择的叫做线框流程图的交付,作为解决这些问题的方法浮出水面,线框流程图过去常常被用来表现普通用户任务中使用场景的设计。
一个网页线框图能够传达那些主要是静态页面的网站或应用的布局想法,内容和页面层级设计,但它在交流复杂的动态操作流程时是没用的。
流程图被用来描述后端进程和用户任务流程(正如这个例子),然而,对于UX使用来说,它缺少页面的上下环境——一个严重影响用户体验的因素。

线框流程图作为一种工作流程交付

定义:线框流程图是一种将线框图式的页面布局设计和简化后的像和流程图一样的交互表达方法相结合的设计规范板式。
这个低保真线框流程图展示了一个简单的用户任务。屏幕设计的使用,而不是用抽象的流程图符号,使我们能够持续聚焦在这个用户将发生交互的产品上。
线框流程图能被高保真创作用于交流详细的设计规范的同时,它们跟用来讨论交流交互设计和用户工作流程的低保真文件一样是有用的。
线框流程图作为一种团队中设计移动端APP时的普通方法出现,在流程图中的每一步都相当于一张填满手机屏幕设计的线框图。
因为相对而言,手机屏幕尺寸较小,真实的页面设计(如线框图)能够十分容易取代线框图中的抽象符号。
然而,线框流程图不仅限于记录移动端应用和网站——它们同样能被用于桌面产品,典型地就是被用来展示一个屏幕或网页因用户交互而变化的那部分。
许多电子商务购物表单和收银台页面的设计,同样适合用线框流程图来细化。

为什么我们需要新的东西:流程图和线框图不能很好的记录复杂的APP

通常说来,介绍一个规范化的新样式是不好的,因为许多相关者不知道如何去解释它。通常来说旧的东西更熟悉。
然而,我们确实喜欢线框流程图,因为对于之前见过线框图和流程图的人来说它很容易学,并且线框流程图有足够的优势来克服其他同类产品中的不足之处。
线框图是一种很好的表现布局的方法,但是它们不能很好的描述交互,它们尤其不能很好的记录一个带有很多动态内容的电子产品的布局,例如移动APP和Web APP。
当记录带有很多不相关联的、相对静止页面或屏幕的网站(或者其他电子产品)时,线框图是很有用的,因为在这些页面或屏幕上,点一个链接或按钮通常会导航至一个完全不同的页面。
然而,很多现代Web APP和移动端APP只有很少的完整页面,但会基于用户对产品的交互,通过AJAX(或者其他科技)相应地改变内容和布局。
不论是选择分类或过滤,产品页面展示就会发生变化的电商产品,还是基于工具、模型、或其他控制参数之间的交互,整体布局和信息的展示就会发生强烈变化的,复杂的、创造性的或技术性的应用,它们都有涵盖。
在这些案例中,线框图不能很好的抓住各种布局的可能性,或者内容变化的规则。除此之外,线框图也不能够记录在用户与页面发生交互后,系统呈现给用户的重要反馈。(和系统认证过的用户进行交流得到的反馈,对于一个好的用户体验来说是至关重要的,这在十大易用性原则中被排在第一位。)
另一方面,流程图是一个能全面记录复杂的工作流程和带有多重步骤或路径的交互信息的工具,但常常会忽略交互中的使用场景以及它对用户的影响。
用流程图作为一种主要的交付来记录(或构思)交互设计或含有多种用户任务步骤时,会忽视一些在表现在页面上下环境中的信息,而那往往会影响交互的成功。

线框流程图记录交互信息

线框流程图中十分经典的用例图是用来记录一个用户在产品上完成一个普通任务的过程(如,在一个社交媒体APP中“直接发送一条信息给你联系人中的某个人”)。
线框流程图中的每一步,一个简单的线框图,或高保真屏幕设计都表现了用户可能用到的屏幕。
箭头是用来表示用户发生行为的特定UI组件(例如点击一个按钮,点击一个链接,等等),指向另一张作为交互发生结果的线框图。
交互需求的第二个“点”的不是一个独立的页面或屏幕,而是,它能展示同一个页面中的交互结果,例如内容的改变,展现了交互结果的界面反馈(例如,一个确认信息弹出来,一个颜色的改变,或者一个错误提示)。
为了减少线框流程图中的歧义,在流程中箭头能够清晰的说明点击这个“热点”(或者任务)会指向哪一步这是十分重要的。对于一个在单个页面中拥有多重行为目标的复杂Apps,能够清楚的表明热点触发行为尤为重要。
在这个简单的线框图中,展示了一系列的在一个常见的用户任务流程中多个移动端APP 线框图,每一个线框图都代表同一个APP页面,而不是代表了不同的APP页面。
每一个步骤都清楚表示了在一个任务流程中热点所连接的下一步。除此之外,在第二步中线框流程图展示了视觉反馈的作用(为了标记这次点击,点击专辑时背景颜色发生了改变)。
除了被大量频繁用于移动端APP,线框流程图对于记录复杂的桌面应用和Web应用同样是有用的。
由于用一个全屏桌面线框图来表现一个进程中的每个步骤会浪费很多空间,如果在每一个步骤中大部分的屏幕设计中会保持不变的话,所以仅仅表现屏幕在每一个步骤中变化的那部分(例如对话框,情态,过滤或者分类),就能有效的记录界面相关的,正在改变的那部分,同时依然能提供足够的上下环境。
对一个Web APP结构操作说明的做一个简后的高保真桌面流程图,不是屏幕设计的所有部分都需要呈现在每个步骤里的。
由于桌面屏幕设计的尺寸更大,如果大部分能够被看到的信息没什么变化的话,没必要每一步都展示整个页面。用一种战术上的方法来展示相关屏幕设计,一种能够看到的只是因用户输入发生变化的那部分。
线框流程图不仅能够展示每个页面中的内容和布局会因用户交互而变化的APP和动态网站的工作流程,它也同样适合于记录在传统静态网站中的任务流程。
然而关于用线框流程图来记录静态网站需要注意的是,每张线框图的尺寸可能过大,以至于会丢失被记录的进程的使用场景。

线框流程图对于合作构思

除了是一种程序相关人员和开发者之间交流的有用方法,作为一个团队之间配合的工具,线框流程图同样能够工作得很好。尤其在敏锐的环境中,跨部门团队间能够配合交流得好是十分重要的。
跨部门团队之间的设计研讨会能够碰撞出一些理解上的火花,在这些平行设计工作小组之中,团队成员构思和写下任务流程,然后整个团队讨论这些点,为了潜在的点可视化,UX用线框流程图的方式给每个步骤画草图(并且记录下团队已经同意的点)。
在一个配合的环境中,线框流程图不需要视觉上打磨,这种类型的讨论,用白板或者纸和笔画草图的方式快速的将想法和交互记录下来是非常有效的。
在一场NN/g UX 会议中的UX交付研讨,几个团队成员用粘上便签条的手机,标记笔,和纸来讨论一个设计环节中的流程图。这个过程用一个白板就能容易实现,或者仅仅用纸和笔。

结论

线框流程图是一种正在兴起的用于记录移动端和Webapps中用户工作流程和复杂交互方式的UX交付。它们非常适合于呈现一个APP中一个或几个页面的动态改变,通过大量的连接在一起的相对静止页面来捕捉流程却收效较差。作为一种团队间合作与构思的方法,用来思考用户工作流程、任务,以及构思进程中屏幕设计的每一步,线框流程图同样是有用的。
原文地址:https://www.nngroup.com/articles/wireflows/
本文由 @Exception 翻译发布于人人都是产品经理。未经许可,禁止转载。

一次流程图设计的思考

暑假即将来临,我们的游戏也开始准备运营活动的设计,目的是提高游戏的活跃,这里我们设计了一个登录的活动,在执行的过程中,我在给我们的程序员画流程图,突然冒出了一些想法,在这里写出来并分享给大家,也欢迎大家提出自己的想法
先来说活动方案
活动时间:7月4日-7月15日
活动详情:活动期间累计登录3天,获得奖品A活动期间累计登录5天,获得奖品B活动期间累计8天,获得奖品C
这是一个很简单的一个运营活动,在页面设计上,我们设计了3个按钮,以便玩家可以去分别点击领取。
下面是流程图第一个版本
第1个流程图思路其实很简单,按照玩家在页面上的操作行为来画流程图,然后把所有的可能性操作都写上去。
下面这个是流程图的第二个版本
前提:
第2种流程图,根据活动方案,把用户类型分为4类:
3种奖励都不能领取类型只能领取第1档次奖励的类型,即为A类型能领取第1档次和第2档次奖励的类型,即为B类型能领取第1档次和第2档次,第3档次的类型,即为C类型
第2种流程图的思路是先把用户类型分类,按照用户类型来画流程图,即如上图,我们把可能的用户类型划分出来,然后根据这些用户类型的操作来画流程图
关于这2个形式的思路,我咨询过我们的开发人员,问他们更乐于接受哪一种?
回答:虽然两者看起来本质上没有区别,但是第1种思维上看比较饱满,考虑的可能性较全。第2种思维则更便于我们理解,即用户的操作流程很清晰。
其实在我的理解来看,第1种流程图的思维是我们经常使用的,第2种则是从用户角度来触发,这就有点像产品设计中我们经常说的用户使用场景,详细的描述就是:A类型用户,在完成任务后(达到登录3天),然后来到页面上准备去领取他们的奖品。
这样整个用户使用场景就构成了,他包括 什么样的用户,在什么时间,在什么样环境下去使用这个产品的什么功能,然后解决了什么需求,简单的来说就是包含了who、where、what3个点。
在写需求文档的时候,可能我们更应该要去描述用户的使用场景,而不是单纯的去写一个流程,这样子我们的开发人员更能理解我们的需求,也便于我们沟通。
欢迎大家针对上面的观点和看法与我交流。
本文由@Tracy1Kidd(微信公众号:Breakmind)原创投稿,并经人人都是产品经理编辑。未经许可,禁止转载。

案例分析:绘制流程图需要注意哪些事项?

流程图应用于许多领域,在互联网产品设计中,无论是产品经理、交互设计师,或者开发人员,都经常接触到各种类型的流程图。
流程图不应该考验阅读者的理解能力,因此如何绘制清晰简洁的流程图,值得深入思考。本文将结合案例,说明互联网产品设计中,交互设计师绘制相关流程图需要注意的事项。