効果 & Windows UI を使用してエクスペリエンスを調整することTailoring effects & experiences using Windows UI

Windows UI は、差別化要因の多くの美しい効果、アニメーション、および手段を提供します。Windows UI provides many beautiful effects, animations, and means for differentiation. ただし、パフォーマンスとカスタマイズ性のためのユーザーの期待を満たすが成功したアプリケーションを作成するのに必要です。However, meeting user expectations for performance and customizability is still a necessary part of creating successful applications. ユニバーサル Windows プラットフォームには、さまざまな機能と機能が含まれる、デバイスの大規模で多様なファミリがサポートしています。The Universal Windows Platform supports a large, diverse family of devices, which have different features and capabilities. すべてのユーザーに対して、包括的なエクスペリエンスを提供するためには、デバイス間で、アプリケーションのスケールをことを確認し、ユーザー設定を尊重する必要があります。In order to provide an inclusive experience for all your users, you need to ensure your applications scale across devices and respect user preferences. UI を調整することと、デバイスの機能を活用し、快適になり、包括的なユーザー エクスペリエンスを実現する効率的な方法を提供できます。UI tailoring can provide an efficient way to leverage a device’s capabilities and ensure a pleasant and inclusive user experience.

パフォーマンスの高い、美しい UI に関して、次の領域の作業を包括的な広範なカテゴリは、UI を調整すること。UI tailoring is a broad category encompassing work for performant, beautiful UI with respect to the following areas:

  • 尊重し、効果のユーザー設定に合わせて調整Respecting and adapting to user settings for effects
  • アニメーションのユーザー設定への対応Accommodating user settings for animations
  • 特定のハードウェア機能の UI を最適化します。Optimizing UI for the given hardware capabilities

ここでは、上記の領域でビジュアル レイヤーを使用して効果とアニメーションを調整する方法について説明します。優れたエンド ユーザー エクスペリエンスを保証するためにアプリケーションを調整する方法は他にも多くあります。Here, we'll cover how to tailor your effects and animations with the Visual Layer in the areas above, but there are many other means to tailor your application to ensure a great end user experience. さまざまなデバイスに合わせて 、UI を調整 し、レスポンシブな UI を作成 する方法に関するガイダンス ドキュメントを参照できます。Guidance docs are available on how to tailor your UI for various devices and create responsive UI.

ユーザー設定の効果User effects settings

ユーザーは、さまざまな理由から、アプリケーションが尊重しに適応する必要があります Windows エクスペリエンスをカスタマイズできます。Users may customize their Windows experience for a variety of reasons, which applications should respect and adapt to. エンド ユーザーを制御できる 1 つの領域は、システム全体で使用される表示の副作用の種類を変更します。One area end users can control is changing the types of effects they see used throughout their system.

透明度の設定の効果Transparency effects settings

ユーザーがカスタマイズできるこのような効果設定を 1 つは、透明効果オン/オフにすることです。One such effect setting users can customize is turning transparency effects on/off. パーソナル化の下で、設定アプリで確認できます > 色、または [設定] アプリを使用 > コンピューターの簡単操作 > 表示します。This can be found in the Settings app under Personalization > Colors, or through Settings app > Ease of Access > Display.

透明度オプションの設定

オンにすると、期待どおりに透明度を使用する影響が表示されます。When turned on, any effect that uses transparency will appear as expected. これは、アクリル、HostBackdropBrush、または完全に不透明でない任意のカスタム効果グラフに適用されます。This applies to Acrylic, HostBackdropBrush, or any custom effect graph that is not fully opaque.

オフのときアクリル素材が自動的にフォールバックを純色ため、XAML の acrylic ブラシが既定でこのイベントをリッスンします。When turned off, acrylic material will automatically fall back to a solid color because XAML's acrylic brush has listened to this event by default. ここでは、電卓アプリケーションを適切にフォールバックを純色を透明効果が有効になっていないときに表示されます。Here, we see the calculator app appropriately falling back to a solid color when transparency effects are not enabled:

アクリル電卓 アクリル透明度の設定への応答での計算ツールCalculator with Acrylic Calculator with Acrylic Responding to Transparency Settings

ただし、任意のカスタム エフェクト アプリケーションの必要がありますに応答する、 UISettings.AdvancedEffectsEnabledプロパティまたはAdvancedEffectsEnabledChangedイベントとスイッチ アウト影響/影響透過性がない効果を使用するグラフ。However, for any custom effects the application needs to respond to the UISettings.AdvancedEffectsEnabled property or AdvancedEffectsEnabledChanged event and switch out the effect/effect graph to use an effect that has no transparency. この例を次に。An example of this is below:

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
}

アニメーションの設定Animations settings

同様に、アプリケーションがリッスンして、応答する必要があります、 UISettings.AnimationsEnabledアニメーションのことを確認するプロパティがオンまたはオフに設定でユーザー設定に基づいて > コンピューターの簡単操作 > 表示します。Similarly, applications should listen and respond to the UISettings.AnimationsEnabled property to ensure animations are turned on or off based on user settings in Settings > Ease of Access > Display.

アニメーション設定のオプション

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

API の機能を活用します。Leveraging the capabilities API

