AxureRP实战（二）Banner轮播图交互（基础篇）

Banner轮播图是原型图中最常见的模块之一，只要是互联网产品，基本都会用到轮播图。

前一篇文章讲解了如何运用母版实现网站导航的切换，本次教程教大家：如何使用Axure动态面板实现互联网产品banner轮播图的交互。

Banner轮播图的交互用动态面板来实现，大家把动态面板想象成电视机，每一个banner图片就像是一个个频道，遥控器上的按钮就连接着每一个频道。

也就是说，动态面板是装banner图片的盒子。就像下图这样：黑色框就是动态面板的盒子，里面的不同颜色矩形就是内容，每次根据指令去显示。

本次讲解依然用实战案例为例：购物网站淘宝首页的banner轮播图（这里选取轮播四个做讲解）。

先把4个banner素材准备好：

下面开始正式进入实现步骤：

第一步：创建banner动态面板

拖入动态面板元件 --> 根据素材的大小，调整动态面板的大小：样式中修改长为520，宽为280，并且命名为“banner” -->

双击banner动态面板进入编辑页面 --> 点击“添加状态”添加到共四个状态，并分别命名“banner01”、“banner02”、“banner03”、“banner04” -->

分别点选banner01、02、03、04层，分别把四个banner图片粘贴到四个面板层里 -->

第二步：创建banner底部、侧边按钮

1、底部按钮

拖入矩形元件 --> 样式中尺寸大小改为：长58、宽14 --> 填充颜色改为白色填充，不透明度为24% --> 圆角半径输入一个较大的值，形成两端圆角的矩形条 -->

拖入圆形元件 --> 样式中大小改为8，将线段线宽改为0，去掉描边 --> 复制圆形到4个，排列到圆角矩形条中间 -->

2、侧边按钮

拖入矩形元件 --> 样式中尺寸大小改为：长比宽长一些（如50）、宽30 --> 圆角半径输入一个较大的值，形成两端圆角的矩形条 --> 填充颜色改为黑色填充，不透明度为32% -->

再次拖入矩形元件 --> 放至于圆角矩形上合适位置 --> 框选两个矩形，点击样式中“去除”按钮，将圆角矩形剪切，得到淘宝案例上的按钮形状 -->

再置入箭头图标，鼠标右键将两个图形成组 --> 命名为“right” -->

复制“right”形状组合 --> 鼠标右键分别选择形状，选择“变换形状” --> 选择“水平翻转” --> 命名为“left” -->

按钮的样式完成如下：

第三步：连接交互

1、底部选择按钮交互

点选第一个圆形按钮 --> 交互栏点击“新建交互” --> 选择鼠标“单击时” --> 元件动作选择“设置面板状态” --> 选择“banner”动态面板 --> 选择“banner01” --> “完成” -->

点击“添加动作” --> 元件动作选择“设置选中” --> 目标元件选择“当前元件” --> 值为“真” --> “确定” -->

点选第一个圆形按钮的交互，复制粘贴到第2、3、4的圆形按钮上 --> 分别修改“设置面板状态”交互，对应到相应的banner图片 -->

点击交互栏中：+添加类似“鼠标悬停”的交互样式 --> 选择“元件选中的样式” --> 点选“填充颜色” --> 将颜色改为桔红色 --> “完成” -->

点击“显示全部” --> 选项组命名为“circle_icon” -->

选择元件选中样式，分别复制粘贴到其他圆形按钮上，并且选项组选择“circle_icon” -->

2、侧边按钮交互

点选“right”组合按钮，点击“新建交互” --> 选择鼠标“单击时” --> 元件动作选择“设置面板状态” --> 选择“banner”动态面板 --> 选择“下一项”，点选“向后循环” --> 进入动画和退出动画都选择“向左滑动”，时间为200毫秒 --> “确定” -->

复制“right”交互，粘贴到“left”按钮上 --> 修改交互内容改为“上一项”，勾选“向前循环”，进入动画和推出动画选择“向右滑动” -->

3、页面载入时交互

我们打开淘宝网页时发现，banner广告图默认圆形按钮选择了第一张广告图，这就需要在页面加载时设置选中：

点击axure内容区域的空白处（即：不点选任何元件、图片等） --> 点击“新建交互” --> 页面选择“页面载入时” --> 元件动作选择“设置选中” --> 目标选择第一个圆形 --> 值为“真” --> “确定” -->

到此，基本的banner轮播图交互功能完成了：

有了基本交互功能，我们发现还是有些欠缺，在用户体验上不是很好，还要进一步完善交互。例如，底部按钮转换图片时要有向左或向右的移动过程，点击侧边按钮切换图片时，底部按钮需要对应设置选中状态等等。产品经理在思考用户体验时，这些交互都需要仔细考虑。

因为时间关系，进一步完善教程（进阶篇）下一篇继续讲解。