Day11. UX/UI 设计流程之一： Functional Map (以 Axure RP 实作)

有了 User Story，已经能够了解产品会有哪些角色、他们的需求及功能价值。但缺少的是这些需求会以什麽样的型式整合在一起成为一个产品，我们还需要将这些需求整理归纳成功能架构，也就是 绘制出 Functional Map。

Functional Map 规划

将 User Story 的需求归纳分组後，提取关键字，作为功能名称识别，将这些功能切分出不同颗粒度大小和层级，进行架构安排。通常会用心智图的型式表达 (也可以用树状结构表达)，最後产出的 Functional Map 须让团队成员能够快速掌握产品的功能轮廓、结构、及系统范筹才算成功。

Functional Map 的目的是将 User Story 里仍然抽象的「需求」，进一步转译成具象的「功能」。以常见的闹钟为例，主要有二大功能，一是使用者设定闹钟，二是时间到铃响功能。将其整理归纳後，绘制出 Functional Map 如下图。

以 Axure RP 绘制 Functional Map

开启 Axure RP ( 试用版下载 ) ，於左方 Page 区新增一个名为Functional Map 的 Page，并双击打开此 Page 画布开始绘制。

上方工具列点选 Retangle , 於画布中拉出一个圆角矩形，并输入文字。

Tip：压着 alt 键拖曳可复制该元件

颜色可於右方 Style 面版中直接调整 (记得要先选到欲更改的物件，比如说刚画出来的矩形)

接下来只要用连接线 (Connector) 将这些矩形分别连接起来就差不多完成了 (注意Axure RP会自动调整连接线，有时它自动调整的结果并非是我们想要的，此时就得自己再微调一下)。

结论

Functional Map 能够将 User Story 里仍然相当抽象的「需求」，进一步转译成较为具象的「功能」。如此便能与开发人员、PM、PO (Product Owner) 等产品专案相关人员讨论，并确认有没有范筹上的遗漏，是一种 UX/UI 设计师很常使用的方法。

绘制 Functional Map 的工具有很多，Draw.io, Xmind, Coggle, Miro 等都可以画出心智图或树状结构，挑个自己熟悉的即可，我们这次示范的是 Axure RP。