Directrices para diapositivas cruzadas
API importantes
Use la diapositiva cruzada para admitir la selección con el gesto de deslizar y arrastrar (mover) interacciones con el gesto de diapositiva.
Dos y no
- Use diapositivas cruzadas para listas o colecciones que se desplazan en una sola dirección.
- Use la diapositiva cruzada para la selección de elementos cuando se use la interacción de pulsación para otro propósito.
- No use la diapositiva cruzada para agregar elementos a una cola.
Instrucciones de uso adicionales
La selección y el arrastre solo son posibles dentro de un área de contenido que se puede desplazar en una dirección (vertical o horizontal). Para que cualquiera de las interacciones funcione, se debe bloquear una dirección de movimiento panorámico y el gesto debe realizarse en la dirección perpendicular a la dirección de movimiento panorámico.
Aquí se muestra cómo seleccionar y arrastrar un objeto mediante una diapositiva cruzada. La imagen de la izquierda muestra cómo se selecciona un elemento si un gesto de deslizar el dedo no cruza un umbral de distancia antes de que se levante el contacto y se libere el objeto. La imagen de la derecha muestra un gesto deslizante que cruza un umbral de distancia y da como resultado el objeto que se arrastra.
Las distancias de umbral usadas por la interacción entre diapositivas se muestran en el diagrama siguiente.
Para conservar la funcionalidad de movimiento panorámico, se debe cruzar un umbral pequeño de 2,7 mm (aproximadamente 10 píxeles en la resolución de destino) antes de activar una interacción de selección o arrastre. Este umbral pequeño ayuda al sistema a diferenciar el deslizamiento cruzado de la panorámica, y también ayuda a garantizar que un gesto de toque se distinga tanto del deslizamiento cruzado como del movimiento panorámico.
En esta imagen se muestra cómo un usuario toca un elemento en la interfaz de usuario, pero mueve el dedo ligeramente hacia abajo en contacto. Sin umbral, la interacción se interpretaría como una diapositiva cruzada debido al movimiento vertical inicial. Con el umbral, el movimiento se interpreta correctamente como movimiento panorámico horizontal.
Estas son algunas directrices que se deben tener en cuenta al incluir la funcionalidad de diapositivas cruzadas en la aplicación.
Use diapositivas cruzadas para listas o colecciones que se desplazan en una sola dirección. Para obtener más información, vea Agregar controles ListView.
Nota En los casos en los que el área de contenido se puede desplazar en dos direcciones, como exploradores web o lectores electrónicos, la interacción con el tiempo de pulsación y suspensión debe usarse para invocar el menú contextual para objetos como imágenes e hipervínculos.
Una lista bidimensional de movimiento panorámico horizontal. Arrastre verticalmente para seleccionar o mover un elemento.
Una lista unidimensional de movimiento panorámico vertical. Arrastre horizontalmente para seleccionar o mover un elemento.
Seleccionar
La selección es el marcado, sin iniciar o activar, de uno o varios objetos. Esta acción es análoga a un solo clic del mouse, o la tecla Mayús y el clic del mouse, en uno o varios objetos.
La selección entre diapositivas se logra tocando un elemento y soltándolo después de una breve interacción de arrastre. Este método de selección prescinde del modo de selección dedicado y de la interacción con tiempo de pulsación requerido por otras interfaces táctiles y no entra en conflicto con la interacción de pulsación para la activación.
Además del umbral de distancia, la selección entre diapositivas está restringida a un área de umbral de 90°, como se muestra en el diagrama siguiente. Si el objeto se arrastra fuera de esta área, no está seleccionado.
La interacción entre diapositivas se complementa con una interacción con tiempo de pulsación y suspensión, también denominada interacción "auto-reveladora". Esta interacción complementaria activa una animación que indica qué acción se puede realizar en el objeto . Para obtener más información sobre la interfaz de usuario de desambiguación, consulte Directrices para comentarios visuales.
Las capturas de pantalla siguientes muestran cómo funciona la animación auto-revelada.
Mantenga presionado para iniciar la animación para la interacción auto-reveladora. El estado seleccionado del elemento afecta a lo que revela la animación: una marca de verificación si no está seleccionada y ninguna marca de verificación si está seleccionada.
Seleccione el elemento con el gesto de deslizar el dedo (arriba o abajo).
El elemento ahora está seleccionado. Invalide el comportamiento de selección mediante el gesto de diapositiva para mover el elemento.
Use una sola pulsación para la selección en aplicaciones donde sea la única acción principal. La animación auto-revelación entre diapositivas se muestra para desambiguar esta funcionalidad de la interacción de pulsación estándar para la activación y la navegación.
Cesta de selección
La cesta de selección es una representación visualmente distinta y dinámica de los elementos seleccionados en la lista o colección principal de la aplicación. Esta característica es útil para realizar un seguimiento de los elementos seleccionados y debe usarse en las aplicaciones en las que:
- Los elementos se pueden seleccionar desde varias ubicaciones.
- Se pueden seleccionar muchos elementos.
- Una acción o un comando se basa en la lista de selección.
El contenido de la cesta de selección persiste entre acciones y comandos. Por ejemplo, si selecciona una serie de fotografías de una galería, aplica una corrección de color a cada fotografía y comparte las fotografías de alguna manera, los elementos permanecen seleccionados.
Si no se usa ninguna cesta de selección en una aplicación, la selección actual debe borrarse después de una acción o comando. Por ejemplo, si selecciona una canción de una lista de reproducción y la puntea, se debe borrar la selección.
La selección actual también debe borrarse cuando no se usa ninguna cesta de selección y se activa otro elemento de la lista o colección. Por ejemplo, si selecciona un mensaje de bandeja de entrada, se actualiza el panel de vista previa. A continuación, si selecciona un segundo mensaje de bandeja de entrada, se cancela la selección del mensaje anterior y se actualiza el panel de vista previa.
Colas
Una cola no es equivalente a la lista de la cesta de selección y no debe tratarse como tal. Entre las distinciones principales se incluyen las siguientes:
- La lista de elementos de la cesta de selección es solo una representación visual; Los elementos de una cola se ensamblan teniendo en cuenta una acción específica.
- Los elementos solo se pueden representar una vez en la cesta de selección, pero varias veces en una cola.
- El orden de los elementos de la cesta de selección representa el orden de selección. El orden de los elementos de una cola está directamente relacionado con la funcionalidad.
Por estos motivos, la interacción de selección entre diapositivas no debe usarse para agregar elementos a una cola. En su lugar, los elementos se deben agregar a una cola a través de una acción de arrastrar.
Arrastrar
Use arrastrar para mover uno o varios objetos de una ubicación a otra.
Si es necesario mover más de un objeto, permita a los usuarios seleccionar varios elementos y, a continuación, arrastrarlo todo a la vez.
Artículos relacionados
Ejemplos
- Ejemplo básico de entrada
- Ejemplo de entrada de baja latencia
- Ejemplo del modo de interacción del usuario
- Ejemplo de elementos visuales de foco
Ejemplos de archivo
- Entrada: Ejemplo de eventos de entrada de usuario XAML
- Entrada: Ejemplo de capacidades del dispositivo
- Entrada: Ejemplo de prueba de posicionamiento táctil
- Muestra de desplazamiento, movimiento panorámico y zoom de XAML
- Entrada: Ejemplo simplificado de entrada de lápiz
- Entrada: Ejemplo de manipulaciones y gestos
- Ejemplo de entrada táctil de DirectX
