Conheça o Liquid Glass

O Liquid Glass é uma evolução da aparência do software da Apple. Ele adiciona uma camada flexível e dinâmica a apps e experiências do sistema no ecossistema de produtos Apple. Ele se baseia em vários aprendizados, desde a interface Aqua do macOS X, passando pelos desfoques em tempo real do iOS 7 e pela fluidez do iPhone X, até a flexibilidade da Dynamic Island e a interface imersiva do visionOS. Com base nessas experiências, em vez de tentar recriar um material do mundo físico, o Liquid Glass é um novo metamaterial digital que manipula a luz.

Ao mesmo tempo, ele se comporta e se move organicamente como um líquido leve, respondendo à fluidez do toque e ao dinamismo dos apps modernos.

Sou Chan, designer na equipe Human Interface Design da Apple. Nesta sessão, vamos cobrir algumas das principais propriedades dinâmicas do Liquid Glass. Depois, meu colega Shubham mostrará como o Liquid Glass se adapta automaticamente a diferentes contextos e ambientes. Por fim, Bruno vai explicar alguns fundamentos sobre como trabalhar com o Liquid Glass. Vamos começar. O Liquid Glass complementa a evolução do design de produtos Apple, já que as telas ficaram mais arredondadas e imersivas. Na interface, ele aparece em formas arredondadas e flutuantes que se alinham às curvas dos dispositivos modernos. Essas formas definidas foram criadas para se assemelhar à geometria natural dos nossos dedos, facilitando a interação por toque. O chamado “efeito de lente” é a principal definição visual do Liquid Glass. Esse efeito ocorre em tudo ao redor, em nossa experiência do mundo natural. Com essa experiência, temos uma compreensão intuitiva de como a deformação e a refração da luz de um objeto transparente comunicam a presença, o movimento e a forma dele.

O Liquid Glass usa essas dicas visuais para separar conteúdos e apresentar camadas de uma nova maneira, revelando o conteúdo que está por trás delas. Enquanto os materiais anteriores dispersavam luz, esse novo conjunto de materiais curva, molda e concentra luz em tempo real. Isso proporciona definição para o conteúdo de fundo e mantém a mesma experiência visual que temos no mundo natural. Ao esculpir a luz dessa forma, os controles ganham uma aparência ultraleve, transparente e visualmente identificável. Os objetos com Liquid Glass se materializam e desmaterializam modulando gradualmente a curvatura da luz e o “efeito de lente” e garantindo uma transição que preserva a integridade óptica do material.

O comportamento do material é tão importante quanto a sua aparência. Desde o início, o visual e o movimento do Liquid Glass foram projetados como um só. O movimento dos líquidos é algo intuitivo para nós. Movimentos e comportamentos suaves, responsivos e naturais servem de referência para interfaces moverem e reagirem de maneira alinhada à nossa percepção do mundo físico.

Nesse sentido, o Liquid Glass responde à interação se flexionando e se energizando com a luz. Isso torna a interface responsiva, envolvente e viva. E tem uma flexibilidade semelhante à de um gel, que comunica sua natureza transitória e maleável ao se mover em sintonia com a interação. Essa fluidez alinha ainda mais a interface com o dinamismo e a natureza mutável do nosso pensamento e movimento.

Elementos podem se elevar temporariamente no Liquid Glass durante a interação com um componente. Isso mantém o estado de repouso visualmente discreto, ganhando vida ao toque. Essa característica é ótima para controles em que a lente líquida fica transparente e permite visualizar o que está por baixo dela.

Essa fluidez está presente na maneira como o material reage ao toque e aos ambientes dinâmicos dos apps modernos. Ao transitar entre os estados em um app, o Liquid Glass se transforma entre os controles em cada contexto. Isso mantém o conceito de ter um plano flutuante único para abrigar os controles. Isso torna as transições entre diferentes seções de um app fluidas e contínuas, à medida que a forma dos controles mudam. Ao mostrar um menu, a bolha simplesmente se abre para revelar o conteúdo dentro dela. Essa transição leve e linear mantém tudo exatamente onde você tocou. E transmite uma relação muito clara e direta entre o botão e o conteúdo contido nele. Essas propriedades do Liquid Glass marcam uma nova era nos visuais dos apps. E mudam a maneira como eles se comportam. Com capacidade de curvar e moldar a luz de novas maneiras aliada à capacidade de mudar a forma dinamicamente, o Liquid Glass foi projetado para tornar a experiência dos apps mais orgânica, imersiva e fluida.

