原型設計工具Axure RP入門教程（十二）：滑動幻燈片教程

---

Axure RP是一套專門為網站或應用程序所設計的快速原型設計工具， 可以讓應用網站策劃人員或網站功能界面設計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規格。

免費下載Axure RP 優惠購買Axure RP

---

在本教程中，您將學習如何制作旋轉木馬，橫幅或內容幻燈片，您可以通過在移動設備上左右滑動來瀏覽。

小部件設置

創建第一張幻燈片

• 打開一個新的RP文件，然后在頁面窗格中雙擊頁面1以在畫布上將其打開。
• 從庫窗格中將一個矩形小部件拖動到畫布上，并使用樣式窗格或樣式工具欄中的填充顏色選擇器將其填充顏色設置為藍色。
• 右鍵單擊矩形，然后在上下文菜單中選擇創建動態面板。

創建第二張幻燈片

• 雙擊動態面板以編輯其狀態。
• 在畫布頂部，單擊state1。在出現的下拉列表的底部，單擊添加狀態，然后按Enter以創建狀態2。

• 將一個矩形小部件拖到state2畫布上，將其放在（0,0）處，并將其填充顏色設置為紅色。

創建第三張幻燈片

• 重復步驟5和6，以使用其自己的矩形窗口小部件創建state3。將矩形小部件設為綠色。
• 單擊畫布右上方的關閉，或按ESC退出狀態編輯模式。

注意：創建自己的輪播時，您可以在動態面板的每個狀態中包含所需的任何小部件。

添加向左滑動互動

• 選擇輪播動態面板，然后在交互窗格中單擊新建交互。
• 在出現的列表中選擇向左滑動事件，然后選擇設置面板狀態操作。
• 在目標下拉列表中選擇此小部件。
• 在[狀態]下拉式選單中，選取[下一步]，然后勾選[從上到下換行]方塊。
• 在動畫輸入下，選擇向左滑動。請注意，動畫輸出部分會自動更改以匹配此選擇。
• 單擊確定以保存操作。

添加向右滑動互動

• 重復步驟2，向右滑動事件。 將動態面板的狀態設置為Previous，而不是Next，然后為Animate In動畫選擇向右滑動。

預覽互動

預覽頁面并左右滑動輪播以瀏覽其幻燈片。

要在移動設備上預覽交互，請將RP文件上傳到Axure Cloud，然后導航到移動設備上的共享鏈接。 您還可以使用Axure Cloud移動應用程序。

---

關注慧聚IT微信公眾號???，了解產品的最新動態及最新資訊。