Trabajar con el diseño de watchOS en Xamarin

  • Artículo

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

Diseño Recomendaciones

El punto clave es: hacer que la interfaz de usuario sea legible y utilizable en una pantalla de inspección pequeña, con un dedo grande. No caigas en la trampa de diseñar para el simulador de iOS (que aparece muy grande) y un puntero del mouse (que funciona con pequeños destinos táctiles).

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

  • No acolchar alrededor del diseño de la pantalla: el bisel forma un relleno visual natural.

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

Example of Dynamic Type support

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

  • Usa el control para exponer la funcionalidad usada con menos frecuencia para mantener el Menu 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 de inspección:

Controlador de interfaz

WKInterfaceController es la clase base todas las escenas.

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á automáticamente uno encima del otro:

Controls are automatically laid-out one above the other

Puede establecer las propiedades Position y Size en cada control para controlar su apariencia:

Set the Position and Size properties on each 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 que se ha establecido para usar el 80 % del ancho de la pantalla de inspección (0,8):

Provide a proportional value and an offset adjustment

Grupo

WKInterfaceGroup es un contenedor de diseño simple que se puede configurar para apilar controles vertical o horizontalmente. Incluye el espaciado entre cada control de forma predeterminada, pero puede modificar el espaciado (y los conjuntos) en el inspector de atributos.

Modify the spacing and insets in the Attributes inspector

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.

Groups can be nested to create complex layouts

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.

Example of Separator usage

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 a contenedores .

Controles de contenido

No se completaría ningún diseño sin los Labelcontroles , SwitchButtonSliderImage, Mapy otros controles. Estos se pueden colocar en los diseños mediante grupos o la configuración de posición y tamaño en cada control.