Estos diseños canónicos son diseños de apps versátiles y comprobados que proporcionan una experiencia del usuario óptima en dispositivos con tamaños de pantalla más grandes.
Tarjetas
Las tarjetas proporcionan acceso rápido a la información y las acciones que los usuarios necesitan para realizar sus tareas. Con deslizar el dedo sobre la cara de reloj, un usuario puede ver su progreso hacia sus objetivos de entrenamiento, consultar el clima y mucho más. Inicia una app o realiza tareas esenciales rápidamente desde las tarjetas.
Personalización mediante el uso de nuestros componentes y estilos
Puedes aplicar el estilo de tu marca a ciertos componentes. Esto incluye el color principal, el ícono de la app, la fuente, los íconos y cualquier recurso visual que se aplique a la experiencia de la tarjeta.
Cómo compilar para diseños responsivos (pantallas de altura fija y márgenes porcentuales)
A fin de adaptar nuestros diseños y código a tamaños de pantalla más grandes, los actualizamos para que tengan un comportamiento responsivo integrado, incluidos los márgenes basados en porcentajes y el padding. Si usas nuestras plantillas, puedes heredar estas actualizaciones automáticamente a través de la API de Tiles y solo debes proporcionar diseños en los que hayas agregado contenido o componentes adicionales después de un punto de interrupción de tamaño de pantalla. Si deseas obtener orientación y recomendaciones completas para aprovechar un tamaño de pantalla más grande, consulta nuestra guía sobre tarjetas.
Todas las plantillas se compilan con los dos puntos de interrupción de tamaño de pantalla predeterminados: 192 dp y 225 dp. Los márgenes se establecieron en valores porcentuales, según el tamaño de la pantalla, para que las filas ocupen el espacio disponible, pero no se extiendan demasiado y queden recortadas por la pantalla curva en la parte inferior y superior. Las tarjetas tienen una altura de pantalla fija, por lo que ajustamos el padding para maximizar el espacio limitado de la pantalla sin crear recortes no deseados.
Las dos plantillas principales, el diseño principal y el diseño de contenido del borde (con un anillo de progreso), tienen diferentes márgenes, pero todos los diseños se crearon para asignarse a una de estas. Hay tres secciones principales para cada tarjeta y ranuras que se asignan a cada una de ellas. En algunos casos, es posible que haya márgenes integrados y padding adicionales para ayudar al contenido a llenar el espacio disponible y, al mismo tiempo, mantener su diseño equilibrado y de visibilidad.
Crea experiencias diferenciadas
Tener cuatro diseños canónicos principales, con más de 80 permutaciones integradas, permite una personalización prácticamente ilimitada. Las tarjetas se compilan en un sistema basado en ranuras, por lo que puedes reemplazar una ranura del diseño canónico por el contenido que elijas. En ese caso, mantén un comportamiento responsivo y sigue nuestras recomendaciones de diseño.
Estas personalizaciones deben ser limitadas y no deben dañar la estructura de la plantilla de tarjetas. De esta manera, se logra mantener la coherencia cuando los usuarios se desplazan por el carrusel de tarjetas en sus dispositivos Wear OS.
Agrega un valor después del punto de interrupción de tamaño en pantallas más grandes
Para aprovechar mejor el espacio adicional en pantallas de mayor tamaño, agrega un punto de interrupción de tamaño a 225 dp. Este punto de interrupción permite revelar contenido adicional, incluir más botones o datos, o cambiar el diseño para que se adapte mejor a la pantalla más grande.
Diseños de apps con desplazamiento y sin desplazamiento
Cuando se diseña para diseños adaptables en una pantalla redonda, las vistas de desplazamiento y sin desplazamiento tienen requisitos únicos para escalar los elementos de la IU y mantener un diseño y una composición equilibrados.
Diseños de apps sin desplazamiento
Diseños canónicos y componentes de pantalla completa (incluidos contenido multimedia y fitness)
Los diseños de vista de la app sin desplazamiento incluyen reproductores multimedia, diálogos de confirmación, selectores, interruptores y pantallas especiales de entrenamiento o seguimiento con indicadores de progreso. Puedes restringir la altura de cualquier pantalla, lo que garantiza que el usuario se centre en una tarea o un conjunto de controles, en lugar de tener que explorar una lista de opciones. Para adaptar el diseño a dispositivos con tamaños de pantalla más pequeños, diseña teniendo en cuenta el tamaño limitado, lo que garantiza la visibilidad y la adopción de una pantalla circular cuando sea necesario.
Lineamientos para la capacidad de respuesta (márgenes porcentuales)
Define todos los márgenes en porcentajes y define restricciones verticales de modo que el contenido principal del medio se pueda estirar para llenar el área de visualización disponible.
Cuando se diseña, es mejor dividir una pantalla sin desplazamiento en una sección superior, central e inferior. De esta manera, puedes agregar márgenes internos a las secciones inferior y superior para evitar recortes, pero permitir que la sección central aproveche todo el ancho de la pantalla. Considera el uso del botón de desplazamiento rotativo para controlar los elementos de la pantalla cuando su tamaño es limitado, ya que presionar las interacciones por sí solas podría no proporcionar la mejor experiencia.
Crea experiencias diferenciadas
Los diseños sin desplazamiento son personalizables, pero son más limitados en cuanto a la cantidad de contenido que se puede agregar a la pantalla y el tipo de componentes que funcionan mejor. El uso de IconButtons en lugar de Chips aprovecha mejor el espacio limitado, y los gráficos visuales, como ProgressIndicators y grandes puntos de datos, ayudan a comunicar información clave de manera gráfica.
Todos los elementos que abran el bisel de la pantalla aumentan automáticamente según el tamaño de la pantalla, por lo que tienen un impacto aún mayor.
Cómo agregar valor después del punto de interrupción en tamaños de pantalla más grandes
Cuando se crea un diseño responsivo para tamaños de pantalla más grandes, los diseños de apps sin desplazamiento aprovechan al máximo el espacio de pantalla adicional. Los elementos existentes pueden crecer hasta llenar el espacio adicional, lo que mejora la usabilidad, y los componentes y el contenido pueden aparecer después de un punto de interrupción en el tamaño de la pantalla.
En la siguiente lista, se muestran varios ejemplos de este comportamiento:
- Los reproductores multimedia pueden obtener botones adicionales o controles más grandes.
- Los diálogos de confirmación pueden obtener una ilustración o más información.
- Las pantallas de fitness pueden obtener métricas adicionales, y los elementos podrían aumentar de tamaño.
Diseños de apps con desplazamiento
Diseños canónicos
Los diseños de vista de app desplazable incluyen listas (ScalingLazyColumn) y diálogos. Estos diseños conforman la mayoría de las pantallas de las apps y representan una colección de componentes que deben adaptarse a tamaños de pantalla más grandes.
Verifica que los componentes sean responsivos, es decir, que llenen el ancho disponible y adopten los ajustes de ScalingLazyColumn cuando haya una mayor altura de la pantalla disponible. Estos diseños ya se compilaron de forma responsiva, y tenemos algunas recomendaciones adicionales para aprovechar aún más el espacio expandido.
Lineamientos para la capacidad de respuesta (márgenes porcentuales)
Todos los márgenes superior, inferior y lateral deben definirse en porcentajes para evitar el recorte y proporcionar un escalamiento proporcional de los elementos. Ten en cuenta que PositionIndicator aparece cuando el usuario se desplaza y abraza automáticamente el bisel de la pantalla, sin importar su tamaño.
Crea experiencias diferenciadas
Las vistas de desplazamiento son altamente personalizables y permiten agregar cualquier combinación de componentes en cualquier orden.
Los márgenes inferior y superior pueden cambiar según los componentes que se ubiquen en la parte inferior y superior. Esto es para evitar que la curva creciente de la pantalla recorte el contenido.
Cómo agregar valor después del punto de interrupción en pantallas grandes
Como los diseños desplazables mostrarán automáticamente más de lo que antes estaba oculto en la parte inferior de la pantalla, no es necesario hacer mucho para agregar valor. Cada componente cubre el ancho disponible y, en algunos casos, un componente puede obtener filas adicionales de texto (como tarjetas), o los componentes se estiran para llenar el ancho disponible (como botones de íconos).