Conoce el nuevo sistema de diseño

Hola. Soy Maria del equipo de diseño de Apple. En esta sesión, cubriré todo lo que debes saber sobre las novedades en el sistema de diseño visual, arquitectura de la información y componentes centrales del sistema. Si aún no lo hiciste, te recomiendo comenzar con la charla Conoce Liquid Glass, con mis colegas Chan, Shubham y Bruno. En ella, se sientan las bases de todo lo que cubriremos y se presentan sus principios, comportamientos y cómo usarlos de forma efectiva e inclusiva en tus apps. Liquid Glass marca la actualización de diseño más extensa que realizamos y reformula la relación entre la interfaz y el contenido con un nuevo conjunto de heurísticas. ¿El resultado? Un lenguaje de diseño armonizado más cohesivo, adaptable y expresivo. El abordaje holístico de los sistemas es algo poderoso. Nos permite aplicar estos principios en todas las superficies e interacciones del ecosistema de Apple. Con tecnologías como SwiftUI, Mac Catalyst y las nuevas capacidades de software, avanzamos hacia una base de diseño compartida y el sistema evoluciona junto con ella para mantener el flujo entre dispositivos, tamaños de pantalla y modos de entrada. Ya sea que diseñes funcionalidades individuales o sistemas completos, la flexibilidad de las estructuras de Apple hace que el diseño en distintos dispositivos sea más fluido, escalable y potente. Hay mucho por explorar en este lanzamiento, así que dejaré que lo descubras por tu cuenta. Para destacar las novedades de mayor impacto, abordaré tres áreas: Primero, el nuevo lenguaje de diseño y cómo crea la base para la cohesión a escala. Luego, la estructura que guía la navegación y la interacción. Y cómo la continuidad favorece la familiaridad de las interacciones en cualquier entorno. Empecemos. Liquid Glass jugó un rol clave en la evolución del lenguaje de diseño de Apple, generando familiaridad entre plataformas y adaptando cada experiencia. Al diseñar este sistema, nos centramos en los pequeños detalles. Un enfoque sistemático implica diseñar con intención en cada nivel para que todos los elementos, del más pequeño al más grande, se consideren en relación con el todo. La familia de colores del sistema se ajustó de formas sutiles pero significativas en los modos Claro, Obscuro y Contraste aumentado para que funcionen en armonía con Liquid Glass, mejorando la diferenciación de tonos, sin perder la esencia optimista que los hace únicos de Apple. Se mejoró la tipografía para favorecer la claridad y la estructura: el texto se ve mejor y está alineado a la izquierda para mejorar la legibilidad en momentos clave. Uno de los principales cambios es en el uso de las formas. El hardware de Apple presenta un marco de precisión que guía la interfaz, con la curvatura, el tamaño y la proporción en armonía para que haya una coherencia entre el dispositivo y la experiencia visual. Las formas se integran en una sutil geometría gracias a la concentricidad.

Al alinear radios y márgenes en torno a un centro común, las formas pueden integrarse fácilmente. Para preservar el equilibrio óptico, las vistas se centran con precisión si corresponde y se desplazan sutilmente si no. Usamos tres formas para hacer diseños concéntricos: las fijas tienen un radio de esquina constante. Las cápsulas usan un radio de la mitad de alto del recipiente. Las formas concéntricas calculan su radio al restar el relleno del elemento principal.

La geometría de la cápsula se presta a la concentricidad. Por eso la verás en todo el sistema, reflejada en los controles y los interruptores, y en las barras, los botones y las esquinas redondeadas de las vistas de tablas agrupadas. Las cápsulas aportan enfoque y claridad a los diseños táctiles, pero en entornos densos, conviene usarlas para acciones destacadas. En macOS, los controles mini, pequeño y mediano seguirán teniendo rectángulos redondeados, ideales para diseños compactos y densos, como los paneles de inspección. Los controles grandes tendrán forma de cápsula, así como el nuevo tamaño extragrande, que aprovecha Liquid Glass para brindar énfasis en áreas más espaciosas. Al combinarse, crean jerarquía y equilibrio en diseños de escritorio complejos. Es clave que tu lenguaje de diseño visual y los elementos de la interfaz armonicen con Liquid Glass. Todo debe estar en la misma sintonía: los elementos de la interfaz deben complementar el sistema, no entrar en conflicto con él. Aquí es donde las cosas pueden complicarse, sobre todo si gestionas tu propio sistema de diseño. Usar las tres formas que vimos recién permite mantener los componentes alineados con el sistema y facilita el trabajo con las API de Apple.

