web-dev-qa-db-ja.com

アニメーションがGoogleであっても無視されることが多いのはなぜですか?

アニメーション入力は問題ありませんが、何かが消えてもアニメーションは表示されません。 IS THIS GOOD?

Google画像から

Enter image description here


トップタルから

https://www.toptal.com/designers/ux/interview-questions

Enter image description here


指定から

http://designation.io/campfires/author/will/

Enter image description here

92
Jivan

アニメーションはオブジェクトにフォーカスを描画するに使用されます。ユーザーがもはや指し示していない(したがって、フォーカスに興味がなくなった)オブジェクトにフォーカスを描画することは、ユーザーがフォーカスしたいオブジェクトにフォーカスを描画することよりも意味がありません。

これは無視されることではありませんが、ユーザーが現在関心を持っているオブジェクトと一致するように焦点の範囲を狭めるという意識的な決定です。

175
Rotem

それは設計上の決定ではないと思います。少なくともWeb開発では、実装が面倒であり、UXに貢献して仕事に値するほど貢献していないため、無視されていると思います。 Googleのマテリアルデザインアニメーションガイドライン を見ると、常にエンドアニメーションが表示されます。

Google's Material Design Animations sampl

入口アニメーションの表示はanimation: ...;をCSSに追加するのと同じくらい簡単ですが、出口アニメーションは1)display: noneを回避する必要があります(常に可能ではありません。いくつかのフープをジャンプする必要があります)2)JavaScriptを使用して待機しますdisplay: noneを設定する前に終了する終了アニメーション。 この件に関するチュートリアル全体を示します。

36
cdrini

上記の3つの例はすべて機能的なアニメーションですが、目的は異なります。

最初の2つの例は、モーダルボックスポップアップのように機能します。ユーザーがボックスを開いて、完了したらそれが消えることを期待します。したがって、遅いことを明らかにし、ユーザーが行った変更を理解し、すばやく隠すことができるようにすることは、良い設計上の決定です。ここでユーザーが完全に制御できます。

3番目のアニメーションは、クロックタイルにズームしている間、ユーザーの方向性を維持することを目的としています(これは少し簡単な操作です)。そして、ズームアウトが開始されると、アニメーションがタイルの元の場所に戻ることが重要です-ユーザーが向きを失うことはありません。

最終的に、デザインの決定は特定の機能アニメーションの目的から導き出されます。参照: Xデザインの機能アニメーション

17
Amit Daliot

オープニングアニメーション
アニメーションがなく、最近のPCのようにすばやく変更が行われる場合など、UIレイアウトが突然変更された場合、ユーザーは「何を壊しましたか?!」感じ。
これは、ユーザーがコンテキストを失うと発生します。ユーザーは焦点を失い、突然何かが壊れたように感じます。
アニメーションは、フォームを徐々に下にスライドするように、「ねえ、このブロックをここに挿入する方法を見て、おかしくならないでください!」のようなものをユーザーに伝えます。
そのため、1つの目的は、代わりにコンテキストを維持することにより、ユーザーのフォーカスを奪うことなくUIを変更することですevolve瞬時に変化します。
アニメーションがユーザーの時間である非無限のリソースを少し消費することに注意してください。たとえば.6秒のように、潜在的に何度も。
クロージングアニメーション
閉じるアニメーションが存在する必要があります。ユーザーが戻るときにフォーカスを失うリスクがあります。
それ以外は不必要です。
私が個人的にしていることは、オープニングアニメーションよりもはるかに速いクロージングアニメーションを設定することです。このようにして、ユーザーの時間を無駄にしません。 .2秒のような間隔を使用します。
それでは、なぜクローズアニメーションを省略しているのですか?
それ以外の場合は、ユーザーの時間を浪費する可能性があるためです。

3
Juan Lanus

アニメーションの出力には時間がかかり、経験豊富なユーザーにとっては、時間の無駄のみが発生します。適切に行われたアニメーションでは、適切な場所に注意が向けられるため、この効果はありませんが、アニメートするときは、すでにその画面を「知っている」ため、必要ありません。また、多くの場合、注意を向ける特定の場所はありません。

これに対する1つの例外は、リソースをロードする必要があることをアニメートするときに、ロードのわずかな遅延を非表示にする良い方法であることです。

1
akaltar

私が考えることができる唯一の理由は、仮定に基づいています。与えられた例は、それが確立された状態、新しい状態と元の状態への遷移の間の遷移についてであるという共通点があります。また、コンテキストは変更されません(ビューは大幅に変更されません)。新しい状態へのアニメーションは、ユーザーがビューを変更する準備をするためによく使用されます。ユーザーがすでに慣れている状態に戻すことは、おそらく不要だと考えられています。

1
jazZRo

Web上のアニメーションを見るとき、UIインターフェースの設計に関して、contextを考慮する必要があります。

すべてのインターフェースアニメーションが同じであるとは限らず、同じように扱われるべきでもありません。

私たちは視覚的な生き物であり、それ以外の場合は単色の環境で明るい色のフラッシュのようなもの、または「物理的な」動きが直感的に私たちの注意をすぐにキャッチします。人々はこれらの本能を使用して、何年にもわたってマーケティング目的で注目を集めてきました。

私はRotemとMJBに同意する必要があります-cdriniは別の非常に良い点をもたらします。

捨てられてしまった昔ながらのFLASHタグのように、それは一種のギミックです。

また、設計者がアクセシビリティのニーズを検討している場合は考慮に入れる必要があります(アニメーションが不十分な場合、アニメーションはてんかん発作を引き起こす可能性があります)。多くの設計者はそのような必要性を行ったり、認識していません。上記のアニメーションのいくつかは、この深刻な問題を考慮に入れていないので(私には)気付かれません。

もう1つの側面は、付加価値がある場合です。付加価値がない場合(アニメーションの内外を問わず)は使用しないでください。 UXを強化するのではなく、UXを妨害します。

したがって、すべてのアニメーションがりんご同士であるとは限りません。考慮すべきことがたくさんあります。

1
HB77