Directrices para deslizamiento transversal

Applies to Windows and Windows Phone

Usa el gesto de deslizamiento transversal para permitir seleccionar con el gesto de deslizar rápidamente y las interacciones de arrastrar (mover) con el gesto de deslizar.

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

Qué hacer y qué no hacer

  • Usa el deslizamiento transversal para listas y colecciones que se desplazan en una sola dirección.
  • Usa el deslizamiento transversal para la selección de elementos cuando la interacción de pulsar se utilice con otra finalidad.
  • No uses el deslizamiento transversal para agregar elementos a una cola.

Instrucciones de uso adicionales

Las interacciones de seleccionar y arrastrar solo se pueden realizar dentro de un área de contenido que sea desplazable en una dirección (vertical u horizontal). Para que funcionen, una dirección de movimiento panorámico debe estar bloqueada y el gesto se debe realizar en la dirección perpendicular a la del movimiento panorámico.

Aquí te mostramos cómo seleccionar y arrastrar un objeto con un deslizamiento transversal. La imagen de la izquierda muestra que se selecciona un elemento si el gesto de deslizar rápidamente no cruza un umbral de distancia antes de que se levante el contacto y se suelte el objeto. La imagen de la derecha muestra que se arrastra el objeto si el gesto de deslizar cruza un umbral de distancia.

Diagrama que muestra los procesos de seleccionar, y arrastrar y colocar.

En el siguiente diagrama se muestran las distancias de umbral que se usan en la interacción deslizar transversalmente.

Captura de pantalla que muestra los procesos de seleccionar, y arrastrar y colocar.

Para preservar la función de movimiento panorámico, se debe cruzar un pequeño umbral de 2,7 mm (aproximadamente 10 píxeles en la resolución de destino) antes de que se active la interacción de seleccionar o arrastrar. Este pequeño umbral ayuda al sistema a diferenciar entre deslizar transversalmente y mover panorámicamente. También garantiza que el gesto de pulsar se distingue de los gestos de deslizar transversalmente y mover panorámicamente.

Esta imagen muestra cómo un usuario toca un elemento de la interfaz de usuario, pero mueve el dedo ligeramente hacia abajo al hacer contacto. Sin ningún umbral, la interacción se interpretaría como deslizar transversalmente a causa del movimiento vertical inicial. Con el umbral, el movimiento se interpreta correctamente como movimiento panorámico horizontal.

Captura de pantalla que muestra el umbral de desambiguación de seleccionar y arrastrar y colocar.

Aquí encontrarás algunas directrices a tener en cuenta a la hora de incluir la funcionalidad de deslizar transversalmente en tu aplicación.

Usa el deslizamiento transversal para listas y colecciones que se desplazan en una sola dirección. Para más información, consulta el tema sobre la adición de controles ListView.

Nota  En casos en que el área de contenido puede moverse panorámicamente en dos direcciones, por ejemplo en un explorador web o un lector de libros electrónicos, conviene usar la interacción sincronizada de pulsar y sostener para invocar el menú contextual para objetos como imágenes e hipervínculos.

Movimiento panorámico horizontal, lista de dos dimensionesMovimiento panorámico vertical, lista de una dimensión
Una lista de dos dimensiones con movimiento panorámico horizontal. Arrastra verticalmente para seleccionar o mover un elemento.Una lista de una dimensión con movimiento panorámico vertical. Arrastra horizontalmente para seleccionar o mover un elemento.

 

Seleccionar

Seleccionar es el marcado de uno o más objetos sin que haya inicio o activación. Esta acción es similar a un clic sencillo con el mouse o la tecla Mayús y un clic del mouse sobre uno o varios objetos.

Para seleccionar mediante deslizar transversalmente, se toca un elemento y se suelta después de una interacción breve de arrastre. Este método de selección prescinde del modo de selección dedicada y de la interacción con intervalo de pulsar y sostener que requieren otras interfaces táctiles. Tampoco entra en conflicto con la interacción de pulsar para activación.

Además de la limitación del umbral de distancia, la selección mediante el deslizamiento transversal está restringida a un área de umbral de 90°, como se ve en el diagrama siguiente. Si el objeto se arrastra fuera del área, no queda seleccionado.

Diagrama que muestra el área de umbral de selección.

