見出し画像

パスワードが合っていたことを視覚的にフィードバックするアニメーション

前回に引き続き、今回はパスワードが合っていたバージョン。

画像1

パスワードが合っていたことを視覚的にフィードバックするために意識したポイントは以下の2つ。


①チェックマークの出現と色の変化

パスワード入力後にチェックマークが出現し、同時に色が変わることでパスワードが間違っていなかったことを視覚的に表現しています。

最初は鍵のアイコンだった部分が、チェックマークに切り替わることで、「鍵を開いた」ことをイメージさせるようにしています。


②うなずくようなアニメーション

前回のエラーフォームでは、横にブルッと震えるアニメーションを使用しました。

これは、現実世界で人が「NO」を示す際に首を横にふることから、誤りを表現する際によく用いられる手法です。

それと同じ考え方で、今回は首を縦にふるイメージで入力したパスワードがうなずくようなようなアニメーションにしてみました。

うなずいて消えると同時に「Open」の文字に切り替わります。

この記事が気に入ったらサポートをしてみませんか?