Superposiciones

Una superposición es una de las plataformas principales para el contenido de una app. Las superposiciones son diferentes de las complicaciones o tarjetas, que son representaciones visibles del contenido de una app. Las superposiciones muestran más información y admiten una interactividad más enriquecida. El usuario suele ingresar una superposición a partir de otra plataforma de app, como una notificación, complicación, tarjeta o acción de voz.

Principios

Ten en cuenta los siguientes principios cuando diseñes superposiciones

Enfoque

Enfócate en las tareas esenciales para ayudar a los usuarios a completar tareas en segundos.

Superficial y lineal

Evita crear jerarquías de más de dos niveles. Intenta mostrar contenido y navegación intercalados cuando sea posible.

Desplazamiento

Las superposiciones pueden desplazarse. Este es un gesto natural para que los usuarios vean más contenido en el reloj.

Lineamientos

Sigue estos lineamientos cuando diseñes superposiciones.

Optimiza para diseños verticales

Simplifica el diseño de tu app usando diseños verticales, que permiten a los usuarios desplazarse en una sola dirección para moverse por el contenido.

Qué debes hacer

El objetivo de esta app es llevar al usuario del punto A al punto B.

Qué no debes hacer

No uses el desplazamiento vertical y horizontal, ya que esto puede confundir la experiencia de tu app.

Muestra la hora

Los usuarios suelen pasar más tiempo en las superposiciones, por lo que es importante proporcionar un acceso rápido a la hora.

Qué debes hacer

Muestra la hora en la parte superior de la superposición, ya que es un lugar coherente para que el usuario pueda verla.

Qué no debes hacer

No muestres la hora en un diálogo, una pantalla de confirmación o un selector, ya que posiblemente los usuarios solo pasen unos segundos en ellas.

Puntos de entrada intercalados accesibles

Asegúrate de que todas las acciones se muestren intercaladas con iconografías y etiquetas claras para la accesibilidad. Esto incluye puntos de entrada a la configuración y las preferencias.

Qué debes hacer

Utiliza íconos y etiquetas cuando sea posible.

Qué no debes hacer

No uses únicamente íconos para solicitarle al usuario que realice una acción.

Mejora las acciones principales

Para facilitar que los usuarios realicen acciones en tu app, arrastra las acciones principales hacia la parte superior de la superposición.

Qué debes hacer

Destaca las acciones principales no ambiguas en la parte superior de la superposición.

Usa etiquetas para orientar a los usuarios

Para superposiciones más largas, ayuda a orientar a los usuarios con etiquetas mientras se desplazan por el contenido.

Qué debes hacer

Usa saltos de sección, etiquetas y otros elementos para organizar el contenido y orientar a los usuarios mientras se desplazan por vistas más largas con contenido mixto.

Qué no debes hacer

No agregues una etiqueta para las superposiciones que contengan un solo tipo de contenido.

Muestra la barra de desplazamiento

Qué debes hacer

Muestra la barra de desplazamiento si se desplaza toda la vista.

Contenedores de contenido

Consulta los siguientes ejemplos de contenedores de contenido.

Figura 1: Contenedor de altura fija
Figura 2: Contenedor de altura variable
Figura 3: El contenedor de altura y ancho es mayor que el viewport
Figura 4: Un contenedor paginado
Figura 5a: Páginas de contenido que ocupan toda la pantalla y se paginan de forma vertical
Figura 5b: