美文网首页
Axure原型设计——轮播图

Axure原型设计——轮播图

作者: 绵羊ui | 来源:发表于2017-06-29 14:43 被阅读0次

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

轮播效果

步骤一:轮播图动态面板

首先,拖一个动态面板至画布中间,设置大小为612X366,命名为“轮播图”;

轮播图-设置动态面板

然后,为该动态面板设置3个面板状态,分别为图一,图二和图三,并分别在每个面板状态分别导入一张图片;

轮播图-面板管理 导入轮播图

最后,为该动态面板添加一个“载入时”用例,用例中设置面板状态为,选择状态:Next,向后循环,循环间隔4000ms,进入动画:逐渐700ms,退出动画:逐渐700ms。

轮播图-载入时用例

步骤二:轮播按钮动态面板

首先,拖一个动态面板至“轮播图”动态面板的正下方适当位置,设置大小为60X12,命名为“轮播按钮”;

轮播按钮-设置尺寸

然后,为该动态面板设置3个面板状态,分别为轮播按钮一,轮播按钮二和轮播按钮三,并在每个面板状态分别放3个白色圆点。轮播按钮一状态中的第一和第二个白色圆点透明度设置为50%,轮播按钮二状态中的第一和第三个白色圆点透明度设置为50%,轮播按钮三状态中的第一和第二个白色圆点透明度设置为50%;

轮播按钮-动态面板管理 轮播按钮-载入时用例

最后,为该动态面板添加一个“载入时”用例,用例中设置面板状态为:选择状态:Next,向后循环,循环间隔4000ms,进入动画:逐渐700ms,退出动画:逐渐700ms。

难者不会,会者不难,还等什么呢?动动手~~

相关文章

网友评论

      本文标题:Axure原型设计——轮播图

      本文链接:https://www.haomeiwen.com/subject/quhmcxtx.html