Directrices de diseño del panel táctil

Diseñe la aplicación para que los usuarios puedan interactuar con ella a través de un panel táctil. Un panel táctil combina la entrada multitáctil indirecta con la entrada de precisión de un dispositivo señalador, como un mouse. Esta combinación hace que el panel táctil sea adecuado tanto para una interfaz de usuario optimizada para toques como para los objetivos más pequeños de las aplicaciones de productividad.

 

Las interacciones del panel táctil requieren tres cosas:

• Un panel táctil estándar o un panel táctil de precisión de Windows.

  Los paneles táctiles de precisión están optimizados para dispositivos de aplicaciones Windows. Permiten que el sistema controle determinados aspectos de la experiencia del panel táctil de forma nativa, como el seguimiento de dedos y la detección de palma, para una experiencia más coherente entre dispositivos.

• Contacto directo de uno o varios dedos en el panel táctil.

• El movimiento de los contactos táctiles (o falta del mismo, según un umbral de tiempo).

Los datos de entrada proporcionados por el sensor del panel táctil pueden ser:

• Se interpreta como un gesto físico para la manipulación directa de uno o varios elementos de la interfaz de usuario (como movimiento panorámico, rotación, cambio de tamaño o movimiento). En cambio, la interacción con un elemento a través de su ventana de propiedades u otro cuadro de diálogo se considera manipulación indirecta.
• Reconocidos como un método de entrada alternativo, como el mouse o el lápiz.
• Utilizados para complementar o modificar aspectos de otros métodos de entrada, como difuminar un trazo de tinta dibujado con un lápiz.

Un panel táctil combina la entrada multitáctil indirecta con la entrada de precisión de un dispositivo señalador, como un mouse. Esta combinación hace que el panel táctil sea adecuado tanto para la interfaz de usuario optimizada para toques como para los objetivos normalmente más pequeños de las aplicaciones de productividad y el entorno de escritorio. Optimice el diseño de la aplicación de Windows para la entrada táctil y obtenga compatibilidad con el panel táctil de forma predeterminada.

Debido a la convergencia de las experiencias de interacción compatibles con los paneles táctiles, se recomienda usar el evento PointerEntered para proporcionar comandos de interfaz de usuario de estilo mouse además de la compatibilidad integrada con la entrada táctil. Por ejemplo, use los botones de anterior y siguiente para permitir a los usuarios avanzar a través de las páginas de contenido y desplazarse por el contenido.

Los gestos e instrucciones descritos en este tema pueden ayudar a garantizar que la aplicación admita la entrada del panel táctil sin problemas y con código mínimo.

Idioma del panel táctil

Un conjunto conciso de interacciones del panel táctil se usan de forma coherente en todo el sistema. Optimice la aplicación para la entrada táctil y del mouse y este lenguaje hace que la aplicación se sienta instantáneamente familiar para los usuarios, lo que aumenta su confianza y facilita el aprendizaje y el uso de la aplicación.

Los usuarios pueden establecer mucho más gestos de teclado táctil de precisión y comportamientos de interacción de los que pueden para un panel táctil estándar. Estas dos imágenes muestran las diferentes páginas de configuración del panel táctil de Configuración > Dispositivos > ratón y panel táctil para un panel táctil estándar y un panel táctil de precisión, respectivamente.

^{Standard\ touchpad\ settings}

^{Configuración de Windows\ Precision\ Touchpad\}

Estos son algunos ejemplos de gestos optimizados para panel táctil para realizar tareas comunes.

