studio seu.
Área do cliente
/
Iniciar um projeto
Etapa 1 de 4

O que você tem em mente?

Selecione tudo que se aplica.

Voltar ao blog
UI/UXWebdesignBrandingSistema

Interface ajustável em 2026: o que o slider de transparência do iOS 27 me ensinou sobre marca

por Felipe Mota · 11 de setembro de 2026 · 5 min de leitura

Interface ajustável é aquela em que o usuário, e não o designer, decide parte da aparência final: transparência, contraste, movimento, tema claro ou escuro. Com o iOS 27 chegando em 14 de setembro de 2026 e trazendo um slider que vai do vidro ultra claro ao totalmente tingido, isso deixa de ser detalhe de acessibilidade e vira premissa de projeto. Na minha leitura, a marca que só funciona numa única configuração de tela está desenhada para um mundo que acabou.

O que a Apple mudou no Liquid Glass do iOS 27

Quando o Liquid Glass estreou no iOS 26, eu acompanhei de perto a reação: muita gente achou bonito, e muita gente simplesmente não conseguia ler o que estava em cima do vidro. Um ano depois, a resposta da Apple foi reveladora.

  • WWDC 2026, em junho: a Apple anunciou que o vidro passa a difundir melhor o conteúdo que fica atrás dele, e ganhou uma borda escurecida e reflexos mais brilhantes para separar as camadas.
  • Slider de transparência: em Ajustes, o usuário regula o efeito do ultra claro ao totalmente tingido, e a escolha aparece já na tela de configuração inicial do iPhone.
  • Evento "Surprise and Shine", em 9 de setembro de 2026: a Apple confirmou o lançamento do iOS 27 para 14 de setembro, junto com a linha iPhone 18 Pro.
  • Na web: a media query prefers-reduced-transparency já funciona no Chrome desde a versão 118 e faz parte do Media Queries Level 5, que ainda é um rascunho do grupo de trabalho de CSS.

O detalhe que mais me chamou atenção não é técnico. A Apple, a empresa mais controladora de estética que eu conheço, admitiu que não existe um único nível certo de transparência. Ela entregou o botão para quem usa. Se nem a Apple consegue impor uma aparência só, eu não vou fingir que consigo no site de um cliente.

Por que interface ajustável virou assunto de marca, e não só de acessibilidade

Durante anos eu tratei preferências do sistema como um anexo: ajeitar o modo escuro no fim, respeitar o "reduzir movimento" se desse tempo. Aqui no Studio Seu isso mudou quando percebi uma coisa simples: o cliente final nunca vê o layout que eu aprovei no Figma. Ele vê a versão filtrada pelas escolhas dele.

E essas escolhas estão ficando mais visíveis. Um slider na configuração inicial do iPhone educa milhões de pessoas a esperar controle sobre a aparência das coisas. Quando essa pessoa abre um site cheio de cartões translúcidos, texto fino sobre vídeo e fundo que se mexe sem parar, a comparação é imediata. O site parece teimoso.

Para mim, a pergunta de marca passou a ser outra: o que precisa continuar reconhecível em qualquer configuração? Normalmente a resposta é tipografia, proporção, tom de voz, uma ou duas cores e o ritmo do layout. O vidro, o desfoque e o brilho são tempero. Tempero pode sair do prato sem que ele deixe de ser o prato.

Como eu desenho uma interface ajustável na prática

1. Começo pela versão sem efeito

Eu desenho primeiro a tela com fundos sólidos, contraste firme e zero transparência. Se essa versão já parece a marca, o projeto está saudável. Depois adiciono o vidro como camada opcional. Fazer o contrário, desenhar o vidro e tentar salvar a leitura depois, é o erro que eu mais vejo em sites que chegam para redesign.

2. Transformo cada efeito em token com fallback

No design system, transparência, desfoque e sombra viram tokens com dois valores: o padrão e o reduzido. No CSS, isso se liga a prefers-reduced-transparency, prefers-contrast, prefers-reduced-motion e prefers-color-scheme. Como o suporte à transparência reduzida ainda não é universal entre navegadores, eu nunca deixo a legibilidade depender só dessa query: o valor padrão já precisa passar no teste de contraste.

3. Testo em quatro estados, e não em um

Na revisão de layout eu olho cada tela em claro, escuro, alto contraste e transparência reduzida. Parece trabalho a mais, mas na minha experiência essa checagem leva menos de uma hora por template e evita aquele e-mail do cliente dizendo que no celular do sócio o menu some.

4. Deixo o conteúdo que vende fora do vidro

Logo, preço, chamada principal e botão de compra nunca ficam em superfície translúcida sobre imagem variável. O vidro pode existir na navegação ou em elementos decorativos. O que vende e o que identifica a marca fica em chão firme.

O risco de exagerar no controle

Não acho que a resposta seja encher o site de botões de personalização. Um seletor de tema próprio, brigando com a preferência que a pessoa já definiu no aparelho, costuma confundir mais do que ajudar. Minha regra é respeitar o que o usuário escolheu no sistema e só oferecer controle extra quando existe um motivo real, como leitura longa, painel de uso diário ou uso noturno.

Perguntas frequentes

O que é uma interface ajustável?

É uma interface que se adapta às preferências que o usuário configurou no sistema, como transparência, contraste, movimento e tema. O design define limites e prioridades, e o usuário ajusta o resto.

O slider do iOS 27 afeta o meu site?

Diretamente, ele atua na interface do sistema e dos apps. Indiretamente, muda a expectativa das pessoas, e os navegadores que expõem a preferência de transparência reduzida permitem que o site responda a ela via CSS.

Ainda vale usar efeito de vidro em site de marca?

Vale, desde que seja uma camada opcional. Eu uso em navegação e detalhes, sempre com uma versão sólida pronta para quem reduz a transparência ou precisa de mais contraste.

Quanto isso aumenta o custo de um projeto?

Quando entra desde o início, pouco: são tokens bem pensados e uma rotina de teste. Caro é corrigir depois, tela por tela, num site que já está no ar.

Minha conclusão

O slider do iOS 27 é pequeno na tela e grande no recado: a aparência final de uma interface agora é negociada entre quem desenha e quem usa. Eu prefiro abraçar isso a lutar contra. Uma marca forte aguenta ser vista com mais ou menos vidro, mais ou menos brilho, no claro ou no escuro. Se você quer revisar o site ou o app da sua marca com esse olhar, me chama aqui no Studio Seu, porque eu adoro essa conversa.

O próximo
Vamos construir o seu.
→
Continue lendo
5 de outubro de 2026 · 6 min de leitura
Conteúdo com IA em escala em 2026: o que o spam update de setembro do Google me fez revisar nos sites dos clientes
4 de outubro de 2026 · 5 min de leitura
JPEG XL em 2026: como estou mudando as imagens dos sites agora que Chrome e Firefox aceitam o formato
3 de outubro de 2026 · 5 min de leitura
Rebrand ou refresh em 2026: o que a nova marca da McLaren me lembrou sobre mexer numa identidade