axure 手机端滑动选择器_APP轮播图如何用Axure画出来

移动端PM需要了解常见APP组件并学会画出，点击下方链接学习视频教程。

浪子教你画移动端组件-培训视频教程-腾讯课堂​ke.qq.com

咱们先看下Axure画出的原型效果，然后再对该组件进行详细讲解。

一、组件介绍

二、实际案例

三、画出无交互原型

1、先画Banner。从默认元件库拖动“图片”到工作区合适位置，尺寸修改为375*100。

2、再画小圆点。从默认元件库拖动“圆形”到工作区合适位置，尺寸10*10。代表未选中状态的样式。

3、右键点击“交互样式”，切换到“选中”，填充色修改为#797979，代表已选中状态的样式。

4、点击第一个小圆点。右键点击“选中”。

5、点击“预览”按钮，然后在浏览器中查看原型效果。

四、画出有交互原型

6、同时所有小圆点，右键点击“选项组”并命名成banner。

7、点击banner，右键点击“转换成动态面板”，刚刚的内容自动成为State1。双击该动态面板默认进入第一个状态State1，点击顶部的State1展开下拉列表框，点击“复制状态”图标，生成State2。同理生成State3。

8、点击右上角“关闭”按钮回到工作区，点击该动态面板，右侧边栏切换到“交互”，点击“新建交互”按钮，添加事件“载入时”。添加动作“设置面板状态”，目标选择“当前元件”，状态选择“下一项”，勾选“向后循环”，进入动画选择“向左滑动”“1000毫秒”，退出动画选择“向左滑动”“1000毫秒”，勾选“循环间隔2000毫秒”，勾选“首个状态延迟2000毫秒后切换”，最后点击“完成”按钮。

9、继续点击该动态面板，右侧边栏切换到“交互”，点击“新建交互”按钮，添加事件“状态改变时”，添加动作“设置选中”，目标选择“第一个圆点”，点击“确定”按钮(需要提前命名)。鼠标移动到“状态改变时”然后点击右侧的“添加情形”，在弹窗“情形编辑”中点击“添加条件”，自动生成条件“面板状态-当前-=-状态-State1”，点击“确定”按钮。

10、同理设置当情形为state2时候选中第二个圆点，当情形为state3时候选中第三个圆点。

11、点击“预览”按钮，然后在浏览器中查看原型效果。

Tips：如果在每个动态面板状态放上圆点，这样的画法其实是错误的，因为圆点位置不固定。

五、课后作业

画出该组件的常见交互样式，添加到自己的Axure元件库，方便后续画移动端原型的时候使用。

---

关注公众号langzipm，系统化的学习常用移动端组件，从而掌握移动端原型的画法。

添加作者微信nuanai88获取RP源文件。