Directrices para destinos

Applies to Windows and Windows Phone

La selección táctil del destino en Windows usa toda el área de contacto de cada dedo que es detectado por un digitalizador táctil. El conjunto más grande y más complejo de datos de entrada notificado por el digitalizador se usa para aumentar la precisión cuando se determina el destino previsto (o con más probabilidades) del usuario.

En este tema se describe el uso de la geometría de contacto para la selección táctil del destino y se proporcionan procedimientos recomendados para la selección del destino en aplicaciones de Windows en tiempo de ejecución.

Consulta esta característica como parte de nuestra serie Características de aplicaciones, de principio a fin:  Interacción del usuario: entrada táctil... y mucho más

Medidas y escalas

Para mantener la coherencia con diferentes tamaños de pantalla y densidades de píxeles, todos los tamaños de destinos se representan en unidades físicas (milímetros). Puedes convertir las unidades físicas a píxeles mediante la siguiente ecuación:

Píxeles = densidad de píxeles x medida

En el ejemplo siguiente se usa esta fórmula para calcular el tamaño en píxeles de un destino de 9 mm en una pantalla de 135 píxeles por pulgada (PPI) y una meseta de escalado de 1x:

Píxeles = 135 PPI × 9 mm

Píxeles = 135 PPI × (0,03937 pulgadas por mm x 9 mm)

Píxeles = 135 PPI × 0,35433 pulgadas

Píxeles = 48 píxeles

Debes ajustar el resultado en función de cada meseta de escalado definida por el sistema.

Umbrales

Los umbrales de distancia y tiempo pueden usarse para determinar el resultado de una interacción.

Por ejemplo, cuando se detecta un contacto táctil, se registra una pulsación si el objeto se arrastra menos de 2,7 mm desde el punto del contacto táctil y el toque se levanta al cabo de 0,1 segundos o menos desde el contacto táctil. Si se mueve el dedo más allá de este umbral de 2,7 mm, el objeto se arrastra y se selecciona o se mueve (para obtener más información, consulta las instrucciones del deslizamiento transversal). Según tu aplicación, mantener presionado el dedo durante más de 0,1 segundos puede provocar que el sistema realice una interacción reveladora (para obtener más información, consulta las instrucciones para comentarios visuales).

Tamaños de los destinos

En general, establece el tamaño del destino táctil en 9 mm cuadrados o más (48 x 48 píxeles en una pantalla de 135 PPP a un nivel predefinido de escalado de 1.0x). Evita usar destinos táctiles de menos de 7 mm cuadrados.

El diagrama siguiente muestra que el tamaño del destino suele ser una combinación de un destino visual, el tamaño de destino real y el relleno entre el destino real y otros posibles destinos.

Diagrama que muestra los tamaños recomendados para el destino visual, el destino real y el espaciado.

En la tabla siguiente se ofrece una lista del tamaño mínimo y el tamaño recomendado para los componentes de un destino táctil.

Componente del destinoTamaño mínimoTamaño recomendado
Espaciado 2 mmNo corresponde
Tamaño del destino visual< 60% del tamaño real90-100% del tamaño real

La mayoría de usuarios no se darán cuenta de que un destino visual es táctil si tiene menos de 4,2 mm cuadrados (60% del tamaño del destino mínimo recomendado de 7 mm).

Tamaño real del destino7 mm cuadradosMayor que o igual a 9 mm cuadrados (48 x 48 px en 1x)
Tamaño total del destino 11 x 11 mm (aproximadamente 60 px: tres unidades de cuadrícula de 20 px en 1x) 13,5 x 13,5 mm (72 x 72 px en 1x)

Esto implica que el tamaño del destino real y el espaciado combinados debe ser superior a sus respectivos mínimos.

 

Estas recomendaciones del tamaño de destino pueden ajustarse según sea necesario para un escenario en particular. Algunas de las consideraciones que se ofrecen con estas recomendaciones son las siguientes:

  • Frecuencia de interacciones táctiles: considera hacer que los destinos que se presionan de manera repetida o frecuente sean más grandes que el tamaño mínimo.
  • Consecuencia del error: los destinos que tienen consecuencias graves si se tocan por error deberán tener un mayor espaciado y colocarse más lejos del extremo 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 la pantalla
  • Postura del dedo
  • Visualizaciones táctiles
  • Digitalizadores táctiles y de hardware

