本日翻訳を公開した資料では、デザイナーのパブロ・スタンレーが、ユーザーインターフェイスで微小相互作用をアニメーション化するためのいくつかの推奨事項を提供しています。 ここに示した各例では、2つのアニメーションが考慮されています。 著者によると、最初のオプションは優れており、2番目のオプションは単に優れています。 アニメーションの改善には小さな変更が伴いますが、最終的にはユーザーインターフェイスの認識を大幅に改善できます。
議論されるアニメーションは、さまざまなインターフェース状態間の関係を示し、異なる状態に存在する共通要素間の相互作用を示し、明確に気付くべきものに控えめにユーザーの注意を引きます。 作業の過程で、この記事の著者は、
Material Motion 、
Animation Principles 、
The UX in Motion Manifestoのマニュアルのアイデアに従いました。 例は、
InVision Studioを使用して作成され
ました 。 これらの例のソースファイルは、
ここからダウンロードできます。
タブシフト
以下、アニメーションのイラストを使用して、良い（良い）アニメーションと素晴らしい（素晴らしい）アニメーションの例を示します。
左側では、古いマテリアルが消え、新しいマテリアルが表示されます。 右側では、タブとともにコンテンツのシフトを確認できます- 優れたアニメーションは、ある状態から別の状態への移行中のマテリアルの消失と外観を示しています。
- 優れたアニメーションは、遷移、状態の接続により、状態を変更するときにマテリアルの動きの効果を作成します。
タブやポップアップメニューなど、ユーザーが操作している要素を設計するときは、これらの要素を操作するときに表示されるマテリアルの配置がそれらに関連付けられていることを確認してください。 このアプローチにより、ボタンのクリックなどに応じて画面上のコンテンツの可視性の変化だけでなく、その位置の変化もアニメーション化できます。 ここでは、スワイプジェスチャコントロールのインターフェイスへの統合を思い出してください。これにより、ユーザーは完全に自然な方法でデータ間を移動できます。
一般的なカード要素の接続の表示
左側のカードをクリックすると、新しい画面が開き、上に移動します。 右側のカードが拡大し、割り当てられたスペースを占有します- 優れたアニメーションでは、左または上などの遷移を使用して、ユーザーがクリックした要素に関する詳細情報を含むページを表示します。
- 優れたアニメーションは、2つの状態間の接続を作成し、共通の要素をアニメーション化します。
異なる状態間の遷移をアニメーション化する場合、これら2つの状態に特定の共通要素があるかどうかに注意してください。 そのような要素がある場合は、それらを互いに接続することをお勧めします。 InVision Studioのおかげで、Motionトランジションを作成するときに、2つの画面に共通のコンポーネントが自動的にリンクされます。 これにより、アニメーションのプロトタイプ作成が非常に容易になります。
モーションマニフェストを見て、説明されている状況で使用できるアニメーションの種類を確認してください。 したがって、上記の例では、この資料で説明したマスキング、変換、ペアレンティング、およびイージングの原則の組み合わせを適用します。
ウォーターフォール効果
左側のカードが画面に表示され、下から上に向かって滑らかに表示されます。 右側のカードは同様の方法でアニメーション化されますが、各カードが表示されるまでにわずかな遅延があります。- 優れたアニメーションには、画面に表示されるマテリアルの位置と透明度を変更することが含まれます。
- 素晴らしいアニメーションは、各グループまたは要素の外観を強調します。
「ウォーターフォール効果」を実現するには、各コンテンツが少し遅れて表示されるようにします。 同じことが要素のグループの外観にも当てはまります。 何が起こっているのかが統一されたプロセスとして認識されるように、アニメーションとその継続時間の同じダイナミクスを維持します。 この効果をすべての小さな要素に適用しないでください-コンテンツのグループをアニメーション化します。 アニメーションを高速かつ明確にします。 Googleは、要素の表示間の遅延が20ミリ秒を超えないことを推奨します。
追加の例は
ここにあります 。
画面から不要なコンテンツをプッシュする効果
左側のアニメーションは、不要なコンテンツと目的のコンテンツの重複を示しています。 右側のアニメーションは、ユーザーにとって関心のある要素のサイズが大きくなるにつれて、不要なコンテンツをシフトします。- 良いアニメーションは、要素を動かし、コンテキストを維持することです。
- 優れたアニメーションは、ユーザーが関心のある要素が変化する際に周囲の要素に与える影響を示しています。
アニメーションを設計するときは、コンテンツ要素に周囲の要素を「認識」させ、他の要素を「はじく」または「引き付ける」ようにしてください。 追加の例を次に示します。
それを呼び出すボタンの場所を考慮に入れたメニュー
右側には、メニューを呼び出すボタンの横からメニューがどのように終了するかが示されています。 左側のメニューはボタン自体から発生します- 良いアニメーションは、メニューを呼び出すボタンの横からメニューが終了するときです。
- メニューの優れたアニメーションは、それを呼び出す要素、特にこの要素のタッチポイントからの出現を意味します。
ボタンの創造的な使用
左側のボタンをクリックすると、その下にテキストが表示され、何が起こっているかをユーザーに知らせます。 右側のボタンはコンテナとして使用され、外観が変わり、このボタンをクリックして呼び出されるアクションの経過を示すインジケータになります- 良い相互作用は、近くのボタンをクリックした結果に関する情報を表示することです。
- 優れたインタラクションはボタン自体を使用します。ボタン自体は外観を変更し、このボタンによって引き起こされる結果またはアクションのコースについてユーザーに通知します。
このボタンをクリックした後に何が起こったのかをユーザーに知らせるために、ボタンをコンテナとして使用してみてください。 たとえば、ユーザーにアクションを呼び出す要素の役割を以前に実行していたボタンは、読み込みプロセスの回転インジケーターまたはアニメーション、または他の操作の進行に置き換えることができます。 たとえば、ボタンの背景のみをアニメーション化できます。 正確に何をするかはあなた次第です。ここでの主なアイデアは、ユーザーが既に対話しているスペースを使用することです。 さらに良いのは、ボタンの色とその上に配置されたテキストを使用して、特定の操作の成功を確認する場合です。
控えめなユーザーアトラクション
左側の要素は、ページ上の色と場所のために表示されます。 右側の例では、光のアニメーションを使用してユーザーの注意を引き付けています。- 優れたデザインでは、色、サイズ、位置を使用して、ユーザーが気付く必要がある、またはユーザーが操作する必要がある重要なアクションを強調します。
- ユーザーの注意を引くための優れたデザインには、控えめなアニメーションの使用が含まれます。
ユーザーが重要な何かを達成する必要がある場合、対応する要素をアニメーション化して注意を引きます。 軽いアニメーションから始めて、予想されるアクションの重要度に応じて、その強度（サイズ変更、色、速度）を増やします。 このアプローチは、例外的な場合にのみ使用してください。 このようなアニメーションを頻繁に使用すると、アニメーションが目立たなくなり、ユーザーに迷惑をかけます。
まとめ
この記事の例が、インターフェースをアニメーション化する際に正しい決定を下すのに役立つことを願っています。 InVision Studioなどのアニメーションやプロトタイピングを作成するための新しいツールのおかげで、まもなくユーザーと対話する創造的な方法の「ルネッサンス時代」のようなものに入ると思います。 おそらく、アニメーションを適用する際に覚えておくべき主なことは、それが大きな力であり、責任を持って使用する必要があるということです。
アニメーションを使用して、状態の変化を説明し、必要なアクションに注意を引き、要素間の相互作用を示し、インターフェイスをより面白く思い出深いものにするために提案します。
親愛なる読者！ ユーザーインターフェイス要素をどのようにアニメーション化しますか？
