亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!
课程主题:玩转文本框
主要内容:文本框读取、赋值、验证、计数
应用场景:验证码、文本限制、文本取值、文本赋值等场景
案例展示:

案例视频:
Axure疑难杂症:玩转文本框
正文内容:
文本框作为Axure重要的元件,同样是各类应用制作的基本要素,掌握和理解文本框内涵是实现产品逻辑和演示的重要表现手段。
文本框能发挥那些作用:
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博客
如有其他相关问题,欢迎私信沟通,关注 结构化知识课堂-CSDN博客
明天的产品大咖就是你,创作不易,麻烦关注一下,点赞+收藏,感谢大家!