Axure 9 实例 | 手机键盘

2022年10月24日21:06:40原型设计评论1,853 views字数 1379阅读模式

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

Axure 9 实例 | 手机键盘

Axure 9 实例 | 手机键盘

一、数字键盘

1、准备元件

1)矩形元件:12个(可先准备一个,做完交互后复制);

2)热区元件:12个(可先准备一个,做完交互后复制);

3)退格图标:1个;

二、添加用例

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

Axure 9 实例 | 手机键盘

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

Axure 9 实例 | 手机键盘

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

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

Axure 9 实例 | 手机键盘

2)单击热区时,改变焦点元件的文字为:[[焦点元件文字]][[矩形1文字]];

Axure 9 实例 | 手机键盘

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)。该函数的作用是截取字符串;

Axure 9 实例 | 手机键盘

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

Axure 9 实例 | 手机键盘

二、字母键盘

1、准备元件

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

2)复制数字键盘中的退格操作元件(矩形+热区+退格图标);

3)添加字母大小写切换图标(矩形+热区+切换图标+圆点),其中圆点表示大写;

4)复制矩形键盘“abc”,并将内容和名称设置为“123”;

5)民生银行图标;

6)键盘图标,用来隐藏键盘;

2、添加用例

1)26个英文字母的用例同矩形1,不用处理;

2)退格操作的用例同数字键盘,不用处理;

3)矩形键盘“123”的用例同“abc”,不用处理;

4)键盘图标的用例,点击时隐藏键盘面板即可;

Axure 9 实例 | 手机键盘

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

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

Axure 9 实例 | 手机键盘

Axure 9 实例 | 手机键盘

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

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

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/29779.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定