Materials｜HIG Foundations 日本語訳まとめvol.11
Appleプラットフォームでは、マテリアルが背景に半透明性とぼかしを与え、前景レイヤーと背景レイヤーの間に視覚的な分離感を生み出します。
■ 本noteの見方
2022年6月7日、Appleのイベント「WWDC22」に合わせHIGが改訂されていたので、その概要となる「Foundations（基礎）」のところだけザックGoogle翻訳したものをインデックスとしてまとめておきました。
https://note.com/tsutsui_design/n/nd22aa17a53f7
■ Materials (マテリアル)
マテリアルを活気と組み合わせて、インターフェイスに視覚的な関心を追加することができます。鮮やかさは、テキスト、記号、塗りつぶしなどのマテリアルの上に表示される前景コンテンツに適用され、マテリアルの後ろから色を前に引いて奥行き感を高めることで機能します。
ノート: macOSのメニューやiOSのラベルなど、一部のコンポーネントはデフォルトで鮮やかであるため、鮮やかさはすべてのアプリとゲームに影響を与える可能性があります。
ベストプラクティス
システムは、明るいモードと暗いモードの両方に自動的に適応するいくつかのマテリアルを定義します。それぞれが特定の使用法を対象としています。さらに、このシステムは、UIコンポーネントに適用できるいくつかのぼかし効果と鮮やかな効果を提供し、UIコンポーネントをマテリアルとうまく統合して、必要なプロミネンスを実現するのに役立ちます。システム定義のマテリアルとエフェクトを使用すると、アプリやゲームにネイティブな雰囲気を与え、ユーザーがアプリを切り替えるときにスムーズな移行を作成できます。
セマンティックな意味と推奨される使用法に基づいて、システムの素材と効果を選択します。システム設定によって外観や動作が変わる可能性があるため、インターフェイスに与える見かけの色に基づいてマテリアルやエフェクトを選択することは避けてください。代わりに、素材やスタイルを特定のユースケースに合わせてください。たとえば、macOSアプリのメニューにメニュー素材を使用し、iOSアプリのプライマリラベルにラベルの鮮やかなスタイルを使用し、tvOSアプリの適応可能なフルスクリーンの背景に目立つ素材を使用します。
素材の上に鮮やかな色だけを使用して、読みやすさを確保します。システム定義の鮮やかな色を使用する場合、さまざまなコンテキストで色が暗すぎたり、明るすぎたり、飽和したり、コントラストが低く見えたりすることを心配する必要はありません。たとえば、iOSは、テキスト、塗りつぶし、グリフ、および区切り文字の動的システムカラーを定義して、これらのアイテムを半透明の背景で見栄えよくします。macOSでは、すべての標準システムカラーに鮮やかなバージョンがあります。ガイダンスについては、色を参照してください。
フルカラーアイコンの代わりにSFシンボルを使用することを検討してください。フルカラー画像は、ビューの背景と十分なコントラストがない場合があり、背景が半透明の場合は不自然に見えますが、シンボルとインターフェイスアイコンは、動的なシステムカラーと鮮やかな効果で機能し、どのような状況でも見栄えがします。ガイダンスについては、SFシンボルを参照してください。
ぼかしや鮮やかな効果と組み合わせる素材を選択するときは、コントラストと視覚的な分離を考慮してください。たとえば、次のことを考慮してください。
より厚い素材は、テキストやその他の優れた機能を備えた要素のコントラストを向上させることができます
半透明性は、バックグラウンドにあるコンテンツの視覚的なリマインダーを提供することにより、人々がコンテキストを維持するのに役立ちます
このシステムは、コンテンツの邪魔をせずに奥行き感と階層構造を伝えるために使用できるいくつかの資料を提供します。非常に薄いものから非常に厚いものまで、いくつかの素材は外観モードに適応し、いくつかは常に明るいまたは常に暗いです。選択する素材に関係なく、その上に鮮やかでない色を使用することは避けたいと思います。
開発者向けガイダンスについては、UIBlurEffect.Styleを参照してください。
プラットフォームに関する考慮事項
watchOSではサポートされていません。
iOS、iPadOS
iOSとiPadOSは、各素材で機能するように特別に設計されたラベル、塗りつぶし、区切り文字の鮮やかな値を定義します。標準のシステムカラーは、鮮やかなバージョンでは使用できません。
ラベルと塗りつぶしはそれぞれ、いくつかのレベルの活気を提供します。セパレータには1つのレベルがあります。レベルの名前は、要素と背景の間の相対的なコントラストの量を示します。デフォルトのレベルのコントラストが最も高く、4次（存在する場合）のコントラストが最も低くなります。
四次を除いて、任意のマテリアルのラベルに次の鮮やかな値を使用できます。コントラストが低すぎるため、薄い素材や超薄い素材にクォータナリを使用することはお勧めしません。
すべてのマテリアルの塗りつぶしに次の鮮やかさの値を使用できます。
塗りつぶし（デフォルト）
システムは、セパレーターに単一のデフォルトの鮮やかさの値を提供します。これは、すべてのマテリアルで適切に機能します。
MacOS
macOSは、すべての標準色の鮮やかなバージョンを提供し、インターフェイスに適用される半透明、ぼかし、鮮やかさの量を定義するマテリアルを提供します。システムは、それぞれが指定された目的を持ついくつかの標準材料を提供します。たとえば、ウィンドウ、メニュー、ポップオーバー、サイドバー、タイトルバーなどのデフォルトの外観に一致するマテリアルを選択できます。開発者向けガイダンスについては、NSVisualEffectView.Materialを参照してください。
カスタムビューとコントロールで活気を与えるタイミングを選択します。構成とシステム設定に応じて、システムビューとコントロールは鮮やかさを使用して、フォアグラウンドコンテンツをバックグラウンドに対して目立たせます。さまざまなコンテキストでインターフェイスをテストして、活気が外観を向上させ、コミュニケーションを改善する時期を見つけます。
インターフェイスデザインを補完するバックグラウンドブレンディングモードを選択します。macOSは、背景コンテンツをブレンドする2つのモードを定義します。ウィンドウの後ろとウィンドウ内です。開発者向けガイダンスについては、NSVisualEffectBlendingModeを参照してください。
ウィンドウの後ろのブレンディング。このモードでは、ウィンドウの背後にあるコンテンツが透けて見え、アプリやゲームを取り巻くコンテキストの一部を保持するのに役立ちます。メニュー、シート、サイドバーなどのコンポーネントは、このモードを自動的に使用します。
ウィンドウ内ブレンディング。このモードでは、ウィンドウコンテンツが他のウィンドウコンポーネントを通して表示されます。たとえば、ツールバーはこのモードを使用して、ウィンドウコンテンツがその下をスクロールするときに、人々に連続性の感覚を与えることができます。
tvOS
軽くて半透明の素材を使用して、コンテンツを高め、新鮮な気分にさせます。暗い素材は影を隠す傾向があり、奥行きが浅くなり、コンテンツを明確に区別するのが難しくなります。より重い感覚を呼び起こしたい場合、またはコンテンツが古いことを示唆したい場合は、より暗い素材の使用を検討することをお勧めします。
たとえば、次の方法でシステムマテリアルを使用することを検討してください。
リソース
関連している
開発者向けドキュメント
ビデオ
この記事が気に入ったらサポートをしてみませんか？