Axure疑难杂症:完美解决文本框读取、赋值、计数(玩转文本框)

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!

课程主题:玩转文本框

主要内容:文本框读取、赋值、验证、计数

应用场景:验证码、文本限制、文本取值、文本赋值等场景

案例展示:

案例视频:

Axure疑难杂症:玩转文本框


正文内容:

文本框作为Axure重要的元件,同样是各类应用制作的基本要素,掌握和理解文本框内涵是实现产品逻辑和演示的重要表现手段。

文本框能发挥那些作用:

1、承载文本数据;承担着界面文本输入和展示的窗口;

2、页面文本变化的主要承担者;

3、产生信息的重要来源者;

4、验证数据的重要实施者;

文本框能做出哪些应用:

各种类型的输入框(例如账号输入框、密码输入框)、输出框(结果)、验证码、搜索框、计数框、动态框等;总结一句话:文本框兼具静态和动态两种属性,既可以作为输入者,也可以作为输入者、作验证者也是他的拿手好戏。

本节课玩转文本框目录如下:

  1. ++文本框实现验证码并调起登录交互解决方案++
  2. ++文本框实现输入框字符实时监测与提醒解决方案++
  3. ++文本框实现输入结果比对验证解决方案++
  4. ++文本框实现读取并对其他文本框赋值解决方案++

通过本节课的学习,相信大家在Axure产品设计上会产生非常大的进步,在产品交互表现上会非常出色,下面进入具体交互设计内容:

1、文本框实现验证码并调起登录交互解决方案

1.1建立基本框架,按下图分别创建验证码输入框、生成器、错误提示等信息;

图1

1.2制作验证码生成器

图2

图3

这里涉及到OnLoadVariable.substr(start,length)、OnLoadVariable.length、Math.random() 三个函数; OnLoadVariable.substr(start,length)表示:从当前文本对象中指定起始位置开始截取一定长度的字符串;OnLoadVariable.length表示当前对象的数目、Math.random()表示随机数;OnLoadVariable.length*Math.random()表示从个位置开始取数;

\[OnLoadVariable.substr(OnLoadVariable.length\*Math.random(),1)\]

表达式的含义是:获得一个字符串文本,从某个随机数定义的位置开始取数,取length个数目的数据出来;最后的length为1,所以从某个随机数的位置取1个;

因为我们要生成四位的随机验证码,所以这套表达式要重复四个;

1.3验证码输入框交互

图4

这里我们用到失去焦点时,验证输入的内容是否和生成器一样,不一样显示错误提示,一样的话启用登录按钮。

图5

2、文本框实现输入框字符实时监测与提醒解决方案

通过登录页的注册按钮进入注册页,模拟要用户注册验证过程来演示对输入框的实时监控与提醒;

图6

注册页,搭建基本布局如下图

图7

图8

图9

图10

基本设计逻辑:当文本改变时,我们判断元件文字的长度是否等于6,因为我们设置的元件长度是6,(这个数字随意设置,如果设置成12,那么判定条件就是12)如果大于6那么就提示错误信息,同时获得焦点,引导用户再次输入。

图11

图12

密码、再次输入框同上,以上完成输入框字符实时监测与提醒解决方案。

3、文本框实现输入结果比对验证解决方案

再次输入要验证两个内容:一个是上边的字符长度已验证,另一个就是输入的结果要和正确密码进行比对。比对的基本逻辑是,当失去焦点时,再次输入框的内容是否和密码一致,如下

图13

图14

图15

再次输入内容与密码一致,启用注册按钮,不一致出现错误提示。以上完成结果验证这个流程。

4、文本框实现读取并对其他文本框赋值解决方案

接上文,用户已经输入了正确信息,点击注册后,我们需要弹出一个界面,用于记录用户已经注册的信息,方便用户进行复制或者其他操作,这时就需要我们对弹出的界面进行赋值,那么我们赋值的逻辑:已经注册的账号和密码数据同步到这个页面。

先制作弹窗的基本结构和一个登录按钮,当用户点关闭的时候,显示登录按钮,用户点登录就进入了主页面。

图16

图17

图18

图19

图20

最后调整一下布局,把动态面板盖住注册内容,登录按钮盖住注册按钮,因为这两个内容都是载入时隐藏,不影响。

本课小结:文本框是用途非常广泛,非常方便,但是我们要全面掌握它的特性,会使很多想法得以实现,否则只能做其他蠢事,搞得页面非常复杂而且臃肿,例如实现数据赋值,有的人直接贴图,这操作......真是无语啊,这不是一个优秀产品经理应该做的事,为了不断进步的你,加油吧!

近期正在制作 https://blog.csdn.net/benleiqiang/category_12931191.htmlAxure疑难杂症专题,如果大家有待解决的问题或者难点,都可以私信我,我会放到专栏里供大家学习和分享。


相关课程直通车:

Axure随机验证码高级交互-CSDN博客

Axure疑难杂症:完美解决中继器筛选问题(时间条件筛选、任性筛选)-CSDN博客

如有其他相关问题,欢迎私信沟通,关注 结构化知识课堂-CSDN博客

明天的产品大咖就是你,创作不易,麻烦关注一下,点赞+收藏,感谢大家!

相关推荐
招风的黑耳1 天前
高保真动态项目管理图表集
流程图·axure·甘特图·关系图谱·项目管理图表
招风的黑耳2 天前
移动端动态滑动拨盘选择器【Axure元件库】
axure·拨盘选择器·滑动选择器
梓贤Vigo2 天前
【Axure视频教程】不透明度函数
交互·产品经理·axure·原型·教程
PMEcho2 天前
墨刀上线高级交互功能,能否超越Axure?
产品经理·axure·交互设计·墨刀·原型设计·高级交互
全宇宙最最帅气的哆啦A梦小怪兽7 天前
【Axure绘制原型】图片切割、交互动效、热区、动态面板、元件显示隐藏、表单元件、表格、内联框架
产品经理·axure
招风的黑耳8 天前
可拖动的关系图谱原型案例
知识图谱·axure·中继器·动态交互·关系图谱
七七知享8 天前
Python深度学习实现验证码识别全攻略
开发语言·python·深度学习·程序人生·程序员·开发·验证码
龙俊亨8 天前
Jmeter创建使用变量——能够递增递减的计数器
jmeter·性能测试·计数器·counter
梓贤Vigo8 天前
【Axure视频教程】标准金额格式转换
交互·产品经理·axure·原型
孤蓬&听雨8 天前
Axure高保真AI算法训练平台
人工智能·算法·ai·产品经理·axure·原型设计