Axure制作PRD设计教程.doc

《Axure制作PRD设计教程.doc》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、Axure制作PRD设计教程　　PRD文档也就是产品需求文档是每一个做产品的人都要会写的，那么如果用Axure来做出优雅的PRD呢。　　这不是prd教程！而是Axure做PRD框架的一个教程！源文件的预览网址是http://qdvf6p.axshare.com/大家可以先预览一下，决定是否要看这份教程。　　　　因为这是一份axure编写的PRD文档，所以你要考虑它的适用性，这里推荐一些小型的web端，APP端，可以使用这种方法，但是大型的系统以及web端页面显得就不是那么好用了。总之一句话，刀刃要用到对的地方。　　首先我

2、们把这个页面拆成三个部分：全局设置一级菜单栏二级菜单栏内容页　　这也是我们今天要全部弄的东西了，毕竟这种框架就相当于一个目录，把其他内容综合起来。内容填充什么，这个由你自己来决定。1.全局设置　　顾名思义，就是一些设置一次就不需要再改动的东西了。（为了照顾新人，所以我会详细的写，会的大神可以忽略。。）页面居中　　　　就是让页面的东西居中显示，如图所示设置即可。菜单栏背景颜色　　之前我也是做了两个大矩形，当点击预览的时候就傻了。因为长度不够后面留了很大的白色，想想拉长的话换个电脑可能也会出现各种各样的问题，本着能少设置一下

3、，多兼容一些电脑，做了这样的设置　　第一步，打开你的axure，然后放两个矩形上去，一个是一级标题栏的底色，一个是二级标题栏的底色。选好他们的高度就可以了。如下图，很糙很糙。　　　　第二步，打开你万能的QQ，Ctrl+Alt+A开启截图功能，截下来一条，保存为图片，名字随便起。　　第三部，依然在样式里，选择导入，选取你刚才截取并保存的图片，点击确定即可，这个时候背景就变成你刚刚截图的块块了　　　　　　接着你就可以愉快的看到你的页面呈现了不一样的效果。如下图。　　　　和说好的完全不一样啊，但是不用着急，这里面我们只需要回到

4、样式里，将背景图片选项改为水平重复即可，如下图　　　　选择完以后，就可以了，无论你屏幕有多大，放心吧，他都会延伸出去的。一劳永逸了。效果就不截图了。2.一级菜单栏菜单栏　　在做一级菜单栏的时候，我有试过几种方案，比如说每个页面都有一个菜单栏，相互之间是独立的，但是这种菜单栏发死，不灵性，不动感，况且我是个喜欢偷懒的人，一页一页复制对于我来说，实在是累。然而母版有时候限制有太多了，于是想到了一个相对比较好的办法吧，虽然不算完美，但最起码看起来舒服　　第一步，拉出来几个矩形，矩形大小相等，在矩形内部直接填写文字，并且给矩形名

5、称起和矩形内文字相同的文字，这步很重要，例如：需求池那个矩形，矩形内文字是需求池，矩形名称也是需求池，（为什么这么做，稍后再说）排好位置。　　　　第二步，把所有一级菜单栏的矩形设置为一个组合，就叫首页组合好了。　　第三步，点击组合，设置鼠标悬停效果以及选中效果，即当你鼠标选中该项或悬停于该项时，表现出来的效果，并且设置选项组名称（名称随便起就行，你记得住就好），将第一个即首页设置为选中状态。如图所示　　　　　　　　这样设置后就稍微有一些简单的效果了，且每个菜单都有自己的效果（你可以慢慢设置。。我只是设置了背景色而已，你可

6、以设置好多），当你选中一项时会自动取消其他选中的效果，这就是选项组的作用。　　　　这时候一级菜单基本就有个样子了（前面那个产品需求文档的文字和后面的版本号就随便弄吧。。并不是重点）3.二级菜单栏　　从本文章图可以看出来，一级菜单可以拥有好多的二级菜单，且每一个一级菜单对应的二级菜单内容都不相同，如何做到快速预览，又不用看到标题栏来回闪动呢，这里就要用到动态面板了！　　第一步，我们建立一个动态面板，动态面板命名为“首页二级标题栏”，当然了，名字都是随意的，自己能记得住就好了。　　第二步，添加动态面板状态，这里要注意一下，你

7、有几个一级菜单的选项，这里的动态面板状态最好就设置几个，且务必注意，动态面板状态的命名要和一级菜单的名称完全一样，在动态面板的状态内填写各个一级菜单对应二级菜单的菜单选项　　例如：一级菜单有一个首页，那么创立二级菜单动态面板的状态的时候名称也必须是首页，在首页这个状态内写上二级菜单的菜单选项，如图　　　　第三步，这一步就精髓了，为什么我让你把所有的选项卡的名称都统一了，就在这一点了，我们拿首页这一栏为例子，首先选择一级菜单的首页的矩形框，我们给他添加交互事件：鼠标移入时--设置动态面板状态--选择状态Value--函数加

8、入局部变量，随便起个名字就好，然后插入变量，为thisname，具体看图。　　　　　　　　第四步，再给一级菜单矩形框添加一个交互事件，当鼠标单击时，状态和上一个是一样的，再添加该项一个选中状态就可以了，这里我就不重复截图了。有人就想问为什么要这么麻烦。接下来你就知道了，你现在可以复制这些状态，到一级菜单的任意菜单上，