UI计划的思索次序是什么?用户操纵风俗和画线框图理会

计划UI时的思索次序，列位认为该是什么样子的呢?先出线框图，再来想用户会怎么操纵，照旧先确认用户会怎么行使产物成果，再来思索 Wireframe 怎么画。本日Akane_Lee这篇好文说明，帮你想清晰这个决议。

作者先容：

Akane Lee，台湾UI/UX 计划师，上可徒手撸代码，下可作图写教程，糊口中是个能和措施员妙语横生和甲方斗智斗勇的人。小我私人博客：，接待围观。

教室上我很凶猛要修业员，做任何思索都要有「依据」，没有依据凭梦想象出来的计划很轻易被颠覆，也无法说服别人、让别人领略本身的思索逻辑和缘故起因。以是我的谜底会是「2」，先确认用户会怎么行使产物成果，再来思索 Wireframe 怎么画。

假如你有了成果，就直接开画 Wireframe ，再拿 Wireframe 来确认用户怎么操纵成果，恭喜，你会陷入无穷漏图补画面的囧境。

使者怎么操纵成果这件事和视觉没有绝对的相关，「操纵成果」和用户的逻辑较量有关。本日在什么画面都不给你的环境下，要你凭空说出「会员注册」的操纵流程，你会怎么思索?

以下是某访客留言：

UI Flow 首要就是筹划页面层级的互相相关, 以是在其上并不管帐划其页面中有哪些哪些内容, 由于那些”内容”并不是页面, 除非那些”内容”有个整体观念(譬喻用户点击页面上某个按钮跳出Contact相干的信息, 但不会从UI Flow上知道Contact里详细包括什么) ?

内容=笔墨、图片、声音、影片。

光 UI Flow 这份文件，简直看不出来这一页包括哪些「内容」。

可是全部的文件都不是独立存在，每一份文件皆环环相扣关系性很大。当你在看 UI Flow 时，要把其他文件摊在桌上一路比较。

从上图中可以看到 UI Flow 在塔中间位置，下方尚有 User Story、Functional Map、Flow Chart 这三份文件。更多关于 UX 研究的文件我就没列入了。

纵然 UI Flow 看不到「内容」，但其他文件会补完这个部门。

2. 着实UI Flow就是在筹划页面了, 到底一个网站会有哪些页面, 就是这时辰要筹划完毕(虽然之后有也许会由于接头Wireframe后返来再修), 着实在UI Flow之前的全部筹划也不见得很详细知道必要哪些页面, 譬喻在Functional map也是清算归纳顾主想在这个网站内包括的内容, 以及成果, 除非他本身有说我必然要有什么什么页面, 并且内里要有什么信息, 否则在UI Flow阶段, 这时辰页面到底有几层, 有哪些, 都必需本身想 ?

你健忘有 Flow Chart 这份文件了。有写 Flow Chart，基础不消烦恼 UI Flow 怎么生出来。

本文一开始我就有提到，做计划有「依据」，没有依据或跳过步调就会产生「不知道数据怎么来」、「这玩意我要怎么脑补生出来」的环境。

在「没有 Flow Chart」的环境下就开始筹划 UI Flow，便是在本身不晓得成果和用户之间的相关、不知道用户怎么操纵成果、不知道用户在操纵使命进程中会产生什么事，就要思索要提供哪些页面给用户…通灵啊!

(昔时我在不知道 Flow Chart 的时辰也是有了成果就直接跳去 UI Flow…过后补画面补到死各类出包漏对象。惊觉本身必定忽略什么否则怎么 UI Flow 可以用这么没头没尾的方法冒出来，图还画得这么疾苦。)

就 UI Designer 的角度可以把 Flow Chart 当作「这个情境下用户怎么操纵完成使命、软件怎么相应」，把 UI Flow 延长为「由于用户这样操纵、以及我们有这些成果和信息要泛起，以是页面和页面之间云云串接」。

关于Flow Chart 和 UI Flow ，这里有篇小先容：

Flow 就是「流程」，UI Flow 是页面流程，而 Flow Chart 是流程图，两者是完全差异的图表。

UI Designer 很认识 UI Flow，对 Flow Chart 也许不太熟。在软件开拓中 Flow Chart 凡是是由 SA 撰写，重点在「判定」上…没有那么难，把它当成杂志附的生理考试，选「是」走右边、选「否」走左边就好了。

对 RD 来说，写措施前都必须先知道「逻辑」，也就是由各类「判定」构成的操纵架构。对 UI 而言逻辑也很重要，否则用户操纵后要给他什么相应?

最阳春的会员登入

以「会员登入」为例，用户输入账号暗码，输入正确就自动跳转到会员信息页，输入错误就提醒错误…

光从 Functional Map 就想画 UI Flow 经常忽略「用户操纵错误怎么办」，最后一刻才发明有缺就是 UI 紧张加画遗漏的页面、 RD 薄命塞成果不优雅，提醒错误又不是放下一个阶段或是有空再补的对象，页面和措施也不是靠嘴巴在画在写…

乱输入就给你验证码

仿佛很简朴喔?才不但这样。现实画起来会发明许多对象在 UI Flow 上很轻易忽略没思量到的部份。(并且怎么也许就只有这样不加成果?)

偶然辰用户会一向输入错误，公道意料是有人试着盗账号。常见的否决要领是让输入多次错误的用户多填一个验证码的字段。以是 Flow Chart 就酿成：

上图只是简朴的流程树模，不外是随口多一句「喂、帮我加个验证码成果」，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 是有多大恨这样整人家…

就 UI Designer 的角度可以把 Flow Chart 当作「这个情境下用户怎么操纵完成使命、软件怎么相应」，把 UI Flow 延长为「由于用户这样操纵、以及我们有这些成果和信息要泛起，以是页面和页面之间云云串接」。

UI Designer 不必然要会画 Flow Chart，但必然要看得懂。常见流程图标记是牢靠的，不要由于长得丑就本身计划个新样式，RD 绝对来翻桌。

有句名言「婚前脑壳进的水就是婚后流的泪」，套到软件开拓上，开工前少花的脑就是开工后要伤的肝。有几多成果前期没想到、就有几多工时后期没推测…

假如先画 Wireframe 再来思索用户怎么操纵呢?

这和「全心筹备菲力牛排招待客人，但客人不吃牛肉」有什么纷歧样啊?

「对～我们猜用户会怎么操纵，画了这些 Wireframe，再做 Prototype 让用户实考试证，就不会堕落了唷～」

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!