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博客

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

相关推荐
招风的黑耳8 小时前
我用Axure画了一个富文本编辑器,还带交互
axure·富文本编辑器
招风的黑耳8 小时前
【Axure元件分享】年份范围选择器
axure·年份选择器
结构化知识课堂2 天前
Axure项目实战:智慧运输平台后台管理端-母版、登录(文本框高级交互)
axure·母版设计·注册登录·垂直菜单·文本框高级交互
招风的黑耳2 天前
ElementUI元件库——提升Axure原型设计效率与质量
前端·elementui·axure
梓贤Vigo6 天前
【Axure高保真原型】纵向图片轮播
交互·产品经理·axure·原型
招风的黑耳6 天前
Axure设计之中继器表格——拖动列调整位置教程(中继器)
axure·动态表格·拖拽列
结构化知识课堂6 天前
Axure项目实战:智慧城市APP(四)医疗信息(动态面板、选中交互应用)
人工智能·智慧城市·交互·产品经理·axure·动态面板
结构化知识课堂6 天前
Axure项目实战:智慧城市APP(七)我的、消息(显示与隐藏交互)
智慧城市·axure·动态面板·显示与隐藏
结构化知识课堂7 天前
Axure项目实战:智慧城市APP(完整交互汇总版)
智慧城市·交互·axure·动态面板·选中效果