Widgets de diseño para visionOS

Hola, te doy la bienvenida a Designing Widgets for visionOS. Soy Jonathan y, luego, mi colega Moritz se unirá para compartir más sobre los widgets. Los widgets ofrecen información oportuna y sencilla para acceder a lo importante sin necesidad de abrir apps. Los widgets facilitan el acceso al contenido útil, para consultar el pronóstico, el calendario y tus objetivos. Te mostraremos cómo estas ideas se extienden a visionOS y cómo aprovechar las capacidades de la plataforma. En visionOS, los widgets toman una nueva forma. Se vuelven objetos 3D que encajan perfectamente en tu entorno. En una pared, un escritorio o un estante, mantienen la información de la app inmersiva y a mano.

Moritz y yo te guiaremos a través del sistema de diseño que les da vida. Explicaremos su comportamiento en el espacio y cómo usar los nuevos materiales, estilos y tamaños. Así, tus widgets tendrán un aspecto fantástico y encajarán donde la gente vive, trabaja y se relaja. Si tu app para el iPad ya tiene widgets, comenzamos excelente. Con el modo de compatibilidad, pueden transferirse a visionOS, donde adoptan un nuevo tratamiento espacial y visual. Esto aporta profundidad y dimensión, y permite colocarlos fácilmente en el entorno.

También puedes crear widgets nativos diseñados específicamente para visionOS. Brindan acceso a tamaños y un estilo visual mejorados que permiten integrar mejor el widget con el entorno. El widget de Music Poster es un gran ejemplo, que se siente como un póster real y no solo una interfaz. Veamos en detalle los cuatro principios básicos detrás de los widgets en el Vision Pro. El primero es la persistencia, un aspecto definitorio de los widgets en visionOS. Cuando alguien coloca un widget, permanece donde lo colocó. Permanece anclado a esa ubicación, aun cuando cambian de sala o los dispositivos se reinician.

Partiendo de ahí, el siguiente principio es el tamaño fijo. Los widgets tienen una escala consistente y real, para que se sientan bien proporcionados. El widget de Music Poster usa un tamaño extragrande, lo que da una dimensión familiar, como un marco de arte impreso. Además, los widgets son personalizables, tanto para las apps como para los usuarios. Pueden personalizar el aspecto de los widgets, y tú puedes ofrecer opciones para que se sientan como en casa.

Y por último, está el reconocimiento de proximidad. Los widgets en visionOS adaptan su apariencia y diseño según la cercanía de las personas, mostrando los detalles adecuados. Repasemos todo comenzando con la persistencia y cómo configura el comportamiento de los widgets en los espacios. Cuando un widget se coloca en una habitación, permanece allí. Esto permite diseñar experiencias persistentes y contextuales que convivan con las personas en sus entornos. Antes de profundizar, es útil comprender cómo se accede a los widgets en visionOS. Se pueden ver y colocar con la app Widgets en el inicio, lo que hace que sea fácil agregarlos a cualquier espacio. Cuando se agrega un widget desde Widgets, aparece separado, flotando junto a la biblioteca. Para anclarlo, el widget debe colocarse sobre una superficie horizontal o vertical. Esto lo bloquea en su posición persistente. En una superficie horizontal, el widget se inclina suavemente hacia quien lo coloca. Este ángulo sutil ayuda a la legibilidad. También proyecta una sombra que le da la sensación de estar anclado.

En una pared, los widgets se alinean con la superficie y proyectan una sombra similar a la de un marco de fotos. Los widgets en visionOS se presentan dentro de un marco que conecta el contenido digital con el entorno.

Al pensar en los widgets para visionOS, es útil considerarlos como parte de la sala donde están.

Por eso, siempre diseña teniendo en mente el contexto. No flotan de forma aislada, vivirán en las cocinas, salas y oficinas de las personas. El entorno determina cómo se ve y se usa el widget. Tener en cuenta esto produce mejores experiencias.

Tomemos como ejemplo el widget de Clima. En visionOS, Clima adopta un formato grande, similar a una ventana. Se prioriza una imagen clara de las condiciones actuales para crear la ilusión de estar mirando por una ventana. El texto se puede ver desde el otro lado de la habitación, lo que garantiza la legibilidad cuando está en la pared. El cambio de escala y presencia visual es un gran ejemplo de cómo los widgets pueden adaptarse y mejorar los espacios. Una vez que se coloca el widget, permanece allí, pero se puede colocar más de uno. visionOS admite widgets de múltiples instancias. Puede haber varias copias del mismo widget en un solo espacio. Cuando se colocan en una pared, encajan perfectamente en una disposición de cuadrícula familiar. Las pautas de diseño multiplataforma garantizan que el widget se adapte junto con otros en una cuadrícula.

Para obtener información sobre el diseño de widgets, consulta la sesión “Design great widgets”.

