UI设计师来收!Flow Chart 和 UI Flow 有什么差别? - 优设网 - UISDC

UI设计师来收!Flow Chart 和 UI Flow 有什么差别?

2015/05/17 19486评论区

flow-chart-and-ui-flow-1

编者按:UI设计中许多概念字面看起来差别不大,但是实际上却是千差万别。许久未曾发文的台湾设计师@Akane_Lee老师,借辨析概念的机会,详细阐述了Flow Chart 和UI Flow 的功用~

快一个月没有发文了,忙著写企划案、做 Prototype、跑实验生报告。最近要整理大量的 UI Flow,越整理脑袋越像酱糊。就来聊聊 UI Flow 和 Flow Chart 吧。Flow 就是「流程」,UI Flow 是页面流程,而 Flow Chart 是流程图,两者是完全不同的图表。

UI Designer 很熟悉 UI Flow,对 Flow Chart 可能不太熟。在软体开发中 Flow Chart 通常是由 SA 撰写,重点在「判断」上…没有那麽难,把它当成杂志附的心理测验,选「是」走右边、选「否」走左边就好了。

对 RD 来说,写程式前都必需先知道「逻辑」,也就是由各种「判断」组成的操作架构。对 UI 而言逻辑也很重要,不然使用者操作后要给他什麽回应?

最阳春的会员登入

以「会员登入」为例,使用者输入帐号密码,输入正确就自动跳转到会员资讯页,输入错误就提示错误…

20150515-1

光从 Functional Map 就想画 UI Flow 常常忽略「使用者操作错误怎麽办」,最后一刻才发现有缺就是 UI 紧急加画漏掉的页面、 RD 苦命塞功能不优雅,提示错误又不是放下一个阶段或是有空再补的东西,页面和程式也不是靠嘴巴在画在写…

乱输入就给你验证码

好像很简单喔?才不只这样。实际画起来会发现很多东西在 UI Flow 上很容易忽略没考虑到的部份。(而且怎麽可能就只有这样不加功能?)

有时候使用者会一直输入错误,合理猜想是有人试著盗帐号。常见的阻挡方法是让输入多次错误的使用者多填一个验证码的栏位。所以 Flow Chart 就变成:

20150515-2

上图只是简单的流程示范,不过是随口多一句「喂、帮我加个验证码功能」,Flow Chart 就会突然肥一截。真正的会员登入验证还有更多花样以及安全性考量,比如登入错误 3 次就多提示一句「忘记密码」等等,更狠的直接锁帐号请使用者找客服申诉。

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 叫他照抄,说一模一样做一个出来、很简单吧?RD 还要每个画面每个按钮按都戳戳看、试过各种错误才会知道功能怎麽接。对 RD 是有多大恨这样整人家…

参考资料:
流程图 – MBA智库百科
流程图说明

就 UI Designer 的角度可以把 Flow Chart 看成「这个情境下使用者怎麽操作完成任务、软体怎麽回应」,把 UI Flow 延伸为「因为使用者这样操作、以及我们有这些功能和资讯要呈现,所以页面和页面之间如此串接」

UI Designer 不一定要会画 Flow Chart,但一定要看得懂。常见流程图符号是固定的,不要因为长得丑就自己设计个新样式,RD 绝对来翻桌。

有句名言「婚前脑袋进的水就是婚后流的泪」,套到软体开发上,「开工前少花的脑就是开工后要伤的肝」。有多少功能前期没想到、就有多少工时后期没料到…

【5月UI设计师必读的优秀文章】

规范化是绕不过的必经之路:
《实用必收!如何建立一套UI设计规范?(附众多神器)》

为Apple Watch而设计:
《实例第二战!为SOUNDWAVE设计WATCH应用时学到的五个技巧》

设计师永远的朋友干货君:
《有好货!五月必收的优质设计资源干货大合集》

原文地址:akanelee.me
作者:@Akane_Lee

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量95万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/flow-chart-and-ui-flow

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 界面设计 版式设计 排版布局 职场 优设专访 优设大课堂 设计师干货 设计达人 配色 web前端开发 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 动效设计 平面设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里