Axure 9 实例 | 手机键盘

使用app时，经常需要有需要输入内容的地方，诸如输入用户名(手机号)、密码、验证码，以及完善信息等，这个时候app会调用系统中输入法。也有些时候因为安全性等原因，部分app中会使用自带的输入法，来保证输入的内容的安全性，这个时候往往app开发者会在特殊的地方（比如输入密码）来调用自己的输入法。本文使用Axure 9 模拟民生银行的输入法做了一个，具体样子就长成下面这个样子。该案例中，键盘可以向任意一个文本输入框中输入内容。

一、数字键盘

1、准备元件

1）矩形元件：12个（可先准备一个，做完交互后复制）；

2）热区元件：12个（可先准备一个，做完交互后复制）；

3）退格图标：1个；

二、添加用例

1、设置矩形元件数值为1(以1为例)，并将该矩形命名为1，同时设置矩形1交互样式(选中)填充颜色(自行选择一个颜色即可，为的是点击时有按下的效果)；

2、给矩形1添加鼠标按下时和鼠标松开时用例。在鼠标按下时设置矩形1为选中状态；在鼠标松开时设置矩形1为取消选中；

3、给热区添加用例。使用热区的目的是因为热区是一个没有文字(不能获取焦点)的透明元件。

1）将热区覆盖在矩形1上方，点击鼠标按下时和鼠标松开时触发矩形1对应的用例；

2）单击热区时，改变焦点元件的文字为：[[焦点元件文字]][[矩形1文字]]；

4、至此数字键盘中“1”这个按键的用例已经完成了，接下就是复制9个矩形1和热区，分别将矩形1的文字和名称改为0、2、3、4、5、6、7、8、9，并按照数字键盘布局放置；

5、再复制2个矩形1，一个用来切换键盘内容，设置内容为abc；一个用来作为删除操作，与退格图标合并一起；

6、将以上元件选中转化为动态面板，并将面板状态名称为“123”，同时添加另外一个面板状态为“abc”；

7、设置退格用例。在退格矩形对应热区上设置单击时，设置焦点元件内容为：焦点元件现有的内容去掉最后一位，此处需要使用字符串函数substr(start,length)。该函数的作用是截取字符串；

8、设置切换键盘矩形“abc”。点击“abc”按键时，切换面板到“abc”；

二、字母键盘

1、准备元件

1）复制矩形1。复制数字键盘中的矩形1和对应的热区，共26个，分别设置内容和名称为英文26个字母；

2）复制数字键盘中的退格操作元件（矩形+热区+退格图标）；

3）添加字母大小写切换图标（矩形+热区+切换图标+圆点），其中圆点表示大写；

4）复制矩形键盘“abc”，并将内容和名称设置为“123”；

5）民生银行图标；

6）键盘图标，用来隐藏键盘；

2、添加用例

1）26个英文字母的用例同矩形1，不用处理；

2）退格操作的用例同数字键盘，不用处理；

3）矩形键盘“123”的用例同“abc”，不用处理；

4）键盘图标的用例，点击时隐藏键盘面板即可；

5）字母大小写切换用例。首先将字母大小写组合元件中的圆点隐藏，通过圆点的可见性作为条件，判断当前字母的大小写，本案例中默认字母是小写，圆点默认隐藏，显示时代表字母为大写状态；

①给热区设置单击用例，如果圆点隐藏，则设置26个按键内容为a~z；如果圆点显示，则设置26个按键内容为A~Z；

此处用到大小写字母切换的函数toLowerCase()和toUpperCase()。

到此本案例的交互已经全部实现，在做原型时，在任意文本获取焦点时候，显示该键盘，即可对文本进行输入或删除操作。