Materials(材料)
iOS は、奥行きの感覚を呼び起こすために使用できる半透明の効果を作成する materials (材料) (またはぼかし効果) を提供します。materials の効果により、ビューとコントロールは、前景コンテンツの邪魔をすることなく、背景コンテンツを示唆します。この効果を生み出すために、materials は背景色情報が前景ビューを通過できるようにすると同時に、背景コンテキストをぼかして読みやすさを維持します。
システムが定義した materials を使用すると、これらの効果がシステムのライトモードとダークモードに自動的に適応するため、要素はあらゆるコンテキストで見栄えがします。
ヒント
materials では、ビュー階層内に視覚効果ビューが存在する必要があります。開発者向けガイダンスについては、UIVisualEffectView (UIVisualEffectView) を参照してください。
システムが使用する材料に導かれましょう。 可能な限り、カスタムビューを、同様の機能を有効にし、同じ materials を使用しているシステム提供のビューと比較してください。
システムが提供するテキスト、塗りつぶし、グリフ、および区切り文字の色を利用しましょう。 システムが提供する色は、これらのアイテムを半透明の背景で自動的に見栄えよくします。ガイダンスについては、動的システムカラー を参照してください。
可能であれば、SF シンボルを使用してください。 動的システムカラーを使用してシンボルに色を付けたり、シンボルに鮮やかな効果を適用したりすると、シンボルはどのようなコンテクストでも見栄えがします。対照的に、フルカラーイメージは背景とのコントラストが十分でなく、背景が半透明のビューで使用すると不自然に見える場合があります。関連するガイダンスについては、SF シンボル を参照してください。
システム定義の材料と鮮やかさ
iOS は、特定の領域で使用できる materials を定義して、前景コンテンツと背景の外観の間の視覚的な分離を制御します。システムが提供する materials には、ほとんどの背景に対してうまく機能するライトバリエーションとダークバリエーションの両方が含まれています。
コンテンツコンテナ内で使用するために、iOS 13 は、透明度のレベルが異なる 4 つの materials を定義しています (各マテリアルにはダークバリアントも含まれています)。
materials を選択するときは、コントラストと視覚的な分離を考慮してください。 鮮やかな効果と組み合わせるべき materials を選択するための絶対的なルールはありません。この選択を行うときは、以下のことを考慮してください。
iOS 13 では、各 materials で機能するように特別にデザインされたラベル、塗りつぶし、区切り文字の鮮やかさの値も定義されています。鮮やかさは、背景色をサンプリングし、彩度と値を変更することにより、UI 要素を明るくしたり暗くしたりします。鮮やかな UI 要素は、materials との統合がより向上し、半透明の効果が向上します。
ラベルと塗りつぶしはそれぞれ、いくつかのレベルの鮮やかさを提供します。区切り文字には 1 つのレベルがあります。レベルの名前は、要素と背景の間の相対的なコントラストの量を示します。デフォルトのレベルのコントラストが最も高く、4 次 (存在する場合) のコントラストが最も低くなります。
四次を除いて、任意の materials のラベルに以下の鮮やかさの値を使用できます。コントラストが低すぎるため、薄い materials や極めて薄い materials に四次を使用することはお勧めしません。
すべての materials 上の塗りつぶしには、以下の鮮やかさの値を使用できます。
iOS は、すべての materials でうまく機能する区切り文字 (separator) の単一のデフォルトの鮮やかさの値を定義しています。
その意味的な事に基づいて鮮やかさの効果を選択します。 これらの効果を混ぜないでください。たとえば、区切り文字にラベル効果を使用しないでください。
