-
2020-10-15 17:36:21
前端完整代码请参考:https://gitee.com/zxstrive/strive-web
Camunda 工作流模块包:https://gitee.com/zxstrive/strive-web/tree/master/src/pages/workflow
BPMNModuler流程图设计器:https://gitee.com/zxstrive/strive-web/blob/master/src/pages/workflow/bpmn-modeler.vue
Camunda 流程图完全可以使用 bpmn.js 显示出来。
配置后台strive框架运行前端vue代码;后台框架地址:https://gitee.com/zxstrive/strive
camunda功能开发所在的包:https://gitee.com/zxstrive/strive/tree/master/src/main/java/com/fight/strive/sys/modules/camunda
一、安装b
更多相关内容 -
定时任务流程图
2018-08-16 21:16:25LogUploadTask MouldDownloadTask PolicyHandleTaskLogUploadTask
MouldDownloadTask
PolicyHandleTask
-
泳道流程图:跨职能流程图
2019-06-18 22:40:18泳道流程图也是一种特殊的图表,可以展示商业过程间的关系,同时还能够展示为过程负责的执行者(比如说部门)。 泳道流程图本现了价值活动之间的逻辑关系,还明确地表明每个价值活动的责任。 先看一看泳道流程...什么是泳道图?
泳道图也叫跨职能流程图,能够展示工作流中每个步骤涉及的职能部门和工作事项。泳道流程图也是一种特殊的图表,可以展示商业过程间的关系,同时还能够展示为过程负责的执行者(比如说部门)。
泳道流程图本现了价值活动之间的逻辑关系,还明确地表明每个价值活动的责任。
先看一看泳道流程图:
那么,应该如何绘制泳道图呢?
在跨职能流程图中,通常一栏代表一个职能单位。流程中的步骤要分别放在负责这些步骤的职能单位相应的栏中。
绘制流程图前,请确定这两个问题:
是否己找出这个过程或者功能涉及的所有人员、部门?
通过讨论获得的过程步骤如何展示?
将确定的流程处理方法表现在泳道图内,但到这里并没有结束,我们还需要分析如何改进工作流。
通常,可以通过3个维度进行分析:
部门:通过部门或者责任区分。指出哪一个部门负责完成这个活动。
阶段:通过任务阶段区分。每一个过程由不同的阶段组成。
活动:每一个活动都应该有那个阶段中的负责部门实施。
制作泳道图工具
Axure、visio等快速原型工具都可以设计流程图,不但如此,如何你不想学习原型工具,word、excel也可以画出不错的流程图,甚至手绘一张流程图,也不是不可以。
泳道流程图有垂直和水平两种表现方式。你可以用垂直或者水平跨职能流程图展示任意跨职能流程。
垂直排版更强调职能单位,水平排版则更突显过程。排版方式无固定规则,由个人喜好决定,不应太多讲求形式化。
在Axure中,有专门的流程图部件:
还有连接流程图的线段,箭头设置
在绘制时,只要根据需要表达清晰流程的完整过程,对流程逻辑表达明确,易读易懂,都能够制作出一个优秀的泳道流程图了。
-
[产品设计]如何绘制业务流程图(下)
2017-02-08 15:50:09原文链接 http://www.woshipm.com/pmd/27239.html有一些同学看过了我写的《如何绘制业务流程图》,发私信过来希望我谈谈页面流程图。这个话题其实我也酝酿过,但一直没有写出来。细究起来,除了懒,原因其实有好几条...原文链接 http://www.woshipm.com/pmd/27239.html
有一些同学看过了我写的《如何绘制业务流程图》,发私信过来希望我谈谈页面流程图。
这个话题其实我也酝酿过,但一直没有写出来。细究起来,除了懒,原因其实有好几条:
- 这一年半来的工作都是围绕数据平台建设,不是很通用,没法举例。
- 虽然自己一直画页面流程图,但是说实话属于偏方多一些,按直觉行事,要总结出一两条可通用的“规则”比较难。
今日因为因为天气预报号称有雷震大雨,取消了原有的外出计划,刚好在家里,想起抛出这块砖头,期望这个话题能激发更多的分享和讨论。
案例呢……想一个通俗易懂又具代表性的案例真不容易,它不能太简单,太简单的话几乎上没有什么页面,也不能太复杂,太复杂了我还hold不住。
刚好前不久在收拾家里闲置的衣服,舍不得扔但又不穿,当时唠叨一句,说要是有个地方能够提交下捐赠,有人上门收就好了。在我头疼要怎么举例演示页面流程图的时候,我就把这个大概YY了一下,就用“公益捐物网站”为例来说明吧。
页面流程图是个好东西
业务流程图重要的是描述谁在什么条件下做了什么事。
而页面流程图是具体到了网站、系统、产品功能设计的时候,表现页面之前的流转关系——用户通过什么操作进了什么页面及后续的操作及页面。
从需求到到解决方案无疑要经过很多阶段。需求的分析——用户是谁?用户的问题或需求是什么?用什么功能去满足需求或解决问题?这些功能的优先级是什么?这些问题都需要逐步得以明确,与此同时,你需要用一些线框图、原型或者DEMO(这些在我认为都是一个东西)去帮助自己精细化这些功能,想透彻那些需求。
直接画单张页面的线框图当然是可以的,但是有可能会出现一下子进入单页面,不先系统性规划,考虑每项功能的前置和后置,每项操作的上下文,就很容易顾此失彼,遗漏重要状态或忽视本应简化的任务。
说到这里,单页面的线框图很像PPT,我个人在做PPT之前,其实是一定要有脑图或者已经在一张大纸上将目录结构、每页的重点都写出来、画出来的。所以真正做PPT则纯粹是在做而已,可以做得很快,只因为心中早就有谱了。所以,在画线框图之前,我也习惯先将页面流程图画出来。
好处之于对于设计师或产品经理:
- 页面流程图一张页面助你讲完完整的用户与系统的交互故事,借助它,你更容易知道流程中的潜在地雷是什么,哪里的效率比较低,有助于系统化、全局化、周全性的思考
- 细化工作量的基础,通过页面流程图可准确评估需要多少张页面。
- 聚焦:页面流程图中的每个页面都不必追求精细——你的目标是规划行为路径,而不是单页面交互设计,所以完全无需考虑页面内容、布局。所以你会更加聚焦于用户目标和任务的完成。不必过早陷入细节。
- 关键是很快。线框图有可能有几十张,你画起来没那么快,而且一旦进入细节,则还需要慢慢深究。但是页面流程图也许就是几个小时的事情。你就可以对整个项目心中有数了。
好处之于开发工程师:
他们会很乐意你在没有原型的时侯,第一时间拿出页面流程图和他讨论需求。相信我,这比单纯的功能列表或者有业务流程图更让他们兴奋。
- 可作为评估工作量的重要依据——可帮助他们对工作量也心中有数。
- 可做为开展代码工作的重要参考——特别是前端开发,必须得知道每一种操作指向什么页面。
- 他们会映射功能逻辑,会给你更多好的建议。
绘制之前
回到开头我们说的案例——公益捐物网站,这个仅仅是idea,真不足以让它变成一个产品。现在借着本话题,我们也尝试一下如何把随机迸发的一个idea快速转化为产品吧。
第一步:idea大拷问
此步的目的是验证一下idea的靠谱程度。怎么说靠谱?
1. 有目标用户——不是火星人,而且有一定的规模性。
2. 对目标用户有价值——推荐使用Before&After(这个术语不用google了,Heidi杜撰的)方式描述清楚。
- Before——即现状分析(需求、问题)。在没有你的产品前,你的目标用户遇到的问题是什么?他们明确的及潜在的需求是什么?市场上已经有哪些产品?这些产品为什么没有满足这些需求,解决这个问题?(当然,内部产品,没必要分析太多竞品,但是脑子里要过一遍这些问题,没坏处。)
- After——这个产品如何满足需求及解决问题的?除此之外,潜在的利益是什么?可以分用户、公司多个维度阐释。
3. 目标用户能用——有相应的能力储备(不需要经过学习、培训就可用你的产品),可及性(你能够去触及这些用户群体,让他们了解有这个产品可以用)
本案例为了配合页面流程图随手拈来,单纯客观描述一下,诸位也可以帮忙诊断下是否靠谱。
咱们YY下吧。
假设我们是要做这样一个网站,必须有几个参与角色吧。必须有人去收衣物,可以和公益组织、社工群体、慈善组织取得联系,让他们成为第一种参与方。这里不展开了。
当然也必须有人要捐赠衣物,这里,假设定位于年轻人群体,舍得买也舍得捐,有足够的能力储备可以使用在线系统而不是等收废品的大爷吆喝。
目标用户:各居民区住户,年轻人为主,年龄在22到35岁
Before:
- 空间矛盾:小户型房子,储物空间有限;时尚群体,消费空间很大,比较喜欢尝鲜,衣服和各种生活物品只进不出,没有足够地方容纳,必须要推陈应新。
- 处理旧衣物的方式有限:独生子女群体居多,也没有家人亲戚可以赠送。即使知道哪里有灾难发生,灾民缺衣少物也没有通道进行捐赠;二手市场耗费精力,且效果不好。……
After:
- 可随时提交捐赠需求,等待有人上门收取,轻松做到眼不见心不烦。
- 捐赠带来额外好处:1. 换取公益积分(积分可用于订阅杂志、享受参与活动的商家优惠、换取书籍等)2. 公益积分可冲抵水电费……好吧,YY吧。
不过写到这里,俺发现还是基本靠谱的吧,所以继续往下吧。。
第二步:功能列表及优先级
此步是进一步明确要做什么,以及用户大概会怎么参与使用。
参与这个产品的有负责收衣服的,也有捐赠衣服的,单表这捐赠衣服的用户角色吧,免得不小心兜不住了。
业务故事:小A有一批衣服需要捐赠,他在手机上提交一份捐赠需求,写明自己要捐赠什么衣服,新旧程度,多少数量,什么方式预约上门时间……小A提交捐赠后,收到预约电话,约好了3天后的周末下午上门取衣服。到了预定的时间,上门取衣服的社工检查了捐赠的数量后,拿出手机查找到小A捐赠的那笔单子,确认收到几件衣服,并发送积分。小A捐赠了几次衣服后,发现自己拥有了不少公益积分,小A可以在积分频道可以兑换书籍,也可以兑换一些公益合作商家的优惠卡,如洗车、吃饭等。
故事里大概会包含什么功能呢?
对于捐赠人:
- 登录/注册:支持用微博、QQ账户登录
- 填写并提交捐赠请求:捐赠内容、图片、新旧程度、上门时间(可选择提前电话预约)
- 查看并追踪捐赠状态:看到过去捐赠的各种衣物及领取的积分
- 捐赠衣物并获取积分
- 公益积分查看:查看自己的积分情况,历史总积分,已兑换的及未兑换的
- 积分兑换:兑换各参与的公益商家优惠券。
部分业务流程图示例:
可以说这两步的工作是绘制页面流程图必不可少的准备,我们明白了要做什么,为哪些人做,主要的功能是哪些?功能之间的流程是什么样的。但是因为是互联网产品,这些流程必须以页面为承载体,比如“提交捐赠”是一项活动,到了页面设计时,我们要用几张页面去完成这一个动作呢?这些页面彼此是什么关系呢?
绘制页面流程图
现在我们已经知道了系统应该有哪些功能,我们应该提供哪些内容,现在就需要将这些功能及内容分配到不同的页面去。
页面流程图简要
- 页面=操作+内容,操作是需要用户触发的,包含链接、按钮、表单等等。用户通过这些操作,看到同一个页面上不同的内容,或者跳转到其他的页面。
- 页面流程图目标:表现用户的不同的操作指令下不同页面流转关系。
- 页面流程图元素:页面、操作或状态、链接线
- 页面也有分类:请注意有些操作可能不会带你去一个实际的页面,而是有可能发个短信、发个邮件等,这些也需要被表现出来。
如何开始绘制?
即像讲一个故事,最简单的就是从用户的第一个初始页面开始进行。
或者有人问了:
我的用户角色也许根本用不到有些操作,条条大路通罗马,他只选择了其中一条路径,那我怎么能把所有的页面都画出来呢?
我的经验是:不要细分用户类型,而是根据页面穷举各项操作,基于假设判断用户若点击什么就会到哪里。
在这个案例中,我希望用户的第一个页面是首页。
他有两个主要被引导的操作:
- 可以查看捐赠或新提交一个捐赠
- 可以查看公益积分或兑换积分
以下就是从这个页面开始的一系列页面流程:
这个图受篇幅限制没有全部画完,比如到了积分商城后还有一系列页面呢,有兴趣的同学继续试试。
一些提示:
- 页面一般用矩形表示,页面上要体现关键的内容块及主要操作。
- 使用圆角矩形放到连接线上表示各项操作。一个页面可引出多个操作指向不同的页面。
- 只体现系统判断,用户本身的判断不需要体现出来——比如用户到了详情页面是要购买呢?还是加入收藏呢?还是离开呢?这些直接用操作指向不同的页面即可。
- 也有不适合用页面流程图去表现的网站,主要是因为操作类的更多不是纵深型的一步步流程,而是平行中跳转,如门户类网站查看新闻的用例、如音乐类网站等等。这种情况下,最好用站点地图(site map)去表达页面从属关系就可以了。
可能大家会留意到,上图中的操作有可能就是设计时页面上实实在在的按钮或者文字链接,没错的。
但是有些页面流程图未必是能够完全按操作、页面来连接的,下图是我在3年前画过的一个页面流程图(请注意这个流程图就不符合我说的几条规则)。当用户到达详情页后,他的下一步操作可能是什么?详情页的操作太多了……支付、加入购物车、加入收藏、推荐给朋友、离开、再逛……下图中的“以后再说”并不是操作,“对比后再决定”也不是操作,这正像什么呢?是对操作做一个人工的分类还是表现用户的意图倾向?当时我凭直觉去画这张图的时候,用意是在于探寻购物路径中有无可优化的空间,所以是想要把用户操作前的意图列举出来。如果用户喜欢这个商品的话,可能会想做什么?目前我们提供了哪些功能可以继续往下走?当不喜欢的话,他们可能想要做什么?我们目前又做了什么挽留?
【点击图片可查看大图】
所以,我们也可以在页面流程图中加入“意图”项,你可以用你喜欢的形状去表示“意图”,比如椭圆。
最后
一定会有人问绘制工具是什么……
文中所举的捐赠案例,我是用PPT随手画的。
如果篇幅不需要太大,完全可以用PPT绘制,另存为图片,导入到AXURE原型工具里,然后在每个页面上加一个透明的矩形,再添加链接到相应的线框图页面。
以前也多用AXURE绘制页面流程图,如:(这个例子中,操作按钮没有放到链接线上,是因为此用例页面数量不多,页面可以比较大,连接线可以直接从页面上的操作中画出)
最后我想说的是,页面流程图重在把事情讲清楚,把页面交代清楚,不必追求太多的规则和条条框框,你可以用你最舒适的方式去表达。文中所举的方式,是我比较习惯的,也欢迎各位同学交流下你们是怎么绘制页面流程图的。
-
产品必知流程图解析
2018-05-08 13:25:002.画流程图的工具和需要知道的元素3.流程图的分类与解析4.小结5.参考文献6.更多讨论1.什么是流程图?定义:用图示的方式反映出特定主体为了满足特定需求而进行的有特定逻辑关系的一系列操作过程... -
Java基础学习总结(174)——Java 开发者应该会的流程图绘制技巧
2021-03-08 10:04:40一、流程图简单介绍 流程图 (Flow Chart )是流经一个系统的信息流、观点流或部件流的图形代表。在企业中,流程图主要用来说明某一过程。这种过程既可以是生产线上的工艺流程,也可以是完成一项任务的管理过程。... -
以美团外卖为例,浅析业务流程图和页面流程图
2020-12-20 08:15:06在产品设计中,流程图是非常重要的一环,它决定了我们的产品在后期的各个环节能否跑通,会不会出现没有出口的情况。前段时间自己在画各种流程图的时候曾经很迷茫,分不清业务流程图,页面流程图的区别,在一段时间的... -
流程图符号_流程图中的带箭头的线段代表什么?
2020-12-20 07:16:12流程图中各个符号也是有讲究的,现在就常见的流程图符号及含义与大家一起分享如下:流程图中各个符号也是有讲究的,现在就常见的流程图符号及含义与大家一起分享如下:1、开始和结束的标志:椭圆,符号为:用来表示... -
使用ProcessOn在线画流程图
2019-04-14 16:09:33作为一名专业的程序员,项目中经常需要用到流程图、思维导图、组织结构图、网络拓扑图、BPMN、UML图、UI界面原型设计等,这个时候一个好的画图工具是必不可少了,你可能会使用Microsoft Visio工具,我在这里推荐使用... -
产品经理必备技能之业务流程图
2019-12-08 13:30:06业务流程图(TFD)是一种描述管理系统内各单位、人员之间的业务关系,作业顺序和管理信息流向的图表。 流程是为了达到特定的目标而进行的一系列有逻辑性的操作过程,它可以不规范、可以充满问题,但它确确实实存在着。... -
基本流程图与跨职能流程图
2022-02-21 18:23:24流程可以用流程图来表示,但它们有一个缺点——标准流程图无法表明谁负责这些活动。流程可以用流程图来表示,但它们有一个缺点——标准流程图无法表明谁负责这些活动。 因此,跨职能流程图(或称为泳道图、泳道... -
流程图介绍 以及工具推荐
2019-05-10 15:27:52产品中设计的流程图主要有三种,业务路程图、任务流程图、页面流程图。 1、业务流程图 业务流程图就是描述那些个体在什么条件下做了什么事情,他们之间有何关联。主要分三个方面:①涉及到哪些主体?②每个主体都有... -
vue实现简易流程图
2021-06-09 19:31:03总体的思路是,定义一个变量,通过循环该变量来渲染流程图。然后将该流程图文件封装成一个组件,父组件只需要按照要求格式定义好变量结构和值,然后传值给子组件。 父组件传值变量结构如图: 如图2,process为要... -
流程图 - 迷途行者 - 博客园
2021-03-16 19:24:51程序流程图与结构化程序设计使用程序流程图(Program Flow Chart),可以描述数据处理过程,或表示程序中语句的执行过程。在Java语言以及其他程序设计语言中,程序包括顺序结构(Sequential Structure)、选择结构... -
一文搞懂程序流程图详解
2021-04-14 17:40:12接下来我就从以下6个方面深入剖析程序流程图: 程序流程图的定义 程序流程图的标准符号 程序流程图的基本结构 程序流程图的实例 绘制程序流程图的实用工具 程序流程图的绘制步骤 01 ... -
activiti7的流程图、模板图及子流程图展示
2019-07-13 11:53:31activiti7的流程图、模板图及子流程图展示 流程图需展示流程完成情况,模板图根据key找到最新模板展示。子流程需从主流程中找到CallActiviti的节点,找到对应的子流程id(已启动)或模板key(未启动),再进行对应的流程... -
大数据开发流程图
2019-11-27 13:21:461、大数据流程图 2、大数据各个环节主要技术 2.1、数据处理主要技术 Sqoop:(发音:skup)作为一款开源的离线数据传输工具,主要用于Hadoop(Hive) 与传统数据库(MySql,PostgreSQL)间的数据传递。它可以将... -
用流程图描述算法
2018-07-18 08:41:11流程图就是一种描述算法的图形化描述,用流程图可以清晰地描述出算法的思路和过程。通过本篇的学习,你将了解到如何用流程图来描述算法。】 流程图是算法的图形化描述。俗话说:一张图胜过千言万语,用流程图... -
使用Typora画 流程图、时序图、顺序图、甘特图、等图详解
2021-06-23 19:47:45目录 概述 一、流程图 二、UML时序图 三、甘特图 四、类图 五、状态图 六、饼图 七、导出 八、总结 概述 Typora是一款轻便简洁的Markdown编辑器,支持即时渲染技术,这也是与其他Markdown编辑器最显著的区别。... -
camunda 流程图高亮
2020-12-02 10:13:51使用camunda+bpmn.js 绘制流程实例的执行高亮节点 获取高亮节点信息 //获取高亮节点信息 @Override public ActivitiHighLineDTO getHighlightNode(String processInsId) { HistoricProcessInstance hisProIns = ... -
UML流程图
2018-10-13 11:31:11什么是流程图 流程图是对过程、算法、流程的一种图像表示,在技术设计、交流及商业简报等领域有广泛的应用。通常用一些图框来表示各种类型的操作,在框内写出各个步骤,然后用带箭头的线把它们连接起来,以表示执行... -
7款流程图制作软件大盘点!轻松绘制流程图
2020-11-27 18:19:30流程图可能是我们使用最广泛的一种图形图表,几乎在各个领域都会用到,诸如系统流程图、产品流程图、数据流程图……借助流程图,我们可以将事物的结构、任务的进程、甚至是算法的思路都有效视觉化。 流程图的广泛... -
产品的三种流程图
2018-06-23 21:52:15终于画完美美的原型图了,拿给评审或和开发沟通,才发现存在很多逻辑漏洞,不是缺少分支流程,就是没考虑异常状态,就这样来来回回修改原型图,被开发同学鄙视和效率低下不说,自己都开始怀疑自己了。随着项目经验的... -
系统流程图、数据流程图、IPO图和甘特图
2018-07-29 15:48:09在软件工程文档中我们会看到各种图,系统流程图,数据流程图和Ipo图是最主要的图。下面就让我来介绍一下这三类图都是什么样子的。 内容: (1)系统流程图:(可用软件:ProcessOn画图) A、系统... -
系统架构——系统流程图和程序流程图的区别
2020-03-02 16:55:44我们在生活中见过各种各样的流程图,在车站见过购票流程图,在单位见过财务报销流程图,在家里见过电器故障排除图等等。这些图都有一个共同的特点,就是指导你一步步如何进行下一步操作,你只要按照流程图一步步执行... -
以美团外卖为例,区别业务流程图和页面流程图
2020-12-29 11:45:08在产品设计中,流程图是非常重要的一环,它决定了我们的产品在后期的各个环节能否跑通,会不会出现没有出口的情况。前段时间自己在画各种流程图的时候曾经很迷茫,分不清业务流程图,页面流程图的区别,在一段时间的... -
qt 绘制 流程图 案例 收集
2020-06-22 10:57:29参考 C++ 中的例子:Qt\Qt5.11.1\Examples\Qt-5.11.1\widgets\graphicsview\diagramscene The Diagram Scene example is an application in which you can create a flowchart diagram. It is possible to add ... -
VScode画流程图(最全教程)
2019-11-27 02:38:29关于插件Markdown Preview Enhanced(MPE)的使用技巧 目录: 关于插件Markdown Preview ...2. 绘制流程图 2.0 简介 2.1 flow 2.2 mermaid 2.2.0 配置绘图主题颜色 2.2.1 Flowchart(流程图) 2.2.2 Seque... -
多任务看门狗流程图
2013-09-21 22:37:17 -
业务流程图的绘制流程分享(一)
2018-03-25 09:14:46前言:近来一段时间,忙于整理业务流程图,期间,关于流程图的绘制方法和工具也与内部团队和外部做了心得交流,恰好,个人生活也牵涉在买房,婚礼,户口迁移等流程中。不知不觉,伴随着实践与反思,个人所得的系统...