Day12. UX/UI 设计流程之二： Flow Chart (以 Axure RP 实作)

透过 Functional Map 将 User Story 里抽象的「需求」转换成「功能」描述之後，是不是就能直接来画Wireframe 框线稿了吗？不是不行，只不过这样画出来的 Wireframe 很容易有所遗漏。是否有一种方式，能够帮助设计师在进入画框线稿之前先顺一下逻辑思路呢？有的，那就是从工程领域借过来的 Flow Chart 方法。

Flow Chart

Flow Chart，中文叫流程图，是指使用者在使用产品时，每一个操作的逻辑，及各种条件分支，具体会发生什麽事、回应什麽结果。

Flow Chart 其实一开始并不是出自设计领域。在很远古以前 (还没有专职 UX / UI 设计师这个工种存在时)，Flow Chart 是资讯工程领域的系统分析与设计(SA / SD)里，一种用来描述各种演算法、系统运行的逻辑工具。

基本元素

前面提到 Flow Chart 是源自於资讯工程领域，故我们所采用的图形表达元素与之相同 (当然，你也可以自行定义，只要团队成员都能看得懂并容易直觉理解就好)。

流程图的基本元素有五种：

• 流程起点 / 终点 (Terminator)
• 处理流程 (Process)
• 资料输出 / 输入 (Data Input / Output)
• 判断式 (Condition)

以最常见的登入功能做为范例，绘制 Flow Chart 如下。

与工程领域的同名同姓的 Flow Chart 的相同点，在於使用一样的表达图形；不同处在於， UI 的 Flow Chart 着重在宏观层面与用户间的互动行为所产生的各种逻辑分支，我们所关注的是「用户与系统间的相互关系」。

以 Axure RP 绘制 Flow Chart

(1a) Shapes工具有各种基本图形
(1b) 方形与圆形被独立出来放於第一层 (快速键 R 与 O)
(2) 线段工具

Shapes工具有各种基本图形，与方形、圆形工具一样，点击後於画布上拖拉就能产生该图形。点二下或按 Enter 就能输入文字

点击线段工具後，从 A元件连接点 拖曳到 B元件，就能产生线段。点二下或按 Enter 可轮入文字。

若箭头方向不正确，也可从 Style 面版中做调整。

如果图形元件的连接点不够，以下方法可自行加新的连接端点。

补充说明

Rson 在跨部门会议的时候，口头上都会称它为 「Logic Flow」，为的是避免在讨论的当下，来自不同的领域的夥伴会把 Flow Chart 误以为在讨论的是 UI Flow ，因为在 UX / UI 的领域中，叫「 Flow 」的东西实在太多了，例如 UI Flow, Wireflow, 以及今天的主角 Flow Chart。

绘制 Flow Chart 需要逻辑很清础，而缜密的逻辑，说起来并非设计师的强项，现在的设计师虽然不须像工程师那般能够提出无懈可击的逻辑，但在设计 UI Flow 及 Wireflow 前先绘制 Flow Chart，能够帮助我们想的更完整，确保後续图面都有考量到每个分支，而不是凭直觉在画 UI。