利用して、 CompositionCapabilities Api どの合成で各機能は使用とパフォーマンスの高い特定のハードウェアを検出してエンドユーザーの高性能、美しいエクスペリエンスを取得することを確認するデザインの調整デバイスです。By leveraging the CompositionCapabilities APIs, you can detect which composition features are available and performant on given hardware and tailor the design to ensure end users get a performant and beautiful experience on any device. Api は、正常な効果がさまざまなフォーム ファクターでスケーリングを実装するためにハードウェア システムの機能を確認するための手段を提供します。The APIs provide a means to check hardware system capabilities in order to implement graceful effect scaling across a variety of form factors. これにより、簡単に美しいを作成するアプリケーションとシームレスなエンド ユーザー エクスペリエンスを適切に調整できます。This makes it easy to appropriately tailor the application to create a beautiful and seamless end user experience.

この API は、メソッドと効果をアプリケーションの UI の決定事項を評価に使用できるイベント リスナーを提供します。This API provides methods and an event listener that can be used to make effect scaling decisions for the application UI. 機能は、システムが複雑な構成と、レンダリング操作を処理する方法もを検出し、使いやすいモデルを利用する開発者向けの情報を返します。The feature detects how well the system can handle complex composition and rendering operations and then returns the information in an easy-to-consume model for developers to utilize.

コンポジション機能を使用してください。Using composition capabilities

CompositionCapabilities 機能は既にアクリル素材を場所、マテリアルはフォールバックして、シナリオとハードウェアに応じてより高いパフォーマンス効果などの機能の活用されています。The CompositionCapabilities functionality is already being leveraged for features like Acrylic material, where the material falls back to a more performant effect depending on the scenario and hardware.

API は、いくつかの簡単な手順で既存のコードに追加できます。The API can be added to existing code in a few easy steps.

  1. アプリケーションのコンス トラクターで機能オブジェクトを取得します。Acquire the capabilities object in your application’s constructor.

    _capabilities = CompositionCapabilities.GetForCurrentView();
    
  2. アプリの機能変更イベント リスナーを登録します。Register a capabilities changed event listener for your app.

    _capabilities.Changed += HandleCapabilitiesChanged;
    
  3. コンテンツは、さまざまな機能レベルを処理するイベントのコールバック メソッドを追加します。Add content to the event callback method to handle various capabilities levels. これは、次の手順を次のようなことができない可能性がありますもかまいません。This may or may not be similar to the next step below.

  4. 効果を使用する場合は、まず機能オブジェクトを確認します。When using effects, check the capabilities object first. 条件付きチェックの使用を検討するか、または効果を調整する方法に応じて、コントロール ステートメントを切り替えます。Consider using conditional checks or switch control statements, depending on how you want to tailor the effects.

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

全体のコード例で確認できます、 [Windows UI の Github リポジトリ](https://github.com/microsoft/WindowsCompositionSamples/tree/master/SampleGallery/Samples/SDK 15063/CompCapabilities)します。Full example code can be found on the [Windows UI Github repo](https://github.com/microsoft/WindowsCompositionSamples/tree/master/SampleGallery/Samples/SDK 15063/CompCapabilities).

低速の効果と高速Fast vs. slow effects

提供されたフィードバックに基づくAreEffectsSupportedAreEffectsFast CompositionCapabilities API のメソッドは、アプリケーションは、のコストがかかったり、サポートされていない効果をスワップすることもできますその他の効果の任意のデバイス用に最適化されます。Based on feedback from the provided AreEffectsSupported and AreEffectsFast methods in the CompositionCapabilities API, the application can decide to swap expensive or unsupported effects for other effects of their choice that are optimized for the device. 効果をいくつかが明らかに一貫して他のユーザーよりもリソースを使用し、適度に使用する必要があり、その他の効果をより自由に使用できます。Some effects are known to consistently be more resource intensive than others and should be used sparingly, and other effects can be used more freely. すべての効果のただし、注意する必要があります使用効果グラフのパフォーマンス特性を変更することがありますチェーンといくつかのシナリオの組み合わせとアニメーション化するときに。For all effects, however, care should be used when chaining and animating as some scenarios or combinations may change the performance characteristics of the effect graph. 次には、個々 のエフェクトのいくつかの経験則パフォーマンス特性を示します。Below are some rule of thumb performance characteristics for individual effects:

  • 高パフォーマンスの影響を与えることがわかっている効果、次のように – ガウスぼかしシャドウ マスク、BackDropBrush、HostBackDropBrush、ビジュアル レイヤー。Effects that are known to have high performance impact are as follows – Gaussian Blur, Shadow Mask, BackDropBrush, HostBackDropBrush, and Layer Visual. これらは、ローエンド デバイスの場合は推奨されません(機能レベル 9.1 9.3)、ハイ エンド デバイスで慎重に使用する必要があります。These are not recommended for low end devices (feature level 9.1-9.3), and should be used judiciously on high end devices.
  • 中程度のパフォーマンスへの影響を効果にカラー行列を特定ブレンド効果 BlendModes (光度、色、鮮やかさ、および Hue) は、スポット ライト、SceneLightingEffect、および (シナリオによって異なる) BorderEffect します。Effects with medium performance impact include Color Matrix, certain Blend Effect BlendModes (Luminosity, Color, Saturation, and Hue), SpotLight, SceneLightingEffect, and (depending on scenario) BorderEffect. ローエンドのデバイスで特定のシナリオでこれらの効果が動作しますが、チェーンとアニメーション化するときに、注意を使用する必要があります。These effects may work with certain scenarios on low end devices, but care should be used when chaining and animating. 以下に 2 つの使用を制限して、遷移のみをアニメーション化をお勧めします。Recommend restricting use to two or less and animating on transitions only.
  • 他のすべての効果は、低パフォーマンスに影響し、アニメーション化すると、チェーンのすべての妥当なシナリオでは機能します。All other effects have low performance impact and work in all reasonable scenarios when animating and chaining.