web-dev-qa-db-ja.com

ウェブサイトのランディングページのfadeUpアニメーションのポイントは何ですか?

最近、ウェブサイトのホームページの多くが、ページのコンテンツにfadeUpアニメーションを使用していることに気づきました。

Spotifyのホームページ が良い例です。

彼らがなぜこれを行うのか知りたいです。

私にとっては、アニメーションの無意味な使い方のようです。サイトはそれなしでも同様に機能します。アニメーションを使用しないと、読み込みが少し速くなると思います。そして、おそらく読者がページ上の情報をすばやくスキャンする方が簡単でしょう。

このトピックに関する調査はありましたか?それについて議論している記事は見つかりません。

4
sboland926

まず、名前で呼んでみましょう。この場合、 animationと言うと、transition

すべてに関数がある必要はありません。美的価値は通常、関数よりも意味があります(悲しいが真)。それは基本的に人類と文明の歴史です。ゴールドのロレックスは、安価なデジタル時計と同じくらい正確にあなたに時間を与えます。しかし....あなたは金のロレックスまたは安価なデジタル時計を好みますか?持続時間を差分として考えても(ロレックスは確かに安価なデジタル時計よりも耐久性があります)、ゴールドのロレックスの価格で1000個のデジタル時計を購入できます。

トランジションは要素に焦点を当てることを目的としています、そのため、非常に強力です。個人的には、私たちのスタジオでは、トランジションのないサイトも考慮していません。ワイヤフレームで作業する場合、トランジションは、そのようなトランジションのすべての部分(エフェクト、タイムイン、タイムアウトなど)を含め、計画全体に含まれます。

アニメーション化されたトランジションでユーザーエクスペリエンスを向上させます

アニメーションは、見た目が楽しいだけでなく、実際のユーザーエクスペリエンスを向上させることもできます。楽しみと機能の適切なバランスを見いだし、アニメーションなしでもユーザーフローが優れていることを確認することが重要です。良い移行とは、邪魔にならず、ユーザーエクスペリエンスを向上させ、同時に楽しい移行です。

あなたはSpotifyの例を提供しましたが、Spotifyの使いやすさは本当に悪いことがわかっていますが、これが原因で彼らは悪いことをしていますか? Spotifyの1/100だけを使用して、悪いUXを使い続けたくありませんか?そして、これは極端な例です。このような移行は無意味であると言いますが、一部の人々がそうでないと考えるのは明らかです。

IMHO、これらの遷移はコンテンツブロックとして注意を呼びますlazy loading 、これは単なる逸話ですが、この手法なしでロードでき、遷移()しかない可能性があるため、これらのブロック内のコンテンツに注意を向けています。正直なところ、メッセージではなく電話に注目しているのであまり効果的ではないと主張しますが、お粗末なUXもブランドの一部であり、これをテストした可能性があります。

要するに、すべては各サイトのテストと調査に行き、それから結果を研究します:移行はサイトのUXにマイナスの影響を与えますか?もしそうなら、それは悪いです。そうでない場合、なぜ心配ですか?彼らがテーブルに何かを持ち込んだら……まあ、答えは明白です。

追加の読書

3
Devin

Spotifyがこれを選択した正確な理由をお伝えすることはできませんが、なぜそれを使用するのかをお伝えすることはできます。

ここで共有したサンプルページ(Spotify)は、AJAX「レイジーロード」と呼ばれる手法を使用している可能性があります。これは、アイテムが表示される直前にページにのみ読み込まれる場所です。これは、ブラウザがページ全体をロードする間、ユーザーを待たせるのではなく、一度に小さな情報のチャンクのみをロードすることを意味します。

共有した例(Spotify)の場合、CSSとJavaScript(おそらくJQueryの形式)の組み合わせを使用してアニメーションが完成します。つまり、アニメーションは非常に軽量で、コード化とロードは1回だけで済みますが、すべてのアニメーション要素に適用されます。

その上、少し明るいアニメーションなどの微妙な要素を含めることで、誰かがデザインと構造に注意を払い、ブランドの「個性」をより多く伝えているような感覚を製品に与えます。

これらのアニメーションのような微妙なタッチは、ユーザーが製品を解釈する方法に大きな違いをもたらす可能性があります。

3
Andrew Martin