Axure笔记20200509——轮播图

本文目录
（一） 功能需求说明

1. 功能简述 2. 界面说明 3. 交互说明 4. 原型展示
   （二） 原型制作
2. 准备 2. 制作banner及自动播放功能 3. 制作状态栏 4. 制作切换按钮
   现在的Web网站首页上都会有轮播图，如何用Axure RP9 实现轮播图的demo？

（一） 功能需求说明

1. 功能简述

为突出该网站/该页面的一些重要信息，例如网站定位、服务特色、运营活动，需要在某某位置（一般是页眉导航下方）插入轮播图。
轮播图功能包括：
（1）自动播放：对一定数量（一般不超过5张）的图片，按照一定顺序、频率、切换方式在同一范围内替换展示。
（2）图片切换：切换到上/下/任一顺序的图片
（3）状态显示：显示正在展示图片的行列位置

2. 界面说明

（1）轮播区域：展示轮播区域
（2）切换按钮：区域内部左右两侧各有一个按钮，切换到上一个或下一个图片
（3）状态栏：区域内部下方有一行圆点（或其他形状），显示正在展示图片的行列位置，并可以切换到对应顺序的图片。

3. 交互说明

（1）轮播区域：自动切换播放图片
（2）切换按钮：点击按钮，
（3）状态栏：
①随banner图片改变，在状态栏里显示对应位置；
②鼠标移入后该位置形状切换到选中状态，轮播区域显示轮播图组中对应位置的图片。

4. 原型展示

Demo预览网址：https://rqlzf7.axshare.com
截图

0.png

（一） 原型制作

1. 准备

准备三张图片，本此制作图片来自unpalsh，打开Axure RP9

2. 制作banner及自动播放功能

①在主界面插入“动态面板”，命名为banner
②添加“banner”动态面板状态，分别命名为“图1” “图2” “图3”

1.png

③分别在状态内插入图片

2.png
④设置第一次轮播：点击轮播图，然后按照下图添加交互
3.png
⑤设置后续轮播：点击轮播图，然后按照下图添加交互
4.png

3. 制作状态栏

①插入3个圆角矩形，分别命名“图1状态”“图2状态”“图3状态”

5.png

②选中“图1状态”“图2状态”“图3状态”，命名选项组并添加选中样式

6.png
③设置状态栏切换banner，点击“图1状态”，按照下图添加交互
7.png
8.png

分别给“图2状态”“图3状态”添加交互，只需修改目标

9.png
10.png
④设置显示banner图的对应位置，点击banner图，在“状态改变时”交互中按照下图添加情形1
11.png
然后在情形1中添加下“图1状态”的交互动作，并将原来的“自动播放”的交互动作复制过来。
12.png
如上法，添加情形2和情形3，分别对应“图2状态”“图3状态”
13.png

4. 制作切换按钮

①制作“左切换”按钮
插入左箭头和矩形，分别命名为“上一张”“背景”，“上一张”在上层；
将两个控件组合，命名为“左切换”；
设置“背景”填充颜色为，深灰色、50%透明度，选中状态为100%透明度
②制作切换到上一张功能
点击“左切换”组合，按照下图添加交互事件

14.png

③重复①②步，制作“下切换”按钮和功能
制作完毕，可移至预览网址，预览效果

如需原型文件，请在公众号搜索“轮播图”（只支持Axure RP9打开）。
公众号二维码，或搜索公众号木石槿或PMnushijin。

image.png