如何用Axure做一个清清爽爽的「密码输入框」?

新闻 开发
今天想分享一下用Axure制作可以隐藏密码文本的输入框。

入行产品已经有好些日子了,打算从产品壹佰的小透明转变一下,将工作学习中的知识心得总结出来,既是一种分享,也是自己在兵荒马乱的工作中的梳理和记录。

今天想分享一下用Axure制作可以隐藏密码文本的输入框,制作效果如下图:

思路:

1.      首先需要一个输入框,但是Axure的文本框并不能实现对密码的隐藏。所以,我们需要一个动态面板,面板的状态1是一个现实密码字符的文本框,面板2的状态是隐藏密码字符的密码框。

2.      需要两张图片,表示显示/隐藏密码字符。这两张图片通过单击进行切换。

3.      实现动态面板与两张图片的交互。

思路有了,那么下面就开始做吧!

***步:

需要一个矩形来放动态面板、图像按钮。添加相应元件如图:

第二步:

为动态面板添加状态:

状态1:隐藏密码字符

首先添加一个文本框,添加属性如下:

状态2:显示密码字符

再添加一个文本框元件,添加属性如下:

同时我们需要取消两个文本框的填充颜色,否则与矩形容器的颜色会不一样。

第三步:制作图片点击切换效果

1.通过单击切换图片的选中状态;

2.图片选中状态改变时,切换为另一张图片:

第四步:添加交互

当图片按钮的选中状态改变时,切换动态面板状态:

另外,还需要将动态面板两个状态中的输入字符同步:

先为hide文本框添加:

同理,为show文本框添加:

到这里,我们就完成这个原型的制作啦!

在早期的时候,密码框的设计习惯默认为隐藏密码字符。但是相信你们跟我一样都有同感:大多数情况下没有人站在背后偷看你的密码,隐藏字符后反而为自己带来不便。所以,这里我默认是显示密码字符,当有需要的时候,点击图片按钮就可以切换到隐藏字符按钮啦!

责任编辑:张燕妮 来源: 产品壹百
相关推荐

2021-09-13 19:28:42

JavaNetty开发

2022-04-06 18:29:58

CSSJS输入框

2019-07-24 15:25:21

华为

2017-06-30 15:18:24

对账系统互联网

2020-09-24 14:06:19

Vue

2017-08-14 12:45:54

Windows 10Windows开机密码

2012-12-17 12:58:18

WebjQuery重构

2015-07-03 11:27:30

程序员自己神器

2023-02-26 01:37:57

goORM代码

2011-07-22 15:32:53

iPhone 按钮 对话框

2018-03-23 10:00:34

PythonTensorFlow神经网络

2016-09-06 19:45:18

javascriptVue前端

2018-01-04 16:04:35

圆环放大动画

2020-09-15 18:46:54

数据平台Lambda架构

2021-02-22 11:03:25

大数据大数据平台架构

2019-03-07 14:45:07

聊天工具富文本输入框前端

2017-03-15 08:43:29

JavaScript模板引擎

2013-01-14 09:51:56

架构设计前端重构工程师

2022-06-01 09:50:21

Skopeo搬运工镜像

2017-03-20 17:59:19

JavaScript模板引擎
点赞
收藏

51CTO技术栈公众号