Al actualizar tus apps, presta atención a las esquinas que se ven muy estrechas o anchas. Pueden crear tensión y romper el equilibrio. Esto suele verse en contenedores anidados, como una tarjeta con imágenes. Si algo no cuadra, la respuesta es simple. La forma debería ser concéntrica para que el sistema calcule los radios internos automáticamente. También se ve cerca de los bordes, como este botón. Para los teléfonos, usa una cápsula con margen extra para crear espacio cerca del borde. Para el iPad y la Mac, usa una forma concéntrica que se alinee con el borde de la ventana. Un truco para administrar componentes que deben funcionar dentro de un contenedor y por sí solos: usa una forma concéntrica con un radio de respaldo. El valor concéntrico se ajusta al estar anidado y el respaldo se activa cuando el componente está solo. Con esta base, el siguiente paso es comprender cómo estructurar la app para aprovechar Liquid Glass al máximo. Con apps cada vez más inmersivas y centradas en el contenido, la interfaz debe facilitar la interacción o pasar desapercibida según el contexto. Liquid Glass define una nueva capa funcional en la interfaz que flota sobre el contenido para dar estructura y claridad sin robarse el foco. Esto cobra vida mediante la representación clara de las relaciones entre las superficies: cómo aparecen y permanecen conectadas con una sensación de espacialidad y estabilidad. Veamos la hoja de acción. Aparecía en la parte inferior de la pantalla, sin importar de dónde provenía la acción. Ahora surge de la acción misma, que sirve de fuente para la hoja de acción. Los roles bien definidos ayudan al sistema a comprender esa relación, estableciendo la interacción desde el elemento seleccionado. Al crear controles personalizados, usa el mismo enfoque y aplica el material directamente al control, no a sus vistas internas.

Liquid Glass refleja el enfoque de navegación e introduce una variación sutil que refuerza la intención mientras la navegación cambia. Puede parecer complicado, pero se basa en señales conocidas, como el uso de capas de atenuación para indicar modalidad. Cuando se interrumpe el flujo principal, combina Liquid Glass con una capa atenuadora para centrar la atención y que el recuadro quede bien delimitado. Cuando se realiza una tarea en paralelo, Liquid Glass crea una separación natural para mantener la claridad sin interrumpir el flujo. Cuando el foco cambia, como al arrastrar un recuadro hacia arriba, Liquid Glass se vuelve más opaco y aumenta de tamaño de a poco indicando un mayor grado de interacción. Además de aportar enfoque y profundidad, Liquid Glass mejora los controles de navegación. Antes, se mezclaban con el fondo cuando la interfaz estaba inactiva. Liquid Glass los eleva, los separa más del contenido y refuerza la interactividad.

Pero antes: si personalizaste las barras, es el momento de pulirlas. Agregamos fondos o bordes para que los botones tengan el peso adecuado. Esto fue común y válido durante mucho tiempo. Pero con la nueva apariencia, estamos reaprendiendo de dónde viene el énfasis, por lo que estas personalizaciones son innecesarias.

En lugar de la decoración, la jerarquía debería expresarse mediante el diseño y la agrupación. Los elementos de la barra se deben organizar para lograr legibilidad y claridad espacial. Con la nueva apariencia, los elementos agrupados con la API correcta se actualizan de inmediato para compartir un fondo y preservar su relación espacial. Si los elementos no se agrupan como esperas, te comparto algunos consejos. Si en la barra hay muchas cosas, aprovecha para quitar lo que sobra y mover las acciones secundarias a un menú para mantener todo ordenado y accesible. Agrupa según la función y la frecuencia. Los botones que realizan acciones relacionadas deben ir juntos. No agrupes símbolos con texto, como Seleccionar y el ícono de compartir que ves aquí, ya que podría percibirse como un solo botón. Si necesitas botones de texto, asígnales sus propios contenedores.

Una acción principal, como Listo, aparece separada y como una marca de verificación azul en iOS y iPadOS o como un botón de texto destacado en macOS, lo que crea un punto focal visible con el que es fácil interactuar. La barra de pestañas es un elemento constante de tu app. Organizarla bien transmite una idea clara del diseño y permite ir de una sección a otra sin problemas. Si el contenido no se ve de entrada, la búsqueda es esencial. Por eso, iOS ahora incluye una pestaña de búsqueda en la parte inferior para buscar con más rapidez y facilidad. Estas barras admiten funcionalidades constantes mediante vistas accesorias, como controles de reproducción que siguen visibles. Evita colocar aquí acciones específicas. Por ejemplo, un botón de pago debe ir con el contenido al que pertenece. Mezclar elementos de diferentes partes de la interfaz puede difuminar la jerarquía y dificultar la distinción entre lo constante y lo contextual. Los efectos visuales priorizan el contenido y mantienen las interacciones claras. Liquid Glass requiere una separación clara del contenido para mantener la legibilidad. Como en Safari, los controles se ubican sobre el material, no sobre el contenido. Sin esto, el contraste puede verse afectado. Los efectos de borde de desplazamiento refuerzan ese límite y reemplazan los divisores duros con un desenfoque sutil. Recuerda que estos efectos no son decorativos. No se bloquean ni oscurecen. Aclaran dónde se encuentran la interfaz y el contenido, y no deben usarse donde no haya elementos flotantes.

