第一步：準(zhǔn)備好所需圖像素材，見圖1。

（圖1）

第二步：將4張圖像素材拖放到Axure設(shè)計區(qū)域（在學(xué)習(xí)過程中要養(yǎng)成給部件命名的好習(xí)慣），并將圖像移動到恰當(dāng)位置，見圖2，在這里，昆明網(wǎng)站建設(shè)小編需要提醒注意的是：注意不同部件之間z坐標(biāo)的位置，也就是層級關(guān)系，可以通過【Outline頁面】面板進(jìn)行檢查，見圖3。

（圖2）

（圖3）

第三步：選中slider圖像，單擊右鍵，在彈出的關(guān)聯(lián)菜單中選擇【轉(zhuǎn)換為動態(tài)面板】，并給動態(tài)面板命名為slider_dp。

第四步：選中slider_dp動態(tài)面板，在右側(cè)部件【屬性】面板中雙擊【拖動時】事件，在彈出的【用例編輯器】中新增【移動】動作，在右側(cè)【配置動作】中勾選slider_dp動態(tài)面板，設(shè)置其移動為【水平拖動】，見圖4。單擊【確定】按鈕關(guān)閉【用例編輯器】。

（圖4）

此時，單擊【預(yù)覽】按鈕，在瀏覽器中已經(jīng)可以水平拖動slider圖像了，接下來添加【開鎖】交互，以通俗語言描述這個交互就是，當(dāng)鼠標(biāo)拖動slider_dp結(jié)束時（或者手指按住slider_dp滑動結(jié)束時），如果slider_dp接觸到了open，開鎖成功，跳轉(zhuǎn)到page1；如果未接觸到open，開鎖失敗， slider_dp要移動回原來的位置。

第五步：選中slider_dp動態(tài)面板，在右側(cè)部件【屬性】面板中雙擊【拖動結(jié)束時】事件，在彈出的【用例編輯器】頂部單擊【添加條件】，見圖5。在彈出的【條件編輯器】對話框中編輯條件表達(dá)式，如圖6-A。在底部的條件描述中可以清晰看到當(dāng)前的條件描述，如果當(dāng)前部件范圍接觸到open部件范圍，見圖6-B，單擊【確定】按鈕關(guān)閉【條件編輯器】。條件設(shè)置完畢后，昆明網(wǎng)站制作小編認(rèn)為繼續(xù)在【用例編輯器】中添加動作【在當(dāng)前窗口打開 page1】，見圖7，單擊【確定】按鈕關(guān)閉【用例編輯器】。

（圖5）

現(xiàn)在，單擊【預(yù)覽】按鈕，在瀏覽器中測試效果，當(dāng)拖動slider_dp結(jié)束時，如果slider_dp范圍接觸到open，頁面就跳轉(zhuǎn)到page1，說明上面的操作正確。

第六步：選中slider_dp，在右側(cè)部件【屬性】面板中再次雙擊【拖動結(jié)束時】事件添加第二個用例。在彈出的【用例編輯器】中新增【移動】動作，在右側(cè)【配置動作】中勾選slider_dp動態(tài)面板，設(shè)置其【回到拖動前位置】，動畫【搖擺】，時間【200】毫秒，見圖8。單擊【確定】按鈕關(guān)閉【用例編輯器】。

（圖6）

（圖7）

（圖8）

第七步：至此，簡單的滑動解鎖交互制作完畢，在頂部的工具欄中單擊【預(yù)覽】按鈕，或者按下快捷鍵F5/Shift+Command+P，快速預(yù)覽交互效果。