axure原型设计之轮播图

效果图:http://ahzcnr.axshare.com/

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

步骤一:(轮播图动态面板)

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

然后,为该动态面板设置3个面板状态,分别为图1,图2和图3,并分别在每个面板状态分别放一张图片;

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

选择状态:Next,向后循环,循环间隔4000ms;

进入动画:向左滑动700ms;

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

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

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

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

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

选择状态:Next,向后循环,循环间隔4000ms;

进入动画:逐渐700ms;

退出动画:逐渐700ms。

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

作者:维度

转载请注明出处:http://weidublog.com/index.php/2017/03/12/57/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 轮播图是网页设计或者APP设计常见的元素,学会使用axure原型工具制作轮播图对制作PC端或移动端的原型都非常实用...
    绵羊ui阅读 1,729评论 0 1
  • 作为Axure初学者,把最近学的东西记录下来,和大家一起学习。不管是在PC端还是移动端,轮播图是常见的设计元素。下...
    Olga_Hu阅读 33,196评论 3 28
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,751评论 25 709
  • 满载青春的往事 始终相信,一转身就能看得见幸福 所以一直坚信回首的瞬间 谁 笑颜如花, 又,心简如素! 那些花儿,...
    桑诗玉阅读 530评论 0 0
  • 任务 你将使用图转移算法手工实现一个小型的词法分析器。 分析器的输入:存储在文本文件中的字符序列,字符取自ASCI...
    hzxiao阅读 784评论 0 0