Directrices para el movimiento panorámico

El movimiento panorámico o el desplazamiento permiten a los usuarios navegar dentro de una sola vista para mostrar el contenido de la vista que no se ajusta a la ventana gráfica. Algunos ejemplos de vistas incluyen la estructura de carpetas de un equipo, una biblioteca de documentos o un álbum de fotos.

API importantes: Windows.UI.Input, Windows.UI.Xaml.Input

Qué hacer y qué no hacer

Indicadores de paneo y barras de desplazamiento

• Asegúrese de que el movimiento panorámico o el desplazamiento es posible antes de cargar contenido en la aplicación.

• Muestra indicadores de movimiento panorámico y barras de desplazamiento para proporcionar indicaciones de ubicación y tamaño. Ocultelos si proporciona una característica de navegación personalizada.

  Nota A diferencia de las barras de desplazamiento estándar, los indicadores de movimiento panorámico son puramente informativos. No se exponen a dispositivos de entrada y no se pueden manipular de ninguna manera.

   

Movimiento panorámico de un solo eje (desbordamiento unidimensional)

• Utilice el desplazamiento lateral en un eje para las regiones de contenido que se extienden más allá de los límites de una ventana gráfica (vertical u horizontal).

  • Movimiento panorámico vertical para una lista unidimensional de elementos.
  • Desplazamiento panorámico horizontal para una cuadrícula de elementos.

• No use puntos de ajuste obligatorios con movimiento panorámico de un solo eje si un usuario debe poder desplazarse y detenerse entre puntos de ajuste. Los puntos de acoplamiento obligatorios garantizan que el usuario se detenga en un punto de acoplamiento. Utilice en su lugar puntos de ajuste de proximidad.

Movimiento panorámico de forma libre (desbordamiento bidimensional)

• Utilice el desplazamiento lateral en dos ejes para las regiones de contenido que se extienden más allá de ambos límites de la ventana gráfica (vertical y horizontal).

  • Invalide el comportamiento predeterminado de los raíles y use el movimiento panorámico de forma libre para el contenido no estructurado donde es probable que el usuario se mueva en varias direcciones.

• El movimiento panorámico de forma libre suele ser adecuado para navegar dentro de imágenes o mapas.

Vista paginada

• Utilice puntos de acoplamiento obligatorios cuando el contenido se compone de elementos discretos o cuando usted desee mostrar un elemento en su totalidad. Esto puede incluir páginas de un libro o revista, una columna de elementos o imágenes individuales.

  • Un punto de acoplamiento debe colocarse en cada límite lógico.
  • Cada elemento debe dimensionarse o escalarse para ajustarse a la vista.

Puntos lógicos y clave

• Utiliza puntos de acoplamiento de proximidad si hay puntos clave o lugares lógicos en el contenido donde un usuario probablemente se detendrá. Por ejemplo, un encabezado de sección.

• Si se definen restricciones o límites de tamaño máximo y mínimo, use comentarios visuales para demostrar cuándo el usuario alcanza o supera esos límites.

Encadenamiento de contenido incrustado o anidado

• Utilice el paneo de un solo eje (normalmente horizontal) y los diseños de columna para contenido basado en texto y en cuadrículas. En estos casos, el contenido normalmente se ajusta y fluye de forma natural de columna a columna y mantiene la experiencia del usuario coherente y reconocible en todas las aplicaciones de Windows.

• No use regiones desplazables incrustadas para mostrar texto o listas de elementos. Dado que los indicadores de movimiento panorámico y las barras de desplazamiento solo se muestran cuando se detecta el contacto de entrada dentro de la región, no es una experiencia de usuario intuitiva o reconocible.

• No encadene ni coloque una región desplazable dentro de otra región desplazable si ambas se desplazan en la misma dirección, como se muestra aquí. Esto puede dar lugar a que el área principal se desplace involuntariamente cuando se alcanza un límite para el área secundaria. Considere la posibilidad de hacer que el eje panorámico sea perpendicular.

  

Orientaciones de uso adicionales

