如何画好一个产品的逻辑图？

Answer 1

逻辑要弄清楚！为什么我这么强调逻辑，因为如果你的逻辑跑不通，最后出来的东西会陷入死循环，这对于使用产品的用户来说是致命的！你的每个功能的逻辑要跑得通，三个字跑得通看似简单，实际你需要花一定量的时间去跑逻辑，当然了，并不是说你花的时间越多越好，如果逻辑比较复杂，花的时间越多越可能把自己搞晕。有精力的朋友可以去梳理以下淘宝的订单逻辑流程图。跳出订单页面的可以不用理会哈。聪明的产品一看这个图就明白如何画，而且还会在我这个基础上更加完善更加美观。

Answer 2

思路是先了解整体然后拆分，了解现有的架构之后再了解为什么要这样设计（满足的怎么样的用户需求/业务需求）。我的方法是了解系统的构成，系统模块的拆分以及模块之间的关联关系，然后再细化了解每个系统模块的功能及流程。一张图描述产品的模块结构，也就是这个产品的主要模块、子模块、以及他们之间的关联；N张图描述用户用例，也就是用户使用各个主要功能的主要流程和分支走向。逻辑就是你的产品功能的实现逻辑。注意，这里我不是指技术上面的实现逻辑，而是某个功能在使用上面的逻辑，什么界面的什么按钮有什么作用，需要进行什么判断，下一步往哪儿去，功能与功能之间的交互是什么样的。

Answer 3

为什么需要功能逻辑图。当需要设计这样复杂步骤的功能，一定要学会画出内部的逻辑流程。当然有时候也需要结合功能结构的思想，先拆分功能尽量少耦合，再画出内部逻辑。然后和后端工程师过一遍逻辑，如果没有问题。再去设计具体的前端页面，最后才是专注于视觉细节。如果没有先产出功能逻辑图，而是只画线框图和交互，那修改迭代的次数至少是上百次。功能逻辑图是什么。表现功能内部的逻辑走向。可指导设计具体的页面和交互。功能逻辑图和功能结构图的区别。注意是功能内部的逻辑流程，不是误认为是拆分功能。两种图形的使用场景是不一样的，分析功能的维度是不一样的。一般来说先从业务上拆分功能到最细的粒度，然后再去画功能逻辑图。有时候最细粒度的功能很简单，逻辑图可不画。功能逻辑图和状态机的区别。通俗意义上的功能逻辑图表现是行为这个维度以及变化，而状态机是状态间的变化，维度是状态。如何画功能逻辑图。继续以电商APP的下单功能为例来讲一下如何画下单这个功能的逻辑图。因为这个功能实在是太复杂，不建议一次性画出逻辑流程。然后按照子功能分别画出对应的功能逻辑图。注意这里只画了立即购买的下单功能，购物车结算的可以查看加入购物车，加载购物车，展示购物车。选择商品、确认订单、提交订单。功能逻辑图的元素。建议使用Axure来画，因为还支持跳转到对应的前端线框图，方便阅读。详见Axure原型加流程图功能的高效结合。使用矩形框表示，没可以区分用户行为和系统行为，uml时序图中有区分。使用有向箭头表示行为的流程。使用菱形表示逻辑的多种路线。如果不复杂，可不用。其他文字。用来辅助理解，可忽略。