web-dev-qa-db-ja.com

マテリアルデザインの「削除」ボタンのベストプラクティスは何ですか?

多くのデザインシステム/スタイルガイドでは、「削除」/「消去」/アンインストール/エラーボタンの色として赤を定義しています。マテリアルデザインでは、これが指定されていませんでした。

それで、ベストプラクティスは何ですか?

オプションは次のとおりです。

  • 原色を背景とするボタン。
  • セカンダリカラーを背景とするボタン。
  • 背景が赤のボタン。
  • リンク。

enter image description here

enter image description here

5
Madalina Taina

documentation を調べた後、ボタンの表示方法については、ルールはルールがないこと

ただし、ドキュメントごとに注意すべき点がいくつかあります。

  1. マイナーおよびdestructiveアクションには、フローティングアクションボタンを使用しないでください。
  2. 肯定的なアクションが右側に配置され、プロセスが続行されます。肯定的なアクションは、「削除」や「削除」のようにdestructiveのようになります。

それ以外は、自由にボタンのスタイルを設定できます。

個人的には、破壊的な行動は常にユーザーに確認を求めたり、取り消しを許可したりすることで、特別な注意を払う必要があると私は信じています。もちろん、それは色とは関係ありません。ボタンの外観については、共通の規則が適用されると思います このサイトの他の場所で説明されています

二次色を使用するガイドラインimplyを実行する必要があると私は主張します。ピザアプリに使用したスクリーンショットでは、goodオプションとbadオプションの両方について、アンインストールの2次色が表示されます(これはかなり破壊的な動作です)。ボタンの背景。

したがって、私の投票はオプション2(ほとんどの場合)に対するものです:ボタンの背景にセカンダリカラー

enter image description hereenter image description here

4
invot

機能に応じて、要素を強調または非強調することができます。破壊的な行動は重視しないことができます。

emphasize or de-emphasize button

1
Garik

ダイアログ(最初のスクリーンショットのような)では、 標準は

ダイアログアクションはデフォルトでシステムカラーを使用しますが、製品のカラーパレットを反映する必要があります。 ダイアログのアクションとダイアログのコンテンツを区別するには、パレットのアクセントカラーなどの対照的な色を使用します。

無効にされたボタン(リンクまたはボタン)は、使用可能になるまで無効に見えます。

非ダイアログボタンの場合は、破壊的なボタンが右側にあり、確認を求めるメッセージが表示されていることを確認してください。強い単色は優れた機能強化です。「キャンセル」ボタンを対照的に無効にしないでください。赤は破壊力を強調するために使用できます(これはiOSデザインで頻繁に見られます)が、ブランドカラーの場合、アプリのどこでも使用される可能性があります。

0
Stacy H