El movimiento panorámico con toque, mediante un gesto de deslizar o desplazar con uno o varios dedos, es como desplazarse con el ratón. La interacción de desplazamiento panorámico es más similar a girar la rueda del mouse o deslizar la caja de desplazamiento, en lugar de hacer clic en la barra de desplazamiento. A menos que se haga una distinción en una API o sea necesaria por parte de alguna interfaz de usuario de Windows específica del dispositivo, simplemente nos referimos a ambas interacciones como movimiento panorámico.

Windows 10 Fall Creators Update: cambio de comportamiento De forma predeterminada, en lugar de seleccionar texto, un lápiz activo ahora desplaza y desplaza en las aplicaciones de Windows (como táctil, panel táctil y lápiz pasivo). Si la aplicación depende del comportamiento anterior, puedes invalidar el desplazamiento del lápiz y revertir al comportamiento anterior. Para obtener más información, consulte el tema de referencia de API para la clase ScrollViewer.

Según el dispositivo de entrada, el usuario se moverá dentro de una región desplazable usando una de estas opciones:

• Un ratón, un panel táctil o un lápiz óptico activo para hacer clic en las flechas de desplazamiento, arrastrar el cuadro de desplazamiento o hacer clic dentro de la barra de desplazamiento.
• Botón de rueda del ratón para emular el arrastre de la barra de desplazamiento.
• Los botones extendidos (XBUTTON1 y XBUTTON2), si son compatibles con el mouse.
• Teclas de dirección del teclado para emular arrastrar el cuadro de desplazamiento o las teclas de página para emular hacer clic dentro de la barra de desplazamiento.
• Toque, panel táctil o lápiz o lápiz pasivo para deslizar o mover los dedos en la dirección deseada.

Deslizar implica mover los dedos lentamente en la dirección panorámica. Esto da como resultado una relación uno a uno, donde el contenido se desplazará a la misma velocidad y distancia que los dedos. Deslizar, que implica deslizar rápidamente y levantar los dedos, produce la siguiente física aplicada a la animación panorámica:

• Deceleración (inercia): levantar los dedos hace que el desplazamiento empiece a desacelerar. Esto es similar a deslizarse hasta detenerse en una superficie resbaladiza.
• Absorción: El impulso de movimiento panorámico durante la desaceleración provoca un ligero efecto de rebote si se alcanza un punto de retorno o un límite de área de contenido.

Tipos de movimiento panorámico

Windows admite tres tipos de movimiento panorámico:

• Eje único: el movimiento panorámico solo se admite en una dirección (horizontal o vertical).
• Rails - el desplazamiento panorámico se admite en todas las direcciones. Sin embargo, una vez que el usuario cruza un umbral de distancia en una dirección específica, el movimiento panorámico está restringido a ese eje.
• Forma libre: el movimiento panorámico se admite en todas las direcciones.

Interfaz de usuario de movimiento panorámico

La experiencia de interacción para el movimiento panorámico es única para el dispositivo de entrada, a la vez que proporciona una funcionalidad similar.

Hay dos modos de visualización de movimiento panorámico en función del dispositivo de entrada detectado:

• Indicadores de movimiento panorámico para la función táctil.
• Barras de desplazamiento para otros dispositivos de entrada, como el mouse, el panel táctil, el teclado y el lápiz óptico.

Nota Los indicadores de paneo solo son visibles cuando el contacto táctil está dentro de la región panorámica. Del mismo modo, la barra de desplazamiento solo es visible cuando el cursor del mouse, el cursor del lápiz o el foco del teclado se encuentran dentro de la región desplazable.

Indicadores de desplazamiento Los indicadores de desplazamiento son similares al control deslizante de una barra de desplazamiento. Indican la proporción de contenido mostrado al área desplazable total y la posición relativa del contenido mostrado en el área desplazable.

En el diagrama siguiente se muestran dos áreas desplazables de diferentes longitudes y sus indicadores de desplazamiento.

Comportamientos de panoramizaciónPuntos de ajuste Desplazar con el gesto de deslizar el dedo introduce un comportamiento de inercia en la interacción cuando se levanta el contacto táctil. Con la inercia, el contenido sigue desplazándose hasta que se alcanza un umbral de distancia sin intervención directa del usuario. Utilice puntos de ajuste para modificar este comportamiento de inercia.

