web-dev-qa-db-ja.com

アウトラインボタンのホバー状態はどのように見えるべきですか？

私と友人はボタンのデザインについて話し合っており、Marvelのアウトラインボタンのホバー状態に遭遇しました。

Marvel outline-button hover state example

アウトラインボタンが理由のためにそのように設計されているので、これは正しいアプローチではないと思います。アウトラインボタンがアウトラインではなくなった場合、ユーザーはコンテキストが失われる可能性があると思います。

別の方法として、ホバー状態としてアウトラインの色の鮮やかさを増加させるアウトラインボタンを選択します。

Example of outline button in my approach

アウトラインボタンのホバー状態はどのように見えると思いますか？

buttonsdesign-patternshover
3
amees_me

これは選択の問題だと思います。さまざまなStackexchangeサイトがどのようにさまざまなスタイルを適用し、上部バーのボタンにホバー操作をホバーするかを確認できます。

素材デザイン はこれらをカバーしていませんゴーストボタン。ただし、これらはフラットボタンと非常に似ており、これらに適用されているヒントを使用できます。ユーザーがボタンをホバーすると、微妙な変更が行われるはずです。 背景のみを暗い/異なる色に変更しますが、フォントの色は同じに維持されます。

enter image description here

ホバーのときではなく、常に特定のボタンの重要性のため、Photoshopなどのソフトウェアがボタンに目立つ色の輪郭を適用するのを見てきました（例：保存、キャンセル、完了、保存の境界線の色が目立つ）。 。

2
Alvaro

アウトラインボタンは理由のためにそのように設計されているので

他の「より薄い」コントロールと比較して、ボタンにあまり注意を向けないように設計されています。塗りつぶされたボタンを使用すると、ユーザーはボタンに注意深く気づくことで気が散ることがあります。

ボタンがホバー状態になるとすぐに、この推論は適用されなくなります。

  • どちらか、ユーザーが意図的にホバリングします。次に、彼らの注意はすでにボタンに集中しています。次に、ボタンは、それがアクティブであることとボタン（たとえば、別のテキストボックスではなく）であることを明確に示す必要があります。
  • または、ユーザーが他の場所を見ているときにボタンの上にカーソルを誤って移動しました。その場合、ボタンが（破壊的な可能性がある！）アクションを引き起こす可能性があることを前提として、ユーザーがボタンに誤ってクリックしないように警告するために、ボタンにユーザーの注意を引くことが保証されます。

結論：ホバー状態が満たされたデザインは良好です。

2
O. R. Mapper

問題は、ホバーしたときにボタンが塗りつぶされることではありませんが、ボタンはアウトラインと3Dボタンの混合です。確かに、下にホバーすると上にクリックで境界線の効果を確認できます。そのため、コンテキストが失われます。ただし、アウトラインボタンはクリック可能な要素であるボタンのように見える必要があるため、単色で塗りつぶすような単純な境界線の強調表示（境界線と同じ色が優先される）を実行する必要があります。ここでは、ボタンのユーザーエクスペリエンスについて詳しく読む興味深い記事を示します。 https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6

1
Starfight