Axure教程：首頁圖片輪播

3 評論 4621 瀏覽 20 收藏 3 分鐘

圖片輪播是各大網(wǎng)站常常見到的形式，文章帶我們學(xué)習(xí)了如何用Axure實現(xiàn)圖片輪播功能，一起來看看~

雙11剛過沒多久，大家是否都參加了2000+億的大項目呀？剁手的時候，有沒有被各大電商平臺的首頁圖片輪播吸引住了呢？是不是原本不想剁手，結(jié)果只因一個對眼就無法自拔了呢？

圖片輪播是各大電商平臺常見的套路，輪播中的每個圖片都相當(dāng)有吸引力的呀。下面呢，我們就來說說首頁圖片輪播用Axure怎么實現(xiàn)？

還是跟以往的套路一樣，下面從3個方面來展開。

01 需求分析

我們本次的需求是圖片輪播，什么是圖片輪播呢？簡單來說，就是一套圖片以一定時間間隔自動循環(huán)播放，同時用戶也可以選擇圖片實現(xiàn)點播的效果。

其實再深入一點，我們會發(fā)現(xiàn)一張圖片的顯示與否也是有條件的。從這個角度來看，我們會想到Axure中的動態(tài)面板。

沒錯，今天的主角還是它。

02 Axure關(guān)鍵點分析

這個案例的關(guān)鍵點主要有3個：

1）動態(tài)面板的不同狀態(tài)及對應(yīng)的圖片設(shè)置，這個相對比較容易

2）設(shè)置小圓點，實現(xiàn)點擊小圓點跳轉(zhuǎn)至對應(yīng)的圖片

所有小圓點需要設(shè)置為只能單個選中，這個通過設(shè)置選項組名稱實現(xiàn)

設(shè)置點擊小圓點的交互，如點擊第一個小圓點則顯示第一張圖片，以此類推。

3）設(shè)置動態(tài)面板的交互效果

交互時間點為狀態(tài)改變時，“向后循環(huán)”需要勾選上，還可以根據(jù)實際設(shè)置間隔時間以及圖片切換的方向等

03 效果展示

我們來看一下最終效果吧，網(wǎng)址為：https://wxnac1.axshare.com/

 

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

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

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
翠baby
9篇作品 56613總閱讀量
12-084393 瀏覽
中臺列表如何設(shè)計，才能兼具實用性與多樣性？
12-222025 瀏覽
構(gòu)思基于社區(qū)營造的鄰里活動萬億賽道，讓我們一起改變社會吧！
11-245665 瀏覽
跟10個客戶聊完今年的業(yè)務(wù)，發(fā)現(xiàn)他們都在做這9個調(diào)整
06-259372 瀏覽
靠打鐵花視頻漲粉百萬，“江尋千”為何能夠頻頻出圈？
01-315719 瀏覽
春節(jié)后就是跳槽的好時機嗎？
評論
評論請登錄

  1. 在點擊圓點之后再加一次next動畫，滑動同理

    來自北京 回復(fù)

  2. 動態(tài)面板不應(yīng)該在狀態(tài)改變時 添加用例啊 （否則第一次進入 ，不會輪播）
    應(yīng)該在動態(tài)面板載入時 添加用例吧

    來自上海 回復(fù)

    1. 交互設(shè)置了2種，一種是載入時，另一個是狀態(tài)改變時。
      之所以加狀態(tài)改變時，是因為發(fā)現(xiàn)當(dāng)用鼠標(biāo)點擊小圓點之后，圖片就停止輪播了，所以就加了這個交互。
      但是也沒有完全解決上面那個問題，比如當(dāng)前展示的是圖片1，然后點擊了小圓點1，這種情況下還是會停止輪播。如有更好的方法，歡迎一起探討~~

      來自廣東 回復(fù)