Axure教程:密码可见与不可见的切换设置

萍萍仔
0 评论 7491 浏览 23 收藏 4 分钟
好的产品经理必须懂业务!起点课堂的课程强调“产品+业务”双轮驱动的理念,教你如何深入理解商业模式,设计出真正具有商业价值和用户价值的产品。

我们平时注册或者登录时,输入密码的时候,通常都会有密码的可见与不可见切换设置,看起来简单又常见的交互效果,做起来却没有想象中那么简单,我们一起来看看怎么做吧~

国际惯例,看了效果图再说哈哈

起初,密码可见,点击不可见的眼睛按钮,密码转为不可见(现实操作中,一般都是由密码不可见切换到可见,方法都是一样的,只是创建面板状态时,把不可见放在首位就可以了。)

教程来袭

(1)创建一个动态面板。

(2)创建动态面板的2个状态并进行编辑。

(3)创建密码不可见状态的基本元件:文本框以及密码可见的眼睛按钮,并对文本框进行设置。

(4)创建密码可见状态的基本元件:文本框以及密码不可见按钮,选择文本框类型为text以及对文本框进行命名。

(5)对密码可见按钮进行交互设计,同时设置hide文本框中的文本内容与unhide文本框的相同:点击密码可见按钮动态面板转到密码可见状态;hide文本内容=unhide文本内容。

(6)对密码不可见按钮进行交互设计,同时设置unhide文本框中的文本内容与hide文本框的相同:点击密码不可见按钮动态面板转到密码不可见状态;unhide文本内容=hide文本内容。

(7)现在已经设置好了按钮交互,两文本框的内容也设置相同了,点击预览来测试吧,是不是做成功了?

希望你可以为你自己感到骄傲啦~~

 

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

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!
专题
14930人已学习13篇文章
作为一名运营,需要持续对自己的经验进行总结并不断更新迭代。本专题的文章分享了运营方法论。
专题
12843人已学习12篇文章
企业想扩大自身的知名度和影响力都离不开新媒体。本专题的文章分享了企业新媒体运营指南。
专题
17022人已学习12篇文章
本专题的文章分享了支付体系的设计指南。
专题
12043人已学习11篇文章
随着互联互通的发展,虚拟与现实之间的距离在逐渐缩小,未来数字设计也在发生着变化。本专题的文章分享了数字未来设计趋势。
专题
19583人已学习13篇文章
在B端产品设计中,数据的筛选是其中必不可少的一个步骤。本专题的文章提供了B端数据筛选查询的设计思路。
专题
13151人已学习12篇文章
发觉用户本能的最好方式就是从用户的心理出发,利用人的本能做产品设计,用最“自然”的方式影响用户的行为。本专题的文章分享了产品心理学。