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

（圖1）

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

（圖2）

（圖3）

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

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

（圖4）

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

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

（圖5）

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

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

（圖6）

（圖7）

（圖8）

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