如何用AXURE做出密码可见/隐藏的交互效果?

产品设计 2019-01-11 阅读原文

如何用AXURE做出密码可见/隐藏的交互效果?本文将用实例为大家作出解答。

很多时候,我们发现一些网站的登录页面,密码输入框栏目右侧,有一只可点击的眼睛开关,或者是滑动开关,点击会密码明文和隐藏相互切换,如何在AXURE中实现?

第一步

1. 从AXURE软件的工具栏拖出一个输入框,并生成动态面板;

2. 将动态面板命名为密码输入框;

3. 在动态面板中复制一个输入框,两个输入框分别命名为可见和隐藏,如下图;

4. 可见输入框格式设置为数字,隐藏输入框格式设置为密码;

第二步

进入可见-输入框;

设置文本改变时,把输入值赋值给隐藏输入框;

文本改变时,设置条件如下:

同理,隐藏输入框文本改变时,把值赋值给可见输入框元件:

赋值操作:

第三步

设置眼睛动态面板;

分别对应睁眼和闭眼图标。

http://image.woshipm.com/wp-files/2019/01/N4hN4wXnDtvw0iLHRZIF.png

并设置条件,鼠标点击眼睛按钮时,切换到下一个面板,如图:

并在眼睛面板状态改变时,分别设置输入框对应的面板;

  • 当眼睛面板为睁眼时,设置输入框面板为可见;
  • 当眼睛面板为闭眼时,设置输入框面板为隐藏;

好了,收工,当我们输入密码时,点击右侧的眼睛图标,明文和密码相互切换哈~

本文由 @胖子 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

人人都是产品经理

责编内容by:人人都是产品经理阅读原文】。感谢您的支持!

您可能感兴趣的

Axure:制作PC端聊天窗口原型 之前写文档没有用axure,最近才接触这个软件,觉得原型制作还是挺有趣的。闲来琢磨了一下里面的功能,边做边学,做了一个PC端的聊天窗口。现在还不够完善,只是将大概功能实现出来。有更好的解决方案也希望大家能不吝赐教。 效果...
Axure 组件重写系列(一) 现有的系统组件不够好用,加之我们能利用axure基本功能来实现更好用的组件,因此,就有了重写系列教程。 写在前面 1. 什么是重写? 为了更好发挥产品原型在系统设计阶段指引、展示等需求,通过种种方式对原生组件进行优...
Axure 原型 | 用Axure画流程图 当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放 吻得太逼真 张敬轩 – Urban Emotions 作者: 陈张良 来源:简书 用Axure绘制流程图好处是可以随时...
Axure教程:百度搜索提示,你也可以学会... 本文主要为大家讲解交互案例,借助中继器实现百度搜索提示的效果,此讲解主要适用于具有一定的Axure使用基础的人员。 当我们使用搜索引擎输入关键词的时候,搜索引擎会根据搜索词,模糊匹配推荐一些相关的内容在搜索框的下方显示,这里也...
Axure中继器运用:选择菜单生成标签 本文是关于Axure中继器运用,如何选择菜单生成标签,一起来看看~ 实现功能: 输入框聚焦下拉菜单; 选择下拉菜单生成相应标签(演示图右边部分); 根据选择的菜单内容长度生成相应长度的标签; 标签...