Los relojes inteligentes tienen pantallas más pequeñas que los dispositivos de mano, por lo que es fundamental organizar y mostrar los elementos de manera que los usuarios puedan acceder a ellos y que se use de manera eficiente el espacio de pantalla disponible. Para que tus elementos se ajusten a la pantalla, usa la cantidad correcta de padding y márgenes, según se especifica en los lineamientos de Material.
Incluso cuando tu diseño se ajusta a la pantalla, los elementos de tu interfaz pueden truncarse o recortarse cuando el usuario realiza una de las siguientes acciones:
- Cambia el idioma de visualización.
- Cambia el tamaño del texto.
- Habilita la configuración del sistema Texto en negrita.
Es fundamental probar tus diseños con estas consideraciones en mente para asegurarte de que se adapten sin problemas a los diferentes entornos de usuario.
Mantén los elementos interactivos completamente visibles
Si tu interfaz incluye elementos interactivos, comprueba que los usuarios puedan desplazarse por completo para verlos, en especial si se colocan en los bordes de una página. Si tu app usa la biblioteca de Horologist, utiliza la fábrica de diseño responsive(). De lo contrario, usa separadores y agrega márgenes a la parte superior e inferior de un objeto ScalingLazyColumn para evitar que el primer y el último elemento de la lista se recorten siempre.
Usa chips en lugar de tarjetas para diseños densos
Si necesitas un diseño más denso, usa CompactChip en lugar de tarjetas. El área de superficie más grande de las tarjetas dificulta mucho evitar el truncamiento del texto y el recorte de contenido.
Ten en cuenta los efectos del tamaño de la pantalla en el truncamiento y el recorte
Según el tamaño de la pantalla del dispositivo Wear OS, tendrás un espacio más pequeño o más grande para que el texto y los botones adicionales sean visibles:
Diseñar para márgenes de porcentaje, no para márgenes fijos
Para crear contenido que se adapte de manera responsiva al tamaño de la pantalla del dispositivo Wear OS, aplica márgenes porcentuales, en los que el tamaño de cada margen es relativo al tamaño de la pantalla. Cuando los elementos se encuentren en la parte superior o inferior de la pantalla, aplica padding interno adicional para minimizar el recorte del contenido desde el borde curvo de la pantalla. Por el contrario, el espacio inferior y superior aumenta cuando un grupo de contenido es lo suficientemente pequeño como para caber en una pantalla.
Qué debes hacer
Lo que no debes hacer
Usa el límite de caracteres que requieren las pantallas más pequeñas
En la mayoría de los casos, las pantallas más grandes pueden mostrar más texto y contenido antes del truncamiento. Aunque podría haber más espacio horizontal disponible, siempre debes diseñar para el tamaño de pantalla más pequeño para crear una experiencia coherente en todos los dispositivos.
Por ejemplo, es posible que un botón tenga espacio para más caracteres en una pantalla más grande antes del truncamiento, pero si se trata de un llamado a la acción importante que es vital para la experiencia del usuario, usa texto que sea lo suficientemente corto como para aparecer por completo, sin truncar, en la pantalla de un dispositivo pequeño.
Como alternativa, si la tarjeta muestra contenido variable, como texto recuperado de un servidor, ten en cuenta la posibilidad de que este texto se trunque en pantallas más pequeñas.
Qué debes hacer
