Directrices para destinos táctiles

  • Artículo

Todos los elementos interactivos de la interfaz de usuario de la aplicación Windows deben ser lo suficientemente grandes como para que los usuarios accedan y usen con precisión, independientemente del tipo de dispositivo o del método de entrada.

La compatibilidad con la entrada táctil (y la naturaleza relativamente imprecisa del área de contacto táctil) requiere una mayor optimización con respecto al tamaño de destino y el diseño del control, ya que el conjunto más grande y complejo de datos de entrada notificados por el digitalizador táctil se usa para determinar el destino previsto (o más probable) del usuario.

Todos los controles de UWP se han diseñado con tamaños y diseños de destino táctil predeterminados que te permiten crear aplicaciones visualmente equilibradas y atractivas que sean cómodas, fáciles de usar e inspirar confianza.

En este tema, se describen estos comportamientos predeterminados para que puedas diseñar la aplicación para lograr la máxima facilidad de uso mediante controles de plataforma y controles personalizados (en caso de que la aplicación las requiera).

API importantes: Windows.UI.Core, Windows.UI.Input, Windows.UI.Xaml.Input

Tamaño Fluent Standard

El tamaño Fluent Standard se ha creado para proporcionar un equilibrio entre la densidad de la información y la comodidad del usuario. De hecho, todos los elementos de la pantalla se alinean con un destino de 40 x 40 píxeles efectivos (epx), que permite que los elementos de la interfaz de usuario se alineen con una cuadrícula y se escalen de forma adecuada en función del escalado de nivel de sistema.

Nota

Para obtener más información sobre los píxeles efectivos y el escalado, consulte Tamaños de pantalla y puntos de interrupción.

Para obtener más información sobre el escalado de nivel de sistema, consulta Alineación, margen, espaciado interno.

Tamaño Fluent Compact

Las aplicaciones pueden mostrar un mayor nivel de densidad de información con el ajuste de tamaño de Fluent Compact. El ajuste de tamaño compacto alinea los elementos de la interfaz de usuario con un destino epx de 32 x 32, lo que permite a los elementos de la interfaz de usuario alinearse con una cuadrícula más estrecha y escalar adecuadamente en función del escalado del nivel del sistema.

Ejemplos

El ajuste de tamaño compacto se puede aplicar en el nivel de página o cuadrícula.

Nivel de página

<Page.Resources>
    <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Page.Resources>

Nivel de cuadrícula

<Grid>
    <Grid.Resources>
        <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
    </Grid.Resources>
</Grid>

Tamaño de destino

En general, establezca el tamaño de destino táctil en un intervalo cuadrado de 7,5 mm (40 x 40 píxeles en una pantalla de 135 PPP en una meseta de escalado de 1,0x). Normalmente, los controles de UWP se alinean con el destino táctil de 7,5 mm (esto puede variar en función del control específico y de cualquier patrón de uso común). Consulte Tamaño y densidad del control para obtener más detalles.

Estas recomendaciones del tamaño de destino pueden ajustarse según sea necesario para un escenario en particular. Algunos aspectos que debe considerar:

  • Frecuencia de toques: considere la posibilidad de establecer destinos que se presionan repetidamente o con frecuencia mayores que el tamaño mínimo.
  • Consecuencia del error: los destinos que tienen consecuencias graves si se tocan en el error deben tener un relleno mayor y colocarse más lejos del borde del área de contenido. Esto se aplica especialmente a destinos que se tocan con frecuencia.
  • Posición en el área de contenido.
  • Factor de forma y tamaño de pantalla.
  • Posición del dedo.
  • Visualizaciones táctiles.

Ejemplos

Ejemplos de archivo