阅读笔记原型设计的作用和画法，你知道吗？

　　阅读笔记原型设计的作用和画法，你知道吗？

　　对于任何产品设计来说，构建过程都是一个不可避免的环节。为后续产品奠定了框架，是用户体验的基石。本文将从定义和方法入手，结合实际案例，通俗易懂的讲解流程图的功能和绘制方法。

　　

　　最近，我正在研究一个关于阅读笔记的原型。业务流程是通过app扫码识别书背面的条码，然后将书加入书架。加入书架的书可以写阅读笔记，记录阅读页数和阅读状态。 , 中间的页面流程比较复杂，所以决定通过阅读笔记的业务来给大家介绍一下页面流程

　　01 什么是页面流

　　页面流程图是展示页面之前-用户通过什么操作进入什么页面以及后续的操作和页面的流程关系。页面流程图是业务流程图之后原型设计之前的工作，是为了提高原型中间件的效率。

　　要制作原型图，请在线框前绘制轮廓。这个大纲就是页面流程，可以帮你更清晰的梳理自己的需求，考虑每个页面的关键点和每个功能的前后，做原型在你需要考虑页面流程之前，设置一个大纲，以免偏离要求。

　　另外，在完成页面流程图后，还可以更好地帮助产品经理进行UI、测试、开发的沟通，为后续的原型图减少很多不必要的改动。

　　02 为什么要有页面流1.原型设计的基本基础

　　新入职的产品经理往往在接到请求后，先画原型，而当你快速的画好原型并投入开发时，你会发现需要不断的变化，不断的变化，逻辑上的漏洞很多。为什么？这个怎么样？如果你有这样的困惑，你需要反思一下你的页面流是否丢失了。

　　因为我们是一个层层分解产品的过程。首先，有要求。从需求到功能改造，确认功能梳理逻辑，根据业务逻辑拆解页面流程，最后制作原型效果图。这时候原型就会围绕需求展开，所以页面流程是我们原型设计的基本依据。

　　2.通过页面流程模仿用户操作可以发现体验问题

　　页面流程是原型设计的基础，所以它代表了用户的位置。是从用户的角度考虑用户的操作，看流量是否合理。

　　以需求为出发点，首先要明确用户的需求场景，用户如何使用，在使用过程中会出现什么问题，思考用户需求场景，再思考如何解决这个需求，通过模拟用户的操作来发现用户体验问题，这也是我们在做原型的时候需要考虑的，所以梳理页面流程，确认用户的需求场景和操作逻辑，以便更好的提升用户互动体验。

　　03 如何绘制页面flow1.页面流收录什么

　　矩形：表示页面的主要业务，通常是页面的主要功能部分

　　

　　菱形：异常流程或判断逻辑的描述，通常显示在页面上，有提示或弹窗

　　

　　流向：流向分为主流向和辅流向，代表业务的逻辑方向

　　关键要素：每个流程要表达和反映的关键内容

　　2. 绘制页面流程图的工具

　　Axure：对于习惯使用Axure的同学来说，用这个工具画页面流程图就足够了。绘制完页面流程图后，就可以继续绘制原型了。同款软件切换会更方便

　　

　　Visio：流程图的常用工具，无论是什么流程，都能轻松应对

　　

　　简而言之，页面流程图就是帮助产品经理理清业务逻辑。只要能整理出自己的想法，手绘或者简单的连接PPT就可以达到目的

　　3. 明确业务流程和页面核心功能的主线

　　如前所述，页面流程是在业务流程之后，所以在开始页面流程之前，首先要明确业务流程，那么什么是业务流程？

　　如果页面流程是从用户的角度来看，那么业务流程就是产品的角度。从产品角度，回到业务流程梳理，业务流程绘制得很好，在页面流程中的方形和菱形中可以逻辑清晰地找到页面流程。

　　既然有业务流程，为什么还要画页面流？因为页面流在业务流程的逻辑中增加了页面核心元素的描述和下游的触发描述，即考虑用户实际使用场景的流向和异常流的处理方法, 用户操作的每一行逻辑显示更清晰。

　　4. 理清页面中的核心元素和逻辑关系

　　页面流量往往不仅是新页面，还有一些需要优化的旧页面。如果新页面的功能需要在旧页面增加一个入口，那么这个入口的核心元素是什么？它是什么，进入下一页的逻辑关系是什么，如何跳转，需要添加哪些异常流处理逻辑，用页面流来阐明页面的核心元素，这是一个非常原型设计的重大改进。

　　只要弄清楚页面的核心元素和下游的逻辑关系，就基本可以确定原型的轮廓了。这时候就不需要过多关注按钮的形状和颜色了。您只需要确认功能逻辑是否满足业务需求即可。

　　案例描述

　　以图书采集业务增加个人书架为例，看页面流程图的具体绘制过程

　　首先，我们来解释一下添加图书采集的必要性。用户通过App扫描家中图书背面的ISBN码，识别图书并添加到个人书架，形成个人书架。

　　业务流程是这样的：

　　

　　个人书架的功能逻辑在业务流程中有讲解，下一步就是考虑每个功能需要多少页，每个页面需要体现哪些元素，以及这些重要的元素是否会触发一些异常的流程，如何触发下游页面。

　　我们继续看个人书架的页面流程图：

　　

　　在此页面的流程图中，包括以下类别：

　　只要在每个页面功能中确认自己要重点关注什么，在原型设计中就会更加直接。

　　有些页面的最终路径可能是同一个页面。这也是正常的。通过页面流程，可以从用户的角度清晰的看到每次点击操作的进度和后续逻辑。这是产品交互的原型

　　5. 优化调整页面顺序

　　梳理业务和功能逻辑后，就可以组织页面流程了。页面流程要尽量走完所有相关页面，再做减法。

　　合并具有相同功能或元素的页面。您可以通过绘制原型草图来优化和调整页面的关键元素。在此过程中，您可能会发现页面上某些元素的显示不符合预期的逻辑。这个时候可以考虑一下。如果改了也可以和UI沟通是否调整，最终呈现的原型是符合业务逻辑的。

　　页面流的问题

　　绘制页面流程的过程会帮助你更全面地思考逻辑。这包括正常逻辑和异常逻辑，以及页面之间的跳转逻辑。那么在绘制页面的过程中需要注意哪些问题呢？

　　1.不要忽视异常进程

　　关于异常流的处理逻辑，原型一般表现为弹窗层或提示。

　　对一些关键元素的操作会触发异常进程。以个人书架业务中添加图书信息为例。正常流程是输入图书信息，点击添加按钮完成添加。有一些强制性的非空判断错误提示和专业术语或其他规则的解释，在设计之初也应该考虑。

　　2.考虑下游触发点

　　在页面流程的设计中，需要加入对下游罚分的考虑，通常采用按钮或超链接的形式。通过单击不同状态的按钮，您将跳转到不同的页面。每个按钮对应的下游页面是什么？ ，你必须考虑你要引导用户进行什么样的操作。页面流程的梳理，会增加你对整体业务逻辑的进一步理解，形成对产品的全球认知。

　　本文由@花卷er原创发布，大家都是产品经理。未经作者许可，禁止转载。

　　标题图片来自 Unsplash，基于 CC0 协议。

　　奖励作者，鼓励他努力！

　　欣赏