Directrices para el desplazamiento lateral

El desplazamiento lateral o desplazamiento permiten a los usuarios navegar dentro de una única vista, para mostrar el contenido de la vista que no cabe dentro de 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.

     

Desplazamiento uniaxial (desbordamiento unidimensional)

  • Utilice el desplazamiento en un solo eje para las regiones de contenido que sobrepasan uno de los límites de la 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 utilice puntos de referencia obligatorios con el desplazamiento lateral de un solo eje si el usuario debe poder desplazarse y detenerse entre los puntos de referencia. Los puntos de referencia obligatorios garantizan que el usuario se detendrá en un punto de referencia. En su lugar, utilice puntos de referencia de proximidad.

Desplazamiento de forma libre (desbordamiento bidimensional)

  • Utilice el desplazamiento en dos ejes para las regiones de contenido que se extienden más allá de los límites del área visible, tanto verticales como horizontales.

    • 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 desplazamiento lateral libre suele ser adecuado para navegar por imágenes o mapas.

Vista paginada

  • Utilice puntos de acoplamiento obligatorios cuando el contenido esté compuesto por elementos discretos o desee mostrar un elemento entero. Esto puede incluir páginas de un libro o revista, una columna de elementos o imágenes individuales.

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

Puntos lógicos y clave

  • Utilice puntos de acoplamiento de proximidad si hay puntos clave o lugares lógicos en el contenido en los que es probable que el usuario se detenga. 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 o coloque una región lateral dentro de otra región lateral si ambas se desplazan en la misma dirección, como se muestra aquí. Esto puede provocar que el área principal se mueva involuntariamente cuando se alcanza un límite del área secundaria. Considere la posibilidad de hacer que el eje panorámico sea perpendicular.

    imagen que muestra un área desplazable incrustada que se desplaza en la misma dirección que su contenedor.

Orientaciones de uso adicionales

El desplazamiento lateral táctil, mediante un gesto de deslizamiento con uno o varios dedos, es como desplazarse con el ratón. La interacción de desplazamiento lateral es más parecida a girar la rueda del ratón o deslizar el cuadro de desplazamiento, que a 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.

Actualización de Windows 10 Fall Creators Update: cambio de comportamiento De forma predeterminada, en lugar de seleccionar texto, un lápiz activo ahora permite desplazarse o realizar panorámicas en las aplicaciones de Windows (al igual que el tacto, el panel táctil y el 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.
  • La rueda del ratón para emular el arrastre de la caja de desplazamiento.
  • Los botones extendidos (XBUTTON1 y XBUTTON2), si son compatibles con el mouse.
  • Las teclas de flecha del teclado para emular el arrastre del cuadro de desplazamiento o las teclas de página para emular el clic dentro de la barra de desplazamiento.
  • Táctil, panel táctil, lápiz o lápiz óptico para deslizar o deslizar los dedos en la dirección deseada.

El deslizamiento consiste en mover los dedos lentamente en la dirección lateral. Esto da como resultado una relación uno a uno, donde el contenido se desplazará a la misma velocidad y distancia que los dedos. El deslizamiento, que consiste en deslizar y levantar rápidamente los dedos, hace que se aplique la siguiente física a la animación de desplazamiento lateral:

  • 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 desplazamiento lateral durante la deceleración provoca un ligero efecto de rebote si se alcanza un punto de ajuste o un límite de área de contenido.

Tipos de panorámica

Windows admite tres tipos de movimiento panorámico:

  • Eje único: el desplazamiento lateral solo es posible en una dirección (horizontal o vertical).
  • Rieles: permite el desplazamiento 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.
  • Rieles: permite el desplazamiento en todas las direcciones.

Interfaz de usuario de panorámica

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 desplazamiento lateral 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 panorámica solo son visibles cuando el contacto táctil se encuentra dentro de la región en la que se puede realizar la 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 cuadro de desplazamiento de una barra de desplazamiento. Indican la proporción del contenido mostrado con respecto al área total que se puede mostrar y la posición relativa del contenido mostrado en el área que se puede mostrar.

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

imagen que muestra dos áreas desplazables de diferentes longitudes y sus indicadores de desplazamiento.

Comportamientos de desplazamientoPuntos de ajuste El desplazamiento con el gesto de deslizamiento introduce un comportamiento de inercia en la interacción cuando se retira 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 acoplamiento para modificar este comportamiento de inercia.

Los snap points especifican las paradas lógicas en el contenido de la aplicación. Desde el punto de vista cognitivo, los puntos de acoplamiento actúan como un mecanismo de paginación para el usuario y minimizan la fatiga provocada por un deslizamiento o un barrido excesivos en grandes regiones de desplazamiento lateral. 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 desplazamiento lateral puede detenerse entre los puntos de acoplamiento de proximidad.
  • 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 lateral debe detenerse en un punto de acoplamiento obligatorio.

Los puntos de acoplamiento de desplazamiento lateral son útiles para aplicaciones como navegadores web y álbumes de fotos que emulan contenido paginado o tienen agrupaciones lógicas de elementos que pueden reagruparse dinámicamente para ajustarse a una ventana gráfica o pantalla.

Los siguientes diagramas muestran cómo al desplazarse de forma lateral a un punto determinado y soltar, el contenido se desplaza automáticamente a una ubicación lógica.

imagen que muestra un área desplazable.

Deslizar el dedo horizontalmente.

Imagen que muestra un área desplazable siendo desplazada hacia la izquierda.

Contacto táctil de elevación.

Imagen que muestra un área desplazable que ha dejado de desplazarse en un punto de ajuste lógico.

La región de deslizamiento lateral se detiene en el punto de chasquido, no donde se levantó el contacto de toque.

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.

diagrama de una pantalla con raíles que restringen el movimiento panorámico

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 desplazamiento.

El encadenamiento se utiliza para el desplazamiento dentro de un área de contenido de un solo eje que contiene una o más regiones de desplazamiento de un solo eje o de forma libre (cuando el contacto táctil se encuentra dentro de una de estas regiones hijas). Cuando se alcanza el límite de desplazamiento lateral de la región hija en una dirección específica, se activa el desplazamiento lateral en la región padre en la misma dirección.

Cuando una región lateral está anidada dentro de otra región lateral es importante especificar suficiente espacio entre el contenedor y el contenido incrustado. En los siguientes diagramas, una región lateral se coloca dentro de otra región lateral, cada una de ellas en direcciones perpendiculares. Hay mucho espacio para que los usuarios hagan desplazamiento lateral en cada región.

imagen que muestra un área desplazable integrada.

Sin espacio suficiente, como se muestra en el siguiente diagrama, la región de desplazamiento lateral incrustada puede interferir con el paneo en el contenedor y dar lugar a un paneo involuntario en una o más de las regiones desplazables.

Imagen que muestra un margen insuficiente para un área desplazable incrustada.

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.

Muestras

Ejemplos de archivo

  • Last updated on