A seguir, para entender como o Liquid Glass se adapta automaticamente a diferentes contextos e plataformas, gostaria de passar a palavra para Shubham. Obrigado, Chan. O Liquid Glass foi projetado para se adaptar tanto ao seu tamanho quanto ao seu ambiente. Seu objetivo é permanecer visualmente claro, revelando o conteúdo por trás. Mas também muda de maneira constante e sutil para garantir a legibilidade e manter uma separação do conteúdo. O Liquid Glass é composto por várias camadas que trabalham juntas para criar um visual único. Diferentemente dos materiais anteriores com aparência fixa clara ou escura, cada camada se adapta ao que está por trás dela.

À medida que o texto rola por baixo dela, as sombras se tornam mais evidentes para reforçar a separação.

A tonalidade e o alcance dinâmico mudam para garantir que os botões permaneçam legíveis, deixando transparecer o máximo de conteúdo possível. Quando necessário, ele também pode alternar entre os modos claro e escuro, adaptando-se a qualquer contexto e destacando o conteúdo do app.

Quando o Liquid Glass aumenta de tamanho, como ao apresentar um menu a partir de um botão da barra de ferramentas, suas características mudam para simular um material mais espesso e substancial. Ele projeta sombras mais profundas, destaca os efeitos de lente e refração e dispersa menos a luz. Essas mudanças sutis aumentam a profundidade e ajudam na legibilidade do conteúdo que está dentro do vidro. O Liquid Glass é essencial para unificar o design em todas as nossas plataformas. No iPad e no Mac, aplicamos esses mesmos princípios. Assim como no iPhone, as camadas de Liquid Glass formam uma camada funcional distinta para controles e navegação, flutuando sobre o conteúdo e ampliando a área útil.

Os controles se encaixam nos cantos arredondados das janelas, mantendo a concentricidade em toda a interface. Em elementos maiores, como barras laterais, a aparência do Liquid Glass se adapta ao ambiente dentro do app.

A cor do conteúdo ao redor transparece em sua superfície, reforçando o contexto do material e a sensação de elevação dentro da interface. Esse efeito não se limita à superfície: a luz também reflete, dispersa e aparece na sombra, assim como no mundo físico.

As barras laterais flutuantes no iPad e no Mac proporcionam um novo nível de imersão.

A barra lateral e a barra de abas formam uma linguagem coesa e consistente para a navegação principal de apps em todas as plataformas. E elas podem ser consideradas um elemento de navegação único, que se transforma à medida que a tela do app aumenta. Vamos mostrar os efeitos de borda de rolagem.

Esses efeitos funcionam com o Liquid Glass para manter a separação essencial entre a interface e o conteúdo, garantindo a legibilidade, especialmente ao rolar conteúdo dinamicamente. Como o Liquid Glass, os efeitos de borda de rolagem são adaptáveis. Ao rolar conteúdo sob um elemento de vidro, o efeito dissolve suavemente o conteúdo no fundo, elevando o vidro visualmente e permitindo que elementos flutuantes, como títulos, permaneçam sempre visíveis.

Ao rolar conteúdo mais escuro, o vidro muda para um estilo escuro, e o efeito aplica um escurecimento sutil, garantindo novamente contraste e legibilidade. Em alguns casos, por exemplo, quando há cabeçalhos de coluna fixos na barra de ferramentas, usamos um efeito de “estilo rígido”.

