Axure RP Pro 7.0手機手勢滑動解鎖屏幕

2024-01-30

3542

用戶點擊滑動條，拖動到最右邊，手機屏幕解鎖成功用戶可以通過點擊手機屏幕上的滑動條，將其拖動到最右邊來解鎖手機屏幕。當滑動條拖動到最右邊時，手機屏幕會顯示解鎖成功的信息。用戶點擊滑動條，未拖動到

用戶點擊滑動條，拖動到最右邊，手機屏幕解鎖成功

用戶可以通過點擊手機屏幕上的滑動條，將其拖動到最右邊來解鎖手機屏幕。當滑動條拖動到最右邊時，手機屏幕會顯示解鎖成功的信息。

如果用戶點擊了手機屏幕上的滑動條，但未能將其拖動到最右邊，手機屏幕將無法解鎖成功。用戶需要重新嘗試將滑動條拖動到最右邊才能解鎖屏幕。

為了制作一個可操作的手機界面，我們需要從部件庫中拖入一些必要的部件。首先，我們可以拖入一個圖片部件，并雙擊它以瀏覽并選擇手機外殼的圖片。我們還可以調整圖片的大小和位置。接下來，我們可以再次拖入一個圖片部件，用于制作手機的背景桌面。同樣地，我們可以調整圖片的大小和位置。

除了圖片部件，我們還可以從部件庫中拖入一個文字部件。雙擊該部件以修改文字內容，并將其設置為時間顯示格式的文字。我們還可以再次拖入另一個文字部件，并將其設置為日期和星期格式的文字。調整文字的樣式和位置以適應手機界面。

為了實現滑動解鎖功能，我們需要添加滑動槽和滑塊。首先，我們可以從部件庫中拖入一個矩形部件，并點擊選中該矩形。然后，在工具欄的填充顏色選項中選擇漸變顏色，并調整矩形的大小和位置。同樣地，我們可以使用相同的方法來制作滑動槽和滑塊，并調整它們的位置和大小。

為了實現滑動解鎖屏幕的效果，我們需要將手機界面上的所有部件轉換為動態面板。用戶可以通過右鍵單擊手機界面上的任意部件，并在彈出的下拉列表中選擇"轉換為動態面板"。我們可以將該動態面板命名為"解鎖"。

雙擊"解鎖"動態面板，打開動態面板狀態管理框。在狀態管理框中，點擊圖標以增加一個新的動態面板狀態，并將其分別命名為"解鎖前"和"解鎖后"。

在解鎖前狀態頁面中，選擇滑塊部件，并按照之前提到的方法將其轉換為動態面板。將該滑塊面板命名為"滑塊面板"。然后，在滑塊槽的右邊拖入一個矩形部件，并調整其大小，將其命名為"右邊線"作為參考線。將該右邊線部件調整到最底層。

打開解鎖后狀態頁面，在其中添加文字部件，并將其內容修改為"恭喜解鎖成功"。點擊滑塊動態面板中的狀態一，并拖入一個矩形部件，放置在滑塊的最左邊，并命名為"左邊線"。將該左邊線部件調整到最底層。

進入解鎖前狀態頁，選中滑動面板，并在右上角的部件交互中雙擊"拖動面板狀態時"的動作，進入用例編輯器。在用例編輯器中，設置移動滑塊面板在X軸上的拖動，并點擊確定按鈕。

在用例編輯器中，點擊"結束拖放動態面板時"的動作，并進入用例編輯器。在其中，點擊"編輯條件"，當左邊線接觸到右邊線時，設置解鎖面板狀態為"解鎖后"。

在用例編輯器中，再次點擊"結束拖放動態面板時"的動作，并進入用例編輯器。在其中，點擊"編輯條件"，當左邊線未接觸到右邊線時，設置移動滑動面板到絕對位置（13，361），即滑塊的初始位置。

如果本篇文章對你有幫助，請幫我點擊左下角的投票或點贊。謝謝！