Término	Description
Pulsación de tres dedos	Preferencia del usuario para buscar con Cortana o mostrar el Centro de actividades.
Deslizamiento de tres dedos	Preferencia del usuario para abrir la vista de tareas de escritorio virtual, mostrar escritorio o cambiar entre aplicaciones abiertas.
Pulsación de un solo dedo para la acción principal	Usa un solo dedo para pulsar un elemento e invocar su acción principal (por ejemplo, iniciar una aplicación o ejecutar un comando).
Pulsación con dos dedos para hacer clic con el botón derecho	Pulse con dos dedos simultáneamente en un elemento para seleccionarlo y mostrar comandos contextuales.
Deslizar dos dedos hacia la panorámica	El gesto de deslizar se usa principalmente para las interacciones de desplazamiento panorámico, pero también se puede usar para mover, dibujar o escribir.
Pellizcar y estirar para hacer zoom	Los gestos de pellizcar y expandir se usan normalmente para redimensionar y zoom semántico.
Presiona y desliza con un solo dedo para reorganizar	Arrastre un elemento.
Con un dedo, presiona y desliza para seleccionar texto.	Presione dentro del texto seleccionable y deslice para seleccionarlo. Pulse dos veces para seleccionar una palabra.
Zona de clic izquierda y derecha	Emular la funcionalidad de los botones izquierdo y derecho de un dispositivo de ratón.

 

Equipamiento

Consulte las capacidades del dispositivo de mouse (MouseCapabilities) para identificar qué aspectos de la interfaz de usuario de su aplicación puede acceder directamente el hardware del ratón. Se recomienda proporcionar la interfaz de usuario para la entrada táctil y del mouse.

Para obtener más información sobre cómo consultar las funcionalidades del dispositivo, consulte Identificación de dispositivos de entrada.

Comentarios visuales

• Cuando se detecta un cursor del panel táctil (a través de eventos de movimiento o desplazamiento), muestre la interfaz de usuario específica del mouse para indicar la funcionalidad expuesta por el elemento. Si el cursor del panel táctil no se mueve durante una determinada cantidad de tiempo, o si el usuario inicia una interacción táctil, haga que la interfaz de usuario del panel táctil se desvanezca gradualmente. Esto mantiene la interfaz de usuario limpia y desordenada.
• No utilice el cursor para la retroalimentación al pasar el cursor, la retroalimentación proporcionada por el elemento es suficiente (consulte la sección Cursores a continuación).
• No muestre comentarios visuales si un elemento no admite la interacción (por ejemplo, texto estático).
• No use rectángulos de foco con interacciones del panel táctil. Reserve estos para interacciones con el teclado.
• Mostrar comentarios visuales simultáneamente para todos los elementos que representan el mismo destino de entrada.

Para obtener instrucciones más generales sobre los comentarios visuales, consulte Directrices para comentarios visuales.

Cursors

Hay disponible un conjunto de cursores estándar para un puntero del panel táctil. Se usan para indicar la acción principal de un elemento.

Cada cursor estándar tiene asociada una imagen predeterminada correspondiente. El usuario o una aplicación pueden reemplazar la imagen predeterminada asociada a cualquier cursor estándar en cualquier momento. Las aplicaciones para UWP especifican una imagen de cursor a través de la función PointerCursor .

Si necesita personalizar el cursor del mouse:

• Use siempre el cursor de flecha () para los elementos que se pueden hacer clic. no use el cursor de mano que señala () para vínculos u otros elementos interactivos. En su lugar, use efectos hover (descritos anteriormente).
• Usar el cursor () para el texto seleccionable.
• Utilice el cursor de mover (cursor de ) cuando mover sea la acción principal (como arrastrar o recortar). No use el cursor de movimiento para los elementos en los que la acción principal es la navegación (por ejemplo, iconos de inicio).
• Utilice los cursores de cambio de tamaño horizontal, vertical y diagonal (, , cursor de cambio de ), cuando se puede cambiar el tamaño de un objeto.
• Usen los cursores de mano agarradora ( y ) al mover el contenido dentro de una superficie fija (como un mapa).

Artículos relacionados

• Controlar la entrada del puntero
• Identificación de dispositivos de entrada

Samples

• Ejemplo de entrada básico
• Ejemplo de entrada de baja latencia
• Ejemplo de modo de interacción del usuario
• ejemplo de elementos visuales de enfoque

Ejemplos de archivo

• Entrada: Ejemplo de capacidades del dispositivo
• Entrada: Ejemplo de eventos de entrada de usuario XAML
• Muestra de desplazamiento, movimiento panorámico y zoom de XAML
• Entrada: gestos y manipulaciones con GestureRecognizer.