Em vez de desaparecer gradualmente, o efeito é aplicado de modo uniforme na altura da barra de ferramentas e na visualização fixa. Use esse estilo quando precisar de um grau extra de separação visual entre elementos flutuantes na visualização de acessórios e o conteúdo de rolagem abaixo. Vimos como o Liquid Glass se adapta a vários tamanhos, ambientes e plataformas e como você pode usá-lo com os efeitos de borda de rolagem para maior clareza e legibilidade, destacando o conteúdo do seu app. Agora, Bruno vai apresentar as variantes do Liquid Glass e orientações sobre como usá-las da melhor forma nos seus apps. Obrigado, Shubham. Para aproveitar o Liquid Glass ao máximo, é importante entendê-lo em mais detalhes. Mostrarei como ele foi desenvolvido e seus comportamentos. Dessa forma, você saberá o que esperar quando começar a criar com ele.

A magia do Liquid Glass está no seu design holístico. Jogo de luzes, efeitos de profundidade e mudanças adaptativas não são características isoladas. São camadas dentro de um sistema sofisticado, que trabalham juntas para criar um material maior do que a soma de suas partes. Vamos analisar algumas dessas camadas. Primeiro, a camada de destaques. O Liquid Glass habita um ambiente que se comporta como o mundo real. As fontes de luz dentro desse ambiente brilham sobre o material, criando destaques que respondem à geometria, como esperado. Em interações como bloquear e desbloquear o telefone, essas luzes se movem no espaço, viajando ao redor do material e definindo sua silhueta. Em alguns casos, a iluminação responde à movimentação do dispositivo, fazendo o Liquid Glass parecer ciente de sua posição no mundo real. As sombras também ajudam na definição dos elementos. Note na sombra neste próximo slide.

O elemento entende o que está por trás dele e aumenta a opacidade da sombra quando está por cima do texto. Por outro lado, diminui a opacidade da sombra quando está sobre um fundo claro sólido. Com isso, há uma clara separação do conteúdo para facilitar a identificação dos elementos. Ao interagir com o Liquid Glass, o material se ilumina por dentro como forma de resposta. Começando sob os dedos, o brilho se espalha pelo elemento e alcança outros elementos com Liquid Glass próximos, interagindo com as propriedades flexíveis do material de maneira natural e fluida.

Esses comportamentos dão vida à interface e a conectam ao mundo físico e à interação com o dispositivo. Em certos momentos, várias camadas se adaptam para manter a clareza e o foco na hierarquia da interface.

Por exemplo, quando uma janela perde o foco no Mac ou iPad, o Liquid Glass muda de aparência e recua visualmente para direcionar a atenção.

E essa sofisticação é intrínseca. Você obtém esses comportamentos dinâmicos e sutis automaticamente ao aplicar o Liquid Glass aos projetos. Agora que já abordei sua estrutura e comportamento, vou apresentar como e quando usar o Liquid Glass e as diferentes variantes que você pode escolher. Pode ser tentador usar o Liquid Glass em tudo, mas ele funciona melhor na camada de navegação que flutua sobre o conteúdo do app. Nesta exibição de tabela, aplicar o Liquid Glass causaria conflito com os outros elementos e na hierarquia. Portanto, mantenha-o na camada de conteúdo para garantir a clareza.

Também evite posicionar vidro sobre vidro. Sobrepor elementos com Liquid Glass pode deixar a interface poluída e confusa. Ao posicionar elementos sobre o Liquid Glass, evite aplicar o material nas duas camadas. Prefira usar preenchimentos, transparência e vivacidade para que os elementos superiores pareçam uma sobreposição sutil integrada ao material. Vamos abordar as variantes do Liquid Glass. São duas: regular e clara. Não as combine, pois cada uma tem características próprias e casos de uso específicos. A variante regular é a mais versátil e a que você mais vai usar. Ela tem todos os efeitos visuais e adaptativos mencionados e oferece legibilidade em qualquer contexto. Funciona em qualquer tamanho e sobre qualquer conteúdo e aceita sobreposições. Já a variante clara não tem comportamentos adaptativos. Ela é permanentemente mais transparente, fazendo com que a riqueza do conteúdo abaixo apareça e interaja com o vidro de uma maneira elegante. Para garantir legibilidade suficiente a símbolos ou rótulos, ela precisa de uma camada para escurecer o conteúdo. Sem ela, a legibilidade piora visivelmente. Se os elementos com Liquid Glass do app forem menores, use o escurecimento localizado para preservar a vivacidade original do conteúdo.

