Axure原型设计教程 | 轮播图

为了做一点产品方面的积累，小蚊子决定开始这个「Axure原型设计教程」系列。在大家的一起互助下，我想我会出现断更的情况吗？

本Axure原型设计教程让大家在动手实践过程中，更加容易更加深入地学习Axure原型工具的使用。

开篇就写大家常见的轮播图。

轮播图是网页设计或者APP设计常见的元素，学会使用axure原型工具制作轮播图对制作PC端或者移动端的原型都非常有帮助。现在讲讲如何使用axure8.0制作轮播图原型~~

步骤一：（轮播图动态面板）

首先，拖一个动态面板至画布中间，设置大小为1180X500，命名为“轮播图”；

然后，为该动态面板设置3个面板状态，分别为T恤，靴子和衣，并分别在每个面板状态分别放一张图片（小蚊子的图片来自猫商城，马爸爸你会来打我的小屁屁吗？）

最后，为该动态面板添加一个“载入时”用例，在用例中设置面板状态为：

选择状态：Next，向后循环，循环间隔1000ms；

进入动画：向左滑动700ms；

退出动画：向左滑动700ms。

步骤二：（轮播按钮动态面板）

首先，拖一个动态面板至“轮播图”动态面板的正下方适当位置，设置大小为280X40，命名为“轮播按钮”；

然后，为该动态面板设置3个面板状态，分别为轮播按钮1，轮播按钮2和轮播按钮3，并在每个面板状态分别放3个圆形，大小为30X30。轮播按钮1状态中的第1个圆形透明度设置为50%，轮播按钮2状态中的第2个圆形透明度设置为50%，轮播按钮3状态中的第3个圆形透明度设置为50%；

最后，为该动态面板添加一个“载入时”用例，用例中设置面板状态为：

选择状态：Next，向后循环，循环间隔1000ms；

进入动画：逐渐700ms；

退出动画：逐渐700ms。

好了！预览即可以看到轮播图自动轮播的效果了，同时轮播按钮也跟随着变化。

对比一下猫商城的轮播图。

需要原型文件的在评论区留言即可。

猜你喜欢：

【工具控】看2B产品经理如何用工具提升工作效率(值得收藏)

一图掌握产品经理核心工作流程