マテリアルデザインで色を選択する
マテリアルデザインの詳細を学びます。私は開発者であり、UXについてもう少し真剣に考えることにしたのはごく最近のことです。 Google 書き込み ：
プライマリパレットから3つの色相を選択し、セカンダリパレットから1つのアクセントカラーを選択して、色の選択を制限します。
それは実際にはどういう意味ですか？右側には、インディゴと3つの色合い（100、500、700）を選択したことが示されています。次に、ピンクの「アクセント」セレクションから選んだアクセント（A200、次にA100とA400にフォールバック）を使用します。
つまり、画面ではIndigo 100（明るい）、Indigo 500（通常）、Indigo 700（暗い）のみを使用するのが理想的ですか？そしてアクセントとして、ピンクA200（またはA100またはA400）だけですか？
そう：
1）なぜ3つの異なる色合いのアクセントがあるのですか？ 2）私はそれをすべて理解した上で、それを正しく理解しましたか？ 3）サイト https://www.materialpalette.com 、色を選択すると、「Divider color」にも言及します。それは何のためにあるのです？ 4）Materialpalette.comには、テキスト/アイコン、プライマリテキスト、セカンダリテキストの色もあります。 「text/icons」と「primary text」の違いは何ですか？
実際、それは非常に簡単です。各質問の下の回答を参照してください。
1。なぜ3つの異なる色調のアクセントがあるのですか？
これは、ボタン、ナビゲーションバー、および微妙な色の変化を持つその他の要素に異なる状態が必要になるためです。これは、ホバー、アクティブ、またはクリックボタンの状態で最も明白ですが、他の多くの要素でも使用されています。以下の例を参照してください。原色の2行目のテキストの色相が暗いです。
これはこれに基づいています （ページ全体を参照） ：
複雑な情報の長いリストでは、色付きのサブヘッダーを使用してコンテンツの輪郭を描くことを検討してください。サブヘッダーの色の使用例は、Android設定にあります。
そしてもちろん、ボタン：ボタンの状態に応じて色相と色合いを追加する必要があります。これらの色相と色合いは、原色と二次色の3つのバリエーションです。そのため、これらが必要な理由は以下を参照してください。
カラーバージョン
モノクロ（ライト）バージョン
2。サイト https://www.materialpalette.com 、色を選択すると、「Divider color」についても説明されます。それは何のためですか？
仕切りはまさにそれ、仕切りです。 ここでは異なるタイプのディバイダー を確認できます。仕切りの色については、暗い背景の場合は12％の白、クリアな背景の場合は12％の黒の仕切りが推奨されます。これは RGBAの色 を使用して簡単に作成できます。例えば：
.divider{width:100%< height:1px; background:rgba(0,0,0,0.12)}
このように、透明度を設定することにより、ディバイダーは設定された色ではなく、背景の色+黒の12％になります（暗い背景の場合、白の12％の場合も同じです）。
3。 Materialpalette.comには、テキスト/アイコン、プライマリテキスト、セカンダリテキストの色もあります。 「text/icons」と「primary text」の違いは何ですか？
OK、そのサイトをガイドラインとして使用しないでください、公式の 色に関するマテリアルデザインガイドライン は非常に具体的であり、そのままにしておきますあいまいさの余地はありません。テキストについて知りたい場合は、ガイドラインを マテリアルデザイン：テキストと背景の色 にしてください。他のサイトは使用しないでください。 、またはあなたは夢中になるでしょう。
つまり、特定の質問に答えるために：プライマリテキストの色は、明るい背景で84％黒、暗い背景で84％白です。他に価値はありません。常に同じです。 セカンダリテキストの場合、84％を57％に置き換えます。そして覚えておいてください：これらは単なるガイドラインです。見やすい限り、何でもできますが、マテリアルデザインの場合、これらの値は静的。
アイコンの色については、FAB（ フローティングアクションボタン ）のときにアクセントに選択した色に応じて、常に白または黒（または非常に濃い灰色）になりますが、プライマリテキストの色を取得します通常の背景（明るいまたは暗い）の場合。ここでは常に適切に当てはまるとは限らないため、最善の判断が必要になる場合があります。そのため、「MUST BE」にあまり執着しないでください。うまく機能し、読みやすいことを確認してください。
なぜアクセントの3つの異なる色合いですか？
私の理解では、追加のアクセントシェードは、明るいまたは暗いアクセントが必要な場合に備えています。例としては、フローティングボタンが特定の画像の半分に配置されていることが考えられます。たとえば、画像と関連するアクションのコントラストがそれほど強くない場合などです。
ドキュメントから、通常は1つだけ必要だと思うので、ほとんどの場合、「アクセント」は1つだけですが、ガイドラインでは、必要に応じて他のスコープがあります。
参照： https://www.google.com/design/spec/style/color.html#color-color-schemes
サイトのマテリアルパレット（ https://www.materialpalette.com ）では、「Divider color」にも言及しています。それは何のためですか？
リストにアバターやアイコンなどの固定要素がない場合、間隔だけではタイルを分離するのに必ずしも十分ではありません。この場合、フルブリードディバイダーはリズムを作成し、個々のタイルを分離するのに役立ちます。
したがって、コンテンツのリスト間の色を定義するために使用されます。
参照： https://www.google.com/design/spec/components/dividers.html#dividers-usage
Materialpalette.comには、テキスト/アイコン、プライマリテキスト、セカンダリテキストの色もあります。 「text/icons」と「primary text」の違いは何ですか？
これは違いがよくわかりませんが、プレビュー内では何も変更されないため、MaterialPaletteの一部の見落としのように思われます。ただし、フローティングボタン内のアイコンの色を変更するためのものであり、浮き出しボタン内のテキストに使用される色と同じになると思います。
参照： https://www.google.com/design/spec/components/buttons.html#
ここにも、プライマリとセカンダリの簡単なスクリーンショットがあります。
