web-dev-qa-db-ja.com

マテリアルデザインの色：プライマリ/アクセントvsグリーン/レッド

多くのビジネスデータを管理するための大規模なエンタープライズアプリがあります。私たちはbootstrapを使用しており、現在Googleのマテリアルデザインガイドラインに従ってデザインを変更しています。

ガイドラインは、特別な意味のない2色とモノクロを使用することを提案しています。しかしその前に、「保存」、「作成」、「承認」などのアクションを緑色で強調表示し、「拒否」、「削除」、「キャンセル」などのアクションをredで強調表示していました。

今、私はプライマリ/アクセントだけのボタンの色をどのように選択するのでしょうか。危険なアクションには、primary/accent/red with redのようなものを使用する必要がありますか？ 「OK」、「同意する」、「作成する」、「承認する」などのボタンについて、緑とプライマリ/アクセントとモノクロの間で選択する方法は？

buttonsuser-expectationcolormaterial-design
4
Gherman

ガイドラインはガイドとして役立つと思います。ベストプラクティスを適用するときに心に留めておくべきことは、ガイドが言うことに制限されるべきではありません。同じアプリは1つもありません。それらで機能するものは機能しない場合があります。プライマリ、セカンダリ、ターシャリのカラーパレットとして使用される、2つ以上の基本的なカラー（モノクロを除く）を含むスタイルガイドを見てきました。

ここではいくつかの例を示します。

1つのボタンの色が2つの異なるアクションを実行している場合は、新しい色の導入を検討することをお勧めします。通常、ボタンの安全なカラーパレットは次のとおりです。

  • 送信などの主要なアクション：blueまたはgreen
  • 確認/ OK /完了などの二次アクション：一次アクションのより薄い色合い
  • 無効にする：gray
  • アラート：赤

灰色の境界線と透明な背景のボタンを使用して、それを望ましくない一連のアクションとして示すこともできます。

4
adamsoh