Adaptación de efectos y experiencias mediante la interfaz de usuario de Windows

2025-06-10

La interfaz de usuario de Windows proporciona muchos efectos hermosos, animaciones y medios para la diferenciación. Sin embargo, cumplir las expectativas del usuario para el rendimiento y la personalización sigue siendo una parte necesaria de la creación de aplicaciones correctas. La Plataforma universal de Windows admite una familia grande y diversa de dispositivos, que tienen diferentes características y funcionalidades. Para proporcionar una experiencia inclusiva para todos los usuarios, debe asegurarse de que las aplicaciones se escalan entre dispositivos y respetan las preferencias del usuario. La personalización de la interfaz de usuario puede proporcionar una manera eficaz de aprovechar las funcionalidades de un dispositivo y garantizar una experiencia de usuario agradable e inclusiva.

La personalización de la interfaz de usuario es una categoría amplia que abarca el trabajo para una interfaz de usuario de alto rendimiento y estética en las siguientes áreas:

Respetar y adaptarse a la configuración de efectos del usuario
Adaptación de la configuración del usuario para animaciones
Optimización de la interfaz de usuario para las funcionalidades de hardware dadas

Aquí trataremos cómo adaptar sus efectos y animaciones con la capa visual en las áreas anteriores, pero hay muchos otros medios para adaptar la aplicación para garantizar una excelente experiencia del usuario final. Los documentos de instrucciones están disponibles sobre cómo adaptar la de la interfaz de usuario para varios dispositivos y crear una interfaz de usuario con capacidad de respuesta.

Configuración de efectos de usuario

Los usuarios pueden personalizar su experiencia de Windows por diversas razones, a las que las aplicaciones deben respetar y adaptarse. Un área que los usuarios finales pueden controlar es cambiar los tipos de efectos que ven en todo su sistema.

Configuración de efectos de transparencia

Uno de estos efectos que los usuarios pueden personalizar es activar o desactivar los efectos de transparencia. Esto se puede encontrar en la aplicación Configuración en Personalización > Colores, o a través de la aplicación Configuración > Facilidades de Acceso > Pantalla.

Opción de transparencia de en configuración

Cuando se activa, cualquier efecto que use transparencia aparecerá según lo previsto. Esto se aplica a Acrylic, HostBackdropBrush o a cualquier gráfico de efectos personalizado que no sea totalmente opaco.

Cuando se desactiva, el material acrílico volverá automáticamente a un color sólido porque el pincel acrílico de XAML ha capturado este evento de forma predeterminada. Aquí, vemos que la aplicación de calculadora se revierte adecuadamente a un color sólido cuando los efectos de transparencia no están habilitados:

calculadora con acrílico que responde a la configuración de transparencia

Sin embargo, para cualquier efecto personalizado, la aplicación debe responder a la propiedad UISettings.AdvancedEffectsEnabled o al evento AdvancedEffectsEnabledChanged y cambiar el gráfico de efectos/efectos para usar un efecto sin transparencia. A continuación se muestra un ejemplo de esto:

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
}

Configuración de animaciones

Del mismo modo, las aplicaciones deben escuchar y responder a la propiedad UISettings.AnimationsEnabled para asegurarse de que las animaciones están activadas o desactivadas en función de la configuración del usuario en Configuración > Facilidad de Acceso > Pantalla.

Opción de animaciones de en la Configuración

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

Aprovechamiento de la API de funcionalidades

Al aprovechar las API de CompositionCapabilities, puede detectar qué características de composición están disponibles y funcionan en hardware determinado y adaptar el diseño para garantizar que los usuarios finales obtengan una experiencia eficaz y hermosa en cualquier dispositivo. Las APIs proporcionan un medio para comprobar las capacidades del sistema de hardware con el fin de implementar un escalado eficiente de efectos en una variedad de factores de forma. Esto facilita la adaptación adecuada de la aplicación para crear una experiencia de usuario final hermosa y sin problemas.

Esta API proporciona métodos y un agente de escucha de eventos que se pueden usar para tomar decisiones de escalado de efectos para la interfaz de usuario de la aplicación. La característica detecta qué tan bien el sistema puede controlar las operaciones complejas de composición y representación y, a continuación, devuelve la información en un modelo fácil de consumir para que los desarrolladores los usen.

Uso de funcionalidades de composición

La funcionalidad CompositionCapabilities ya se está aprovechando para características como el material acrílico, donde el material vuelve a un efecto más eficaz en función del escenario y el hardware.

La API se puede agregar al código existente en unos pocos pasos sencillos.

Adquiera el objeto capabilities en el constructor de la aplicación.
```
_capabilities = CompositionCapabilities.GetForCurrentView();
```
Registre un agente de escucha de eventos modificado por las funcionalidades de la aplicación.
```
_capabilities.Changed += HandleCapabilitiesChanged;
```
Agregue contenido al método de devolución de llamada del evento para gestionar varios niveles de capacidades. Esto puede ser o no similar al siguiente paso siguiente.

Al usar efectos, compruebe primero el objeto capabilities. Considere usar comprobaciones condicionales o instrucciones de control selectivo, en función de cómo desee adaptar los efectos.

if (_capabilities.AreEffectsSupported())
{
    // Add incremental effects updates here

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

El código de ejemplo completo se puede encontrar en el repositorio de Github de la interfaz de usuario de Windows de .

Efectos rápidos frente a lentos

En función de la retroalimentación de los métodos AreEffectsSupported y AreEffectsFast proporcionados en la CompositionCapabilities API, la aplicación puede decidir sustituir efectos costosos o no admitidos por otros efectos de su elección que estén optimizados para el dispositivo. Algunos efectos se sabe que son más intensivos en recursos que otros y se deben usar con moderación, y otros efectos se pueden usar más libremente. Sin embargo, para todos los efectos, se debe usar cuidado al encadenar y animar, ya que algunos escenarios o combinaciones pueden cambiar las características de rendimiento del gráfico de efectos. A continuación se muestran algunas de las características de rendimiento general para efectos individuales:

Los efectos conocidos por tener un impacto significativo en el rendimiento son los siguientes: Desenfoque gaussiano, Máscara de sombra, BackDropBrush, HostBackDropBrush y Visual de capa. Estos dispositivos no se recomiendan para dispositivos de gama baja (nivel de característica 9.1-9.3), y deben usarse con criterio en dispositivos de gama alta.
Los efectos con un impacto medio en el rendimiento incluyen Color Matrix, ciertos modos de fusión del efecto Blend (Luminosidad, Color, Saturación y Matiz), SpotLight, SceneLightingEffect y (dependiendo del escenario) BorderEffect. Estos efectos pueden funcionar con ciertos escenarios en dispositivos de gama baja, pero debe tenerse cuidado al encadenar y animar. Se recomienda restringir el uso a dos o menos y animar solo en transiciones.
Todos los demás efectos tienen un bajo impacto de rendimiento y funcionan en todos los escenarios razonables al animar y encadenar.

Compartir a través de