产品经理@产品Axure知识汇总

Axure RP9 如何借助动态面板实现密码输入框字符显示/隐藏

2020-05-26  本文已影响0人  艾蔲思

不论是移动端还是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 ,许多还在摸索中,以上如有不足之处,欢迎评论区批评指正,谢谢。

参考资料:

1、密码输入框字符显示与隐藏切换 – Axure原创教程网

2、Axure 9.0基础教程:史上最详细的元件说明,建议你认真看完(一) - 简书

上一篇下一篇

猜你喜欢

热点阅读