Las vistas muestran el efecto cuando los controles fijados se les superponen. Verás dos estilos: uno suave y otro más definido. Debes evitar mezclarlos o ponerlos uno sobre otro. El suave es el predeterminado y el que usarás sobre todo en iOS y iPadOS. Ofrece una transición sutil y es ideal para elementos interactivos, como botones o entradas, con Liquid Glass. El definido se usa en macOS. Crea un límite más definido y opaco, ideal para texto interactivo, controles sin fondos o encabezados fijados que necesitan mayor claridad. Aplica un efecto por vista. En Split View en el iPad o macOS, cada panel puede tener su efecto. Mantenlos a la misma altura para conservar la alineación. El foco en el contenido pasa a las barras laterales y se puede extender hasta el borde. Las barras ahora presentan un relieve y se crearon con Liquid Glass para que el contenido fluya detrás y lograr una sensación más inmersiva. Los efectos de extensión de fondo permiten que el contenido llene todo el ancho de la barra lateral y mantener las imágenes centradas. Úsalos para imágenes principales, fondos de colores o superficies expansivas. Asegúrate de que el texto y los controles estén encima para evitar distorsiones visuales. Eso no es todo. Las vistas de desplazamiento se extienden debajo de la barra lateral por defecto, por lo que los carruseles se deslizan con naturalidad.

Puedes aplicar estos efectos por vista, lo que te brinda mayor flexibilidad para crear diseños más enriquecidos. Las vistas superior e inferior usan el efecto de extensión de fondo, y la vista de desplazamiento del medio está separada. La continuidad conecta la cohesión del lenguaje de diseño y la estructura de la acción en una experiencia fluida. Cuando un usuario pasa de un dispositivo a otro o ajusta el tamaño de una ventana, no comienza una nueva tarea, continúa con la misma. Tu app debe continuar ese momento sin interrupciones para que no se pierda la fluidez. Las decisiones de diseño, ya sean de disposición, jerarquía o interacción, deben aplicarse en todos los dispositivos. Esto simplifica el proceso de diseño. En lugar de empezar desde cero para cada plataforma, solo debes diseñar la anatomía de tu app una vez. No es un concepto nuevo, pero lo estamos redoblando. Hagamos un repaso de cómo pensamos en el contexto del dispositivo. Al adoptar el nuevo sistema de diseño, debes evaluar qué tan bien se transmite la experiencia de tu app en las diferentes plataformas. En el iPhone, el diseño es estrecho y vertical. En la Mac, todo se extiende en una superficie amplia. El iPad es el punto medio del sistema: une la utilidad enfocada del iPhone con la gran versatilidad de la Mac. Es donde tu diseño aprende a escalar. Con esa base en mente, veamos cómo el contenido compartido da vida a esa sensación de continuidad. ¿Recuerdas los ejemplos de organización espacial? Aquí entran en juego. Cuando el contenido se agrupa intencionalmente, debe permanecer unido siempre. Usa siempre los mismos símbolos para preservar el significado y generar familiaridad. No todas las acciones se explican solas. Un lápiz puede sugerir “anotar” y una marca de verificación “confirmar”, por lo que acciones como Seleccionar o Editar se pueden malinterpretar. Si no hay una abreviatura clara, una etiqueta de texto es lo mejor.

Seguro notaste que las barras ahora dependen más de símbolos que de texto, y este cambio se ve en toda la plataforma, incluidos los menús. Recomendamos usar símbolos en los menús si esto facilita el reconocimiento. En el caso de acciones relacionadas, no repitas ni varíes los íconos. Usa el símbolo al inicio del grupo y deja que el texto haga el resto. La página de íconos de las Human Interface Guidelines ahora incluye una lista de glifos preferidos para acciones comunes. Es un punto de partida útil tanto si usas símbolos SF directamente como si los adaptas a tu propio sistema. Para garantizar la continuidad, estructura los componentes para que sean escalables y trata la variación como la expresión de una estructura compartida, no como una excepción.

Hacer que funcionen en distintos entornos se reduce a dos cosas: cómo se crean y cómo se comportan. Define una anatomía compartida. Las partes del diseño de un componente deben mantenerse y reutilizarse en lugares familiares. Lo viste en las barras laterales y en los elementos de las tablas, y aplicamos un enfoque similar en los menús. Aunque un menú emergente en macOS y menú contextual en iOS no se vean iguales, ambos tienen un indicador de selección, un ícono, una etiqueta y un elemento accesorio. Si la estructura cambia, el comportamiento compensa. Los componentes siempre deben admitir las mismas interacciones principales. Por ejemplo, las barras de pestañas, los controles segmentados y las barras laterales señalan la selección, la navegación y el estado de forma coherente, independientemente de la forma. No se trata solo de unir plataformas, sino de acercar los componentes relacionados dentro de cada una de ellas. Cuando en los componentes hay una coherencia, todo encaja a la perfección.

Esas son las novedades del sistema de diseño: mejoras del diseño visual, la arquitectura y los componentes, todo unido por Liquid Glass. Ahora es tu turno. Nos emociona compartir contigo esta nueva era del diseño de Apple. Explora las Human Interface Guidelines y los nuevos kits de IU en los recursos de diseño de Apple y comienza a darle vida a estas ideas en tus apps. Gracias por tu atención, hasta la próxima.