前端-Axure RP9 的使用（二）_axure页面拉伸

前端-Axure RP9 的使用（二）

母版

作用

风格的统一、元件的复用。

新建母版

增加两个页面，母版页面及测试母版页面，在母版页面添加矩形元件。

在该元件上右键可创建母版。

使用母版-两种方法

• 新增母版到页面

  在母版中右击刚刚新增的母版1，点击新增页面。

  

  选择测试母版页面，点击确定。

  

• 直接拖拽母版至测试母版页面

  

自适应页面

作用

根据窗口的分辨率自动调整页面样式

实现

点击页面，在样式中修改样式，设置”自动“，创建新的自适应视图集

点击新增，点击预设，依次添加视图，并设置继承自“基本（任意x任意）”

点击确定后会出现三个视图，当前为最大显示分辨率，每行最多六个便签

现在为iPad 4视图，在视图范围内，自行移动便签元件位置，每行最多四个

现在为iPhone 8，在视图范围内，自行移动便签元件位置，每行最多两个

点击预览，拉伸页面，可以检查效果。

交互

交互类型

Axure里的交互动作大致包括：定义链接、设置动作、多个条件场景、页面上的交互四种类型

交互样式(仅对当前元件的样式进行更改)：选中元件，鼠标右键，选择【交互样式/样式效果】，选择交互触发类型，选择要更改的交互样式。

交互动作(带有逻辑性)：选中元件，在右侧交互面板选择交互事件类型，设置动作。

交互情形(带有逻辑性)： 设置交互动作，在交互动作中添加情形并设置情形对应的动作；当某个元件的值满足A情形的时候做A动作，满足B情形的时候做B动作。即if-else语句。

案例

页面载入时

实现当进入某个页面时，弹出欢迎语或提示框等。

首先创建需要弹出的对象，设置两个按钮，实现一些交互动作，并将该弹窗所有元件组合。

点击退却按钮，在交互栏添加鼠标单击的交互动作，控制关闭该弹窗。同理在继续前进按钮及右上角的关闭按钮添加同样的交互动作，“（组合）”即为该弹窗。

在继续前进按钮上继续添加点击单击事件的交互动作，单击显示el-alert-success提示（自行创建并命名）。

最后将所有元件右击设置为隐藏，点击预览，可检查效果。

选项组菜单互斥效果

点击菜单栏实现切换

其中1-4为矩形元件，全部选择，右键选定选择组，设置为同一个选择组，实现互斥，右击，选择样式效果，设置悬浮时的样式及选中时的样式，如改变填充颜色为粉色。并右击首页方框，设置为选中，实现页面载入时显示动态面板的首页状态。

5为动态面板，双击可添加四个状态，内容一一对应菜单栏。

点击首页方框，创建单击交互动作，其他方框以此类推。点击预览，可检查效果。

下拉菜单栏

实现点击一级菜单展开二级菜单栏的功能。

利用矩形元件创建菜单，并将三个二级菜单组合，命名为二级菜单。

为一级菜单方框添加点击事件，当点击时，切换二级菜单组合的可见性。注意展开“更多选项”，选择“展开/收齐元件”，并设置向下，避免二级菜单展开时遮住其他一级菜单或被一级菜单遮住。

在一级菜单下方再放一个一级菜单，并隐藏二级菜单组合。点击预览，可检查效果。

链接

在新页面添加两个按钮

给左边按钮添加单击交互动作，“页面载入时”为同级目录的一个页面。

给右边的按钮添加单击交互动作，注意点击“更多选项”，设置在新窗口打开外部网站。

点击预览，可检查效果。

狗头保命 U•ェ•U