从事产品行业有一段时间了，打算从产品100的小透明开始，总结工作和学习中的知识和经验。今天想分享一下如何用Axure制作一个可以隐藏密码文本的输入框。制作效果如下：思路：1、首先需要一个输入框，但是Axure文本框不能隐藏密码。因此，我们需要一个动态面板。面板状态1是显示密码字符的文本框，面板2状态是隐藏密码字符的密码框。2.需要两张图片来显示/隐藏密码字符。两张图片通过点击切换。3、实现动态面板与两张图片的交互。既然你有了想法，让我们开始吧！第一步：需要一个矩形来放置动态面板和图像按钮。如图添加相应组件：Step2：动态面板添加状态：状态1：隐藏密码字符首先添加一个文本框，添加属性如下：状态2：显示密码字符然后添加一个文本框组件，添加属性如下：同时我们需要取消两个文本框的填充颜色，否则会和矩形容器的颜色不一样。第三步：制作图片点击切换效果1、点击切换图片的选中状态；2.当图片选中状态发生变化时，切换到另一张图片：第四步：添加交互当图片按钮选中状态发生变化时，切换动态面板状态：另外，还需要同步输入动态面板两种状态下的字符：首先为隐藏文本框添加：同理，为显示文本框添加：到这里，我们就完成了这个原型的制作！早期密码框的设计习惯是默认隐藏密码字符。但相信你和我有同样的感受：大多数情况下，没有人站在后面偷看你的密码，隐藏字符会给自己带来不便。所以这里我默认显示密码字符。必要的时候，点击图片按钮可以切换到隐藏人物按钮！