Asistencia para la selección de destinos

Windows ofrece asistencia para la selección de destinos en situaciones cuando no se pueden aplicar las recomendaciones respecto del tamaño mínimo o el espaciado que se señalan aquí, por ejemplo hipervínculos en una página web, controles de calendario, listas desplegables y cuadros combinados o selección de texto.

Las mejoras en la plataforma para selección de destinos y los comportamientos de la interfaz de usuario se combinan con la información visual (interfaz de usuario para desambiguación) para aumentar la precisión y la confianza del usuario. Para obtener más información, consulta las directrices para información visual.

Si un elemento táctil debe ser más pequeño que el tamaño mínimo recomendado para los destinos, puedes usar las técnicas siguientes para reducir al mínimo los problemas que puedan presentarse al seleccionar destinos.

Tethering

Tethering es una indicación visual (un conector desde un punto de contacto hasta el rectángulo de límite de un objeto) que se usa para indicar al usuario que está conectado a un objeto e interactúa con él, aunque el contacto de entrada no esté en contacto directo con el objeto. Esto puede ocurrir cuando:

  • Se detectó por primera vez un contacto táctil dentro de un umbral de proximidad a un objeto y este objeto se identificó como el destino más probable del contacto.
  • Se movió un contacto táctil alejándose de un objeto pero el contacto sigue estando dentro de un umbral de proximidad.

Esta característica no se expone a los desarrolladores de aplicaciones de la Tienda Windows con JavaScript.

Arrastrar

Arrastrar significa tocar en cualquier punto de un campo de destinos y deslizar el dedo para seleccionar el destino deseado sin levantarlo hasta llevarlo encima del destino buscado. Esta interacción también se denomina "activación de despegue", donde el objeto que se activa es el que se tocó último antes de levantar el dedo de la pantalla.

Usa las siguientes directrices cuando diseñes interacciones de arrastre:

  • El arrastre se usa en combinación con la interfaz de usuario de para desambiguación. Para obtener más información, consulta las directrices para información visual.
  • El tamaño mínimo recomendado para un destino táctil de arrastre es 20 px (3,75 mm en tamaño de 1x).
  • El arrastre tiene prioridad cuando se ejecuta en una superficie que puede moverse panorámicamente, como una página web.
  • Los destinos de arrastre deben estar cerca.
  • Cuando el usuario aleja el dedo de un destino de arrastre arrastrándolo, la acción se cancela.
  • El tethering a un destino de arrastre se especifica si las acciones ejecutadas por el destino no son destructivas, por ejemplo cambiar de fecha en un calendario.
  • El tethering se especifica en una sola dirección, horizontal o vertical.

Temas relacionados

Para diseñadores
Directrices para las interacciones del usuario comunes
Diseño de la interacción táctil
Para desarrolladores (HTML)
Inicio rápido: punteros
Inicio rápido: gestos y manipulaciones de DOM
Inicio rápido: gestos estáticos
Inicio rápido: gestos de manipulación
Para desarrolladores (XAML)
Inicio rápido: entrada táctil
Inicio rápido: controlar entrada de puntero
Windows.UI.Core
Windows.UI.Input
Windows.UI.Xaml.Input
Para desarrolladores (aplicación de Windows en tiempo de ejecución con DirectX con C++)
Responder a la entrada táctil (DirectX y C++)
Muestras (DOM)
Muestra de desplazamiento, movimiento panorámico y zoom HTML
Entrada: muestra de gestos instanciables
Muestras (API de aplicaciones de la Tienda Windows)
Entrada: muestra de manipulaciones y gestos (JavaScript)
Entrada: muestra de gestos de Windows 8
Entrada: muestra de eventos de entrada de usuario de XAML
Muestra de desplazamiento, movimiento panorámico y zoom XAML
Muestras (DirectX)
Muestra de entrada táctil de DirectX
Entrada: muestra de manipulaciones y gestos (C++)
Entrada: muestra de prueba de acceso táctil

 

 

Mostrar:
© 2014 Microsoft