很早之前寫過模擬手機(jī)撥號(hào)，今天我們?cè)谀M撥號(hào)鍵盤的原型基礎(chǔ)上做一個(gè)小功能，設(shè)置按下電腦鍵盤上的按鈕，觸發(fā)撥號(hào)的交互，也可以用該設(shè)置方法做快捷鍵。

效果圖

可以看到，我在按下鍵盤上的數(shù)字按鈕的時(shí)候，對(duì)應(yīng)原型中會(huì)觸發(fā)交互，因?yàn)槲译娔X沒有數(shù)字鍵盤，那我們就用頂部的區(qū)域設(shè)置為數(shù)字，把字母q設(shè)置為刪除已輸入的數(shù)字。

制作原理

Axure中有個(gè)交互叫，按鍵按下時(shí)的交互，然后我們?yōu)榘存I按下時(shí)設(shè)置if條件，if按下的按鈕為XX，就出發(fā)XX交互。因?yàn)槲覀冄赜玫陌咐龝r(shí)模擬撥號(hào)鍵盤的原型，因此我們?cè)诎聪耎X按鍵的時(shí)候，只要觸發(fā)鼠標(biāo)點(diǎn)擊對(duì)應(yīng)數(shù)字按鈕的交互就可以了。沒有模擬撥號(hào)鍵盤的同學(xué)們，可以做成if按下的鍵為XX時(shí)，觸發(fā)增刪改查等種種交互。

操作步驟

我們直接選中頁(yè)面設(shè)置交互，按鍵按下時(shí)，if按下的是1，那么觸發(fā)btn1鼠標(biāo)按下時(shí)的交互，當(dāng)按鍵松開時(shí)，我們觸發(fā)btn1鼠標(biāo)松開時(shí)的交互即可。如圖所示：

那么這里提醒下大家，我這里是沿用了之前模擬撥號(hào)鍵盤的原型去做的（可以在我公眾號(hào)或人人都是產(chǎn)品經(jīng)理平臺(tái)中搜索到模擬撥號(hào)鍵盤的文章，里面有原型下載鏈接），因此我們?cè)谠摻换ピO(shè)置的時(shí)候增加的選中，取消選中等交互，簡(jiǎn)單講一下邏輯。模擬撥號(hào)鍵盤文章路徑

在模擬撥號(hào)鍵盤的案例中，我們?cè)O(shè)置了按下1的時(shí)候，讓按鈕選中，呈現(xiàn)出灰色的效果，松開1的時(shí)候，取消選中，灰色消失，顏色回歸，這樣便形成了真實(shí)點(diǎn)擊的效果。

同樣，在按下1的時(shí)候，數(shù)字顯示位置用全局變量帶入數(shù)字1，按下2的時(shí)候，追加2。按下刪除的時(shí)候，判斷當(dāng)前字符串長(zhǎng)度，并取消掉最后一位。這種情況下，我們只需要為原有交互設(shè)置快捷鍵，按下鍵盤按鍵的時(shí)候觸發(fā)之前設(shè)置好的交互即可。

結(jié)語(yǔ)

該教程其實(shí)非常簡(jiǎn)單，之所以出是一位一位朋友遇到了設(shè)置快捷鍵的情況，但是搜索不到教程，既然搜索不到，那小編就簡(jiǎn)單出一篇示范一下吧～對(duì)了，本期原型只能用Axure RP 9打開哦，請(qǐng)大家注意哦～

下載鏈接：https://pan.baidu.com/s/1Ov7bo_kCLU9DSJmC0MMWOQ

密碼：a0gj

溫馨提示，該文件需要使用Axure 9打開哦。

#專欄作家#

王得宇A(yù)IPM；公眾號(hào)：他們已經(jīng)在路上了（ID：PM-Silence），人人都是產(chǎn)品經(jīng)理專欄作家

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

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