パスワードが合っていたことを視覚的にフィードバックするアニメーション
前回に引き続き、今回はパスワードが合っていたバージョン。
パスワードが合っていたことを視覚的にフィードバックするために意識したポイントは以下の2つ。
①チェックマークの出現と色の変化
パスワード入力後にチェックマークが出現し、同時に色が変わることでパスワードが間違っていなかったことを視覚的に表現しています。
最初は鍵のアイコンだった部分が、チェックマークに切り替わることで、「鍵を開いた」ことをイメージさせるようにしています。
②うなずくようなアニメーション
前回のエラーフォームでは、横にブルッと震えるアニメーションを使用しました。
これは、現実世界で人が「NO」を示す際に首を横にふることから、誤りを表現する際によく用いられる手法です。
それと同じ考え方で、今回は首を縦にふるイメージで入力したパスワードがうなずくようなようなアニメーションにしてみました。
うなずいて消えると同時に「Open」の文字に切り替わります。
この記事が気に入ったらサポートをしてみませんか?