Axure:基础组件——密码强度

平时我们在注册新账号设置密码时,填写的密码要符合强度才会设置成功;我们在设计密码输入框时可以加上密码强度,这么做提高了用户的账户安全;同时为了提升友好性,也要让用户直观的看到自己输入的密码达到了什么强度。

那怎么让用户知道输入的密码达到了强度要求呢?

通过颜色递进(红->黄->绿)来显示强度,这样感知很直接!

Axure中实现的效果如下:

产品经理,产品经理网站

1、输入的密码包含“数字”、“大写”、“小写”、“字符”其中一种,密码强度显示为弱;有2种则为中;超过2种则为强

2、随着密码的删除,再次判定密码包含“数字”、“大写”、“小写”、“字符”中的几种,并变化密码强度

怎么在Axure中制作呢?

制作方法是本人学习了交互元件库(Quick)后梳理出来的,稍微有点难度,但如果理清逻辑后,就不难了。

在Axure中直接判断输入的文本是否包含了“数字”、“大写”、“小写”、“字符”是无法实现的,所以需要转变思路。

我们可以循环判断用户输入的文字和输入的行为,是大写、小写、数字还是字符,是不是删除动作,然后加减各自的数量;

同步判别:

  • 统计后的数量为0,则没有密码强度
  • 有1个数量大于0,则密码强度是弱
  • 有2个数量大于0,则密码强度是中
  • 有3个数量大于0,则密码强度是强

如果写过代码,可能会容易理解这段逻辑。不过没关系,我还画了逻辑图,一起看看吧。

产品经理,产品经理网站

密码强度组件虽然看起来简单,但要实现的逻辑较多,第一次做这个组件还是挺花时间的。

逻辑已定,那就需要学习实现的方法啦,具体步骤如下:

1、拖拽如下默认元件进页面:

  • 1个矩形,里面写“密码框”
  • 1个文本框,外面套1个矩形,在矩形下面放1个动态面板,里面4个面板状态分别是“无”、“弱”、“中”、“强”,每个面板中分别放置3个矩形,“无”面板中的3个矩形的填充颜色都为#e4e4e4;“弱”面板中的第一个为#ff5722,其他都是#e4e4e4;“中”面板分别为#ff5722、#ff9800、#e4e4e4;“强”面板分别为#ff5722、#ff9800、#1ec695,通过切换面板状态来显示密码强度
  • 一个图片,图片是个清除按钮,点击可以清除密码
  • 4个复选框,分别是“大写”、“数字”、“小写”、“字符”,用于统计密码中包含几种情况,后面再加4个矩形,里面写“0”,用来统计各类型的数量
  • 1个文本框,用于存储密码框输入的值

产品经理,产品经理网站

2、输入框“文本改变时”,首先会判定长度是否为0 [见下面第一张图片],如果是0的话,会将所有的控件初始化,包括复选框取消勾选,统计值初始成0,副本值初始成空,隐藏清除按钮 [见下面第二张图片]

产品经理,产品经理网站

产品经理,产品经理网站

3、文本开始输入时,会判断副本上最后一位的字符(获取最后一位字符的函数方法可参考https://www.axure.com.cn/5068):

3.1、如果是大写并且当前动作不是删除动作时 [见下面第一张图片],则大写复选框勾上,并且大写统计长度的值加1,再把值写入副本上 [见下面第二张图片]

产品经理,产品经理网站

产品经理,产品经理网站

3.2、如果是大写并且当前动作是删除时,则大写统计长度的值减1,参数的设置和上一张图片是一致的

产品经理,产品经理网站

3.3、如果是大写统计长度的值等于0,则复选框取消勾选

产品经理,产品经理网站

4、小写、数字、字符都是同样的判断逻辑,小写字母在unidecode中的位置为97-122,数字为48-57,字符就比较复杂,分别为32-47、58-64、91-96、123-126

5、然后根据复选框的状态,去判断密码强度,通过动态面板根据不同的强度展示不同的样子;这儿的判断逻辑就是穷尽复选框之间的组织情况,然后切换至对应强度的面板,如下图

产品经理,产品经理网站

6、清空密码的实现方式较为简单,不多描述,可下载直接查看

5、再隐藏复选框、文本框、密码清除按钮等,点击预览,就能看到最开始展示的效果啦

不过如果在输入数字小写时,将光标移到数字后再删除,删除的判断就会有问题啦。如下:

产品经理,产品经理网站

但咱们要实现的是高保证原型图,所以暂不用纠结。

但~~~~~是~~~~~~咱们在评审测试案例或者自己测试时,要关注这种测试场景,说不定就藏着bug呢!

关注交互细节,关注用户体验,peace~

 

本文作者 @1526

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部