Axure RP9使用指南

用户小王

已于 2024-08-23 17:01:49 修改

阅读量1.7w

点赞数 24

文章标签： axure 前端

于 2022-11-22 01:38:48 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_72791534/article/details/127937791

版权

前言

本文主要内容是Axure RP9的基本应用，看完本篇后可快速上手原型设计。

1、快捷键

选中图层移动到上一层
ctrl + [
选中图层移动到下一层
ctrl + ]
选中图层移动到顶层
ctrl + shift + [
选中图层移动到底层
ctrl + shift + ]
合并为一组
ctrl + G
取消合并
ctrl + shift + G
锁定位置和尺寸
ctrl + K
解锁
ctrl + shift + K
拖动页面可以按住空格再通过鼠标拖动，这样不会失误拖动绘制的页面元素

2、元件

（1）引入外部元件库。常用的是AntDesign的常用组件和AxhubCharts常用图表库

在这里插入图片描述

（2）自定义元件库

a、新建元件库

在这里插入图片描述

b、绘制完成后（举栗说明）

在这里插入图片描述

c、另存为

在这里插入图片描述

d、后续将它作为一个元件库引入即可

3、母版

一些组件需要重复使用，就可以建立一个母版。使用起来很灵活。

（1）先创建一个公共组件，右键将其转换为母版。

在这里插入图片描述

（2）在其他页面选择创建的母版，拖动到页面即可。
（3）在拖动后创建的组件右键可以可以看到当前是 锁定到母版中的位置，现在改变模板中组件的位置，其他页面该组件的位置也会改变。

如果选择脱离母版，这个组件就会变成一个正常的组件。

在这里插入图片描述

4、动态面板（重要）

动态面板中可以设置状态，是axure中页面动态交互的主要手段

在这里插入图片描述

(1) 双击动态面板，创建状态。

在这里插入图片描述

(2) 添加交互按钮来切换页面

在这里插入图片描述

选中按钮后，新建交互

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

(3) 在浏览器预览

在这里插入图片描述

5、内联框架

（1）创建一个内联框架

在这里插入图片描述

可以将滚动条去掉来更好的模拟显示一个单页面应用

在这里插入图片描述

（2）将这个内联框架和想要动态切换的内容区相关联。举个例子

在这里插入图片描述

（3）浏览器预览查看效果

在这里插入图片描述

6、中继器

一个中继器可以分为样式、数据、动作三个部分。直接上例子

（1）模拟一个销售平台，可以按照销量和价格排序。

在这里插入图片描述

（2）双击中继器进入样式编辑状态，添加销售商品的商品名、价格、销量

在这里插入图片描述

保存后：
在这里插入图片描述

（3）填充数据

单击中继器，在中继器的样式中可以看到数据属性。表格的表头是属性名，表格列是具体的值
在这里插入图片描述

右键可引入图片

在这里插入图片描述

（4）添加数据和样式的连接

a、单击中继器设置每项加载事件

在这里插入图片描述

b、设置文本

在这里插入图片描述

c、选择中继器其中一项

在这里插入图片描述

d、点击函数 fx

在这里插入图片描述

e、选择销量对应先前配置的数据变量

在这里插入图片描述

设置完成后：

在这里插入图片描述

f、结果：

在这里插入图片描述

（5）添加销量和价格排序 ‘动作’

a、点击销量（价格）按钮添加单击时排序

在这里插入图片描述

b、添加排序方式和对应的变量

在这里插入图片描述

c、浏览器预览并查看结果

在这里插入图片描述

评论 3

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。