每个APP原型都包含一个页面，那么每个页面的线框如何由Axure绘制？我希望通过这篇文章，刚开始的PM可以绕道而行。每页的线框。

　画出主要状态的线框图

可能包含多个状态显示的页面。例如，微信APP主页除了显示下面的常用图像外，还会显示效果，并点击显示效果的右上角，并删除所有聊天的显示效果……

但是，最核心的状态应该是用户在进入页面后应该正常看到的所有内容。 PM应该使用它来绘制页面的主状态线框。

　补充次要状态的线框图

然后我们绘制一个二级状态的线框。我们可以将它放在主要状态的线框旁边。

有时，次级状态的线框可以放置在主状态线框上。理解原型更容易。

　优化线框图的细节

在绘制此页面上的所有线框后，我们可以调整细节。这将使我们的原型看起来更专业。 PM无法追求原型的视觉美感，但它需要原型的逻辑美。

组件的大小是合适的并且看起来协调。

组件的位置是否合适。

相同的功能组件，大小不一样。

组件的颜色不仅是黑色和白色，建议使用较少的颜色。

　添加交互

如果您的公司只需要静态地图或线框，那么就足以完成上述两个步骤。

如果你的公司，除了线框，要求PM绘制交互以更真实地代表APP原型。然后我建议你在主线框上绘制主要的相互作用。

继续上面的示例，如果我需要在右上角绘制交互+。

然后我需要制作浮动图层，生成为动态面板。

然后添加+以添加交互以显示和隐藏动态面板。

按照类似的步骤，绘制一个左键滑动聊天，显示“标记未读”&“ldquo;删除”，点击“删除”。按钮，并显示动作列表的交互。

　写上逻辑

最后，我们需要补充主状态线框，辅助状态线框中的所有逻辑。逻辑似乎是由所有PM编写的，但许多PM都是一般编写的。原因是缺乏写作逻辑的规范。

需要考虑每个组件是否具有逻辑

不要错过组件的视觉，交互，技术和业务逻辑。

逻辑相似性，特别是类似的组件，建议将逻辑写入全局规范

逻辑图流程图也是逻辑表示

至于编写逻辑的具体方法，请转到我的其他文本产品逻辑的五种表示方法和Notes-Axure的最正统的产品逻辑表达式。

　预览效果

如果我们已完成所有线框，以及主要交互。当我们生成原型或预览原型时，我们可以看到以下效果。点击查看Axure生成的原型效果，与WeChat APP基本类似。

　　总结

当您学习绘制页面的线框时，可以粗略地绘制整个APP的原型。然后补充如何正确绘制功能流程图以及如何正确绘制页面流程图。它可以交付给程序员进行正式开发。