前一篇《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轮播图案例的讲解就先告一段落了。
,
