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

（圖1）

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

（圖2）

（圖3）

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

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

（圖4）

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

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

（圖5）

現在，單擊【預覽】按鈕，在瀏覽器中測試效果，當拖動(dòng)slider_dp結束時(shí)，如果slider_dp范圍接觸到open，頁(yè)面就跳轉到page1，說(shuō)明上面的操作正確。

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

（圖6）

（圖7）

（圖8）

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