1. 主页 > 行业资讯 > 设计文章 >

Axure微信高保真原型——键盘输入

编者按:现在日常生活中手机随处可见,用手机进行文字交流需要键盘输入等操作;本文是作者分享的微信高保真原型图的键盘输入部分。我们一起来看看。

大家好,我发布微信原型图,做一系列文章。文章第一部分是微信登录-验证码登录系列。

验证码登录系列分为三篇,分别是获取验证码的60秒动态显示、键盘模拟输入、验证码验证。本文将为大家讲解模拟键盘输入。

一、示范

Axure 微信高保真原型图--键盘输入

https://7ebpff.axshare.com

第二,解释交互原理

1.输入解释:

示例:当您单击q时,文本框获取按钮q的值并将其显示在文本框中。继续点击W,文本框会得到W,在文本框中显示原字符Q后,显示内容会变成qw。

综上所述,点击字母按钮,在文本框中获得对应的字母,新获得的字母在文本框中原始字符后一起显示。

简单表示:点击按钮,文本框文本=文本框原始文本+被点击按钮文本

2.组件对象的解释

这:获取当前组件对象,它是指事件被添加到的组件。

目标:获取目标组件对象,该对象是指添加了操作的组件。

点击按钮,文本框得到按钮字母并改变文本框的文字;单击的按钮是当前组件对象,即这个。单击按钮更改文本框的文本,文本框是目标组件,即目标。

3.空解释

操作原理和输入一样。简单表达:点击空,文本框文本=文本框原文+空。

4.删除解释

例:有& # 8221;qwert & # 8221五个字母,点击删除,内容变成“qwer & # 8221。删除后,文本框只显示前四个字母,显示全长-1个字母。

综上所述,删除时最好只显示第一个总长度-1个字母,使用intercept函数substr(start,length)。

Substr(start,length):从当前文本对象的指定起始位置截取一定长度的字符串。参数:start是裁剪的起始位置,从0开始计算,length是裁剪长度。此参数可以省略,这意味着从文本对象的开始位置到结束位置进行剪裁。

三、互动操作讲解

1.输入操作

A.设计原型风格

在页面添加文本框,取名为“输入文本框”;设计三个键盘,分别为大写键盘、小写键盘、数字键盘。

Axure 微信高保真原型图--键盘输入

Axure 微信高保真原型图--键盘输入

Axure 微信高保真原型图--键盘输入

B.设置交互

将三种键盘样式转换成动态面板的三种状态,分别命名为“大写”、“小写”和“数字”。

当您点击“大写”和“小写”键盘左下角的“123”按钮时,动态面板状态切换为“数字”。

Axure 微信高保真原型图--键盘输入

Axure 微信高保真原型图--键盘输入

当点击大写按钮时,动态面板状态切换到“大写”。

Axure 微信高保真原型图--键盘输入

Axure 微信高保真原型图--键盘输入

点击小写和“ABC”按钮,动态面板状态将切换为“小写”。

Axure 微信高保真原型图--键盘输入

Axure 微信高保真原型图--键盘输入

Axure 微信高保真原型图--键盘输入�Ͳ���վ����Ͳ���վ���

C.设置输入交互

选择字母按钮,并在创建新的交互式单击时将文本框文本设置为文本框本身(目标文本)+按钮文本

Axure 微信高保真原型图--键盘输入

Axure 微信高保真原型图--键盘输入

Axure 微信高保真原型图--键盘输入

在交互上添加一个新的动作,把焦点放到输入文本框上(这一步是在输入文本框中显示光标)。

Axure 微信高保真原型图--键盘输入

设置所有其他字母交互

选择互动过程的第一个按钮,ctrl+c,选择下一个按钮,只需CTRL+v..

继续复制大写键盘的所有字母和数字键盘的数字,键盘输入设置完毕。

2.空操作

选择空框,将输入框中的文本设置为原文本+空框(轻按空框键一次)。

Axure 微信高保真原型图--键盘输入

Axure 微信高保真原型图--键盘输入

向交互中添加一个新动作,并将焦点放在输入文本框上。

3.删除操作

选择删除键并创建新的交互。点击时会将输入文本框文本的文本截取设置为从第一个文本开始,长度为整个length -1文本。

Axure 微信高保真原型图--键盘输入

向交互中添加一个新动作,并将焦点放在输入文本框上。

这里的函数比较复杂,所以举个例子来说明:

假设文本框中有四个“1234”的文本。当您单击删除时,文本框中的文本变为“123”。在拦截功能上,每次删除,除了最后一条以外的所有文本都会被拦截。

截取函数截取文本,所以第一步是获取目标组件的文本,即target.text

Substr(start,length)需要从第一个文本开始截取函数,所以start为0,截取的文本总长度为-1个文本,所以length为目标组件text -1的长度,即为Target.text.length-1,所以截取函数表示为substr(0,Target.text.length-1),组合时为[[target.text.length-1]。

结论:完成以上操作后,完成了验证码登录的键盘输入高保真原型图。

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/520.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息