Gestos, manipulaciones e interacciones (HTML)

Artículo
12/12/2015

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Con las interacciones táctiles, tu aplicación puede traducir y usar gestos físicos para emular la manipulación directa de los elementos de la interfaz de usuario.

Las interacciones táctiles proporcionan una experiencia natural y realista cuando los usuarios interactúan con los elementos de la pantalla. En cambio, interactuar con un objeto a través de su ventana de propiedades u otro cuadro de diálogo se considera una manipulación indirecta. Windows también admite interacciones táctiles en los diferentes modos y dispositivos, incluidos la entrada táctil, el mouse y el lápiz.

Las API de la plataforma de Windows en tiempo de ejecución admiten las interacciones del usuario a través de tres tipos de eventos de interacción: gestos, puntero y manipulación.

Los eventos de puntero se usan para obtener información de contacto básica, como la ubicación y el tipo de dispositivo, e información más puntual, como presión y geometría del contacto, y para admitir interacciones más complejas.
Los eventos de gestos se usan para controlar las interacciones de un solo dedo estáticas, como pulsar y pulsar y sostener (la doble pulsación y la pulsación derecha derivan de estos gestos básicos).
Los eventos de manipulación se usan para las interacciones multitoque dinámicas, como reducir y ampliar, y las interacciones que usan datos de inercia y velocidad, como desplazar y desplazar lateralmente, hacer zoom y girar. Nota La información proporcionada por los eventos de manipulación no identifica la interacción. Especifica los datos de entrada, como posición, diferencia de traslación y velocidad. Estos datos se usan para determinar la manipulación y llevar a cabo la interacción.

Consulta estos inicios rápidos para más información:

A continuación describiremos la relación entre los gestos, las manipulaciones y las interacciones.

Gestos

Un gesto es el acto físico o movimiento ejecutado en el dispositivo de entrada o por él (dedo, dedos, pluma/lápiz, mouse, etcétera). Por ejemplo, para iniciar, activar o invocar un comando, pulsarías con un dedo en un dispositivo de entrada táctil o panel táctil (equivalente a hacer clic con un mouse, pulsar con un lápiz o presionar Entrar en un teclado).

Este es el conjunto básico de gestos táctiles para manipular la interfaz de usuario y realizar una interacción.

Nombre	Tipo	Descripción
Pulsar	Gesto estático	Un dedo toca la pantalla y se levanta.
Pulsar y sostener	Gesto estático	Un dedo toca la pantalla y se queda en el lugar.
Deslizar	Gesto de manipulación	Uno o más dedos tocan la pantalla y se mueven en la misma dirección.
Deslizar rápidamente	Gesto de manipulación	Uno o más dedos tocan la pantalla y se mueven una corta distancia en la misma dirección.
Girar	Gesto de manipulación	Dos o más dedos tocan la pantalla y se mueven describiendo un arco en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj.
Reducir	Gesto de manipulación	Dos o más dedos tocan la pantalla y se acercan entre sí.
Ampliar	Gesto de manipulación	Dos o más dedos tocan la pantalla y se alejan entre sí.

Manipulaciones

Una manipulación es la reacción o respuesta inmediata y continua que tiene un objeto o una interfaz de usuario ante un gesto. Por ejemplo, los gestos de deslizar y deslizar rápidamente suelen hacer que un elemento o una interfaz de usuario se muevan de alguna manera.

La interacción es el resultado final de una manipulación, el modo en que lo manifiesta el objeto en la pantalla y en la interfaz de usuario.

Interacciones

Las interacciones dependen de la manera en que se interpreta una manipulación y del comando o la acción que esta da como resultado. Por ejemplo, tanto el gesto de deslizar como el de deslizar rápidamente pueden mover un objeto, pero los resultados son diferentes en función de si se cruza un umbral de distancia. Deslizar puede usarse para arrastrar un objeto o para desplazar una vista lateralmente, mientras que deslizar rápidamente puede usarse para seleccionar un elemento o mostrar la AppBar.

En esta sección se describen algunas interacciones comunes.

Aprendizaje

