見出し画像

🍎HIGざっくりまとめ Foundations編 vol. 7 マテリアル

ふくやま | COMPASS

Materials（マテリアル）

Appleのプラットフォームでは、マテリアルが背景に半透明とぼかしを与えることで、前景と背景のレイヤーを視覚的に分離する感覚を得ることができます。

マテリアルは、Vibrancy（バイブランシー）と組み合わせることで、インターフェイスに視覚的な面白さを加えることができます。

Vibrancy（バイブランシー）は、マテリアルの上に表示されるテキスト、シンボル、塗りつぶしなどの前景コンテンツに適用され、マテリアルの後ろから色を前に引き出して、奥行き感を高める働きをします。

↓上の説明ではピンと来ませんね。例えばこういうメニューバーやボタン、検索窓だけ透けてるような表現です。

マテリアルとは

平たくいうと背景。コンテンツが載る土台ってことかな。
コンテンツに気を取られることなく、奥行き感や階層構造を表現することができる

  • 超薄型（半透明）〜超厚型（不透明）まである。

    • 厚い（不透明）：文字などの細かい部分のコントラストを向上させることができる

    • 薄い（半透明）：背景にあるコンテンツを目に見える形で思い出させることで、人々が文脈を保持するのを助けることができます。

  • 外観モードに適応するマテリアルもあれば、常に明るいマテリアルや常に暗いマテリアルもあります。

要点

  • コンテンツから注意を逸らさせずに奥行きや階層構造を表現できる複数のマテリアルが提供されています。

  • 特定の用途を想定した複数のマテリアルが定義されており、これらはライトモードとダークモードの両方に自動的に適応します。

    • 見た目がライトまたはダークで固定されているマテリアルもあります

  • システムのマテリアルやエフェクトは、それが持つ意味や推奨される使い方に基づいて選択する

  • マテリアルをぼかしやバイブランスのエフェクトと組み合わせる場合は、コントラストや視覚的な分離を考慮する。例えば、次のような点を考慮します。

    • マテリアルの透明度が低いほど、細かい特徴を持つテキストなどの要素のコントラストを高めることができます。

    • 半透明を使うと、後ろにあるコンテンツがうっすらと見えるので、ユーザは全体の状況を把握しやすくなります。


iOS、iPadOS

iOSとiPadOSでは、ラベル、フィル、セパレータの鮮やかさの値が定義されており、それぞれのマテリアルに対応するように特別に設計されています。標準のシステムカラーでは、鮮やかなバージョンを利用できません。

ラベルと塗りつぶしはそれぞれ数レベルの鮮やかさを提供し、セパレータはレベル1である。レベルの名前は、要素と背景の間の相対的なコントラスト量を示します。デフォルトのレベルは最も高いコントラストを持ち、第四のクアテナリーレベル（存在する場合）は最も低いコントラストを持ちます。

クアテナリー系以外のラベルは、どのようなマテリアルにも以下の鮮やかさの値を使用することができます。薄手や極薄のマテリアルにクアテナリーを使用すると、コントラストが低くなりすぎるため、お勧めしません。

すべてのマテリアルの塗りつぶしには、次のような鮮やかさの値を使用できます。

このシステムは、セパレータのデフォルトの鮮やかさの値を1つだけ提供し、あらゆるマテリアルにうまく対応します。

感想

なんかわかったようでちゃんとわかってない気がする・・・マテリアル難しい。M3のエレベーターの方がわかりやすかったな。

この記事が気に入ったらサポートをしてみませんか？