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. 사용자가 제어할 수 있는 한 가지 영역은 시스템 전체에서 사용 되는 효과의 유형을 변경 하는 것입니다.One area end users can control is changing the types of effects they see used throughout their system.

투명도 효과 설정Transparency effects settings

사용자가 사용자 지정할 수 있는 효과 중 하나는 투명도 효과를 설정/해제 하는 것입니다.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의 아크릴 브러시가 기본적으로이 이벤트를 수신 하기 때문에 아크릴 재질이 단색으로 자동 대체 됩니다.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

그러나 사용자 지정 효과의 경우 응용 프로그램은 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

마찬가지로 응용 프로그램은 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 기능은 아크릴 material과 같은 기능을 위해 이미 활용 되 고 있으며,이는 시나리오 및 하드웨어에 따라 자료가 보다 뛰어난 효과로 대체 됩니다.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. 효과를 조정 하는 방법에 따라 조건부 검사 또는 switch 제어 문을 사용 하는 것이 좋습니다.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

CompositionCapabilities API에서 제공 된 AreEffectsSupportedAreEffectsFast 메서드의 피드백에 따라 응용 프로그램은 장치에 최적화 된 다른 효과를 위해 비용이 많이 들고 지원 되지 않는 효과를 교환 하도록 결정할 수 있습니다.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.
  • 중간 성능 영향을 주는 효과는 색 매트릭스, 특정 Blend 효과 BlendModes (광도, 색, 채도 및 색상), 스포트라이트, 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. 두 개 이하로 사용을 제한 하 고 전환에만 애니메이션 효과를 주는 것이 좋습니다.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.