web流程图

凌晨两点，程图我盯着屏幕上那张画了六遍的程图流程图，突然意识到问题不在工具，程图而在思维。程图那张图要从用户点击"注册"开始，程图经过邮箱验证、程图密码强度检查、程图个人信息填写，程图最后跳转到欢迎页——每个箭头都指向明确，程图每个判断框都写着"是程图"或"否"。可真实用户根本不会按你画的程图走。有人会输错三次密码，程图有人会直接关掉页面，程图还有人会从微信分享链接进来，程图压根没经过首页。程图

画web流程图最忌讳的就是"理想化"。你想象中用户是从A到B再到C的直线，现实里他们可能从D跳回A，或者干脆在E页面卡住十分钟。我见过最离谱的流程图，把用户操作路径画得像电路板，密密麻麻的节点和条件分支，最后导出PDF时文件大得吓人。可那有什么用？拿到测试环境里跑一遍，用户行为跟图的匹配度不到四成。

真正有用的流程图，得把"异常"画进去。比如登录流程，正常情况是输账号密码、点登录、进后台。但你要画上"忘记密码"的分支，画上"连续输错五次锁定账号"的分支，甚至画上"用户使用第三方登录"的并行流程。这些分支不是多余的，它们才是用户真实体验的组成部分。

我有个做产品的朋友，他们团队曾经因为流程图太"干净"吃过亏。当时设计一个支付流程，流程图里只有"确认订单-选择支付方式-支付成功-跳转完成页"四个步骤。上线第一周，客服收到大量投诉，全是"支付成功但页面没跳转"的案例。查了半天才发现，部分用户在用微信内置浏览器，支付完被微信的中间页拦截了，根本没回到他们的网站。流程图里缺了"从外部浏览器返回"这个关键分支，整个流程就断了。

后来他们改了画图方式，每个流程先画"主干"，然后用不同颜色标注"异常分支"和"第三方介入"的情况。主干用粗线，分支用细线，重要的判断点用红色菱形标出来。这样图虽然看起来复杂了，但开发照着做，测试照着测，反而没出过大乱子。

工具选择上，我试过Visio、ProcessOn、Draw.io，甚至用过Excel画表格拼流程。说实话，工具不重要，重要的是你在画之前有没有把场景想透。有一次我画一个"用户上传头像"的流程，本来觉得简单得很——选图、裁剪、保存。结果细想之下，得处理图片格式不支持、图片超过2MB、用户取消上传、上传失败重试、裁剪比例适配……每个环节都可能出问题。光这一个功能，流程图就画了两页纸。

有个技巧挺管用：画完主干流程后，自己扮演一个"手贱用户"，故意去点不该点的按钮，故意快速连点，故意在加载中刷新页面。每想出一个"作死"操作，就往图上加一个分支。这个过程很痛苦，但加完之后你会发现，这张图才真正像用户会遇到的流程。

最后说句实在话，web流程图不是画给别人看的文档，它是你思考过程的具象化。如果你画的图连自己都觉得"应该没问题"，那大概率是还没想清楚。我见过太多精美的流程图，配色好看，排版整齐，但逻辑漏洞百出。反观那些画得歪歪扭扭、到处都是批注和图层的图，反而能在开发阶段帮上大忙。别追求美观，追求完整吧。