編輯導(dǎo)語：如何通過 AXURE 去制作一個(gè)高保真可輸入鍵盤？本文作者通過實(shí)操為我們分享了他的經(jīng)驗(yàn)。

一、演示

https://ht3rx6.axshare.com

二、步驟

1. 創(chuàng)建動(dòng)態(tài)面板

在畫布中拖入一個(gè)動(dòng)態(tài)面板，設(shè)置三個(gè)動(dòng)態(tài)面板狀態(tài)：小寫、大寫、數(shù)字。

2. 設(shè)計(jì)原型樣式

在相應(yīng)的狀態(tài)下，利用矩形繪制以下三個(gè)鍵盤。

小寫鍵盤

大寫鍵盤

數(shù)字鍵盤

3. 添加鍵盤切換交互

• 小寫鍵盤：點(diǎn)擊大寫按鈕切換到大寫鍵盤；點(diǎn)擊123按鈕切換到數(shù)字鍵盤。
• 大寫鍵盤：點(diǎn)擊小寫按鈕切換到小寫鍵盤；點(diǎn)擊123按鈕切換到數(shù)字鍵盤。
• 數(shù)字鍵盤：點(diǎn)擊ABC按鈕切換到小寫鍵盤。

交互示例：選中按鈕，添加交互，單擊時(shí)設(shè)置面板狀態(tài)為“大寫”。

4. 添加輸入交互

在頁面中拖入一個(gè)單行文本框。

選中一個(gè)字母按鈕，新建交互單擊時(shí)，設(shè)置文本框文本為文本框本身文本(Target.text)+按鈕文本(this.text)

將其他字母按鈕的交互設(shè)置完成。選中第一個(gè)字母的交互樣式，Ctrl+C復(fù)制，然后選中其他按鈕Ctrl+V粘貼。

5. 添加刪除交互

選中刪除按鈕，添加交互，單擊時(shí)設(shè)置輸入框文本為[[Target.text.substr(0,Target.text.length-1)]]。

substr(start,length)是截取函數(shù)。

6. 添加空格交互

選中刪除按鈕，添加交互，單擊時(shí)設(shè)置輸入框文本為[[Target.text]] 。需要注意[[Target.text]]后加一個(gè)空格。

7. 設(shè)置焦點(diǎn)

在每一個(gè)交互上添加新動(dòng)作，獲取焦點(diǎn)到輸入文本框，這樣可以使輸入框內(nèi)一直顯示光標(biāo)。

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

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