和有什么差别

　　编者按：UI设计中许多概念字面看起来差别不大，但是实际上却是千差万别。许久未曾发文的台湾设计师AkaneLee老师，借辨析概念的机会，详细阐述了FlowChart和UIFlow的功用
　　快一个月没有发文了，忙著写企划案、做Prototype、跑实验生报告。最近要整理大量的UIFlow，越整理脑袋越像酱糊。就来聊聊UIFlow和FlowChart吧。Flow就是流程，UIFlow是页面流程，而FlowChart是流程图，两者是完全不同的图表。
　　UIDesigner很熟悉UIFlow，对FlowChart可能不太熟。在软体开发中FlowChart通常是由SA撰写，重点在判断上没有那麽难，把它当成杂志附的心理测验，选是走右边、选否走左边就好了。
　　对RD来说，写程式前都必需先知道逻辑，也就是由各种判断组成的操作架构。对UI而言逻辑也很重要，不然使用者操作后要给他什麽回应？
　　最阳春的会员登入
　　以会员登入为例，使用者输入帐号密码，输入正确就自动跳转到会员资讯页，输入错误就提示错误
　　光从FunctionalMap就想画UIFlow常常忽略使用者操作错误怎麽办，最后一刻才发现有缺就是UI紧急加画漏掉的页面、RD苦命塞功能不优雅，提示错误又不是放下一个阶段或是有空再补的东西，页面和程式也不是靠嘴巴在画在写
　　乱输入就给你验证码
　　好像很简单喔？才不只这样。实际画起来会发现很多东西在UIFlow上很容易忽略没考虑到的部份。（而且怎麽可能就只有这样不加功能？）
　　有时候使用者会一直输入错误，合理猜想是有人试著盗帐号。常见的阻挡方法是让输入多次错误的使用者多填一个验证码的栏位。所以FlowChart就变成：
　　上图只是简单的流程示范，不过是随口多一句喂、帮我加个验证码功能，FlowChart就会突然肥一截。真正的会员登入验证还有更多花样以及安全性考量，比如登入错误3次就多提示一句忘记密码等等，更狠的直接锁帐号请使用者找客服申诉。
　　FlowChart和UIFlow相辅相成，甚至是先有FlowChart才有UIFlow。在没有FlowChart、不知道要处理多少判断时就产出UIFlow，规划不周掉页面漏功能的机率非常非常高。
　　若只有UIFlow没有FlowChart，RD勉勉强强可以凭画面想像FlowChart、判断式怎麽下，但系统越大会容易出包有Bug，依RD经验值决定出包机率。但连UIFlow都没有，光凭几张Wireframe或Mockup，根本就是瞎子摸象，看单张静态图RD不会知道页面怎麽串，纯靠脑补不错才怪。
　　如果什麽都不给，直接扔Prototype给RD叫他照抄，说一模一样做一个出来、很简单吧？RD还要每个画面每个按钮按都戳戳看、试过各种错误才会知道功能怎麽接。对RD是有多大恨这样整人家
　　参考资料：
　　流程图MBA智库百科
　　流程图说明
　　就UIDesigner的角度可以把FlowChart看成这个情境下使用者怎麽操作完成任务、软体怎麽回应，把UIFlow延伸为因为使用者这样操作、以及我们有这些功能和资讯要呈现，所以页面和页面之间如此串接。
　　UIDesigner不一定要会画FlowChart，但一定要看得懂。常见流程图符号是固定的，不要因为长得丑就自己设计个新样式，RD绝对来翻桌。
　　有句名言婚前脑袋进的水就是婚后流的泪，套到软体开发上，开工前少花的脑就是开工后要伤的肝。有多少功能前期没想到、就有多少工时后期没料到