-
Conheça o Liquid Glass
O Liquid Glass unifica a linguagem de design da plataforma Apple e, ao mesmo tempo, proporciona uma experiência de usuário mais dinâmica e expressiva. Conheça os princípios de design do Liquid Glass, explore suas principais propriedades ópticas e físicas e saiba onde e por que usá-lo.
Capítulos
- 0:00 - Introdução
- 1:29 - Dinâmica
- 6:00 - Adaptabilidade
- 10:31 - Princípios
- 18:53 - Próximas etapas
Recursos
Vídeos relacionados
WWDC25
-
Buscar neste vídeo...
-
-
- 0:00 - Introdução
O Liquid Glass adiciona uma camada flexível e dinâmica a apps e experiências do sistema no ecossistema de produtos Apple. É um novo metamaterial digital que manipula a luz de modo dinâmico, comportando-se organicamente como um líquido leve, que responde tanto à fluidez do toque quanto ao dinamismo dos apps modernos.
- 1:29 - Dinâmica
O Liquid Glass complementa a experiência visual e tátil dos dispositivos Apple modernos, cujas telas são arredondadas. Ele usa um efeito de lente, que curva e concentra a luz dinamicamente, criando uma aparência transparente e leve, além de proporcionar definição em relação ao conteúdo de fundo. Os elementos do Liquid Glass se materializam de maneira suave e respondem à interação se flexionando e se energizando com a luz. A interface se adapta dinamicamente à entrada do usuário e às constantes mudanças nos ambientes dos apps modernos, o que faz as transições parecerem mais fluidas e naturais.
- 6:00 - Adaptabilidade
O Liquid Glass se adapta com base no conteúdo abaixo dele e no tamanho da tela. Ele é composto por várias camadas que mudam a tonalidade, as sombras e o alcance dinâmico de maneira contínua para garantir a legibilidade e manter a nitidez visual. Quando o Liquid Glass aumenta de tamanho, ele simula um material mais espesso com sombras mais profundas e efeitos de lente e refração mais nítidos, realçando a percepção de profundidade. Com controles maiores, como as barras laterais do iPadOS e do macOS, o Liquid Glass se adapta ao ambiente ao redor, permitindo que a luz do conteúdo colorido se projete na superfície, reforçando o contexto e a elevação. Os efeitos de borda de rolagem trabalham em conjunto com o Liquid Glass para dissolver o conteúdo no fundo, elevando o vidro visualmente sobre o conteúdo em movimento e mantendo o contraste e a legibilidade.
- 10:31 - Princípios
O jogo de luzes, os efeitos de profundidade e as mudanças adaptativas são camadas em um sistema sofisticado, que trabalham em conjunto. O Liquid Glass habita um ambiente que se comporta como o mundo real. As fontes de luz brilham sobre os materiais, criando destaques que respondem à geometria e ao movimento. A opacidade da sombra aumenta ou diminui dinamicamente, o que resulta em uma separação leve do conteúdo em segundo plano. Durante a interação com os controles, os materiais se iluminam de dentro para fora e refletem em outros elementos com Liquid Glass para fornecer um retorno visual. O Liquid Glass funciona melhor na camada de navegação. Evite colocar o Liquid Glass na camada de conteúdo e evite colocar dentro ou em cima de outros elementos com Liquid Glass para manter a hierarquia e evitar desordem. Há dois tipos de Liquid Glass: Regular, que é versátil e adaptável, e Transparente, que é, como o nome diz, permanentemente transparente e precisa de uma camada de escurecimento para facilitar a leitura. Eles nunca devem ser misturados, pois cada um tem características próprias e casos de uso específicos. Use o Liquid Glass Transparente somente quando três condições forem atendidas: o elemento está sobre o conteúdo de mídia, a camada de conteúdo não será afetada negativamente por uma camada de escurecimento e o conteúdo acima dela tem destaque e brilho. Os elementos adaptam a aparência conforme o que está por trás deles. Pequenos elementos, símbolos e glifos alternam entre claro e escuro para que o material seja facilmente identificável. Os elementos maiores, como menus e barras laterais, também se adaptam com base no contexto, mas não alternam entre claro e escuro. Uma nova maneira de aplicar cores aos elementos gera uma variedade de tons com base no brilho do conteúdo por baixo, imitando vidro colorido de verdade. Essa aplicação de cores enfatiza a característica física e melhora a legibilidade e o contraste. Use a aplicação de cores de maneira seletiva para realçar os elementos e as ações principais. Evite aplicar cores a todos os elementos, pois isso pode gerar confusão. O Liquid Glass conta com vários recursos de acessibilidade, como Transparência Reduzida, Alto Contraste e Movimento Reduzido, que modificam o Liquid Glass sem comprometer seu apelo visual e são aplicados automaticamente quando os ajustes do sistema estão ativos.
- 18:53 - Próximas etapas
O Liquid Glass fornece uma linguagem de design unificada em todas as plataformas Apple, combinando hardware e software com perfeição. Ele proporciona uma experiência de interação mais fluida e dinâmica, conferindo um novo visual a cada parte da interface. Esse é o início de um novo capítulo no design visual e de interação da Apple.