Material Design 3 要点まとめ #5 Interaction states

Material Design 3 ガイドラインの要点をまとめたものです。
第5回はInteraction statesの章。ステートレイヤーの基本法則など、コンポーネントの「状態」の表現についての解説です。

Colorの章で説明されている用語（roleとか）が前提になってるので、そっちを先に読んだほうがいいかも。あとたぶん個別のコンポーネントのガイドラインと合わせて行ったり来たりしながら読んだほうが理解しやすいです。

Interaction states – Material Design 3

要点

・ステートレイヤー：要素の「状態」を表す半透明の覆い
・ステートレイヤーの色は、その本体の要素の配色から得られる
・不透明度の変化で「状態」を表現する
・要素自体の色の変化で表現される「状態」もある

ステートレイヤー：要素の「状態」を表す半透明の覆い

• UIコンポーネントには「ステートレイヤー」という、要素の「状態」を表す半透明の覆いがある。

• レイヤーは要素全体を覆うか、要素の上に円形にかぶさる。

• 一度に適用できるステートレイヤーは1つだけ。

ステートレイヤーの色は、その本体の要素の配色から得られる

• 各ステートに対して一定の不透明度を持つオーバーレイで、本体に使用されている色が適用される。本体のコンテンツ、アイコンの色、またはアイコンが存在しない場合はラベルのテキストの色など。

• 例えば…

  • enabled スタイルがコンテナにセカンダリ コンテナ色を使用し、コンテンツにオンセカンダリ コンテナ色を使用している場合、ステート レイヤーはオンセカンダリ コンテナ色のオーバーレイになる。

  • enabled スタイルがコンテナにサーフェス色を、コンテンツにプライマリ色を使用する場合、ステートレイヤーはプライマリ色のオーバーレイになる。

怒涛のカタカナですね。？？？となったらColorの章を先に読みましょう。

Color system – Material Design 3

不透明度の変化で「状態」を表現する

• 各ステートの不透明度には一定の割合を使用する。デフォルトでは以下が設定されている。

  • ホバー（hover）：8%

  • フォーカス（focus）：12%

  • 押下（press）：12%

  • ドラッグ（drag）：16%

要素自体の色の変化で表現される「状態」もある

• 活性（activated）や選択（selected）の状態が存在するコンポーネントは、コンテナやコンテンツの色を直接変更する。セレクトボックスやナビゲーションバーなど。

• 無効な状態（disabled）を表すときも、コンテナやコンテンツの色を直接変更する。

  • コンテナ：オンサーフェス色 - 12%

  • コンテンツ：オンサーフェス色 - 38%