CSS圖書館 ? HTML & CSS ? 表單密碼強度可視化設計

表單密碼強度可視化設計

發表于: HTML & CSS. 評論
Sponsor

在填寫表單密碼時,有的會會顯示「弱、中、強」的文案來表示你填寫的密碼強度,這是一種不錯的用戶體驗方式,然而今天我們分享一個更有趣的體驗,就是用「可視化」來表達。

表單密碼強度可視化設計

這個「可視化」方式是很棒的想法,我們來看下面的 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 等多個代碼庫。

作為設計師們應該多嘗試新的想法,這樣才會有創新,當然有時候,看似簡單的創意交互設計,但在前后端的實現可能會有些難度,但請不要害怕,只有嘗試了,才能領先于別人,創造更高品質的作品

推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:結交更多有才華的設計師?請加入UI設計QQ群,與50000名設計師交流設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。

{ 發表評論 }