ホバーは異なります

eLamaのライブラリに多くのコンポーネントがあると、ホバーにシステムがないことに気付きました。塗りつぶしの色、フレームの色、テキストの色の変更、影の表示などです。





悪意からではなく、一部のプロジェクトではうまく機能しましたが、インターフェース全体を見ると、これが問題であることが明らかになりました。





同様のコンポーネントでさえ、異なるホバーを持っていました
同様のコンポーネントでさえ、異なるホバーを持っていました

すべてが見た目とは限りません

インターフェイスを開発するとき、私たちはあなたがすることはユーザーが期待するように機能するべきであるという原則に依存しています。ユーザーが自分の前にあるボタンを見ると、ボタンの動作を期待します。つまり、期待どおりに動作するはずです。





たとえば、私たちのライブラリには、リンクと、視覚的にリンクに似たボタンがあります。ホバリング時の動作に大きな違いがなかったため、クリックするとどうなるか、別のページにジャンプするのか、現在のページでアクションが実行されるのか、という疑問が生じる可能性があります。最初は、ホバーするとリンクのように見え、動作するという事実に基づいて、開発者がボタンをリンクとして使用する場合もありました。





これらが2つの異なるコンポーネントであることは誰にとっても明らかではないかもしれないことが判明しました。
これらが2つの異なるコンポーネントであることは誰にとっても明らかではないかもしれないことが判明しました。

どんなホバーがありますか

1. ( )





これはNotionでどのように見えるかです
Notion

2. ( )





これがJiraでのフィルターボタンの動作です
Jira

3.





Habrの例

4.





Yandexのホームページで見ることができます

5. (, ..)





Googleカレンダーボタン
Google

6. ( , ..)





nyc.awwwards.comのファンシーボタン
nyc.awwwards.com

, , , , , -.





Button, SelectList, Table, Chip, Lable, Switch, Pagination,





:





— 3 .





, . .





(: tooltip ) , (, toast)





アクティブなボタンの例

Rating





:





, . -, , . , , .





RadioLine, CheckLine Tab





:





RadioLine, CheckLine — .





: RadioLine — , .





slowuuumoのアニメーションでカント

Checkbox





:





: — — — .





Input, MultiInput, TextArea, Select, Radiobutton





:





- — . , , , .





InputFile





— . , , .





Link Button





, .





, .





, . , . , , . , .





ただし、ページネーションの場合のように、部分的なアニメーションがある場合があります。ページ番号にカーソルを合わせると背景はスムーズに表示されますが、カーソルを離すと背景はすぐに消えます。これは、カーソルを数字の上にすばやく移動し、複数の素材が同時に表示される状況を回避するために行われました。これは、前の素材がまだ消えていないときに新しい素材が表示されるためです。








All Articles