Compartir a través de

Trabajar con el diseño de watchOS en Xamarin

  • Artículo

El diseño para los tamaños de pantalla de Apple Watch presenta desafíos únicos.

Sugerencias de diseño

El punto clave es lograr hacer que la interfaz de usuario sea legible y utilizable en la pantalla pequeña del reloj usando un dedo grande. Evite caer en la trampa de diseñar para iOS SImulator (que muestra todo muy grande) o con el puntero del mouse (que solo funciona para objetivos táctiles muy pequeños).

  • Use un fondo negro: esto crea la ilusión de una pantalla más grande con el bisel negro del reloj.

  • No incluya espaciado alrededor del diseño de la pantalla: el bisel forma un espaciado interno visual natural.

  • Céntrese en la legibilidad. Use los tamaños de fuente y los colores con criterio para asegurarse de que el texto sea legible. Use los estilos de texto integrados para obtener compatibilidad automática con el tipo dinámico.

Ejemplo de compatibilidad con tipos dinámicos

  • Céntrese en los tamaños de los objetivos táctiles. Los botones o las filas de tabla pulsables con etiquetas de texto deben abarcar toda la pantalla. Apple aconseja "nunca colocar más de tres elementos en paralelo" y si lo hace, use iconos y no etiquetas de texto.

  • Use el control Menu para exponer la funcionalidad usada con menos frecuencia y así mantener el diseño de la aplicación claro y conciso.

Implementación

Watch Kit incluye los siguientes controles para ayudarle a crear diseños atractivos de aplicaciones para el reloj:

Controlador de interfaz

WKInterfaceController es la clase base de todos los escenarios.

La superficie de diseño del controlador de interfaz se comporta como un Grupo vertical: puede arrastrar otros controles al controlador de interfaz y se colocarán automáticamente uno encima del otro:

Los controles se colocan automáticamente uno encima del otro

Puede establecer las propiedades de Posición y Tamaño en cada control para controlar su apariencia:

Establecer las propiedades Position y Size en cada control

Cuando el tamaño se establece en Relativo al contenedor , puede proporcionar un valor proporcional y un ajuste de desplazamiento. En esta captura de pantalla se muestra un botón establecido para que use el 80 % del ancho de la pantalla del reloj (0,8):

Proporcionar un valor proporcional y un ajuste de desplazamiento

Grupo

WKInterfaceGroup es un contenedor de diseño simple que se puede configurar para apilar controles vertical u horizontalmente. Incluye un espaciado predeterminado entre cada control, aunque puede modificar el espaciado (y los bajorrelieves) en el inspector de Atributos.

Modificar el espaciado y los conjuntos en el inspector de atributos

Los grupos se pueden ajustar y colocar en relación con los controles que los rodean, y los grupos se pueden anidar para crear diseños complejos.

Los grupos se pueden anidar para crear diseños complejos

Separador

El control separador está diseñado para ayudar a proporcionar instrucciones visuales en el diseño. Use separadores (o colores de fondo o imágenes) para ayudar al usuario a comprender qué contenido está relacionado en la pantalla.

Ejemplo de uso del separador

Tenga en cuenta que los separadores azules y verdes que no usan el ancho completo de la pantalla se han configurado con tamaños fijos o relativos al contenedor.

Controles de contenido

Ningún diseño estaría completo sin los controles Label, Image, Button, Switch, Slider, Map y otros controles. Estos se pueden colocar en los diseños mediante Grupos o con la configuración de posición y tamaño en cada control.