-
Conoce el nuevo sistema de diseño
Profundiza en el nuevo sistema de diseño para explorar los cambios en el diseño visual, la arquitectura de la información y los componentes centrales. Descubre cómo el sistema transforma la relación entre la interfaz y el contenido para crear diseños dinámicos, armoniosos y coherentes en todos los dispositivos, tamaños de pantalla y modos de entrada.
Capítulos
- 0:00 - Introducción
- 2:06 - Lenguaje de diseño
- 6:16 - Estructura
- 13:34 - Continuidad
Recursos
- Human Interface Guidelines: Toolbars
- Adopting Liquid Glass
- Human Interface Guidelines: Icons
- Human Interface Guidelines
- Human Interface Guidelines: Materials
Videos relacionados
WWDC25
-
Buscar este video…
-
-
- 0:00 - Introducción
El nuevo lenguaje de diseño de Apple transforma fundamentalmente la relación entre la interfaz y el contenido y proporciona una experiencia armonizada, cohesiva y adaptable en todos los dispositivos Apple y tamaños de pantalla.
- 2:06 - Lenguaje de diseño
El sistema utiliza una paleta de colores refinada, tipografía más audaz alineada a la izquierda y concentricidad para crear un ritmo unificado entre el hardware y el software.
- 6:16 - Estructura
Comprender cómo estructurar una app de manera efectiva es crucial al utilizar Liquid Glass. Liquid Glass presenta una nueva capa funcional en la IU, que flota sobre el contenido sin robar el foco. Se consigue creando relaciones espaciales entre las superficies, lo que hace que las interacciones resulten más intuitivas y arraigadas. Las hojas de acción ahora surgen de la acción específica a la que se relacionan, en lugar de aparecer en la parte inferior de la pantalla. Este enfoque, aplicado también a los controles personalizados, ayuda al sistema a comprender y anclar las interacciones. Elimina los colores de fondo de las barras de herramientas y de pestañas personalizadas. Confía en el diseño y la agrupación para expresar jerarquía en lugar de decoración innecesaria. Organiza los elementos de la barra de forma lógica por función y frecuencia de uso. Usa tinte para ayudar a que las acciones principales se destaquen claramente. Las barras de pestañas deben estar bien estructuradas, con una pestaña de Búsqueda dedicada incluida en iOS para un acceso rápido. Liquid Glass funciona en conjunto con efectos de borde de desplazamiento, que reemplazan los divisores duros con un desenfoque sutil para reducir el desorden. Las vistas de desplazamiento ahora se extienden debajo de las barras laterales por defecto, lo que permite que los carruseles y otros contenidos se deslicen de forma natural. Las barras laterales se insertan y se crean con Liquid Glass, lo que permite que el contenido fluya detrás de ellas para una mayor sensación de inmersión. Los efectos de extensión de fondo permiten que el contenido llene todo el ancho de las barras laterales y mantengan las imágenes centradas. Es esencial asegurarse de que el texto y los controles estén superpuestos para evitar distorsiones.
- 13:34 - Continuidad
La continuidad es primordial en el nuevo sistema de diseño para garantizar una experiencia de usuario perfecta en todos los dispositivos. El proceso de diseño se simplifica creando la anatomía de la app una sola vez, que luego se escala adecuadamente para cada plataforma: El diseño vertical estrecho del iPhone, el espacio intermedio escalable del iPad y el lienzo amplio y expansivo de la Mac. El contenido compartido y los símbolos y etiquetas de texto consistentes generan familiaridad y evitan confusiones. Componentes de estructura a escala, con una anatomía compartida e interacciones principales que siguen siendo las mismas independientemente del factor de forma. Este enfoque no solo conecta plataformas, sino que también mejora la cohesión dentro de cada una, haciendo que la app se sienta intuitiva y conectada.