Los snap points especifican las paradas lógicas en el contenido de la aplicación. Cognitivamente, los puntos de ajuste actúan como un mecanismo de paginación para el usuario y minimizan la fatiga de un deslizamiento excesivo en áreas desplazables grandes. Con estas herramientas, puede controlar la entrada de usuario imprecisa y asegurarse de mostrar un subconjunto específico de contenido o información clave en la ventana de visualización.

Hay dos tipos de puntos de acoplamiento:

• Proximidad: después de levantar el contacto, se selecciona un punto de acoplamiento si la inercia se detiene dentro de un umbral de distancia del punto de acoplamiento. El movimiento panorámico todavía puede detenerse entre puntos de acercamiento.
• Obligatorio: el punto de acoplamiento seleccionado es el que precede o sucederá inmediatamente al último punto de acoplamiento cruzado antes de levantar el contacto (dependiendo de la dirección y la velocidad del gesto). El desplazamiento debe detenerse en un punto obligatorio.

Los puntos de anclaje panorámico son útiles para aplicaciones como navegadores web y álbumes de fotos que emulan contenido paginado o tienen agrupaciones lógicas de elementos que se pueden volver a agrupar dinámicamente para ajustarse a una ventana de visualización o una pantalla.

En los diagramas siguientes se muestra cómo el movimiento panorámico hacia un punto determinado y al liberar provoca que el contenido se desplace automáticamente a una ubicación lógica.

Rails El contenido puede ser más amplio y alto que las dimensiones y la resolución de un dispositivo de pantalla. Por esta razón, el paneo bidimensional (horizontal y vertical) se requiere con frecuencia. Rails mejora la experiencia del usuario en estos casos haciendo hincapié en el movimiento panorámico a lo largo del eje de movimiento (vertical o horizontal).

En el diagrama siguiente se muestra el concepto de raíles.

Encadenamiento de contenido incrustado o anidado

Después de que un usuario alcance un límite de zoom o desplazamiento en un elemento anidado dentro de otro elemento zoomable o desplazable, puede especificar si ese elemento primario debe continuar la operación de zoom o desplazamiento iniciada en su elemento secundario. Esto se denomina encadenamiento de zoom o encadenamiento de desplazamiento.

El encadenamiento se usa para el movimiento panorámico dentro de un área de contenido de un solo eje que incluye una o más regiones de movimiento panorámico de eje único o de forma libre (cuando el contacto táctil está dentro de una de estas regiones secundarias). Cuando se alcanza el límite del desplazamiento de la región hija en una dirección específica, el desplazamiento se activa en la región padre en la misma dirección.

Cuando una región panorámica está anidada dentro de otra región panorámica, es importante especificar suficiente espacio entre el contenedor y el contenido embebido. En los diagramas siguientes, un área desplazable está colocada dentro de otra área desplazable, cada una en direcciones perpendiculares. Hay mucho espacio para que los usuarios puedan desplazarse en cada región.

Sin espacio suficiente, como se muestra en el diagrama siguiente, la región panorámica incrustada puede interferir con el desplazamiento panorámico dentro del contenedor y provocar un desplazamiento panorámico involuntario en una o varias de las regiones panorámicas.

Esta guía también es útil para aplicaciones como álbumes de fotos o aplicaciones de mapas que admiten movimiento panorámico sin restricciones dentro de una imagen o un mapa individual, mientras que también admiten el movimiento panorámico de un solo eje dentro del álbum (a las imágenes anteriores o siguientes) o dentro del área de detalles. En las aplicaciones que proporcionan un área de detalles o opciones correspondiente a una imagen o mapa de movimiento panorámico de forma libre, se recomienda que el diseño de página comience con los detalles y el área de opciones, ya que el área de movimiento panorámico sin restricciones de la imagen o mapa podría interferir con el movimiento panorámico en el área de detalles.

Artículos relacionados

• Interacciones de usuario personalizadas
• Optimización de ListView y GridView
• Accesibilidad del teclado

Muestras

• 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 eventos de entrada de usuario XAML
• Entrada: Ejemplo de capacidades del dispositivo
• Entrada: Ejemplo de prueba de detección táctil
• Muestra de desplazamiento, movimiento panorámico y zoom de XAML
• Entrada: Muestra de tinta simplificada
• Entrada: Muestra de manipulaciones y gestos
• Ejemplo de entrada táctil de DirectX