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

預(yù)覽效果如下：

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

工具/原料

• 9個(gè)文本框
• 6條垂直線
• 6條平行線
• 9個(gè)空白的動態(tài)面板

方法/步驟

步驟1

設(shè)置9個(gè)文本框：

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

步驟2

設(shè)置6條平行線和6條垂直線：

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

步驟3

設(shè)置9個(gè)空白的動態(tài)面板：設(shè)置9個(gè)空白的動態(tài)面板，大小和9個(gè)圓心文本框一樣，位置在9個(gè)文本框上面，標(biāo)號為1、2、3、4、5、6、7、8、9拖動面板。

步驟4

設(shè)置9個(gè)文本框（圓心）選中是事件（以1為本框?yàn)槔?/p>

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

步驟5

設(shè)置9個(gè)動態(tài)面板拖動時(shí)事件：

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

步驟6

設(shè)置動態(tài)面板拖動結(jié)束時(shí)事件：

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

該原型設(shè)計(jì)有一定的難度，大家可以上axure官網(wǎng)搜索下載，祝大家做出自己喜歡的原件。

本文由 @梓賢Vigo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議