本篇文章将会教大家利用Axure RP 9，制作显示密码和隐藏密码的交互效果，enjoy~

前言

本期案例给大家展示的交互内容包括：

  • 60s倒计时
  • 动态面板的简单切换
  • 输入正确的密码的时候登录成功；否则登录失败
  • 显示密码和隐藏密码
  • 本次教程主要讲如何制作显示密码和隐藏密码的交互，其他的效果请大家自信研究，如有需要，请留言

实现效果

点击小眼睛时候，可以切换是否显示密码，点击登录的时候可以判断输入的账号密码是否正确。

60s倒计时/面板切换

密码显示与隐藏

实现逻辑

  • 密码显示和隐藏逻辑：利用两个输入框，一个显示密码，一个隐藏密码，点击小眼睛来回切换来实现密码的显示和隐藏。
  • 判断账号密码是否正确：点击登录，当账号密码都符合我们一开始的预设的时候，登录成功，否则登录失败。

操作步骤

显示和隐藏密码：

  1. 准备一个动态面板，在动态面板内添加两个状态，分别为显示密码状态和隐藏密码状态。
  2. 在显示密码状态和隐藏密码状态内各方一个输入框，隐藏密码内的输入框选中后右键选择输入类型，选择为密码，这样，该输入框在输入内容的时候就会显示为小星号*****。
  3. 此时开始设置交互，选中隐藏密码的输入框，当文字改变时，设置文字到显示密码框，利用简单的局部变量使显示密码框内的内容和隐藏密码框内的相同。
  4. 同样，选中显示密码框设置交互，让隐藏密码框的内容同显示密码框，3和4两个步骤就是用于实现不管在隐藏密码框输入内容还是在显示密码框输入内容都能保证两个输入框内容是同步的。
  5. 在Axure自带的元件库内选择一个小眼睛的icon，给小眼睛设置交互，点击小眼睛，让动态面板在显示密码和不显示密码两种状态内切换，就实现了密码的显示和隐藏。

判断密码正确与否：

在页面内放入一个输入框取名叫账号，放置一个按钮用于登录，点击登录，添加条件，账号输入框和密码输入框均填写正确的时候，让页面跳转；填写错误的时候Toast提示账号或密码错误。

结语

本案例使用Axure RP 9制作，附上原型下载链接：

https://pan.baidu.com/s/1-V37JFY1Cualbikhd0M5fQ

作者：PM Silence，公众号：他们已经在路上了

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

题图来自Unsplash，基于CC0协议

