原型設(shè)計(jì)工具Axure RP新手教程（十）：輪播/幻燈片教程

---

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)前進(jìn)或單擊一個(gè)按鈕前進(jìn)。（查看視頻點(diǎn)擊此處）

小部件配置

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

• 打開一個(gè)新的RP文件，然后在Pages（頁面）窗格中雙擊Page1（頁面1）以在畫布上將其打開。

• 從Libraries（庫）窗格中將一個(gè)矩形小部件拖動(dòng)到畫布上，并使用Style（樣式）窗格或樣式工具欄中的Fill Color（填充顏色）選擇器將其填充顏色設(shè)置為藍(lán)色。

• 右鍵單擊矩形，然后在上下文菜單中選擇Create Dynamic Panel（創(chuàng)建動(dòng)態(tài)面板）。

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

• 雙擊動(dòng)態(tài)面板以編輯其狀態(tài)。

• 在畫布頂部，單擊State 1（狀態(tài)1）。在出現(xiàn)的下拉列表的底部，單擊Add State（添加狀態(tài)），然后按Enter以創(chuàng)建State 2（狀態(tài)2）。

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

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

• 重復(fù)以上兩個(gè)步驟，以使用其自己的矩形窗口小部件創(chuàng)建State 3（狀態(tài)3）。將矩形小部件設(shè)為綠色。

• 單擊畫布右上方的Close（關(guān)閉），或按ESC退出狀態(tài)編輯模式。

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

在頁面加載時(shí)使輪播自動(dòng)旋轉(zhuǎn)

• 單擊畫布上的空白點(diǎn)以選擇頁面本身，然后在Interactions（交互）窗格中單擊New Interaction（新建交互）。

• 在出現(xiàn)的列表中選擇Page Loaded（頁面加載）事件，然后選擇Set Panel State（設(shè)置面板狀態(tài)）操作。

• 在目標(biāo)下拉菜單中選擇動(dòng)態(tài)面板。

• 在[狀態(tài)]下拉式選單中，選取[下一步]，然后勾選[從上到下?lián)Q行]方塊。 這將使動(dòng)態(tài)面板在達(dá)到最后一個(gè)狀態(tài)后返回其第一個(gè)狀態(tài)。

• 在Animate In（動(dòng)畫輸入）下，選擇Slide Left（向左滑動(dòng)）。

請注意：Animate Out（動(dòng)畫輸出）部分會(huì)自動(dòng)更改以匹配此選擇。

• 單擊More Options（更多選項(xiàng)），然后選中Repeat every 1000 ms（每1000毫秒重復(fù)一次）復(fù)選框。 選中Delay first state（延遲第一次狀態(tài)更改），然后單擊OK（確定）以保存操作。

• 這將使輪播繼續(xù)自動(dòng)前進(jìn)，超出第一個(gè)狀態(tài)更改，并且第一個(gè)更改將延遲到頁面加載后一秒鐘。

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

預(yù)覽頁面。一秒鐘的延遲后，轉(zhuǎn)盤應(yīng)開始旋轉(zhuǎn)。

添加下一步按鈕

• 返回Axure RP，切換到Libraries（庫）窗格頂部下拉菜單中的圖標(biāo)小部件庫。

• 在窗格左上角的搜索字段中輸入箭頭，然后找到所需的向右箭頭。 將箭頭圖標(biāo)拖到畫布上，并將其放在動(dòng)態(tài)面板的右側(cè)。

• 選擇箭頭圖標(biāo)，然后在Interactions （交互）窗格中單擊New Interaction（新建交互）。

• 在出現(xiàn)的列表中選擇Click或Tap事件，然后選擇Set Panel State操作。

• 在目標(biāo)下拉菜單中選擇動(dòng)態(tài)面板。

• 在[狀態(tài)]下拉式選單中，選取[下一步]，然后勾選[從上到下?lián)Q行]方塊。

• 在Animate In（動(dòng)畫輸入）下，選擇Slide Left（向左滑動(dòng)）。然后單擊確定以保存操作。

添加上一步按鈕

用向左的箭頭重復(fù)添加下一步步驟。將動(dòng)態(tài)面板的狀態(tài)設(shè)置為Previous，而不是Next，然后為Animate In動(dòng)畫選擇向右滑動(dòng)。

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

預(yù)覽頁面，然后單擊箭頭以瀏覽輪播中的幻燈片。

附加信息和提示

滑動(dòng)幻燈片

您可以為移動(dòng)界面制作滑動(dòng)幻燈片/輪播。為此，請使用動(dòng)態(tài)面板的向左滑動(dòng)和向右滑動(dòng)事件來代替上述添加上一步和下一步中的向左和向右箭頭。

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