マテリアルデザイン　色について

今日は色について勉強。
かなりひどい書きかけを修正しました。

カラーの指定をする時は、端末できれいに表示できる色を推奨しているようです。
マテリアルデザインのカラーページにはキーカラー用とアクセントカラー用の推奨カラーを記載しています。(http://www.google.com/design/spec/style/color.html)

キーカラー

原色を500として、プライマリカラーとアクセントカラーを記載しています。
※バージョンがA***となっているのは、アクセント用のカラーを指します。

色の選択方法

プライマリカラーとアクセントカラーをバージョンにAがついた２つ目のパレットから選択し、それぞれの色から3色相を選択することで、プライマリカラーとアクセントカラーの色使いを制限します。

透明度と重要度

テキストやアイコンの表示を他のテキストに比べていかに重要であるか伝えるために、テキストやアイコンの不透明度を変更して表現します。特にテキストはテーマを黒と白で選んだ時の透過度が変わります。
アルファ値の設定は明度でも彩度でもないので、色のバリエーションを増やすのみは指定しやすいのかなと思った。

暗い色のテーマ

明るい色のテーマ

プライマリーカラーとアクセントカラーの指定

ツールバーとステータスバーの指定

• ステータスバーの設定 プライマリカラーの700
• ツールバーの設定 プライマリカラーの500

アクセントカラーの指定

• アクションボタン、スイッチボタンの色に適応します。
• テキストの場合。linkを設定するテキストのみなどにも利用します。

ここいらへんは、いままでのデザインの作り方とは大きくは変わらない。
コンバージョンを求める箇所に利用とかは良くつかってきたよね・・・・

アクセントカラーの特殊（？）なつかいかた

アクセントカラーの色の落とし方

アクセントカラーが機能できない場面に陥ったとき。例としてですが、アクセントカラーとして機能する為にはコントラストを十分に引き出す方向でアクセントカラーを作ります。
例えば、プライマリカラーの500が背景に使われてしまった場合、HSB色空間(Hue、Saturation、Brightness)のSaturation（彩度）を黒53% または 白100% にて調節してつかう。
画像は背景にプライマリカラーの500を使った場合で 黒53%
※ここら辺の言葉の意味が少し分からなかった・・・＞＜ 英語力無い。

テーマに関して

アプリに一貫したテーマを選択します。明るいテーマと暗いテーマを用意してあります。
テーマは、明るいと暗いによって、表面の闇、影のレベル、およびインクの要素の適切な不透明度を指定できます。ページにテンプレートが用意されています。
http://www.google.com/design/spec/style/color.html#color-themes

いい加減、次の投稿の時にはCSS整えよう。
と、心に誓う。