web-dev-qa-db-ja.com

ボタンアイコンの状態

現在、プレースホルダーとしてアイコンのみのボタンを製品全体でどのように表現するかを決定しようとしています。

現在、各ボタンはこの画像の右側に表示されています。

enter image description here

色付けしたり、ボタンのようにホバー状態をアクティブにしたり、左側が灰色で少し暗いホバー状態にしたりする必要がないかどうか知りたいです。

これの最良のユースケースが何かわからない。素材デザインにもこだわりたいです。

1
Bryce Snyder

アイコン切り替えの仕様を理解しているので:

Toggles Material Design

1
Keno

優れたボタンは、ボタンの状態ごとに異なる視覚スタイルを提示することにより、使いやすさを提供します。メディアによっては、一部が完全に適用されない場合があります(たとえば、ホバーは、実際にはタッチスクリーンデバイスの状態ではありません)。

州:

  1. Default
  2. 集中
  3. ホバリング
  4. アクティブ

2、3、4はすべて技術的にスキップできますが(ボタンは引き続き機能します)、ユーザーエクスペリエンスはそれほど良くありません。

フォーカス状態では、ユーザーが画面上のどの要素に「どこにいる」のフォーカスがあるかを確認しましょう。ユーザーがSpace/Enterキーを押して呼び出します。

ホバー状態は、どの要素がアクション可能であるかを示す発見可能性に役立ち、それらが「ホットスポット内」にあることをユーザーに知らせます。

最後に、アクティブ状態は、タップ/タッチ/クリックが成功し、システムが入力を登録したことをユーザーに通知します。この状態のないシステムを使用したことがある場合、応答が遅いと迷惑になる可能性があります。そして、何度も何度もクリックしてしまいます。

TL; DRは可能な限り、ボタンがすべての状態に対して何かをレンダリングすることを確認してください。

注:さらに、場合によっては、「無効」の追加モードがあります。

2
scunliffe