如何使用AxureRP制作Banner图切换效果

工具/原料

Axure

RP

70

雅虎Banner图3—5张

方法/步骤

选择3—5张尺寸大小一致的广告图。这里选取5张雅虎的首页Banner为例。放在材料库中。

打开Axure

RP

70,拖动一个动态面板在工作区中。动态面板大小与广告图大小一致。调节动态面板位置。

双击动态面板，取动态面板名“banner图”,添加动态面板状态，state1,state2state5。

双击state1,进入状态页，拖动一个Image元件到状态1中，双击选择对应的banner图。选择自动调整大小。然后调整位置为X：0，Y：0。

在state2—state5状态中重复state1中的 *** 作。然后双击Home页面，我们会看到界面效果如下

拖动5个Image元件到Home页，放置在动态面板“banner图”下面。大小：W:110,H：110。

双击第一个Image元件，选择大图一，并调整大小与Image大小一致。后面的Image元件重复第一个元件的 *** 作。对应大图二——大图五。 *** 作完效果如下。

选中第一个Image元件（添过图的），添加交互：鼠标移入时

——

设置动态面板

——

banner

——

State1。

第二到第5个Image元件重复步骤8的 *** 作。对应banner面板的State2到State。

生成原型，发布，查看效果！

如何利用Axure RP8做出点击按钮切换页面效果？一起来文中看看~
先来看一下页面的效果图：点击不同的按钮，切换不同的页面。（是web端和手机端都很常见的交互效果）
实现这一效果大致要分为三个步骤：
为按钮添加“选中”后的效果；设置动态面板，并对其进行状态编辑；通过对“鼠标单击”命令的编辑，完成交互设置。(其中一、二顺序谁先谁后都ok)先来讲第一个步骤，为按钮添加“选中”状态的效果（我会对其分为几个小的步骤）。
搭建出一个类似的原型，根据按钮的数量对文件逐一进行命名（重新命名是为了方便后面的 *** 作）；选中其中想要做变化的按钮，在鼠标状态中 单击“选中”（selected）选项，调出编辑器，对按钮颜色和字体颜色进行编辑，确定后，检查“选中”状态后的备注变化，标有备注信息说明 *** 作成功。对其他按钮分别进行 第 2 步的 *** 作，这样为按钮添加效果的第一步就完成了。接着，来说第二个步骤：设置动态面板（也就是需要做变化的页面）。
选中——右键 选择 “转为动态面板” 选项，这时右侧的文件会发生变化，转化为动态面板，里面默认会包含一个 状态 文件，然后对动态面板（不是里面的包含文件）进行重新命名。
对动态面板下的状态图层进行复制，有几个按钮，就复制几个文件。
文件复制完了，双击动态面板调出编辑器，选择“编辑所有文件”的小图标，然后确定，这时候菜单栏下会生成所有需要编辑的状态文件。
选择需要编辑的状态文件进行编辑（如只换颜色，可复制效果，粘贴到其余文件中进行编辑即可，这样能快一些），编辑完成后 叉掉 即可。
最后，将按钮和动态面板效果进行交互编辑，效果就完成啦。
还记着之前对按钮进行了“选中”状态的编辑嘛？现在需要让这个效果能在预览中显示，我们就需要双击 在交互面板里的“单击”（onclick）选项，调出编辑器之后，在元件库中找到 “单击/按下”选项，选中它，然后在右侧文件中找到对应的文件名称，勾选后 确定。（剩下的按钮也是这样 *** 作）
选中刚才的按钮，双击“case1”调出编辑器，在编辑器中找到“设置动态面板”选项，然后勾选右侧的动态面板，然后在状态栏中选择 对应按钮点击时，需要做变化的状态文件，设置好点击确定。（其他按钮的 *** 作也是如此，如果熟悉了 *** 作不需要分别两次打开编辑器，直接进行 *** 作也是可以的，我是为了方便拆解步骤看的清楚才分了两步）
最后，还有一个关键的步骤：为了预览时，按钮切换的效果更加自然，需要选中所有的按钮元件，进行编组命名。
以上步骤都完成后，即可预览查看效果了。
本文由 @雨禾君 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议

---