微信登录提示逻辑不正确_Axure RP 9 教程：模拟登录注册相关推荐

  1. python requests模拟登录淘宝购物车下单_Python使用requests库模拟登录淘宝账号（下）...

    在文章的上部分,我们已经做好了模拟登录的前期准备,接下来就是让操作实现的部分了.一起来继续看看具体的操作步骤吧: 3.申请st码 上面我们已经申请到了淘宝(http://taobao.com)的tok ...

  2. axure9的中继器在哪编辑_Axure RP 9 教程—中继器实现筛选和排序

    特别提醒 考虑到网上Axure RP 9 教程极少的情况,今后文章名称统一改为Axure RP 9 教程,一来明确公众号的定位,二来提高搜索的精准度. 本次教程是对Axure中继器的深化学习,之前发布 ...

  3. axure实现复选框全选_Axure RP实例教程：全选与取消全选效果

    原标题:Axure RP实例教程:全选与取消全选效果 Axure RP 9 Mac这款原型设计软件能让设计者快速创建应用软件,或者在web网站的线框图.流程图.原型和规格的设计制作,从低到高的视觉和交 ...

  4. python模拟登录网站_Python爬虫实战之（四）| 模拟登录京东商城

    作者:xiaoyu 微信公众号:Python数据科学 知乎:Python数据分析师 前两篇和大家分享了爬虫中http的一些概念和使用方法,基础篇我们主要介绍了http的请求头,高级篇我们主要介绍了co ...

  5. python requests模拟登录淘宝购物车下单_Python使用requests库模拟登录淘宝账号（上）...

    学好Python这款编程语言,我们能够设计出很多程序要帮助我们完成数据采集等工作,ET代理今天要跟大家介绍如何用Python模拟登录淘宝账号? 看了下网上有很多关于模拟登录淘宝,但是基本都是使用scr ...

  6. python爬虫分析模拟登录时会变的参数_Python爬虫之urllib模拟登录及cookie的那点事...

    在web  sprider crawl过程中,许多网站都需要登录后才能访问,一般如果我们不用爬虫框架的前提下,常规用的就两个库 ,urllib库和requests库,本文将用最基础的urllib库,以 ...

  7. java模拟网易邮箱登录_求赐教：网易邮箱Web端模拟登录看信的加密参数_ntes_nnid、_ntes_nuid...

    网易邮箱的模拟登录和收信都非常简单,在阅读邮件的时候需要两个参数:_ntes_nnid 和 _ntes_nuid _ntes_nnid=21533f97b25070a31c249f59513ad20c ...

  8. richtextbox自动滚动到最下面_Axure RP 9教程：banner轮播最简单的实现方法

    图片轮播是各大网站常常见到的形式,文章带我们学习了如何用Axure实现图片轮播功能,一起来看看~ 最近开始做产品的原型设计,从RP8到RP9的过渡,对于RP9的很对设置还比较陌生,很多东西还在摸索中. ...

  9. 织梦后台登陆提示验证码不正确

    1.密码明明正确的,却无法登陆后台管理 解答: 此外,不管是新人,还是phper,都要注意的是:用户名和密码只能由 [a-z A-Z - _ @ .] 这些字符组成,不能是中文或其它的符号. 2.验证 ...

最新文章

  1. JAVA 判断简单密码算法_十道简单算法题二【Java实现】
  2. iOS SAX解析XML
  3. mysql中模糊查询的四种用法
  4. C# 8.0 默认接口实现
  5. 数位dp模板 最高位最低位_无纸化办公入门指南（数位板篇）
  6. mysql存储过程触发器游标_MySQL存储过程，触发器，游标
  7. 《常用控制电路》学习笔记——数控锁相环调速电路
  8. ieee latex 双栏_用Latex写学术论文： IEEE Latex模板和文档设置(\documentclass)
  9. DOM扩展-HTML5、专有扩展
  10. 实测Linux ext3/4文件系统的规模与瓶颈
  11. python list平均数_数据分析之Python干货笔记
  12. iHRM 人力资源管理系统--第1章 SAAS-HRM系统概述与搭建环境
  13. Windows XP SP3 下 High Definition Audio 声卡安装方法
  14. 如何实现向APP推送消息
  15. Android 如何判断萤石云视频是否可以播放
  16. BZOJ 1189([HNOI2007]紧急疏散evacuate-网络流二分+拆点)
  17. 今日恐慌与贪婪指数为22 恐慌程度有所缓解
  18. 激光雷达移动状态下的数据矫正
  19. 关于google地图的一些使用
  20. 线性表-顺序表的基本操作

热门文章

  1. linux清屏命令clear和reset
  2. 各种排序算法的JAVA实现
  3. Android开发--浅谈ExpandableListActivity
  4. Use After Free Tutorial
  5. Google怎么用linux
  6. android 获取应用内存大小,如何在Android中获取当前内存使用量？
  7. django oracle数据库配置,django连接oracle时setting 配置方法
  8. fft 重叠加法_FFT重叠相加法 参数如何定 h M?
  9. 用了fastapi还需要nginx_专门为API接口开发出现，FastAPI零门槛学习
  10. 我们无法更新系统保留的分区_「图」Windows 10更新再遇尴尬：无法执行系统恢复点...