Axure教程：banner輪播最簡單的實現(xiàn)方法

27 評論 65410 瀏覽 247 收藏 4 分鐘

本文給大家講一種banner輪播最簡單的實現(xiàn)方法，一起來看看~

前段時間做一個開放平臺的原型，大家討論完需求就希望，快點出原型（第二天），而且要求“高保真”。

于是在“快速”“高保真”的要求下，自己對于所有的頁面交互都要求是，對需要使用原型的用戶（產(chǎn)品、研發(fā)、測試）而言，達(dá)到對應(yīng)的效果，而自己在實現(xiàn)時采用最簡單的方法。

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

原型鏈接：http://eta1id.axshare.com/

1. 首先看下輪播banner的組成

QQ截圖20150717143337

上圖中，左邊是頁面 展現(xiàn)的 banner輪播的圖，右側(cè)則是對應(yīng)的兩個動態(tài)面板。

可以看到右側(cè)動態(tài)面板命名非常簡單（根本起不到提示作用，但這說明此處面板命名不太重要，自己能區(qū)分就可以）。

2. 接下來看一下兩個面板的交互效果

QQ截圖20150717144232

如上是對于 輪播圖片banner的 動態(tài)面板設(shè)置。

設(shè)置面板在 【載入時】有交互，基本就是兩個動作：

  1. 面板不是在一加載就開始切換的，我設(shè)置的先等待1000毫秒。
  2. 設(shè)置面板狀態(tài) 為【NEXT】（即按照1、2、3的順序進(jìn)行切換）；

勾選從最后一個到第一個自動跳轉(zhuǎn)；勾選圖像輪播間隔。具體時間間隔可自己設(shè)置。

為了讓banner輪播看上去更逼真，可以加個 進(jìn)入和退出的動畫。此處選擇的時向左滑動，用時500毫秒。

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

做完這個切換之后其實基本算是banner做完了，但是總覺得缺點什么——缺我們常見的banner切換時的頁面指示導(dǎo)航按鈕。

依然是采用很簡單的方式 很暴力的加上的。

首先面板中的1、2、3狀態(tài)內(nèi)容如下圖：

QQ截圖20150717145409

其對應(yīng)的交互面板，基本和banner面板的設(shè)置是一樣的。唯一的不同是，在面板切換間的效果，這里不再是向左滑動，而是淡入淡出（畢竟三個指示按鈕滑來滑去，是很滑稽的）。

具體交互頁面如下：

QQ截圖20150717150021

額，說到這里，其實就沒了。

瀏覽最后再PO一下原型鏈接：http://eta1id.axshare.com/

 