Recapitulando: a variante regular funciona sempre, já clara só deve ser usada quando estas três condições forem atendidas. Primeira: o elemento está sobre o conteúdo de mídia. Segunda: a camada de conteúdo não será afetada pela camada de escurecimento. Terceira: o conteúdo acima dele deve ter destaque e brilho. E, agora, a legibilidade: uma consideração central do design do Liquid Glass.

Elementos pequenos, como barras de navegação e de abas, adaptam sua aparência conforme o que está por trás. Também mudam do modo claro para o escuro com base no fundo para garantir a melhor aparência do material e fácil identificação.

Elementos maiores, como menus ou barras laterais, também se adaptam ao contexto, mas não alternam entre claro e escuro. Sua área é muito grande, e transições como essas causariam distrações. Para manter a legibilidade, os símbolos e glifos sobre o Liquid Glass fazem a mesma coisa. Eles alternam entre claro e escuro, espelhando o comportamento do vidro para maximizar o contraste. Todo conteúdo na variante regular receberá esse tratamento automaticamente.

Você pode usar cores personalizadas com moderação. Quando itens ou elementos têm outro propósito funcional, você pode aplicar cores para destacá-los. Vamos descobrir como isso funciona. O Liquid Glass apresenta uma nova forma de aplicar cores a elementos, respeitando seu princípios e maximizando a legibilidade.

Essa técnica é aplicada nos elementos com Liquid Glass, dos rótulos, texto e botões coloridos à hora que aparece na Tela Bloqueada. Ele dá vivacidade ao material e o conecta melhor com o conteúdo ao redor.

Selecionar uma cor gera uma série de tons mapeados para dar brilho ao conteúdo por trás do elemento colorido. Foi inspirado no funcionamento do vidro colorido na vida real: muda a matriz, o brilho e a saturação dependendo do que está por trás, sem se afastar muito da cor original. Isso reforça a fisicalidade do material e melhora a legibilidade e o contraste.

O melhor é que a aplicação de cores é compatível com os comportamentos do vidro. E aplicar cores a elementos é muito fácil.

Este é um botão com preenchimento sólido, não com cores integradas. Ele é completamente opaco e rompe com a característica visual do Liquid Glass. Repare quando ele começa a aplicar a nova cor. De repente, ele fica mais transparente e mais integrado ao ambiente.

A aplicação de cores só deve ser usada para destacar os elementos e as ações principais na interface. Aqui está um exemplo do que não fazer. Aplicar cores em todos os elementos. Quando todos os elementos são coloridos, nada se destaca, o que pode ser confuso. Para inserir cores no app, faça isso na camada do conteúdo. Já o botão Ver sacola é um ótimo exemplo de quando usar cores: o vermelho destaca o botão como a ação principal nesse app de delivery. A camada de conteúdo é essencial para evitar ruído visual indesejado. Em estados estáveis, como ao abrir um app, evite interseções entre o conteúdo e o Liquid Glass. Prefira reposicionar ou dimensionar o conteúdo para manter a separação.

Além dessas considerações de legibilidade, o Liquid Glass oferece vários recursos de acessibilidade para todas as pessoas e necessidades.

Eles modificam o material e mudam certas camadas do Liquid Glass, sem afetar sua magia.

Por exemplo, o efeito de transparência reduzida deixa o Liquid Glass mais fosco e oculta o conteúdo ao fundo. O contraste aumentado destaca os elementos com bordas em preto ou branco. Já a redução de movimento suaviza alguns efeitos e remove as propriedades elásticas do material. Esses recursos estão disponíveis sempre que você usa o novo material. Assim, sempre que eles forem ativados, os elementos com Liquid Glass serão aplicados em todo o sistema. Nesta sessão, abordamos os princípios e as características fundamentais do Liquid Glass. Descobrimos sua funcionalidade e seu comportamento e demos orientações práticas para usá-lo de modo eficaz e inclusivo. O Liquid Glass oferece uma linguagem de design unificada em todas as plataformas, combinando hardware e software. Ele proporciona uma experiência de interação mais fluida e dinâmica, renovando visualmente toda a interface. Este é o início de um novo capítulo no design visual e de interação da Apple. Queremos que você faça parte disso.