Day13. UX/UI 设计流程之三： UI Flow (并使用Axure RP 实作)

UI Flow 的全名是 User Interface Flow，望文生意，也就是使用者点某个按钮会到哪个画面的流程图集合。

许多人会可能会认为他就是介面衔接的流程，需要以一张张的Wireframe来表达，狭义来说这其实不太正确，这种所谓一张张 Wireframe 画面衔接的流程，「从一个画面到另一个画面之间的流程图」，正确名称其实叫 Wirelfow 。Wireflow 在绘制上已经是进入相当细节的工作了，在进入 Wireflow 工作之前，为了能够掌握住整体轮圹，一般还是会先以「文字版」的 UI flow 来规划整体页面。

UI Flow

是一种仅用文字及箭头就能说明会有哪些页面流程的表达方法。举例来说，一个健身APP会有许多功能，除了主要功能，跟随影片做运动之外，还有其他如查看运动历史纪录、排行榜、设定、登入、登出、注册等功能。要完成这些功能与功能之间的衔接，用户需要透过在多个页面动线之间进行操作。这些页面的顺序关系，可用 UI Flow 快速表达出来，详见下图。

UI Flow 实作上的重点有：

(1) 从前二篇提到的 Functional Map 及 Flow Chart 盘点提炼出要有的页面

(2) 用「文字方块」而非「画面」表示每个页面

(3) 编码，方便後续流程(绘制 Wireflow )时识别与指代

(4) 将这些文字方块 (页面) 依动线顺序用箭头连接起来

以 Axure RP 绘制 UI Flow

只要学会了上一篇的软件教学，懂得如何拉出各种形状物件、文字、线段，并知道怎麽去调整物件及线段的 Style，那麽就已具备绘制 UI Flow 的能力，只要把关注点放在页面的顺序关系上即可，参考以下 Gif 动图

Tip 1：这次我们用内建元件库(左方面版)，直接拉图形物件出来，相较上篇使用基本形状工具 (上方面版)，速度会更快。

Tip 2：按着 alt 拉动，可复制一份此物件。

实务上的建议

Wireflow 的颗粒度其实已经进入了设计上的细节了，它由一个个的 Wireframe 再加上箭头、判断式构成。许多资深设计师画完上一篇所说明的 Flow Chart 後，往往会略过此篇提到的 UI Flow，而直接绘制 Wireflow

(Rson 在接到比较赶的专案时，也会视情况略过 UI Flow，甚至连 Flow Chart也略过，画完 Functional Map 後就直接进入绘制 Wireflow，就只是为了紧急的案子争取时间。当然，这样做是需要付出代价的，故实务上我们会视实际资源状况及情势做取舍)

不过若你是经验较少的初学者，还是会建议按部就班画完 UI Flow。因为 UI Flow 除了可用来检查後续 Wireflow 的成果有没有遗漏之外，还有以下不少好处：

(1) 不会迷失在充满互动说明的 Wireflow 设计图中，避免了见树不见林。

(2) 可用来做为估算 Wireflow 及 GUI 工时成本及报价的基础，而非依靠感觉评估。

(3) 在需要多位设计师一起合作的大型专案中，UI Flow 易於使用 MECE 原则 (注1) 做工项切割，避免重工。

注1：MECE 是四个英文字的缩写，意思是「相互独立，完全穷尽」，详见 MECE 原则。