Axure 9 教程：Axure 9 實(shí)現(xiàn)輪播圖效果

7 評論 23851 瀏覽 25 收藏 3 分鐘

輪播圖在日常的原型設(shè)計中是最常見的了，今天和大家分享如何制作自動輪播+手工點(diǎn)擊切換。

思路：

  • 面載入時，圖片會自動輪播；
  • 點(diǎn)擊下方對應(yīng)的圖片，會跳轉(zhuǎn)到圖標(biāo)對應(yīng)的界面；
  • 點(diǎn)擊左右按鈕，既可朝左朝右有順序的翻動界面。

下面正式開始：

1. 所需組件，自己想做啥就做啥，不過有幾個界面就有幾個按鈕，不要多也不要少。

Axure原型教程：axure9實(shí)現(xiàn)輪播圖效果

2. 主界面矩形設(shè)置為動態(tài)面板，點(diǎn)擊動態(tài)面板添加4個狀態(tài)，每種狀態(tài)可由顏色區(qū)分開來，或者做成你所要設(shè)置的樣子。

Axure原型教程：axure9實(shí)現(xiàn)輪播圖效果

3. 設(shè)置完成后，要讓每個圓形圖標(biāo)對應(yīng)到我們所設(shè)動態(tài)面板的每個狀態(tài)，每個圓形對應(yīng)一個狀態(tài)（1-4圓形都這樣設(shè)置）。

Axure原型教程：axure9實(shí)現(xiàn)輪播圖效果

Axure原型教程：axure9實(shí)現(xiàn)輪播圖效果

4. 設(shè)置主界面（動態(tài)面板）載入時進(jìn)行輪播，這里的轉(zhuǎn)動時間和交互動畫隨自己的喜好來慢慢調(diào)整既可。

Axure原型教程：axure9實(shí)現(xiàn)輪播圖效果

5. 設(shè)置左右手工翻動輪播圖，點(diǎn)擊“>”，朝右翻動圖片，朝左，同理。

Axure原型教程：axure9實(shí)現(xiàn)輪播圖效果

6. 全設(shè)置完后，會是這樣

Axure原型教程：axure9實(shí)現(xiàn)輪播圖效果

7. 點(diǎn)擊預(yù)覽，輪播圖效果就完成啦！

Axure原型教程：axure9實(shí)現(xiàn)輪播圖效果

 

作者：妖怪口袋，微信公眾號“妖怪口袋”

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

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

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
妖怪口袋
請你全力以赴的開心?微信公眾號：妖怪口袋
6篇作品 112077總閱讀量
03-164600 瀏覽
Axure高保真教程：段落文字搜索（高亮搜索）
10-244951 瀏覽
抖音入局電商平臺“小時達(dá)”，即時配送開卷！
08-096115 瀏覽
來一起好好聊聊數(shù)字化轉(zhuǎn)型
09-033234 瀏覽
互聯(lián)網(wǎng)大廠秋招，開啟搶人大戰(zhàn)
07-204139 瀏覽
以“白小T”為例，淺析好生意的邏輯
評論
評論請登錄

  1. 想請問一下，如果是處于中間的內(nèi)容，如何制作出從它的左側(cè)按鈕點(diǎn)擊會實(shí)現(xiàn)“向左側(cè)滑動”的進(jìn)入動畫，而從它的右側(cè)按鈕點(diǎn)擊會實(shí)現(xiàn)“向右側(cè)滑動”的進(jìn)入動畫呢？如淘寶網(wǎng)的首頁輪播圖

    來自廣東 回復(fù)

    1. 類似于動態(tài)面板，左右點(diǎn)擊可以滾動，加條件和面板

      來自廣東 回復(fù)

    2. 好的！我自己再試試 謝謝！

      來自廣東 回復(fù)

  2. 這里有2020年Axure 9 8 產(chǎn)品經(jīng)理全集視頻 【藍(lán)光1920P】http://163.lu/rXsyh4

    回復(fù)

  3. 您好呀~如果想實(shí)現(xiàn)非一張圖的單次顯示，而是多行數(shù)據(jù)在同一個板塊依次輪播顯示，就是動態(tài)面板中有幾行數(shù)據(jù)，下面還有需要向上滾動的內(nèi)容，要如何實(shí)現(xiàn)？

    來自廣東 回復(fù)

  4. 還可以

    來自廣東 回復(fù)

    1. 謝謝老板支持

      來自廣東 回復(fù)