web-dev-qa-db-ja.com

ウェブUIでのCSSホバーアニメーションのガイドライン/ベストプラクティス

Webベースのユーザーインターフェイスでホバー時のCSSアニメーション化された遷移を使用するための承認されたガイドラインおよび/またはベストプラクティスはありますか?それがいつ単に煩わしく気を散らすようになるのですか?

テクノロジー関連のブログ( -リンクにカーソルを合わせる)や、場所のStack Exchangeサイト(- security.stackexchangeの上部ナビゲーションバーなど)にも表示されていることに気づきました.com )。それはインターフェイスに素敵なタッチを追加するように私には思えます。それと同時に、いいことではなくなって気が散るようなところもあると思います。そして、他のSEサイト(このサイト)やjQueryのサイト(例: アコーディオンUIデモ )など、他の注目度の高いサイトはまったく使用していません。

6
Mr. Jefferson

ホバーデザインで留意すべき点は、モバイルデバイスでどのように処理される(または処理されない)かです。最近のモバイルWebサーファーの数は急激に増加しているため、モバイルを念頭に置いてサイトを設計することが重要です。

美学のためだけにホバーを追加することはおそらく問題ありませんが、それが他の方法ではアクセスできない機能またはナビゲーションメニューをトリガーする場合は、面倒になる可能性があります。

1
raffi

普遍的なガイドラインがあるとは思えません。

多分これを除いて:アニメーションがユーザーに何ができるか、何が起こるか、または何が起こったのかをユーザーが理解するのに役立つ場合、それは不必要なものよりも便利です。

0
Ken Mohnkern

ブラウザーテクノロジーは、開発者/デザイナーの側の判断の呼びかけになりつつあると感じています。ほんの数年前までは、JavaScriptで大幅な移行を追加するとアプリケーションに大きな肥大化と不格好さを追加する時点にありました。ただし、CSS3トランジションとアニメーションが広くサポートされているため、このような効果を追加することは比較的「軽量」であり、ユーザーエクスペリエンスに追加するケースを作成できる場合は、そうしない理由はありません。

0
hevans66