宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

本文与Axure Pro 8共享产品需求文档的制作过程。希望对大家有启发。

第一次用Axure Pro 8写产品需求文档，有点鸡冻。主要是指相关文章《Axure制作PRD（产品需求文档）设计教程》大家都是产品经理。然后我也学习使用Axure Pro，然后写产品文档。

00-1010版本历史描述的修订原型图结构图流程图原型图产品介绍产品介绍开发周期版本历史

需求文档的目录结构

Web主页菜单和后台制作菜单动作设置二级菜单制作内容页面制作包括用内嵌框架嵌套多个页面的方法)总结

00-1010使用Axure制作网页类型的产品需求文档，首先为了适应各种浏览器，页面内容要自适应居中，背景图可以自动填充。

00-1010页面居中是网页布局的一般要求，可以通过在Axure中设置“页面样式”居中对齐来实现：

00-1010网页只使用一种背景色，只需在页面样式的背景色中设置相应的颜色即可。如果你想设置多种背景颜色布局，并在不同的设备和浏览器上显示相同的效果，你需要采用科学的方法，而不是粗暴的方法。计划是这样的：使用上、中、下背景图片进行布局。然后我用PS做了一张双色png图。然后在页面样式的背景图中导入这个背景图。

00-1010您可以通过上述步骤获得一个可以平铺的布局页面。现在开始制作一级导航菜单。

1、画菜单。

首先画一个矩形，然后直接在矩形里写对应的菜单，然后把矩形的名字改成菜单对应的文字。如下图所示：

然后以上述方式创建剩余的一级菜单，然后将它们打包成一个组，称为一级菜单组。下图：

2.在菜单选项中实现鼠标悬停动作的选择效果。

选择一级菜单组，然后设置MouseOver的状态效果这里效果只是加深增加体验)。设置如下图所示：

然后设置选中菜单选项的效果，如下图所示：

完成以上设置后，可以在预览中实现鼠标滑过时的动态效果。这里需要优化的一点是，在“修改历史记录”中，也就是菜单的第一项，选中它，然后在属性页中选择selected，也就是在用户进入和退出这个页面时，默认选择这个菜单选项。下图：

00-1010因为一个主菜单项中有对应的二级菜单，所以需要增加一个动态面板来显示对应的二级菜单。如图所示，动态面板的每个状态都一一对应一级菜单项。

产品文档步骤

现在与一级菜单和二级菜单相关，即当鼠标移动到一级菜单时，动态面板会切换到对应的二级菜单状态。这里的操作是设置一级菜单项的OnMouseEnter事件，即当鼠标进入对应的一级菜单项时，二级菜单的动态面板会切换到对应的二级菜单。下面是变量方法，如下图所示：

选择一个一级菜单选项，然后挂“设置面板状态”一栏，显示相应的操作，选择相应的二级菜单。在下面的“选择状态”一栏中，选择数值，然后点击下面“名称或状态”选项旁边的功能按钮，然后输入变量设置。在局部变量一栏，设置对应值的变量，在此选择空格中的文本值作为变量。

，设置为name。在上方中选择”insert variable or function”，然后选中刚刚添加的name变量，点击ok即可完成设置。

提示：

假设一级菜单项中的文本为产品介绍，然后把该文本作为变量，然后去打开对应面板中与该变量值对应的状态页。

设置菜单的单选设置

完成以上的工作之后，就可以在鼠标在一级菜单中移动时来切换对应的二级菜单了。现在就来处理一下，原理和上面设置OnMouseEnter事件是一样的，只不过现在是设置OnClick事件。当设置完OnClick事件之后，发现点击一级菜单时并没有切换到对应的一级菜单，这里是有两个操作需要注意的。

1.需要对一级菜单组进行selection group的设置，如下图：

2.需要设置一级菜单项的selected的状态，如下图：

内容页制作

使用内联框架（Inline Frame）

在Home页面的中心添加内联框架，尺寸可以根据实际情况进行调整。如下图：

然后把二级菜单项或一级菜单项（没有二级菜单项）和内联框架进行绑定，即设置他们的单击事件。如把原型图中的结构图菜单通过内联框架绑定到Pages模板中的结构图页面。操作如下图：

这样就可以在点击二级菜单的时候切换到对应的页面了。

注意

关于内联框架的优化显示

右击菜单选择去除滚动条右击选择Toggle border去除边框

内联框架嵌套多页面的方法

上面的做法只适合做二级菜单只有一个页面的交互，如果二级菜单中还要跳转到别的操作页面时，情况就复杂了。我这里的解决方法是为二级菜单对应的页面设置一个动态面板，然后页面操作造成的页面切换都是通过动态面板来实现的。下面就来看看具体的操作步骤（以弹出窗口为例）。

1.页面中设置一个按钮或其他的触发控件，用于触发显示动态面板，比如一个按钮。如下图：

2.然后再在动态面板的window面板中绘制弹窗的原型图，如下：

3.接着把window_pandel动态面板右击设置为隐藏，然后给弹出窗口按钮设置onclick事件。

4.然后再窗口中的“是”、“否”按钮设置点击事件，设置为隐藏window_panel即可。

总结

以上是关于使用Axure来制作有交互的需求文档，至于文档的页面的相关内容模板，可以参考臻龙老师的文章：《全面剖析｜一体化产品需求文档》

参考

《全面剖析｜一体化产品需求文档》《Axure制作PRD（产品需求文档）设计教程》

本文由 @ Kimson 原创发布于人人都是产品经理。未经许可，禁止转载。