数极客首页

Axure实例:Axure Pro 8制作产品需求文档

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

Axure实例:Axure Pro 8制作产品需求文档

第一次使用Axure Pro 8来编写产品需求文档,有点小鸡冻。主要是参考人人都是产品经理的相关文章《Axure制作PRD(产品需求文档)设计教程》。然后自己也边研究使用Axure Pro然后边编写产品文档。

需求文档的目录结构

  • 修改历史
  • 版本说明
  • 原型图
    • 结构图
    • 流程图
    • 原型图
  • 产品介绍
  • 产品简介
  • 开发周期
  • 版本历史

产品文档步骤

  • Web首页菜单以及背景制作
  • 菜单动作设置
  • 二级菜单制作
  • 内容页的制作(包含内联框架嵌套多页面的方法)
  • 总结

Web首页菜单及背景制作

使用Axure制作Web页面类型的产品需求文档,首先为了适配各种浏览器,要让页面内容自适配居中,并且背景图可以自动填充。

设置页面自动居中

页面居中是网页布局的一般要求,在Axure中可以通设置“页面样式”居中对齐来达到这一效果:

Axure实例:Axure Pro 8制作产品需求文档

设置背景色

网页中较常见的只会使用一种背景颜色,直接在“页面样式”的背景色中设置相应颜色即可。尚若要设置多种背景颜色布局,而且在不同的设备和浏览器上都呈现相同效果,就需要采用科学而不是乖戾的做法。这里的方案是:使用上中下两色背景图片来布局。然后用PS做了一张两色的png图片。然后在“页面样式”的背景图中导入这张背景图。

Axure实例:Axure Pro 8制作产品需求文档

菜单动作设置

通过上面的步骤可以获取到一个可以平铺的布局页面。现在就开始制作一级导航菜单。

1、绘制一级菜单

这里首先要绘制一个矩形,然后直接在矩形中编写对应的菜单,然后把矩形的名字修改为菜单对应的文本。如下图所示:

Axure实例:Axure Pro 8制作产品需求文档

然后把剩下的一级菜单都按照上面的方式创建起来,然后把他们打包成一个组,命名为一级菜单组。如下图:

Axure实例:Axure Pro 8制作产品需求文档

2、实现菜单选项鼠标滑过动作的选中效果

选中一级菜单组,然后设置MouseOver(鼠标经过)时的状态效果(这里只是加深了效果以增加体验)。设置如下图所示:

Axure实例:Axure Pro 8制作产品需求文档

然后设置菜单选项被选中的效果,设置如下图所示:

Axure实例:Axure Pro 8制作产品需求文档

以上设置完之后就可以在预览时实现鼠标滑过时的动态效果。这里需要优化的一点是在“修改历史”,即菜单的第一项,选中它,然后属性页面选中selected,即用户一进出此页面时,该菜单选项默认是被选中的。如下图:

Axure实例:Axure Pro 8制作产品需求文档

二级菜单制作

由于一个一级菜单项中存在一个对应的二级菜单,所以需要加入一个动态面板进行对应二级菜单的展示。如图所示,动态面板的每个状态都与一级菜单项一一对应。

Axure实例:Axure Pro 8制作产品需求文档

关联一级菜单与二级菜单

现在要关联一级菜单和二级菜单,就是当鼠标移动到一级菜单的时候,动态面板就会切换到对应的二级菜单状态。这里的操作是设置一级菜单项的OnMouseEnter事件,即当鼠标进入对应一级菜单项时,二级菜单的动态面板就会切换到对应的二级菜单。这里使用的是变量的方法,方法如下图:

Axure实例:Axure Pro 8制作产品需求文档
  1. 选择一个一级菜单选项,然后悬着”Set Panel State”
  2. 事件一栏中显示对应的操作
  3. 选择对应的二级菜单,在下方的”Select state”一栏中,选择Value值
  4. 然后再下方的”Name or State”选项旁,点击函数按钮,然后进入变量设置。
  5. 在本地变量的一栏中,设置对应值得变量,这里选择空间中的文本值作为变量,设置为name。
  6. 在上方中选择”insert variable or function”,然后选中刚刚添加的name变量,点击ok即可完成设置。

提示:

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

设置菜单的单选设置

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

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

Axure实例:Axure Pro 8制作产品需求文档

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

Axure实例:Axure Pro 8制作产品需求文档

内容页制作

使用内联框架(Inline Frame)

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

Axure实例:Axure Pro 8制作产品需求文档

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

Axure实例:Axure Pro 8制作产品需求文档

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

注意

关于内联框架的优化显示

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

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

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

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

Axure实例:Axure Pro 8制作产品需求文档

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

Axure实例:Axure Pro 8制作产品需求文档

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

Axure实例:Axure Pro 8制作产品需求文档

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

Axure实例:Axure Pro 8制作产品需求文档

总结

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

 

参考

  1. 《全面剖析|一体化产品需求文档》
  2. 《Axure制作PRD(产品需求文档)设计教程》

本文由 @ Kimson 原创发布。未经许可,禁止转载。

新一代大数据用户行为分析与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合分析用户行为数据和业务数据,可以自动监测网站、APP、小程序等多种渠道推广效果分析,是增长黑客们必备的互联网数据分析软件。数极客支持实时多维分析、漏斗分析、留存分析、路径分析等十大数据分析方法以及APP数据分析网站统计网站分析小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据分析模型,是数据分析软件领域首款应用定量分析与定性分析方法的数据分析产品

发表评论

相关文章