Question

Axure怎么制作一个密码输入框？

Answer 1

什么是密码输入框？密码输入框，其实就是注册或登录时输入密码的文本框，也可以点击按钮重复查看所输入的密码。那么，在Axure想要制作一个密码输入框，应该怎么做呢？如果你也想制作一个，就可以跟着下面的教程学习起来！对于不同阶段的Axure学习需求伙伴，为大家提供了多套Axure自学视频课，包括原型图基础入门、APP购物车交互教程、支付宝APP交互教程、APP列表页切换教程、移动登录交互教程等可以全方位的为小伙伴们提供基础的功能学习以及上手实操，感兴趣的就去学习体验~

Axure制作一个密码输入框的步骤：

（1）左侧放置矩形，文本为“密码框”；右侧需要使用动态面板（宽204，高30）；双击动态面板后新增两个面板状态并分别命名：密码隐和密码显。

（2）双击“密码隐”动态面板，里面拖进输入框（长204，宽30）、矩形框（X为3，Y为2，宽度200，高度26）、图标（X为178，Y为12，宽19，高12）3个元件

（3）输入框：类型是密码；提示文字：密码；“隐藏提示触发”选择输入的情况下，键入框中时，“密码”提示文字是不会消失的，如果设置为“获取焦点”，则光标键入文本框中时，“密码”二字会消失（建议“获取焦点”，效果可回头看上面的GIF）；

（4）对于输入框，需要增加交互事件，实现在“密码隐”页面输入的信息也传递到“密码显”页面，否则点击“眼睛”按钮切换显示状态时，看不到自己之前输入的信息了。实现方式如下图：

（5）因为输入框隐藏了边框，所以在获取焦点和失去焦点这两个事件里改变矩形框的选中和非选中的状态，在矩形框上展示键入和非键入的输入状态。如下图：

（6）矩形框：属性里的交互样式也需要调整一下，否则在上面的选中状态发生变化后，矩形框也不会有任何变化；需要将线段颜色改为#1EC695，线型为solid

（7）新增“眼睛”图标：默认元件库里的Icons，搜索eyeslash，包括交互事件的实现方式如下图：

（8）“密码显”页面，同样有输入框、矩形框、图标，不同之处就在于输入框类型不是密码了，而是text，因为此时输入是需要直接显示出来的，而不是像密码一样隐藏起来；另外图标不能使用eyeslash，而是使用eye，其他都是一样的。

以上就是羽兔为各位小伙伴提供的“Axure怎么制作一个密码输入框？”的相关内容讲解了，希望能够帮助到你！学习Axure原型设计，教程不怕多，内容不怕详，更多Axure文章等你阅读~真正将Axure掌握熟练的话，那么去应聘产品相关的工作岗位也是一个很大的优势的！当然，如果你是零散学习掌握到的Axure知识，可能在后期的工作上就会有一定的影响哦！所以建议还是专业学习Axure比较靠谱！