CSS图书馆 » HTML & CSS » 表单密码强度可视化设计

表单密码强度可视化设计

发表于: HTML & CSS. 评论
赞助商链接

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

表单密码强度可视化设计

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

表单密码强度可视化设计

在线演示:https://tympanus.net/Development/PasswordStrengthVisualization/
下载源码:https://tympanus.net/Development/PasswordStrengthVisualization/PasswordStrengthVisualization.zip

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

表单密码强度可视化设计

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

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

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。