Windows UI を使用した効果とエクスペリエンスの調整

[アーティクル]
03/18/2023

Windows UI には、多くの美しい効果、アニメーション、区別のための手段が用意されています。しかし、パフォーマンスとカスタマイズ性に対するユーザーの期待に応えることは、依然としてアプリケーションを成功させるための必要な要素です。ユニバーサル Windows プラットフォームでは、さまざまな機能を備えた大規模で多様なデバイスファミリーがサポートされています。すべてのユーザーを対象としたインクルーシブなエクスペリエンスを提供するには、アプリケーションをデバイス間で拡張し、ユーザー設定に配慮する必要があります。 UI を調整することにより、デバイスの機能を活用し、快適でインクルーシブなユーザーエクスペリエンスを確保するための効率的な方法が提供されます。

UI の調整は広義なカテゴリで、次の領域に関する高パフォーマンスの美しい UI を実現するための作業が含まれます。

効果のためのユーザー設定の配慮と適応
アニメーションのユーザー設定への対応
特定のハードウェア機能用の UI の最適化

ここでは、上記の領域でビジュアルレイヤーを使用して効果とアニメーションを調整する方法について説明しますが、優れたエンドユーザーエクスペリエンスを実現するためにアプリケーションを調整する方法は他にも数多くあります。さまざまなデバイス用の UI を調整し、応答性の高い UI を作成する方法については、ガイダンスドキュメントを参照してください。

ユーザーによる効果設定

ユーザーは、さまざまな理由で Windows エクスペリエンスをカスタマイズする可能性があります。アプリケーションでは、これに配慮し、適応する必要があります。エンドユーザーが制御できる領域の 1 つは、システム全体で使用される効果の種類の変更です。

透明効果設定

ユーザーがカスタマイズできるこのような効果設定の 1 つは、透明効果のオンとオフの切り替えです。これは、[設定] アプリの [個人用設定] > [色] の下にあります。また、[設定] アプリ > [簡単操作] > [ディスプレイ] の順に選択して設定することもできます。

Transparency Option in Settings

オンにすると、透明性を使用するすべての効果が、想定どおりに表示されます。これは、アクリル、HostBackdropBrush、または完全に透明ではないカスタム効果グラフに適用されます。

オフにすると、既定では XAML のアクリルブラシでこのイベントがリッスンされているため、アクリル素材は自動的に単色に戻ります。透明効果が有効になっていない場合に単色に戻る電卓アプリを次に示します。

Calculator with Acrylic Calculator with Acrylic Responding to Transparency Settings

ただし、カスタム効果の場合、アプリケーションでは UISettings.AdvancedEffectsEnabled プロパティまたは AdvancedEffectsEnabledChanged イベントに対応して、透明性のない効果を使用するように効果および効果グラフを切り替える必要があります。この例を次に示します。

public MainPage()
{
   var uisettings = new UISettings();
   bool advancedEffects = uisettings.AdvancedEffectsEnabled;
   uisettings.AdvancedEffectsEnabledChanged += Uisettings_AdvancedEffectsEnabledChanged;
}

private void Uisettings_AdvancedEffectsEnabledChanged(UISettings sender, object args)
{
    // TODO respond to sender.AdvancedEffectsEnabled
}

アニメーション設定

同様に、アプリケーションでは、UISettings.AnimationsEnabled プロパティをリッスンして、[設定] > [簡単操作] > [ディスプレイ] でのユーザー設定に基づいて、アニメーションのオンとオフを確実に切り替える必要があります。

Animations Option in Settings

public MainPage()
{
   var uisettings = new UISettings();
   bool animationsEnabled = uisettings.AnimationsEnabled;
   // TODO respond to animations settings
}

機能 API の活用

CompositionCapabilities API を活用すると、特定のハードウェアで利用できる高パフォーマンスのコンポジション機能を検出し、設計を調整して、エンドユーザーがどのデバイスでも高パフォーマンスの美しいエクスペリエンスを得られるようにすることができます。この API を使用すると、さまざまなフォームファクターで優れた効果のスケーリングを実装するために、ハードウェアシステム機能を確認できます。これにより、アプリケーションを適切に調整して、美しいシームレスなエンドユーザーエクスペリエンスを作成することが簡単になります。

この API には、アプリケーション UI の効果のスケーリングを決定するために使用できるメソッドとイベントリスナーが用意されています。この機能では、複雑なコンポジションおよびレンダリング操作をシステムでどの程度適切に処理できるかを検出し、その情報を、開発者が利用できる使いやすいモデルで返します。

コンポジション機能の使用

CompositionCapabilities 機能は、アクリル素材などの機能で既に活用されています。アクリル素材では、シナリオとハードウェアに応じて、素材により高パフォーマンスの効果が適用されます。

この API は、いくつかの簡単なステップで既存のコードに追加できます。

アプリケーションのコンストラクターで capabilities オブジェクトを取得します。
```
_capabilities = CompositionCapabilities.GetForCurrentView();
```
アプリの機能変更イベントリスナーを登録します。
```
_capabilities.Changed += HandleCapabilitiesChanged;
```
さまざまな機能レベルを処理するために、イベントコールバックメソッドにコンテンツを追加します。これは、次のようなステップになりますが、これとは異なる場合もあります。
効果を使用する場合、最初に機能オブジェクトを確認します。効果を調整する方法に応じて、条件付きチェックまたはスイッチ制御ステートメントの使用を検討します。
```
if (_capabilities.AreEffectsSupported())
{
    // Add incremental effects updates here

    if (_capabilities.AreEffectsFast())
    {
        // Add more advanced effects here where applicable
    }
}
```

完全なコード例は、[Windows UI GitHub リポジトリ] にあります。

高速の効果と低速の効果

アプリケーションでは、CompositionCapabilities API で提供されているAreEffectsSupported および AreEffectsFast メソッドからのフィードバックに基づいて、アプリケーションでは、デバイス用に最適化された他の効果を選択して、高価な効果やサポートされていない効果と交換することを決定できます。一部の効果は、常に他の効果よりもリソースを大量に消費することがわかっているため、慎重に使用する必要があります。それ以外の効果は自由に使用できます。ただし、一部のシナリオまたは組み合わせによって効果グラフのパフォーマンス特性が変わる可能性があるため、すべての効果について、チェーンおよびアニメーションを使用する場合は注意が必要です。個々の効果について経験から得られたパフォーマンス特性を次に示します。

パフォーマンスに大きな影響を与えることがわかっている効果は、ブラー (ガウス)、シャドウマスク、BackDropBrush、HostBackDropBrush、レイヤービジュアルです。これらは、ローエンドデバイス (機能レベル 9.1 から 9.3) には推奨されません。ハイエンドデバイスでは慎重に使用する必要があります。
パフォーマンスに中程度の影響を与える効果には、カラーマトリックス、特定のブレンド効果の BlendModes (明度、色、再度、色合い)、スポットライト、SceneLightingEffect、(シナリオに応じて) BorderEffect があります。これらの効果は、ローエンドデバイス上の特定のシナリオで動作する可能性がありますが、チェーンとアニメーションで使用する場合は注意が必要です。使用を 2 つ以下に制限し、切り替え時のアニメーションにのみ使用することをお勧めします。
他のすべての効果はパフォーマンスへの影響が少なく、アニメーションおよびチェーンのすべての合理的なシナリオで機能します。