Googleマテリアルを使用して色付きのドロップダウンをどのようにスタイルする必要がありますか？
私はGoogle Material UIを使用しているプロジェクトに取り組んでいます。表示する必要がある一連のプロダクションステータスがあります。それらはリストから選択できますが、そのリストがどのように表示されるかわかりません。各ステータスには独自の関連付けられた色があり、理想的にはリストに表示されます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
Googleマテリアルに色付きのドロップダウンリストが表示されることはありますか？私は見たところ、何も見つけることができませんし、 素材サイト でも、白い背景を使用しないドロップダウンについては言及していません。私が知る限り、私の選択肢は：
- 写真のように色付きのリストを使用して、ホバー状態を不透明度60％に設定します
- Googleマテリアルに従って、白いオプションが付いた色付きのドロップダウンボックスを使用する
- オプション1のように色付きのリストを使用しますが、ホバー時にbgグレーを使用します
すべての考えを歓迎し、励ましてください！
短い回答：2番目のオプションを使用します。この場合、色はリスト内の要素を分類しないため、各フィールドは中間色の白色になります。
色は、そのコンテキストから他の要素と区別するため、または要素を区別するために使用する必要があります。
リンクが色であり、周囲のテキストではない方法を考えてください。例（ image source ）：
上の画像では、アクセントカラーを使用して機能を強調しています（列を他の列と区別しています）。同じ列の要素内の色の違い（この場合は不透明度）は、高い値または低い値を示すために使用されます。
今あなたの例では色は他のものと比較して意味のある値や区別を与えていません。 （「他との比較」または「その文脈で」は、私が意味するポイントです）
色なしのリストと色の完全なリストを比較すると、色付きのリストは要素間の区別の点で何の利点もありません。 すべての要素の色が異なる場合は、すべてに同じ色を使用することをお勧めします（または色の欠如=白/灰色/黒）。
（たとえば）2種類の要素があり、色を使用して区別することが理にかなっている場合があります。
上記の例では、色はユーザーが選択するのに関連する追加情報を提供しています。青は男性的な名前、ピンクは女性的な名前です。
入力の色は、（編集モードではなく表示モードで）表示されるときに変更されます。そして、そのような状況では、色付きの要素が通常の（非色付きの）要素と区別されるため、色の違いは理にかなっています。
色がある場合、要素の上にカーソルを置くと、別の色を使用するのではなく、要素の不透明度を低くする必要があります。
また colorblindを検討 ユーザー。
編集：
誰かが興味を持っている場合に備えて、差別化と区別によって私が意味することを詳しく説明します。
これは1色のみです（本文テキストの色 グレーを使用 ）：
複数の色を使用して（この例では黒とグレーの異なる色を考えてみましょう）、要素を区別できます。
色は、要素に区別と目的を与えるために使用できます。
両方のプロパティを強化するために（そして、色覚異常のユーザーと読みやすさのために）、次のスタイルを与えることができます。
あなたの要件を考えると：
各ステータスには独自の関連付けられた色があり、理想的にはリストに表示されます
次に、色があるべきかどうかについては議論しません。質問はGoogle Material Designと互換性のある方法でその色を調和して表示する方法ですか
アイテム全体の色分けには問題があります。
- 見た目が良くない。
- テキストとのコントラストのため、問題があります。
- 色覚異常のユーザーには問題があります。
- ホバリングとフォーカスは、より混乱する色の組み合わせを追加します。
幸いにも、カラーピッカーの問題はすでに解決されています。テキストが必要ない場合は、次のように簡単です。
テキストが必要な場合は、traditionalアプローチを試してみてください（例：material.google.comのグリッドサンプルから採用）：
または、GMailでアバターを表示するのに慣れているので、ラウンドiconを使用します。
レイアウトがはるかに複雑になり、長いテキストが含まれる場合があることに注意してください（Googleからの例も同様）。
