Axure RP 8 教程 – 用動態面板實現輪番圖

7 評論 17206 瀏覽 53 收藏 5 分鐘

本章主要介紹如何使用動態面板的多狀態切換制作輪番圖,而輪番圖在首頁消息和活動的推送以及APP引導頁有廣泛的運用。

案例簡介:固定區域循環播放一組幻燈片,圓形分頁標簽隨著播放不同的圖片,而對應改變樣式。

案例效果:

以下是輪番圖的制作流程,請慢慢食用哦。

Axure RP 8 教程 – 用動態面板實現輪番圖

1.將動態面板拉到操作區中。

2.,雙擊動態面板,添加五個狀態,并給動態面板名稱命名為“輪番圖”。

3.雙擊狀態,以狀態1為例,進入狀態1編輯界面,將元件區的圖片拖到動態面板框內,雙擊圖片圖標添加本地準備好的圖片。

4.按照添加狀態1圖片的方式,為其他四個狀態添加圖片,一個狀態一張,添加完畢五張圖片,在大綱頁面可以看到。

5.將元件庫里的方框拖進來,改成圓形縮小。

6.在這個圓形的屬性界面設置選中狀態(設置填充顏色為灰色),勾選下方的“選中”(只有Tag1需要勾選“選中”,其他不需要),并且制定選擇組“tag”,復制這個圓形,復制成五個之后,為這幾個命名為“tag1”~“tag5”。

7.全部選中,一起命名為tag,目的是保證這五個有且僅有一個被選中。

8.為載入時設置用例,實現輪番效果(循環播放效果)。

9.為動態面板“輪番圖”的狀態切換設置用例。

為用例添加判斷,判斷面板狀態“輪番圖”=狀態1。

設置該條件下的動作應該為“選中”tag1為真。

10.其他用例按照和用例1相同的方式設置,只是每一個用例對應的狀態和圖形不一樣,最后設置完畢應該為下圖所示。

11.收工后預覽效果如下圖所示

 

本文由 @Arthur 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自PEXELS,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 為什么我的下面的圓不會切換 就灰第一個 上面圖片輪番播放下面的圓不動 ?

    來自江蘇 回復
  2. 找到問題了 ??

    來自江蘇 回復
  3. 滑動球寫的不詳細啊,小白只完成了動態圖,滑動球跟著全黑了

    來自江蘇 回復
    1. 哈哈哈哈我也是

      來自江蘇 回復
  4. 為什么我的圈圈不跟著圖片一起變啊

    來自江蘇 回復
    1. 我的球球也不會動啊

      來自江蘇 回復
  5. 大神 滑動球那沒看懂 是設置一個組五個球就完事了是嗎 還有 設置動態面板案列的時候是怎么設置的呢????

    來自河北 回復