Axure教程:banner輪播最簡單的實現方法

産品老司機手把手教寫文檔,10天線上課程,零基礎掌握産品經理必備7大文檔撰寫法。了解一下>

本文給大家講一種banner輪播最簡單的實現方法,一起來看看~

前段時間做一個開放平台的原型,大家讨論完需求就希望,快點出原型(第二天),而且要求“高保真”。

于是在“快速”“高保真”的要求下,自己對于所有的頁面交互都要求是,對需要使用原型的用戶(産品、研發、測試)而言,達到對應的效果,而自己在實現時采用最簡單的方法。

正巧今天看到網站上有教程教如何做一個輪播banner ,點開略看了一下,教程做的很複雜。其實使用axure做交互一般都比較簡單,但由于其各種小窗口太多了,各種截圖放一起,看上去很容易亂。之前小樓老師發布的一個教程,居然也被人吐槽講的這麼亂怎麼做産品(扶額)。

原型鍊接:http://jud2j5m.zhongte51389.cn

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://8qcbj.zhongte51389.cn

 

本文由 @科大訊飛 小八原創發布于人人都是産品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
評論
歡迎留言讨論~!
  1. 還要加上鼠标移上去,出現左右按鈕。 點擊小圓點,立即跳到某個狀态

    回複
  2. 哈哈哈,這個帖子是重置更新了麼?底下還有15年的評論

    回複
    1. 是的= =幾年沒登,前些天上來發現封面圖片被系統替換成了一張沙拉圖。申請修改了一下,結果就翻新了

      回複
  3. 整個輪播圖是由兩個動态面闆完成,都是自動輪播,很簡單,很實用。

    回複
  4. 這個有代碼嗎

    回複
  5. 初級的表示看不懂

    回複
  6. 請問一下,AXURE 7 預覽時設置的淡出淡入效果無效,是軟件問題還是系統或浏覽器的問題?假設設置某個原件1秒淡入,則不顯示淡入效果,且等1秒後原件會突然出現。

    回複
  7. 鼠标點擊某個圓點,圓點點亮,圖片輪播到圓點對應順序的圖片?

    為同事鼓掌!!!

    回複
    1. 對呀 這個做法明明有bug

      回複
    2. 沒有設置點擊事件

      回複
  8. 簡單易懂,真是非常感謝!

    回複
  9. 如果要加點擊效果的話應該怎麼弄啊?

    回複
  10. 我是菜鳥,想問問這種交互都是用什麼實現的

    回複
  11. 大神,能給我郵箱一份嗎 657497137@qq.com
    跪謝大神

    回複
  12. 也可以在對banner在做循環用例時一并把縮略圖或小圓點帶上,這樣就省得再單獨對小圓點添加用例了

    回複
    1. 恩恩呐,是的。 :roll: 确實這樣更方便了。 :wink: :wink:
      看來自己以後在設計的思路上需要調整。因為比較習慣一邊做頁面呈現,一邊添加交互效果。所以導緻自己的動效都是分離的。之前有看到一位大神的文章,說先畫頁面然後一把添加交互效果,恩這樣可能,很多效果實現起來會更高效。
      謝謝你麼麼哒(*  ̄3)(ε ̄ *)

      回複
    2. 一看這圖片就是淘寶開放平台的,樓主是淘寶的?

      回複
  13. 也可以把banner和縮略圖(或者小圓點)合并為一個動态面闆做切換,當然,這樣一來,動畫效果也得一緻

    回複
    1. :roll: 這個之前腦補過,感覺banner 本身常用的還是左右滑動之類的效果。但圓點滑動就比較逗

      回複
    2. 小圓點在同一個動态面闆的話,小圓點得就必須跟着banner的圖一起左滑,這不太好吧。

      回複
  14. 這個還可以更簡單更完善,輪播圓點用選中方式實現,而非動态面闆,好處是做一個圓點,剩下的需要幾個複制幾個,很快,另外就是可以添加點擊事件,即點擊圓點跳轉到相應的banner

    回複
    1. 嗯呐是的,最開始的時候,我也是用選中做的 :oops: :oops: 。不過後來感覺動态面闆實現起來效果會比較好看。因為使用面闆可以做圓點的淡入淡出效果。而且使用選中,需要設置選中和未選中的狀态。

      回複
    2. 我覺得這個還蠻重要的,因為我很多時候獲取需要的界面就去戳那個小圓點

      回複
    3. 恩恩呐。 :oops: 下次改進,加上手動控制的交互

      回複
  15. undefined

    回複
    1. 嗯呐,自己再重新去看也覺得沒有講的很清楚。axure軟件布局分塊比較多,一截圖就容易 讓人覺得看不明白 :cry:
      第一次發表帖子。以後會注意 :roll:

      回複
圈子
關注微信公衆号
大家都在問