如何正确的画出功能结构图？

如何正确的画出功能结构图？

直接绘制 l 线框的简单函数。但是复杂的功能呢？文章为你解读。

通常PM在进入正式的原型设计之前已经整理好产品的整体结构。直接绘制 l 线框的简单函数。但是复杂的函数呢？

这时候，primary PM估计是一页一页的画，一个控制一个控制的细节。然后画到一半，发现有问题功能结构图，然后一页一页地修改。

从时间上看，一遍遍修改是浪费时间和精力。

从沟通的角度来看，技术会因为一次执行如此复杂的功能而吓到你。

从结果来看，大家看到的是一个细节完美，整体复杂混乱的函数。

一、为什么需要功能结构图

遇到上述情况功能结构图，其实应该先对功能进行整体分析，画出详细的内部结构，再与前后端工程师一起过一遍需求。让大家知道这个函数有几个部分，每个部分是什么，作用是什么。

最后，根据公司的要求，是完成这些功能重要还是要在某个时间点上线，要综合考虑是完成整个功能还是这个功能的部分子功能.

这就是功能结构图的用武之地。

二、什么是功能结构图

功能结构图用于表示复杂功能的内部结构以及包含哪些子功能。

设计特点

最好设计成独立的模块，尽量不要与其他功能关联。

attention是函数的内部结构，不要误认为是函数之间的关系。查看详情。

三、如何绘制功能结构图

以某电商APP的下单功能l为例，展示如何绘制功能结构图。

分析功能结构

当我们收到这样的请求时，我们想到了淘宝、京东等购物平台的下单步骤。至少这样做很容易想到。

那这时候就去画页面如何正确的画出功能结构图？，或者复制竞品设计原型。

避免分步分页

有3个步骤，所以画3页。

简单粗暴的“step = page”只是一种偷懒的做法。

比如提交订单可以只是一个提交按钮，可以有多种选择商品的方式，可能涉及多个页面。

避免竞争功能

淘宝好像有现成的竞品，都照搬就好了。

其实你可能不是电商平台，产品也不一样。

精细的函数粒度

根据自己的业务，将排序功能划分为更细的粒度。

详情可与下方的订单物理结构、订单逻辑结构、订单金额结构一并阅读。

如果你愿意这样分解，你可以避免将步骤绘制成页面。

去看看你的企业是否也需要使用购物车，是否还需要有优惠券。如果是刚上线，这两个子功能完全不需要设计。

控制细分粒度

不需要限制细分粒度，一般2到3层就够了。比如上面的排序功能架构图是这样的。

也不是不可能如何正确的画出功能结构图？，但一般没必要花费太多精力。但如果需要拆分底层交易系统架构，则很有必要。有兴趣的朋友可以看看淘宝十年的产品还是有赞订单系统的拆分。

四、使用 Axure 绘制

推荐使用Axure的流程图功能来绘制，因为它还支持跳转到对应的前端线框，方便阅读。查看详情。

矩形框

表示子功能，子子功能。

方向箭头

子功能之间的关系。

虚线框

用来表示这部分属于哪个子功能。

五、总结

建议大家一起阅读这篇文章。前者是功能的内部结构图，后者是产品的整体功能流程图。

这两篇文章我是在“任务型产品”的基础上写的，但是这两个图也可以反过来应用。比如滴滴出行的主要功能，更适合各个功能结构图。画画。