La interacción mediante el deslizamiento transversal se complementa con una interacción temporal de pulsar y sostener, lo que también se denomina interacción "reveladora". Esta interacción complementaria activa una animación que indica qué acción se puede realizar en el objeto. Si deseas obtener más información sobre la interfaz de usuario para desambiguación, consulta el tema sobre directrices de comentarios visuales.

Las siguientes capturas de pantalla muestran el funcionamiento de la animación reveladora.

  1. Pulsa y sostén para iniciar la animación para la interacción reveladora. El estado seleccionado del elemento afecta a lo que la animación revela: una marca de verificación si no está seleccionado y ninguna marca de verificación si está seleccionado.

    Captura de pantalla que muestra un estado sin selección.
  2. Selecciona el elemento utilizando el gesto de deslizar (arriba o abajo).

    Captura de pantalla que muestra la animación para la selección.
  3. El elemento ya está seleccionado. Invalida el comportamiento de la selección con el gesto de deslizar para mover el elemento.

    Captura de pantalla que muestra la animación para arrastrar y colocar.

Usa una sola pulsación para la selección en las aplicaciones en que esta es la única acción principal. La animación reveladora se muestra al deslizar transversalmente para eliminar la ambigüedad entre esta función y la interacción de pulsar estándar empleada para activar y navegar.

Cesta de selección

La cesta de selección es una representación dinámica y visualmente clara de elementos que se seleccionaron en la lista o colección primarias de la aplicación. Esta características se usa para realizar un seguimiento de los elementos seleccionados y debe usarse en las aplicaciones donde:

  • Los elementos se pueden seleccionar desde varias ubicaciones.
  • Se pueden seleccionar muchos elementos.
  • Una acción o un comando depende de la lista de selección.

El contenido de la cesta de selección se mantiene con todas las acciones y comandos. Por ejemplo, si seleccionas una serie de fotografías de una galería, aplicas una corrección de color a cada fotografía y compartes las fotografías de algún modo, la selección de elementos se mantiene.

Si en una aplicación no se usa cesta de selección, es necesario borrar la selección actual después de una acción o un comando. Por ejemplo, si seleccionas un tema de una lista de reproducción y le asignas una calificación, debes borrar la selección.

También es necesario borrar la selección actual cuando no se usa una cesta de selección y se activa otro elemento de la lista o colección. Por ejemplo, si seleccionas un mensaje de la bandeja de entrada, se actualiza el panel de vista previa. Si después seleccionas otro mensaje de la bandeja de entrada, la selección del mensaje anterior se cancela y se actualiza el panel de vista previa.

Colas

Una cola no equivale a la lista de la cesta de selección y no se debe tratar como tal. Entre las distinciones primarias se incluyen:

  • La lista de elementos de la cesta de selección solo es una representación visual; los elementos de una cola se ensamblan teniendo en cuenta una acción específica.
  • Los elementos se pueden representar únicamente en la cesta de selección pero varias veces en una cola.
  • El orden de los elementos en la cesta de selección representa el orden de la selección. El orden de los elementos en una cola está directamente relacionado con la funcionalidad.

Por estas razones, la interacción de selección mediante el deslizamiento transversal no debe usarse para agregar elementos a una cola. En cambio, para agregar elementos a una cola se debe usar una acción de arrastrar.

Arrastrar

Usa la acción de arrastrar para mover uno o más objetos de un lugar a otro.

Si tienes que mover más de un objeto, deja que los usuarios seleccionen varios elementos y los arrastren todos al mismo tiempo.

Temas relacionados

Para diseñadores
Directrices para las interacciones del usuario comunes
Directrices para movimiento panorámico
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
GestureRecognizer.CrossSliding
Para desarrolladores (XAML)
Inicio rápido: entrada táctil
Inicio rápido: controlar entrada de puntero
GestureRecognizer.CrossSliding
Para desarrolladores (aplicación de Windows en tiempo de ejecución con DirectX con C++)
Responder a la entrada táctil (DirectX y C++)
GestureRecognizer.CrossSliding
Muestras
Entrada: muestra de gestos y manipulaciones con GestureRecognizer
Muestra de desplazamiento, movimiento panorámico y zoom HTML
Entrada: muestra de gestos instanciables (con MSGesture)
Entrada: muestra de eventos de entrada de usuario de XAML
Muestra de desplazamiento, movimiento panorámico y zoom XAML
Muestra de entrada táctil de DirectX

 

 

Mostrar:
© 2014 Microsoft