AxureRP实战（三）Banner轮播图交互（进阶篇）

前一篇《AxureRP实战（二）Banner轮播图交互（基础篇）》用淘宝的首页banner案例讲解了如何运用动态面板实现banner轮播图的切换，有了基本交互功能。但是，交互效果还有些欠缺，在用户体验上不是很好，交互切换比较生硬。

本次讲解紧接实战（二）的内容，继续讲解banner轮播图，利用变量优化轮播图的用户体验。

共分三部分进行用户体验优化，下面对优化内容进行详细讲解：

第一部分：优化底部圆形按钮切换效果

底部按钮转换图片时要有向左或向右的移动过程，体验会更顺畅，利用给底部圆形按钮添加“onLoadVariable”变量来实现。

图片切换思路是：

当前一个banner图为banner01时，点击第二个圆点按钮，图片向左移动；当前一个banner图为banner02时，点击第一个圆点按钮，图片向右移动。

根据图片切换思路，我们把每一个圆点按钮都编上“OnLoadVariable” 变量值：

点选第一个圆形按钮，点击“添加动作” --> 选择“设置变量值” --> 选择“OnLoadVariable” --> 值设置为“1” -->

选择设置好的变量交互，将变量交互复制粘贴到另外三个圆形按钮上，分别将值改为2、3、4 -->

下面给四个圆形按钮添加判断条件，当点击圆形按钮时，需要判断“OnLoadVariable” 值是大是小，从而能知道图片向哪边滑动。

点选第一个圆形按钮，点击“启用情形”，打开“情形编辑”弹窗 --> 点击“添加条件” --> 依次选择“变量值”、“OnLoadVariable”、“>”、“值”、输入“1” --> “确定” -->

点开“设置面板状态”一栏 --> 进入和退出动画都选择“向右滑动”，时间为200毫秒 -->

第二和第三个圆形按钮需要添加大于和小于两种情形来判断。

例如点选第二个圆形按钮 --> 点击“启用情形”，打开“情形编辑”弹窗 --> 点击“添加条件” --> 依次选择“变量值”、“OnLoadVariable”、“>”、“值”、输入“2” --> “确定” -->

点开“设置面板状态”一栏 --> 进入和退出动画都选择“向右滑动”，时间为200毫秒 -->

复制单击交互，再次点击“启用情形”，打开“情形编辑”弹窗 --> 点击“添加条件” --> 依次选择“变量值”、“OnLoadVariable”、“<”、“值”、输入“2” --> “确定” -->

点开“设置面板状态”一栏 --> 进入和退出动画都选择“向左滑动”，时间为200毫秒 -->

第三个按钮同理第二个按钮 -->

第四个按钮只有小于的情形 -->

到这里，底部圆形按钮的切换基本完成。但是，当我们点击某一个按钮后，还是希望图片接着自动轮播，如何实现呢？

需要增加面板状态，设置自动轮播：

点选第一个圆形按钮点击“添加动作” --> 元件动作选择“设置面板状态” --> 目标选择“banner”动态面板 --> 选择“下一项”，勾选“向后循环” --> 进入、退出动画选择“向左循环”，时间200毫秒 --> 点开“更多选项”，勾选“循环间隔”，为4000毫秒 --> “确定” -->

第一个圆形按钮整体交互如下：

复制向左循环的面板状态，粘贴到其他圆形按钮上 -->

到此，底部圆形按钮的交互就优化完成了。

第二部分：优化侧边组合按钮切换效果

点击侧边按钮切换图片时，底部按钮需要联动对应设置选中状态，并且在鼠标至于图片上时，侧边按钮才显示出来。

应用鼠标移入和移出的交互来达到显示、隐藏的目的，这里可能会走弯路（不想看弯路可快速找到下面“正确的做法”）：

选择两个侧边按钮，鼠标右键选择“设为隐藏” -->

选择“banner”动态面板，点击“新建交互” --> 选择“鼠标移入时” --> 选择“显示/隐藏” --> 选择“right”组合按钮 --> 选择“显示” --> “确定” -->

鼠标移入时交互点击“添加目标” --> 选择“left”组合按钮 --> 选择“显示” --> “确定” -->

同理，添加“鼠标移出时”的交互：

预览查看交互，确实是鼠标至于图片之上显示按钮，但是无法点击按钮，要如何做才能正常点击按钮呢？

要转变思路：不用显示隐藏，当按钮一直显示的情况下，通过改变不透明度的方式达到显示隐藏的效果。

下面是“正确的做法”：

先将左右两边侧边按钮组合内部的两个元件样式都设置为100% -->

接下来需要在三个位置设置按钮的不透明度：

鼠标移入、移出banner图片；鼠标移入、移出侧边按钮；页面载入时。

（1）设置鼠标移入banner图片的侧边按钮的不透明度：

选中banner动态面板，点击“新建交互” --> 选择“鼠标移入时” --> 元件动作找到“设置不透明度” --> 找到右侧按钮组合的向右箭头 --> 不透明度为100% --> “确定” -->

点击“添加目标” --> 找到右侧按钮的半圆形 --> 设置不透明度为“32” --> “确定” -->

复制设置好的不透明度，粘贴一份 --> 将目标元件改为左侧按钮，设置不透明度 -->

鼠标移出时的不透明度同理鼠标移入时，移出的时候侧边按钮元件不透明度都为0，banner动态面板的交互如下：

（2）鼠标移入、移出侧边按钮时的不透明度

侧边按钮在banner图片上，还需要加入鼠标移入、移出侧边按钮的不透明度，和鼠标移入、移出图片思路一样，只是作为产品，淘宝产品想到了更细微的用户体验，移入侧边按钮时，半圆形的元件颜色会略深一些，不透明度改为48 ：

侧边按钮整体交互如下：

（3）页面载入时和鼠标移出图片一样，侧边按钮不显示

添加页面载入时的侧边按钮不透明度，且不透明度都为0 -->

以上就是侧边按钮显示隐藏效果的正确交互做法。

到此，还不能实现联动，当我们点击侧边导航时，底部的原型按钮会跟着变，需要联动。

还需要一个环节：添加banner图片的“状态改变时”的交互，与对应的四个圆形按钮相连，即：

当显示banner01时：第一个圆形按钮被选中；

当显示banner02时：第二个圆形按钮被选中；

当显示banner03时：第三个圆形按钮被选中；

当显示banner04时：第四个圆形按钮被选中；

为方便找，圆形按钮依次命名为“circle01”、“circle02”、“circle03”、“circle04” 。

点选“banner”动态面板，点击“新建交互” --> 找到“状态改变时” --> 元件动作选择“设置选中” --> 选择“circle01” --> 值为“真” --> “确定” -->

点击“启用情形” ，打开编辑情形弹窗 --> 点击“添加条件” --> 依次选择“面板状态”、“当前”、“==”、“状态”、“banner01” -->

复制粘贴情形1 --> 依次修改情形条件和选中的圆形按钮，两者一一对应 -->

到此，侧边按钮的交互就完成了。

第三部分：页面载入时banner图自动间隔时间向左滑动轮播

找到“页面载入时”的交互，点击“添加动作” --> 元件动作选择“设置面板状态” --> 目标选择“banner”动态面板 --> 选择“下一项”，勾选“向后循环” --> 进入、推出动画选择“向左滑动”，时间为200毫秒 --> 点开“更多选项”，时间间隔改为4000毫秒 --> “完成” -->

以上，淘宝首页banner轮播图案例的讲解就先告一段落了。