Axure是一款专业的原型设计工具, 让负责定义需求设计;功能和界面的人员能快速设计出所需产品,其中不仅包含了对软件产品的界面,交互逻辑的原型设计,还包含了流程图;web网站的线框图,并且能导出说明文档。
首先介绍以下Axure界面:
![](https://i-blog.csdnimg.cn/blog_migrate/ef70dfecd75d4305d15d89434dec12e5.png)
顶部的一般就是我们的菜单,左部是设计的界面,左下方是元件库,里面有我们需要的大部分控件和图标,其中还可以自定义组件,中部最大区域就是我门的设计界面,右边是用到的组件的所有属性,交互事件,和自定义说明
比如我们要设计这样的界面:
![](https://i-blog.csdnimg.cn/blog_migrate/5aa61e19c95965a11e0581943220fb44.png)
这是最简单的列表界面,其中最重要的莫过于展现数据的table,我们可以用table画出这个list,但是table没有交互效果,他是静态的,想达到点击删除便少一行的效果我们就要用到Axure的中继器组件,对列表的交互效果一般都是用它来实现。
从右边拖出一个中继器
![](https://i-blog.csdnimg.cn/blog_migrate/bb429634d711de59217975f4d185d40c.png)
双击中继器,给每一列自定义名称。
点击右边的属性
![](https://i-blog.csdnimg.cn/blog_migrate/26081b0a3e0981f57e89e78c11fc39b2.png)
添加完数据后
![](https://i-blog.csdnimg.cn/blog_migrate/3b2b54933a07936b0d583279542e4bcb.png)
此时还没有绑定数据到中继器上。
点击每页加载时
![](https://i-blog.csdnimg.cn/blog_migrate/2bcb549982e6b8ee3fcfaa293816fbc0.png)
绑定数据:
![](https://i-blog.csdnimg.cn/blog_migrate/e574c65b23feefda30148e18ea9ee6fc.png)
再看中继器已经有数据了
![](https://i-blog.csdnimg.cn/blog_migrate/ca910132338f6ac508472663ec90b306.png)
我们需要点击删除,便删除当前行的效果:
![](https://i-blog.csdnimg.cn/blog_migrate/61e92740b43aeee2080155db6b287bdf.png)
![](https://i-blog.csdnimg.cn/blog_migrate/731b43649ec6b16e599a964de92fd0c9.png)
点击菜单上的预览
![](https://i-blog.csdnimg.cn/blog_migrate/e25475d6a0142261e33394055fee537a.png)
浏览器中的呈现效果:
![](https://i-blog.csdnimg.cn/blog_migrate/101c65368d99c15e27816fed30fa2b48.png)
点击删除便会删除所在行
导出文档的功能:
点击发布-->生成word说明书
![](https://i-blog.csdnimg.cn/blog_migrate/f112b6615b58e17edd1aabb26c10ddf5.png)
可以选择所要生成的说明列表,点击生成即可生成文档