AXURE_如何制作一个高保真可输入键盘？

感谢导语：如何通过 AXURE 去制作一个高保真可输入键盘？感谢通过实操为我们分享了他得经验。

一、演示

ht3rx6.axshare

二、步骤1. 创建动态面板

在画布中拖入一个动态面板，设置三个动态面板状态：小写、大写、数字。

2. 设计原型样式

在相应得状态下，利用矩形绘制以下三个键盘。

小写键盘

大写键盘

数字键盘

3. 添加键盘切换交互小写键盘：大写按钮切换到大写键盘；123按钮切换到数字键盘。大写键盘：小写按钮切换到小写键盘；123按钮切换到数字键盘。数字键盘：ABC按钮切换到小写键盘。

交互示例：选中按钮，添加交互，单击时设置面板状态为“大写”。

4. 添加输入交互

在页面中拖入一个单行文本框。

选中一个字母按钮，新建交互单击时，设置文本框文本为文本框本身文本(Target.text)+按钮文本(this.text)

将其他字母按钮得交互设置完成。选中第壹个字母得交互样式，Ctrl+C复制，然后选中其他按钮Ctrl+V粘贴。

5. 添加删除交互

选中删除按钮，添加交互，单击时设置输入框文本为[[Target.text.substr(0,Target.text.length-1)]]。

substr(start,length)是截取函数。

6. 添加空格交互

选中删除按钮，添加交互，单击时设置输入框文本为[[Target.text]] 。需要注意[[Target.text]]后加一个空格。

7. 设置焦点

在每一个交互上添加新动作，获取焦点到输入文本框，这样可以使输入框内一直显示光标。

感谢由 等lexi 来自互联网发布于人人都是产品经理，未经许可，禁止感谢。

题图来自Unsplash，基于CC0协议。