本文給大家介紹用axure制作手機解鎖，一起來看看~

預覽效果如下：

原型預覽地址：http://amd1mv.axshare.cn/#g=1

工具/原料

• 9個文本框
• 6條垂直線
• 6條平行線
• 9個空白的動態面板

方法/步驟

步驟1

設置9個文本框：

1. 文本框文本為實心句號（圓心），白色文字，36號字體，左右上下居中，3*3排列。
2. 命名為1、2、3、4、5、6、7、8、9圓心。

步驟2

設置6條平行線和6條垂直線：

1. 線段顏色為白色；
2. 禁用時顏色為紅色；
3. 默認隱藏；
4. 擺放在兩個圓心中間，如果在1-2圓心之間的命名為1-2，其余相同。

步驟3

設置9個空白的動態面板：設置9個空白的動態面板，大小和9個圓心文本框一樣，位置在9個文本框上面，標號為1、2、3、4、5、6、7、8、9拖動面板。

步驟4

設置9個文本框（圓心）選中是事件（以1為本框為例）：

1. 如果1和隔壁文本框（2或4）同時被選中,顯示他們之間的線段。
2. 取消選中當前文本框，并禁用該文本框的組合（以防再次被選中）。

步驟5

設置9個動態面板拖動時事件：

1. 離開該區域是選中本區域的圓心文本框；
2. 移入其他圓心文本框時，選中該文本框。

步驟6

設置動態面板拖動結束時事件：

1. 判斷，如果顯示的水平線和垂直線和你設定的一致，則解鎖成功。
2. 如果，顯示的水平線和垂直線和你設定的不一致，則失敗，失敗時禁用所有動態面板和水平垂直線。等待一段時間，重新啟用所有動態面板和水平垂直線。隱藏并取消所有水平垂直線。

該原型設計有一定的難度，大家可以上axure官網搜索下載，祝大家做出自己喜歡的原件。

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議