🚀 Oferta especial: 60% OFF no CrazyStack - Últimas vagas!Garantir vaga →
Apple

Liquid Glass: O Novo Guia Visual da Apple

Liquid Glass é a maior mudança de design desde o iOS 7. Descubra porque migrar sua app é obrigatório em 2025 e os cinco erros fatais ao adotar esse novo padrão visual.

CrazyStack
15 min de leitura
liquid glassdesign applewwdc 2025swiftuimigrar apps

Por que isso é importante

Liquid Glass é uma ruptura no design universal da Apple, mudando de vez a experiência visual das apps em todas as plataformas. Quem adotar cedo destaca sua app e comunica modernidade; quem ignora será percebido como ultrapassado. Se você cria apps para iOS, iPadOS ou macOS, adaptar o novo padrão agora pode determinar a diferença entre relevância e esquecimento no seu nicho.

5 Fatos Sobre Liquid Glass Que Você Precisa Saber

Liquid Glass é mais do que um efeito: é uma camada fluida, translúcida e interativa, que torna seu app vivo e universal entre todos os sistemas da Apple. Antes de migrar, entenda cinco conceitos cruciais.

1. Não Use Glass Em Todo Lugar

O novo visual não significa “blur em toda a interface”. O segredo é tratar o glass como camada flutuante sobre o conteúdo. Eleva menus, toolbars e botões criando hierarquia clara. Se tudo vira vidro, nada se destaca. Priorize controles flutuando, nunca “vidro sobre vidro”.

⚠️Atenção

Encher toda a UI de glass destrói a ordem visual. Use glass só para separar controles e flutuar comandos, nunca para camadas sobrepostas ou criar zonas de confusão visual.

2. Glass É Um Layer, Não um Background

Entenda o glass como uma camada responsiva sobre o conteúdo. Menus, barras e botões “flutuam”, deixando o conteúdo brilhar no fundo. O contraste e o efeito mudam conforme a luz e modo claro/escuro.

ℹ️Atenção

Não coloque glass em massa nem tente criar “efeito vidro” nos próprios backgrounds. Tenha sempre algo para o usuário visualizar por baixo dos elementos de glass.

3. Tenha Máxima Cautela Com Cores

Cores em elementos glass mudam de acordo com o conteúdo subjacente, para garantir leitura clara entre modos claro e escuro. Use cor apenas para ações primárias: a Apple recomenda deixar o uso de cor restrito ao fundo ou chamar atenção de ação principal, nunca no próprio botão glass.

⚠️Atenção

Overdose de cor em glass pode causar problemas sérios de legibilidade—e viola as recomendações oficiais. A cor deve focar onde for vital para o fluxo do usuário.

4. Concentricidade: O Segredo Visual Novo

A palavra-chave do novo design: concentricidade. Now, os elementos, curvas e espaçamentos seguem as linhas do próprio hardware Apple—um ajuste visual que garante alinhamento e “encaixe” entre software e aparelho. Isso vale para ícones, cards, botões e elementos radiais.

ℹ️Atenção

Elementos desalinhados ou com bordas que não acompanham o hardware “saltam” negativamente aos olhos, dando aparência de app antigo. Use capsulas e APIs de layout para garantir que tudo fique concêntrico.

5. Novos Ícones Unificados Para Apps

O sistema agora exige que ícones sejam criados para todos ambientes—macOS, iOS, iPadOS, VisionOS—em um só arquivo. O Icon Composer centraliza a criação, aplicando efeitos de glass, translucidez e blur para unir todas as plataformas.

Atenção

Agora, você só precisa fornecer as “camadas” do ícone para o Icon Composer: ele mesmo gera os efeitos e variações automaticamente. O processo ficou fácil, mas um ícone antigo jamais será aceito pelos usuários modernos.

Liquid Glass: O Que é e Como Funciona?

Diferente do antigo visual blur, o Liquid Glass simula vidro verdadeiro: dobra e molda a luz, reage ao toque, animações e às mudanças de contexto. Reflexos e morfismos ocorrem de modo sutil, com transições que refletem até elementos próximos da interface.

Usabilidade, Fluidez e Performance

O Liquid Glass adapta-se em tempo real aos gestos, deixando o toque e navegação naturais. Animações de glass “derretem” para mostrar transições e aumentam a sensação de que o app faz parte do ambiente físico do usuário.

Dark Mode, Light Mode e Leitura

Os tons, símbolos e textos nos elementos glass mudam automaticamente para garantir contraste e leitura clara independente do conteúdo ou do modo do sistema – nunca force um tom fixo. Elementos glass também refletem contexto ao redor, facilitando foco e destaque visual.

Como Migrar: Use SwiftUI e UI Components Oficiais

Use componentes nativos do SwiftUI e UIKit sempre que possível. Eles receberão updates e novas funcionalidades sem esforço manual – animações, reflexos e temas serão aplicados “de graça”.

Atenção

Customizar tudo manualmente aumenta o trabalho e atrasa sua migração futura. Use componentes prontos e ganhe suporte total à acessibilidade.

Adaptação e Percepção do Usuário

Mudanças radicais no visual causam rejeição no começo. Mas, logo, o que parecia estranho torna-se padrão – como aconteceu na transição do skeuomorfismo para o flat no iOS 7. Se sua app ficar “parada no tempo”, será percebida como obsoleta.

Evite Glass on Glass: Hierarquia é Tudo

“Glass on glass on glass” não cria impressões modernas; só confunde e destrói a hierarquia visual. Sempre mantenha espaços bem definidos e camadas claras entre comandos, menus e o conteúdo principal.

Cuidados Especiais com Toolbars e Botões

O novo design privilegia ícones mais do que textos. Separe comandos por agrupamento visual e nunca misture texto e ícone num mesmo botão, para evitar ambiguidades. Distribua espaçamentos usando toolbar spacers conforme recomendado para usabilidade máxima.

Concentricidade na Prática

Cards, ícones e botões devem seguir o mesmo raio de curvatura do hardware. Isso cria uma sensação satisfatória de encaixe e faz o app parecer nativo. Prefira formatos em cápsula e use recursos automáticos do SwiftUI para alinhar seu layout.

Novo Processo: Icon Composer

O Icon Composer automatizou ícones glass: basta fornecer camadas simples e ele entrega arquivos otimizados para todas as plataformas, com controle ajustável de blur e transparência, bem como modos de cor alternativos.

Conclusão: Seu Próximo Passo

Quem já começar a adotar o Liquid Glass antes da concorrência ficará meses à frente na percepção de valor. Mesmo sem experiência em design, usar SwiftUI e Icon Composer abre portas para migrar rápido e sem dor.

Atenção

Assista mais novidades práticas para desenvolvedores no canal Dev Doido e compartilhe seu resultado para a comunidade!

Domine React e Node com o CrazyStack

Aprenda técnicas avançadas de React com nosso curso completo