写给UI设计师的产品功能结构图画法及运用

前言

当你看到这篇文章时，你会想，纳尼吗？产品功能结构图不是吗？PM画画什么时候轮到我们了？UI设计师来做这部分工作。的确，通常我们UI设计师甚至不在乎功能结构图。一般来说，它是PM给我们产品原型图，我们只为原型图做高保真设计。

如果你是在大厂里那乔治说的这种情况可能不太会遇到，大多数现实场景中你期望的产品原型图是这样的：

产品原型图

而大多数PM给你的原型图恐怕会让你大吃一惊。有的是随便用笔画的线稿，有的不知道截图在哪里给你变形失真的图片，拼凑出整个界面原型。

当你看到这样的原型时，它一定是一个黑色的问号，但现实是如此残酷。在接下来的工作中，你必须梳理原型中界面的交互逻辑，这将花费你工作的大部分时间。最后，你甚至可能会破坏设计的美丽情绪。

那么在这种情况下有什么好的解决办法吗？

答案是：当然有！乔治接下来要说的是产品功能结构图UI设计师工作的重要性。

产品功能结构图是什么？

定义

功能结构图是根据功能的从属关系绘制的图表，图中的每个框都被称为功能模块。功能模块可以根据具体情况分为大或小。分解的最小功能模块可以是程序中的每个处理过程，而较大的功能模块可能是完成某一任务的一组程序。简单地说，如果产品是一棵大树，那么核心功能模块是树上的树干，子功能模块是树干的分支；所以核心功能模块，然后细分模块下各子功能的图表是功能结构图。

树状图

作用

以文章开头的场景为例。当你看到一个混乱的原型图时，虽然每个界面的内容都很清楚，但你就是无法系统地了解整个产品的全貌。功能结构图以简洁明了的图表结构形式清晰地向您展示了整个产品的功能模块和子功能组成的逻辑关系。从上帝的角度，我们直观地了解了整个产品界面中的功能结构，避免了UI设计师在高保真实现过程中的盲目性，但在设计界面的过程中对产品结构有了更深入的了解，可能会发现一些无形的错误。

功能结构图的适用场景及绘制方法

适用场景

功能结构的建立是设计师的设计思维从发散到收敛，从理性到感性的过程。它是对设计空间中不完全确定设计问题或相当模糊的设计要求的简单而清晰的表达。它简单地表示了系统之间输入和输出之间的相互作用，是概念设计的关键环节。

在现实场景中，我们应该绘制一个产品的功能结构图，通常分为两种：

当你的PM当您仍在绘制产品原型并不时更新时，您可以提取和绘制当前确定的主要功能模块，以便您可以通过功能结构图看到产品的进展，并对现有的功能模块进行分级，以方便您的后期UI界面设计过程中的工作进度安排。

当你的PM当前版本的产品功能已经确定，原型已经绘制，每个功能模块，从而获得核心功能模块，然后检查当前产品的业务流程，可以帮助您分析和传递当前产品的功能结构，发现界面交互逻辑，是否有遗漏的子功能模块。

绘制方法

最方便的方法是参考PM在原型图中Tab根据功能层次关系对模块进行分类，找出功能模块下属的子功能模块。

这里我们用美团外卖APP以主页为例，假设这是一个非常精细的低保真实原型图：

美团外卖首页

通过上图的分析和总结，我们可以得到美团外卖APP主页功能结构图：

美团外卖首页产品结构图

最后，需要注意的是控制功能结构图中的粒度。一般来说，它是您每个功能模块下属子功能模块的细化程度。一开始，绘制的粒度相对较大。一般来说，主功能模块是逐层细化的主线。随着原型图的不断改进，粒度将不断细化。因此，在绘制之前，您需要澄清您的用途，是帮助您整理产品的核心功能模块，还是整理和分析整个产品的所有功能模块。

总结

通过学习上述方法，作为UI在以后的工作过程中，设计师会对产品的整体控制能力更加得心应手，也会对合格的产品更加得心应手PM对应有的专业技能有一定的了解，了解。

最后，我希望你能转发更多的订阅。如果你有任何疑问，你可以在评论区留言。乔治看到后会立即回复你。