Axure RP9 如何借助动态面板实现密码输入框字符显示/隐藏
不论是移动端还是PC端的登录,目前大多都是可以切换显示与隐藏密码框中所输入的内容,以保证用户在登录报错的时候,可以确认自己所输入面的正确性,修正后再次进行登录。
Axure RP升级到9之后,元件及交互的使用与之前的RP 8相比,都有了一些不同,借鉴了小楼老师Axure RP8.0教程后,基于Axure RP 9来简单聊一下如何用借助态面板实现密码输入框字符显示/隐藏切换。
第一步,也先来捋一下,我们用到的元件(图1)
图1-整体元件组成示意图1、隐藏密码icon(非SVG图片,而是导入的外部元件)
2、显示密码icon(非SVG图片,而是导入的外部元件)
3、动态面板,使用两个状态,两个状态中分别放入不同类型的文本框,在同一个区域,切换不同的元件类型
第二步,不同元件的样式及交互设置
1、隐藏密码icon(图2)
想要实现的需求是,点击“隐藏密码icon”后,出现的是“显示密码icon”,因此选择为该元件添加【单击时】的【显示/隐藏】事件,单击时隐藏当前,显示另一个
图2-隐藏密码icon交互设置2、显示密码icon(图3)
逻辑同1,只是要反向思考,因为我们这次想实现的是:点击“显示密码icon”后,出现的是“隐藏密码icon”,同样为该元件添加【单击时】的【显示/隐藏】事件
图3-显示密码icon交互设置3、动态面板-密码框-元件样式设置
3.1 State 1-隐藏密码文本框(图4)
图4-动态面板-State1 - 密码类型文本框3.2 State 2-显示密码文本框(图5)
图5-动态面板-State2 - 文本类型文本框3.3 两个State下的文本框边框都需要进行隐藏(图6)
图6-文本框边框隐藏4、动态面板-密码框-元件交互设置
我们想要实现的一直都是:初始输入时密码为隐藏状态,点击“隐藏密码icon”后,出现“显示密码icon”,且密码框内的密码变为可见状态。就需要为动态面板的文本框添加【文本改变时】的【设置文本】事件,使其中一个文本框的文本改变时,另一个文本框的文本也能随之同步。
4.1 State 1-隐藏密码文本框(图7)
图7-State 1-隐藏密码文本框-交互设置4.1 State 1-显示密码文本框(图8)
图7-State 2 -显示密码文本框-交互设置第三步,确认最终交互设置
动态面板-文本框的交互改变,也是基于“显示密码icon”与“隐藏密码icon”的【单击时】事件,因此将动态面板的【文本改变时】的【设置文本】事件,添加到“显示密码icon”与“隐藏密码icon”的【单击时】事件内。
最终交互设置如下(图8):
图8-最终交互通过以上步骤,我们就成功的在Axure RP9中借助动态面板实现密码输入框字符显示/隐藏切换交互。
最近刚升级使用Axure RP9 ,许多还在摸索中,以上如有不足之处,欢迎评论区批评指正,谢谢。
参考资料: