機能的なアニメーションとは、明確な目的を持った、さりげないアニメーションです。ユーザーの負担を減らし、状態の変化について行けるよう案内したり関係を示したりします。さらにUIに命を吹き込む効果もあります。このようなアニメーションは、6つの特徴を満たしていることが多いのです。今回はその6つの特徴を紹介します。
1.期待通りに反応すること
UIデザインにおいてフィードバックは非常に重要です。実生活でも、ボタンや物体は私たちの接触に反応してくれます。UIでも、ユーザーは同じことが起こるのを期待しているのです。
ユーザーが行った操作には素早く反応し、新しい要素とアクションを関連づけるようにしましょう。
2.関係性を保つこと
新しく作成された要素とアクションに関連を持たせ、ユーザーが変化を認識できるようにしましょう。下にメニューのアニメーションを2つ用意しました。1つ目の例ではタッチした場所とは離れた場所からアニメーションが始まります。これでは関係性を感じられません。
2つ目の例では、タッチした場所からアニメーションが開始されます。こうすることでタッチと新しい要素の関係性を保つことができます。
3.自然であること
ユーザーが驚くアニメーションはやめましょう。実世界で起
コメント