用axure实现图片轮播最简单的办法

axure商城

本文转载自:http://www.woshipm.com/rp/176275.html 写得不错的一个教程。 关于用axure做轮播图的教程有很多,不过条条大道通罗马。崇尚简单快速的朋友不妨看看本文介绍的方案。

前段时间做一个开放平台的原型。

大家讨论完需求就希望,快点出原型(第二天)。而且要求“高保真”。

于是在“快速”“高保真”的要求下,自己对于所有的页面交互都要求是,对需要使用原型的用户(产品、研发、测试)而言,达到对应的效果,而自己在实现时采用最简单的方法。

正巧今天看到网站上有教程教如何做一个轮播banner 。

点开略看了一下,教程做的很复杂。其实使用axure做交互一般都比较简单,但由于其各种小窗口太多了,各种截图放一起,看上去很容易乱。之前小楼老师发布的一个教程居然也被人吐槽讲的这么乱怎么做产品(扶额)。

【正题】

原型链接:http://eta1id.axshare.com/

1、首先看下轮播banner的组成。

QQ截图20150717143337

上图中,左边是页面 展现的 banner轮播的图,右侧则是对应的两个动态面板。

可以看到右侧动态面板命名非常简单(根本起不到提示作用,但这说明此处面板命名不太重要,自己能区分就可以)

2、接下来看一下两个面板的交互效果。

QQ截图20150717144232

如上是对于 轮播图片banner的 动态面板设置。

设置面板在 【载入时】有交互,基本就是两个动作:

  1. 面板不是在一加载就开始切换的,我设置的先等待1000毫秒。
  2. 设置面板状态 为【NEXT】(即按照1、2、3的顺序进行切换);

勾选从最后一个到第一个自动跳转;勾选图像轮播间隔。具体时间间隔可自己设置。

为了让banner轮播看上去更逼真,可以加个 进入和退出的动画。此处选择的时向左滑动。用时500毫秒。

以上是banner 面板的全部交互。

 

做完这个切换之后其实基本算是banner做完了。但是总觉得缺点什么。——缺我们常见的banner切换时的页面指示导航按钮。

依然是采用很简单的方式 很暴力的加上的。

首先面板中的1、2、3状态内容如下图:

QQ截图20150717145409

其对应的交互面板,基本和banner面板的设置是一样的。唯一的不同是,在面板切换间的效果,这里不再是向左滑动,而是淡入淡出(毕竟三个指示按钮滑来滑去,是很滑稽的)

具体交互页面如下:

QQ截图20150717150021

额,说到这里,其实就没了。

浏览最后再PO一下原型链接:http://eta1id.axshare.com/

谢谢。

本文由 Axure中文网 作者:Axure中文网 发表,其版权均为 Axure中文网 所有,文章内容系作者个人观点,不代表 Axure中文网 对观点赞同或支持。如需转载,请注明文章来源。
14

评论:

21 条评论,访客:19 条,站长:0 条

0%好评

  • 好评:(0%)
  • 中评:(0%)
  • 差评:(0%)

最新评论

  1. Lemon233
    Lemon233发布于: 

    还尝试做了下mouse enter停止和mouse out继续滑动的效果,感觉不错,感谢!

  2. 666
    666发布于: 

    你好,banner交互时Next向左滑动是怎么设置的

    • avatar
      小月发布于: 

      设置banner动态面板“载入时”->面板状态“next”->进入动画“向左滑动”

  3. avatar
    番薯゛发布于: 

    可以说的详细一点吗?请教一下:
    点击圆点跳到对应的banner?

  4. SUMMER
    SUMMER发布于: 

    为什么我的没有轮播间隔时间设置

  5. 继明四方
    继明四方发布于: 

    交互事件的最后一行有一个miscellaneous(中文意思辅助功能),然后选wait(等待)即可

  6. shard
    shard发布于: 

    鼠标离开时再继续next循环。。。

发表评论