原型設(shè)計(jì)工具Axure RP入門教程（十二）：滑動(dòng)幻燈片教程

---

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

免費(fèi)下載Axure RP 優(yōu)惠購買Axure RP

---

在本教程中，您將學(xué)習(xí)如何制作旋轉(zhuǎn)木馬，橫幅或內(nèi)容幻燈片，您可以通過在移動(dòng)設(shè)備上左右滑動(dòng)來瀏覽。

小部件設(shè)置

創(chuàng)建第一張幻燈片

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

創(chuàng)建第二張幻燈片

• 雙擊動(dòng)態(tài)面板以編輯其狀態(tài)。
• 在畫布頂部，單擊state1。在出現(xiàn)的下拉列表的底部，單擊添加狀態(tài)，然后按Enter以創(chuàng)建狀態(tài)2。

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

創(chuàng)建第三張幻燈片

• 重復(fù)步驟5和6，以使用其自己的矩形窗口小部件創(chuàng)建state3。將矩形小部件設(shè)為綠色。
• 單擊畫布右上方的關(guān)閉，或按ESC退出狀態(tài)編輯模式。

注意：創(chuàng)建自己的輪播時(shí)，您可以在動(dòng)態(tài)面板的每個(gè)狀態(tài)中包含所需的任何小部件。

添加向左滑動(dòng)互動(dòng)

• 選擇輪播動(dòng)態(tài)面板，然后在交互窗格中單擊新建交互。
• 在出現(xiàn)的列表中選擇向左滑動(dòng)事件，然后選擇設(shè)置面板狀態(tài)操作。
• 在目標(biāo)下拉列表中選擇此小部件。
• 在[狀態(tài)]下拉式選單中，選取[下一步]，然后勾選[從上到下?lián)Q行]方塊。
• 在動(dòng)畫輸入下，選擇向左滑動(dòng)。請(qǐng)注意，動(dòng)畫輸出部分會(huì)自動(dòng)更改以匹配此選擇。
• 單擊確定以保存操作。

添加向右滑動(dòng)互動(dòng)

• 重復(fù)步驟2，向右滑動(dòng)事件。 將動(dòng)態(tài)面板的狀態(tài)設(shè)置為Previous，而不是Next，然后為Animate In動(dòng)畫選擇向右滑動(dòng)。

預(yù)覽互動(dòng)

預(yù)覽頁面并左右滑動(dòng)輪播以瀏覽其幻燈片。

要在移動(dòng)設(shè)備上預(yù)覽交互，請(qǐng)將RP文件上傳到Axure Cloud，然后導(dǎo)航到移動(dòng)設(shè)備上的共享鏈接。 您還可以使用Axure Cloud移動(dòng)應(yīng)用程序。

---

關(guān)注慧聚IT微信公眾號(hào)???，了解產(chǎn)品的最新動(dòng)態(tài)及最新資訊。