Como los widgets viven en el mundo real al usar el Vision, también se comportan de esa manera. Los widgets se muestran detrás del contenido virtual, lo que refuerza su conexión con tu entorno. Ten en cuenta que solo se adhieren a superficies físicas, no a entornos virtuales. Ahora que vimos la persistencia, hablemos del tamaño de los widgets. El segundo principio es el tamaño fijo. El contenido digital debe tener el tamaño apropiado cuando coexiste con objetos reales. Los widgets en visionOS tienen dimensiones definidas, para que queden perfectos en una pared o un escritorio.

Al igual que otras plataformas, visionOS ofrece varias plantillas de widgets. Pero aquí, esos tamaños corresponden a dimensiones del mundo real. Por lo que los tamaños que elijas tienen presencia física en el espacio de alguien. Así que hazlo conscientemente. Piensa en dónde podría ubicarse el widget, y elige el tamaño que sea adecuado para ese contexto. El diseño importa más que nunca, ya que los widgets están junto a objetos reales. Ten en cuenta la orientación, la jerarquía, la tipografía y la escala para que el contenido sea claro siempre. Aquí vemos cómo el tamaño puede favorecer el contexto. Si diseñarás un widget centrado en la productividad, considera usar una plantilla pequeña para que quepa en un escritorio. Esto funciona sobre todo para algo como la lista de pendientes. Puede ubicarse junto a Pantalla virtual de la Mac y permanecer visible mientras alguien realiza su trabajo. Si el objetivo es permitir decorar el espacio, considera usar el tamaño de plantilla extragrande. Convierte tu widget en una pieza destacada, que parece más un cuadro artístico que una interfaz. Hasta ahora, vimos cómo elegir el tamaño correcto puede hacer que el widget se vea bien en diferentes contextos. Pero el tamaño no es completamente fijo. La gente también puede ajustarlo. Cada tamaño de plantilla se puede cambiar, escalando del 75% al 125% mientras se conserva el diseño. Usa siempre activos de alta resolución, ya que las personas podrán ver los widgets de cerca. Ahora Moritz mostrará cómo hacer que los widgets sean personales, expresivos y adaptables a diferentes entornos. Hola, soy Moritz. Quiero mostrarte cómo se pueden personalizar los widgets en visionOS, tanto por las personas como por las opciones que puedes ofrecer. Estas opciones permiten a las personas personalizar el widget de una manera que les resulte natural y se adapte a su entorno.

Veamos más de cerca cómo se combina todo. Al diseñar el widget, puedes definir su apariencia eligiendo entre dos tratamientos estilísticos: Papel, un estilo realista que se siente como parte del entorno, y Cristal, más liviano y con separación visual entre el primer plano y el fondo. Cada uno crea una presencia distinta en el espacio, y elegir el adecuado refuerza la experiencia que deseas crear. Empecemos con Papel. Si buscas un aspecto que se parezca más a un objeto real, Papel es la opción correcta. Esto hace que el widget responda a la iluminación ambiental y se integre naturalmente con su entorno.

El widget de Music Poster usa Papel para mostrar álbumes y listas de reproducción como marcos en una pared.

Visualmente, el estilo Papel tiene un par de componentes principales.

Un marco del sistema, el contenido que tú diseñas y controlas, y un revestimiento reflectante que hace reaccionar a la luz. Mientras que Papel se centra en integrarse al espacio, Cristal enfatiza la claridad para widgets ricos en información.

Los elementos del primer plano se muestran a todo color, lo que mantiene el contenido clave legible durante todo el día.

Cristal usa una separación visual entre el primer plano y el fondo para que decidas qué partes de la IU responden al entorno.

En el widget de News, las imágenes editoriales se ubican en segundo plano, mientras que los titulares están en primer plano.

El estilo Cristal se compone de varias capas para crear profundidad, claridad y presencia en el espacio.

El marco, proporcionado por el sistema, ancla el widget a su superficie. El fondo se ubica detrás del contenido y puedes definirlo completamente.

La capa duplicada de la IU agrega una profundidad sutil. Es una versión más oscura de la interfaz que se ubica detrás del contenido principal.

La capa de IU es donde está el contenido clave, como texto, glifos y gráficos. Elementos que deben permanecer brillantes, nítidos y muy legibles.

Finalmente, la capa de revestimiento agrega un acabado suave que permite al widget responder a la iluminación. Estas capas conforman la estructura visual de Cristal, ofreciendo claridad, dimensionalidad y flexibilidad.

Ahora que vimos cómo se ensambla la estructura visual, veamos cómo se pueden personalizar los widgets aún más. visionOS incluye varias paletas para una variedad de entornos, lo que permite combinar estilos y hacer que el widget se vea genial donde sea. Al diseñar el widget, es importante probar el contenido en todas las paletas de colores.

Los widgets siempre comienzan sin color, mostrando el color completo de tu diseño.

Una vez colocados, pueden personalizarse eligiendo un color a través de la IU de configuración.

Puedes elegir si el fondo del widget también se tiñe. Si optas por no hacerlo, asegúrate de que se vea bien junto con la paleta de colores seleccionada. Ten en cuenta: el marco del widget siempre recibe tinte y no se puede excluir. El color y el estilo hacen que tu widget se adapte a un espacio. Pero los materiales también determinan la sensación que genera la iluminación a lo largo del día.