El gesto de pulsar y sostener muestra información detallada o elementos visuales didácticos (por ejemplo, información sobre herramientas o un menú contextual) sin confirmar una acción o un comando. Si se inicia un gesto de deslizar mientras se muestra el elemento visual, es posible desplazar lateralmente. Para más información, consulta las directrices para información visual.

Interacción de aprendizaje

Comandos

El gesto de pulsar invoca una acción principal, por ejemplo, iniciar una aplicación o ejecutar un comando.

Interacción de comandos

Movimiento panorámico

El gesto de deslizar se usa principalmente para interacciones de movimiento panorámico pero también puede usarse para mover, dibujar o escribir. El movimiento panorámico es una técnica optimizada para la funcionalidad táctil que permite navegar distancias cortas y explorar conjuntos pequeños de contenido en una sola vista (por ejemplo, la estructura de carpetas de un equipo, una biblioteca de documentos o un álbum de fotos). El desplazamiento lateral, equivalente al desplazamiento con un mouse o teclado, es necesario solo cuando la cantidad de contenido presente en la vista hace que el área de contenido desborde el área visible. Para más información, consulta las directrices para desplazamiento lateral.

Interacción de movimiento panorámico

Aplicación de zoom

Los gestos de reducir y ampliar se usan para tres tipos de interacción: zoom óptico, cambio de tamaño y zoom semántico.

Zoom óptico y cambio de tamaño

El zoom óptico ajusta el nivel de aumento del área de contenido en su totalidad para obtener una vista más detallada del contenido. El cambio de tamaño, en cambio, es una técnica para ajustar el tamaño relativo de uno o más objetos en el área de contenido sin cambiar la vista del área de contenido. Las dos imágenes superiores que se incluyen aquí muestran un zoom óptico y las dos imágenes inferiores muestran el cambio de tamaño de un rectángulo en la pantalla sin cambiar el tamaño de otros objetos. Para más información, consulta las directrices para zoom óptico y cambio de tamaño.

Interacción de zoom óptico

Interacción de cambio de tamaño

Zoom semántico

El zoom semántico es una técnica optimizada para el tacto para presentar datos estructurados o contenidos en una vista única (por ejemplo, la estructura de carpetas de un equipo, una biblioteca de documentos o un álbum de fotos) y navegar por ellos sin necesidad de incluir controles de movimiento panorámico, desplazamiento o vista de árbol. El zoom semántico ofrece dos vistas diferentes del mismo contenido ya que permite ver más detalles cuando se acerca la vista y menos cuando se aleja. Para obtener más información, consulta las directrices para zoom semántico.

Interacción de zoom semántico

Rotar

El gesto de girar simula la experiencia de rotar un trozo de papel sobre una superficie plana. La interacción se ejecuta colocando dos dedos sobre el objeto y girando un dedo alrededor del otro o los dos dedos alrededor de un punto central al tiempo que se gira la mano en la dirección deseada. Puedes usar dos dedos de la misma mano o uno de cada mano. Si deseas obtener más información, consulta las directrices para rotación.

Interacción de rotación

Seleccionar y mover

Los gestos de deslizar y deslizar rápidamente se usan en una manipulación de deslizamiento transversal, un movimiento perpendicular a la dirección de movimiento panorámico del área de contenido. Esto se interpreta como una interacción de selección o de movimiento (arrastrar) cuando se cruza un umbral de distancia. Este diagrama describe esos procesos. Para obtener más información, consulta las directrices para el deslizamiento transversal.

Interacciones seleccionar y arrastrar y colocar

Visualización de barras de comandos

El gesto de deslizar rápidamente revela varias barras de comandos o la pantalla de inicio de sesión.

Los comandos de la aplicación aparecen al deslizar rápidamente desde el borde inferior o superior de la pantalla. Usa la AppBar para mostrar los comandos de la aplicación.

Visualización de comandos de la aplicación

Para mostrar los comandos del sistema se ejecuta el gesto de deslizar rápidamente desde el borde derecho. Para mostrar aplicaciones usadas recientemente se ejecuta el gesto de deslizar rápidamente desde el borde izquierdo y para mostrar comandos de acoplamiento o cierre se ejecuta el gesto de deslizar rápidamente desde el borde superior hacia abajo.

Visualización de comandos del sistema