表单密码强度可视化设计

在填写表单密码时,有的会显示「弱、中、强」的文案来表示你填写的密码强度,这是一种不错的用户体验方式,然而今天我们分享一个更有趣的体验,就是用「可视化」来表达。

这个「可视化」方式是很棒的想法,我们来看下面的 GIF 图像,在没有填写密码时,背景是一张马赛克图像,完全看不清是什么东西。当你输入密码时,马赛克就会渐渐的消失,如果密码的强度越高,图像就会越清晰!

在线演示:https://tympanus.net/Development/PasswordStrengthVisualization/

下载源码:https://tympanus.net/Development/PasswordStrengthVisualization/PasswordStrengthVisualization.zip

这个创意灵感来自 Reddit 的一个帖子视频,此外这个创意已经有真实项目在应用,请查看这个链接:https://app.colibro.com/accounts-register/register

该实验代码用到了imagesLoaded, Pixelate 和 Fullscreen image in Canvas 等多个代码库。

作为设计师们应该多尝试新的想法,这样才会有创新,当然有时候,看似简单的创意交互设计,但在前后端的实现可能会有些难度,但请不要害怕,只有尝试了,才能领先于别人,创造更高品质的作品

不错过任何高品质

设计素材、经验、灵感

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180427B0XOW500?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券