我們?cè)赑C端產(chǎn)品的時(shí)候，經(jīng)常會(huì)使用到鍵盤操作，讓某個(gè)對(duì)象產(chǎn)生位置的變化。比如在玩游戲時(shí)，通過鍵盤控制游戲人物的走動(dòng)，上下左右進(jìn)行移動(dòng)。

?

那么我們今天就來看看，在用axure制作這類的產(chǎn)品原型時(shí)，制作的思路時(shí)如何的。先來看看案例的效果是如何的。

?

大家可以點(diǎn)擊預(yù)覽，自己操作一下，真實(shí)感受一下這個(gè)案例效果是如何的。https://9cj4eh.axshare.com

?

這個(gè)效果具體是怎樣的呢：

使用一下按鍵，在不同方向產(chǎn)生位置的移動(dòng)，W向上、A向左、S向下、D向右、Z回到起點(diǎn)

?

1、我們先看看需要什么元素。目前我們能看到的就是一個(gè)移動(dòng)的對(duì)象

?

2、輔助用元素。因?yàn)槲覀兊膭?dòng)作是鍵盤類的動(dòng)作，并且有多個(gè)按鍵，所以必須要有一個(gè)部件來記錄按下的按鍵是哪個(gè)，所以這里用了一個(gè)文本框來記錄按鍵。

?

這就是我們準(zhǔn)備的所有元素，看起來是比較簡(jiǎn)單的。

?

3、開始交互設(shè)置。我們?cè)诖蜷_這個(gè)頁面的時(shí)候，需要將焦點(diǎn)聚焦到“鍵盤焦點(diǎn)”的這個(gè)文本框中。

4、在聚焦到文本框之后，就可以進(jìn)行按鍵的設(shè)置。在按鍵結(jié)束之后，我們要判斷按鍵選擇的是哪一個(gè)鍵，從而進(jìn)行判斷，設(shè)置移動(dòng)對(duì)象往哪個(gè)方向移動(dòng)。

?

在按鍵結(jié)束時(shí)，如果按鍵是“w”，則將文本框的文字輸入為“w”，并且讓移動(dòng)對(duì)象往上移動(dòng)一定的距離。這里我們的設(shè)定是每按一次，往上移動(dòng)20（輸入的數(shù)值為-20）。之后要將這個(gè)文本框清空，方便下次的輸入。

?

交互設(shè)置時(shí)時(shí)這樣的：

?

另外的方向鍵輸入的情況與“w”是一樣的思路，大家可以自己試試，設(shè)置完之后記得預(yù)覽看看是否能夠移動(dòng)。

?

5、“z”鍵的設(shè)置。與方向鍵的設(shè)置一樣，同樣是在按鍵松開時(shí)，條件為文本框的文字為“z”時(shí)，將移動(dòng)對(duì)象移動(dòng)到原來的位置。這里原來的位置設(shè)定為（300，300），即將移動(dòng)對(duì)象移動(dòng)到（300，300）的位置。

?

?

這樣設(shè)置就可以達(dá)到我們想要的效果。

這個(gè)做法除了我們前邊說的，用來制作游戲類的產(chǎn)品之外，還可以做類似需要操作鍵盤控制的產(chǎn)品原型，比如計(jì)算器、打字練習(xí)等多種原型。大家如果有其他設(shè)置的方法，歡迎大家一起來交流。