Papel oscurece para integrarse visualmente con el espacio. Cristal mantiene la legibilidad de los elementos, incluso con poca luz. Los materiales hacen que los widgets se sientan naturales y los estilos de montaje indican su relación con el espacio.

Cómo un widget se coloca en una pared impacta en cómo se lo percibe, ya sea como un objeto en exhibición o como una vista hacia algo más allá. visionOS ofrece dos estilos de montaje entre los que la gente puede elegir: Sin profundidad y Con profundidad, que se empotra en la pared.

Con profundidad crea la ilusión de un recorte en la pared, con el contenido retrocedido en el espacio. Es ideal para contenido inmersivo o ambiental, como el clima, donde la profundidad mejora la experiencia.

Sin profundidad coloca el widget sobre la superficie de la pared, de forma similar a como se monta un marco de fotos. Perfecto para contenido que debe destacarse, como recordatorios o datos fáciles de ver.

De forma predeterminada, los widgets usan Sin profundidad, y por una buena razón. Funciona bien en superficies verticales y horizontales. Es una opción versátil para la mayoría de los widgets.

Cuando un widget está en una superficie horizontal, siempre usa Sin profundidad para mantener una imagen consistente.

Con profundidad crea una sensación de profundidad única, como en el widget de Clima, donde se siente como una ventana en otro lugar. Solo está disponible en superficies verticales, ya que la alineación no funcionaría en una horizontal. Puedes optar por no usar Con profundidad o hacerlo exclusivo. Ten en cuenta que al hacerlo se elimina la ubicación horizontal. Otra forma en que puede personalizarse la apariencia de un widget es ajustar el ancho del marco.

Hay cinco opciones para elegir, que van desde delgada a gruesa.

Prueba todas las opciones para garantizar que el estilo esté equilibrado. Al usar Con profundidad, el ancho es fijo y no se puede personalizar.

Todo esto se une en la IU de personalización, donde se puede ajustar el widget al espacio y estilo.

El sistema maneja opciones estándar, pero puedes adaptar la configuración a tu diseño.

El widget de Music Poster permite elegir entre temas claros y oscuros, o una opción automática que ajusta el tono según la hora del día.

Puedes exponer estos parámetros para ofrecer más personalización, haciendo que el widget se sienta más expresivo y adaptable. Hasta ahora, vimos cómo se pueden personalizar, diseñar y ubicar los widgets. Pero hay una función que hace que se destaquen, y es el reconocimiento de proximidad. Esto le da a tu widget una señal potente: qué tan cerca está alguien. Puedes adaptar en tiempo real la legibilidad, la relevancia y el detalle, sin importar desde donde se esté viendo el widget.

visionOS proporciona dos umbrales clave que puedes diseñar.

Predeterminado, cuando el widget se ve de cerca, y Simplificado, cuando se ve desde la distancia. Para admitir ambos estados no es necesario un rediseño completo, solo ajustes de diseño bien pensados para mantener el contenido visible en cualquier rango.

Por ejemplo, en el widget Sports, solo se muestran los detalles esenciales al verse desde lejos.

A medida que alguien se acerca, se revela información más detallada.

Para crear una experiencia fluida y consistente, intenta mantener elementos compartidos en ambos umbrales de distancia.

Esto hace que el diseño se sienta fluido y da a cada elemento un tamaño apropiado a cualquier distancia. Adaptar el diseño es solo una parte, pero la proximidad puede afectar cómo se interactúa con el widget.

Los widgets permiten interacciones ligeras y fáciles de visualizar. Por ejemplo, puedes agregar un botón para revelar más detalles de un partido de béisbol en vivo.

Usa esta función para que las áreas interactivas sean fáciles de identificar, tanto de cerca como de lejos. Si el widget no incluye interacción, un toque inicia la app como un acceso directo.

Entonces, ¿cómo debes abordar el reconocimiento de proximidad? No todos los widgets lo necesitan, pero adaptarse a la distancia mejora la claridad.

Es como un diseño adaptable en el que el tamaño angular cambia a medida que alguien se acerca o se aleja. El diseño se ajusta para mostrar el nivel correcto de detalle.

Vimos cómo los widgets en visionOS pueden ajustarse a los espacios, responder a su entorno e incluso adaptarse a la cercanía de alguien.

El diseño, los materiales, la interacción y la personalización: hay muchas oportunidades para crear algo útil y personal.

Terminemos con algunos aspectos clave por tener en cuenta al comenzar.

Piensa en cómo tu propio contenido podría vivir en este nuevo contexto. Si la app ya incluye widgets, considera el nuevo significado que podrían tener al colocarlos en el entorno de alguien. Si crearás una experiencia nativa de visionOS, piensa qué tipos de contenido podrían ser útiles a lo largo del día.

Para obtener más información, consulta “What’s new in WidgetKit”. visionOS ahora presenta una dimensión nueva para los widgets. ¡Ya queremos ver lo que crearás! Gracias por acompañarnos. El resto es solo cuestión de espacio, preferencias y tomarse el tiempo. ¡Muchas gracias!