网站内容发布流程图(不能清晰表达产品整体的页面架构启发)

　　网站内容发布流程图(不能清晰表达产品整体的页面架构启发)

　　说到页面流程图，看起来很简单。但实际上，很多人画的不规则，无法清晰表达产品的整体页面结构。希望我的经历能对一些不擅长画画和建模的PM有所启发。

　　什么是页面流

　　页面流是指产品的所有页面以及它们之间的流关系。

　　收录元素

　　页面，有向线。

　　可能收录判断条件。

　　不收录具体功能。

　　不包括项目符号层和组件等视觉组件。

　　页面命名

　　可以是名词，例如购物车。可以添加归属词，比如我的红包。

　　动词-宾语短语，例如确认订单。

　　通用名称，例如我的。

　　可参考同行业TOP5竞品。

　　尽量保持命名与原型软件中的页面结构一致。

　　页面定位

　　每个页面尽量是一个完整独立的小功能。

　　除非功能太复杂，需要多页。页面此时的作用是对功能进行一定的操作。

　　结合上面的页面命名，请考虑每个页面应该如何定位。

　　只有一个维度

　　既然是页面流程图，研究维度应该只有页面。尤其是功能和业务不应该被看到。很多 PM 都会犯这个错误。

　　稍微延伸一下，每个产品至少有三大架构：业务流程、功能流程和页面流程。后续文章，我会一一讲。

　　页面流的作用

　　产品经理的设计工作中出现页面流的主要原因如下。

　　了解全局

　　对于团队中的每个人，您都可以通过页面流程图获得整个APP的概览，更加直观。

　　沟通需求

　　对于视觉设计师，了解要制作多少视觉草稿以及每个页面特定的视觉元素。

　　对于前端工程师来说，知道应该写多少页，构建页面代码结构。

　　评估工作量

　　用页数来评估各自的工作量，可以粗略估计工期。

　　合并业务

　　页面流量是业务的直接体现。根据业务领域反复研究，可以使整体产品更加简洁，结构更加美观。

　　页面流程不能这样画

　　大多数初级 PM 在绘制页面流程图时基本上都会犯两个错误。

　　只能有一个页面维度

　　如上所述，让我重申一下，应该只有一个页面维度。不应该有杂乱的业务、功能，甚至组件或组件。

　　不应显示特定内容

　　部分PM图片显示了页面的具体内容，其实是大错特错的。

　　我用闪电约会APP画了一个错误的页面流程图，只画了几页。以供参考。至少犯了以上1、2、4 错误。

　　页面流程应该这样画，才能找到所有页面

　　无论您使用哪种原型软件，总有其页面结构。基于此，绘制所有页面并不困难。

　　需要注意的是，页面是物理的并且存在。与业务流程图中的业务模块不同，它们只是逻辑层面的，不需要在现实中体现。

　　如果使用Axure，可以直接将左侧页面结构中的页面标题拖到右侧画布上。

　　用有向线连接

　　用线将两个页面连接起来，直到所有的页面跳转都添加完毕。

　　如果您使用的是Axure，请不要傻傻的连接，而要使用cable模式。

　　添加条件判断

　　这一步不是必须的，但推荐稍微复杂的产品。

　　以上面的错误图为例。主页与 3 个页面相关。什么情况下会跳转到第一页？这是需要条件判断来解释的。这个扁平化的 UI 视觉草稿没有体现这个 PM 的价值。

　　其实UI视觉稿的平铺图可以作为前端工程师定义代码级别的页面结构，属于物理结构。但逻辑页面结构必须辅以条件判断。

　　重新绘制上面的页面流程图，应该正确如下：

　　检查你是否犯了错误

　　上面提到的几个常见错误，最好检查一下你是否犯过。

　　总结

　　补充一点，如果你是用Axure画页面流程，可以选择所有页面，然后右键生成流程图

　　其实页面流程图也需要按照角色（用户、商家）、端（客户端、服务器）来绘制，有时也需要按照版本来绘制。根据您产品的复杂程度，按照本文中的方法绘制即可。

　　接下来讲讲如何绘制功能流程图和业务流程图。