本文由 @科大訊飛 小八原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
Alexandra
高級產(chǎn)品經(jīng)理
1篇作品 65416總閱讀量
03-165134 瀏覽
案例錦囊｜“防呆設(shè)計”在交互中的巧妙應(yīng)用（二）
02-214167 瀏覽
提升用戶感受與體驗，從品牌設(shè)定開始
03-154368 瀏覽
賽博美女，在小紅書批量誕生
08-143421 瀏覽
是誰？讓B站自制劇仰臥起坐
11-292193 瀏覽
“冷水”正在潑向過熱的短劇行業(yè)
評論
評論請登錄

  1. 考古學(xué)家來了哈哈

    來自廣西 回復(fù)

  2. 還要加上鼠標(biāo)移上去，出現(xiàn)左右按鈕。 點擊小圓點，立即跳到某個狀態(tài)

    來自上海 回復(fù)

  3. 哈哈哈，這個帖子是重置更新了么？底下還有15年的評論

    來自浙江 回復(fù)

    1. 是的= =幾年沒登，前些天上來發(fā)現(xiàn)封面圖片被系統(tǒng)替換成了一張沙拉圖。申請修改了一下，結(jié)果就翻新了

      來自上海 回復(fù)

  4. 整個輪播圖是由兩個動態(tài)面板完成，都是自動輪播，很簡單，很實用。

    來自四川 回復(fù)

  5. 這個有代碼嗎

    來自江蘇 回復(fù)

  6. 初級的表示看不懂

    來自福建 回復(fù)

  7. 請問一下，AXURE 7 預(yù)覽時設(shè)置的淡出淡入效果無效，是軟件問題還是系統(tǒng)或瀏覽器的問題？假設(shè)設(shè)置某個原件1秒淡入，則不顯示淡入效果，且等1秒后原件會突然出現(xiàn)。

    來自四川 回復(fù)

  8. 鼠標(biāo)點擊某個圓點，圓點點亮，圖片輪播到圓點對應(yīng)順序的圖片？

    為同事鼓掌?。?！

    來自四川 回復(fù)

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

      來自天津 回復(fù)

    2. 沒有設(shè)置點擊事件

      來自四川 回復(fù)

  9. 簡單易懂，真是非常感謝！

    來自北京 回復(fù)

  10. 如果要加點擊效果的話應(yīng)該怎么弄??？

    來自廣東 回復(fù)

  11. 我是菜鳥，想問問這種交互都是用什么實現(xiàn)的

    來自北京 回復(fù)

  12. 大神，能給我郵箱一份嗎 657497137@qq.com
    跪謝大神

    來自廣東 回復(fù)

  13. 也可以在對banner在做循環(huán)用例時一并把縮略圖或小圓點帶上，這樣就省得再單獨(dú)對小圓點添加用例了

    來自江蘇 回復(fù)

    1. 恩恩吶，是的。 ?? 確實這樣更方便了。 ?? ??
      看來自己以后在設(shè)計的思路上需要調(diào)整。因為比較習(xí)慣一邊做頁面呈現(xiàn)，一邊添加交互效果。所以導(dǎo)致自己的動效都是分離的。之前有看到一位大神的文章，說先畫頁面然后一把添加交互效果，恩這樣可能，很多效果實現(xiàn)起來會更高效。
      謝謝你么么噠(* ￣3)(ε￣ *)

      來自安徽 回復(fù)

    2. 一看這圖片就是淘寶開放平臺的，樓主是淘寶的？

      來自上海 回復(fù)

  14. 也可以把banner和縮略圖（或者小圓點）合并為一個動態(tài)面板做切換，當(dāng)然，這樣一來，動畫效果也得一致

    來自江蘇 回復(fù)

    1. ?? 這個之前腦補(bǔ)過，感覺banner 本身常用的還是左右滑動之類的效果。但圓點滑動就比較逗

      來自安徽 回復(fù)

    2. 小圓點在同一個動態(tài)面板的話，小圓點得就必須跟著banner的圖一起左滑，這不太好吧。

      來自廣東 回復(fù)

  15. 這個還可以更簡單更完善，輪播圓點用選中方式實現(xiàn)，而非動態(tài)面板，好處是做一個圓點，剩下的需要幾個復(fù)制幾個，很快，另外就是可以添加點擊事件，即點擊圓點跳轉(zhuǎn)到相應(yīng)的banner

    來自浙江 回復(fù)

    1. 嗯吶是的，最開始的時候，我也是用選中做的 ?? ?? 。不過后來感覺動態(tài)面板實現(xiàn)起來效果會比較好看。因為使用面板可以做圓點的淡入淡出效果。而且使用選中，需要設(shè)置選中和未選中的狀態(tài)。

      來自安徽 回復(fù)

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

      來自湖南 回復(fù)

    3. 恩恩吶。 ?? 下次改進(jìn)，加上手動控制的交互

      來自安徽 回復(fù)

  16. undefined

    來自河南 回復(fù)

    1. 嗯吶，自己再重新去看也覺得沒有講的很清楚。axure軟件布局分塊比較多，一截圖就容易 讓人覺得看不明白 ??
      第一次發(fā)表帖子。以后會注意 ??

      來自安徽 回復(fù)