FLOW CHART 和 UI FLOW 的区别

   UI设计方案中很多定义字面看起来区别不大,可是具体上确是千差万别。好久未曾发文的中国台湾设计方案师@Akane_Lee老师,借辨析定义的机遇,详尽论述了Flow Chart 和UI Flow 的功能~

  快1个月沒有发文了,忙著写企划案、做 Prototype、跑试验生汇报。近期要梳理很多的 UI Flow,越梳理脑壳越像酱糊。就来聊聊 UI Flow 和 Flow Chart 吧。Flow 便是「步骤」,UI Flow 是网页页面步骤,而 Flow Chart 是步骤图,二者是彻底不一样的图表。

  UI Designer 很熟习 UI Flow,对 Flow Chart 将会不太熟。在软体开发设计中 Flow Chart 一般是由 SA 编写,关键在「分辨」上…沒有那麽难,把它当做杂志附的心理状态测试,选「是」走右侧、选「否」走左侧就行了。

  对 RD 来讲,写程式前都必须圣人道「逻辑性」,也便是由各种各样「分辨」构成的实际操作构架。对 UI 而言逻辑性也很关键,要不然应用者实际操作后要给他什麽答复?

  最阳春的会员登入

  以「会员登入」为例,应用者键入帐号登陆密码,键入正确就全自动自动跳转到会员资讯页,键入不正确就提醒不正确…

  光从 Functional Map 就想画 UI Flow 经常忽视「应用者实际操作不正确怎麽办」,最终1刻才发现有缺便是 UI 应急加画漏掉的网页页面、 RD 命苦塞作用不雅致,提醒不正确又并不是放下1个环节或是有时间再补的物品,网页页面和程式也并不是靠嘴巴在画在写…

  乱键入就给你认证码

  仿佛很简易喔?才不只这样。具体画起来会发现许多物品在 UI Flow 上很非常容易忽视没考虑到到的部分。(并且怎麽将会就仅有这样不加作用?)

  有时应用者会1直键入不正确,有效猜测是有人试著盗帐号。普遍的阻拦方式是让键入数次不正确的应用者多填1个认证码的栏位。因此 Flow Chart 就变为:

  上图只是简易的步骤示范性,但是是随意多1句「喂、帮我加个认证码作用」,Flow Chart 就会忽然肥1截。真实的会员登入认证也有更多花式和安全性性考虑,例如登入不正确 3 次就多提醒1句「忘掉登陆密码」这些,更狠的立即锁帐号请应用者找客服申述。

  Flow Chart 和 UI Flow 紧密联系,乃至是先有 Flow Chart 才有 UI Flow 。在沒有 Flow Chart 、不知道道要解决是多少分辨时就产出 UI Flow,整体规划不周掉网页页面漏作用的机率十分十分高。

  若仅有 UI Flow 沒有 Flow Chart,RD 勉凑合强能够凭画面想象 Flow Chart、分辨式怎麽下,但系统软件越交流会非常容易出包有 Bug,依 RD 工作经验值决策出包机率。但连 UI Flow 都沒有,光凭几张 Wireframe 或 Mockup,压根便是瞎子摸象,看单张静态数据图 RD 不容易了解网页页面怎麽串,纯靠脑补非常好才怪。

  假如什麽都不给,立即扔 Prototype 给 RD 叫他照抄,说1模1样做1个出来、很简易吧?RD 还要每一个画面每一个按钮按都戳戳看、试过各种各样不正确才会了解作用怎麽接。对 RD 是有多大恨这样整人家…

  参照材料:

  步骤图 – MBA智库百科

  步骤图表明

  就 UI Designer 的角度能够把 Flow Chart 当做「这个情境下应用者怎麽实际操作进行每日任务、软体怎麽答复」,把 UI Flow 拓宽为「由于应用者这样实际操作、和大家有这些作用和资讯要展现,因此网页页面和网页页面之间这般串接」。

  UI Designer 不1定要会画 Flow Chart,但1定要看得懂。普遍步骤图标记是固定不动的,不必由于长得丑就自身设计方案个新款式,RD 肯定来翻桌。

  有句名言「结婚前脑壳进的水便是婚后流的泪」,套到软体开发设计上,「动工前少花的脑便是动工后要伤的肝」。有是多少作用早期想不到、就有是多少工时后期没料到…