Conheça o novo sistema de design

Olá! Meu nome é Maria. Sou designer na equipe Apple Design Nesta sessão, abordarei tudo que você precisa saber sobre as novidades em design visual, arquitetura de informações e componentes principais do sistema. Recomendo conferir a sessão "Conheça o Liquid Glass", apresentada por meus colegas Chan, Shubham e Bruno. Ela prepara o terreno para o que vamos explorar aqui, apresentando os princípios e comportamentos e como usá-los de maneira eficaz e inclusiva nos seus apps.

O Liquid Glass marca a maior atualização de design de software que já fizemos, redefinindo a relação entre interface e conteúdo por meio de um conjunto totalmente novo de heurísticas. O resultado? Uma linguagem de design harmonizada que é mais coesa, adaptativa e expressiva. Abordar sistemas como um todo é uma grande oportunidade. Isso permite que esses princípios sejam aplicados a todas as superfícies e interações dentro do ecossistema da Apple. E com tecnologias como SwiftUI e Mac Catalyst e novos recursos de software, como o Redimensionamento de Janelas no iPad, estamos avançando rumo a uma base de design unificada e evoluindo o sistema para manter a fluidez entre dispositivos, tamanhos de tela e modos de entrada. Esteja você projetando recursos individuais ou moldando sistemas inteiros, a flexibilidade dos frameworks da Apple torna o design para vários dispositivos ainda mais simples, escalável e potente do que nunca. Há muito a ser explorado neste lançamento, então não vou estragar a surpresa. Para destacar as atualizações mais impactantes, vou me concentrar em três áreas. Primeiro, a nova linguagem de design e como ela cria uma base para coesão em grande escala. Depois, a estrutura que guia a navegação e o engajamento do conteúdo. Por último, como a continuidade faz com que as interações pareçam familiares não importa onde aconteçam. Vamos lá. O Liquid Glass desempenhou um papel fundamental na construção da linguagem de design em evolução da Apple, criando familiaridade entre as plataformas e personalizando as experiências para que sejam perfeitas. Ao projetar esse sistema, nosso foco foi o impacto dos mínimos detalhes. Uma abordagem sistemática significa projetar observando todos os níveis, garantindo que todos os elementos, desde o menor controle até a maior superfície, sejam considerados em relação ao todo. Nossa família de cores do sistema foi refinada de modo significativo nos modos Claro, Escuro e Alto Contraste, para funcionarem em harmonia com o Liquid Glass, melhorando a diferenciação de tonalidades, sem perder a identidade da Apple. A tipografia foi refinada para aumentar a clareza e a estrutura e está mais encorpada e alinhada à esquerda para melhorar a legibilidade em momentos importantes, como em alertas e integração. Uma das mudanças mais significativas está no modo como usamos as formas. O hardware da Apple tem bordas consistentes e essa mesma precisão agora orienta o design da interface, alinhando curvatura, tamanho e proporção para criar um visual unificado entre o que você segura e o que vê na tela. Há uma geometria natural no modo como nossas formas se encaixam, focadas na concentricidade.

Ao alinhar raios e margens em torno de um centro compartilhado, as formas se aninham confortavelmente umas nas outras. Para preservar o equilíbrio óptico, as visualizações são matematicamente centralizadas quando isso faz sentido e sutilmente deslocadas quando não faz. Usamos três formas para criar layouts concêntricos. As formas fixas têm um raio de canto constante.

As cápsulas usam um raio que corresponde à metade da altura do contêiner. Já as formas concêntricas calculam seu raio subtraindo o padding da forma principal.

A geometria da cápsula favorece a concentricidade. É por isso que ela aparece em todo o sistema: nas proporções espelhadas de controles deslizantes e interruptores, e também nas barras, botões e nos cantos arredondados de visualizações de tabela agrupadas. As cápsulas trazem foco e clareza a layouts otimizados para toque, mas em ambientes de mesa densos, elas funcionam melhor para ações de destaque. No macOS, os controles Mini, Pequeno e Médio continuarão usando retângulos arredondados, ideais para layouts compactos e de alta densidade, como os painéis de inspetores. Controles grandes usarão a forma de cápsula, juntamente com o novo tamanho extragrande, que aproveita o Liquid Glass para dar ênfase em áreas mais espaçosas. Juntos, eles criam hierarquia e equilíbrio em layouts complexos de mesa. É importante que a sua linguagem de design visual e os seus elementos de interface se harmonizem com o Liquid Glass. Pense nisso como tocar uma música no mesmo tom: os elementos de interface devem complementar o ritmo e a tonalidade do sistema, não colidir com ele. É aqui que as coisas podem ficar complicadas, especialmente ao gerenciar seu próprio sistema de design. Usar as três formas abordadas anteriormente ajuda a manter seus componentes alinhados com o sistema, além de facilitar o trabalho com as APIs da Apple.

Ao atualizar seus apps, fique atento aos cantos que parecem excessivamente estreitos ou muito abertos. Eles podem gerar tensão e transmitir uma sensação de desequilíbrio. Isso costuma aparecer em contêineres aninhados, como uma arte em um cartão. Se algo parece errado, a resposta é simples. A forma provavelmente precisa ser concêntrica para permitir que o sistema calcule os raios internos automaticamente. Você também pode notar isso próximo às bordas dos dispositivos, como este botão. Para layouts de telefone, use uma cápsula com margem extra para criar espaço perto da borda da tela. Para iPad e Mac, use uma forma concêntrica que se alinhe à borda da janela para ter um melhor equilíbrio. Este é um truque legal para gerenciar componentes que precisam funcionar dentro de um contêiner e por conta própria: use uma forma concêntrica com um raio de fallback. O valor concêntrico se adapta quando aninhado, e o fallback entra em ação quando o componente está isolado. Tendo a base, o próximo passo é entender como estruturar seu app para aproveitar ao máximo o Liquid Glass. Conforme os apps ficam mais imersivos e focados no conteúdo, a interface deve facilitar a interação quando necessário e permanecer discreta caso contrário. O Liquid Glass cria uma nova camada funcional na interface, flutuando acima do conteúdo para trazer estrutura e clareza, sem roubar o foco. Isso costuma acontecer ao representar claramente as relações entre superfícies: como elas se apresentam e permanecem conectadas à sua origem, profundidade espacial e equilibrada. Considere o menu action sheet. Ele costumava aparecer na parte inferior da tela, independentemente de onde vinha a ação. Agora, ele surge da própria ação, que serve de origem para o menu action sheet. Funções bem definidas ajudam o sistema a entender essa relação, ancorando a interação à medida que ela se estende diretamente do elemento tocado. Ao criar controles personalizados, use a mesma abordagem e aplique o material diretamente ao controle, não às suas visualizações internas.

O Liquid Glass ajuda a refletir o foco da navegação introduzindo uma variação sutil do material que reforça a intenção conforme a navegação avança ou muda. Embora pareça complicado, isso se baseia em sinais conhecidos, como o uso de uma camada de escurecimento para indicar modalidade quando uma página aparece. Quando uma tarefa interrompe o fluxo principal, combine o Liquid Glass com uma camada de escurecimento para focar a atenção para que a página pareça um espaço claro e com propósito. Por outro lado, quando uma tarefa acontece em paralelo, o Liquid Glass cria uma separação natural para ajudar a manter a clareza sem interromper o fluxo. Quando o foco muda, como arrastar uma página para cima, o Liquid Glass recua sutilmente, ficando mais opaco e aumentando de tamanho para sinalizar um maior nível de engajamento. Além de atuar no foco e na profundidade, o Liquid Glass também aprimora os controles de navegação. Antes, eles se fundiam ao plano de fundo quando a interface estava em repouso. O Liquid Glass ajuda a destacá-los, criando uma separação maior do seu conteúdo e reforçando a interatividade.

Antes de tudo: se você personalizou suas barras, agora é a hora de limpá-las. Todos nós já adicionamos fundos ou bordas extras para dar a importância certa aos botões. Isso era comum e totalmente válido por muito tempo. Mas, com a aparência do novo sistema, estamos reaprendendo de onde vem a ênfase, tornando personalizações como essas desnecessárias.

Em vez de depender de adornos, a hierarquia deve ser expressa por meio de layout e agrupamento. Parte da criação de uma boa estrutura consiste em organizar os itens da barra para facilitar a leitura e a clareza espacial. Ao atualizar para a nova aparência, os itens agrupados usando a API correta serão atualizados automaticamente para compartilhar um plano de fundo e preservar sua relação espacial.

Se as coisas não estão se agrupando do modo que você espera, aqui estão algumas dicas. Se a barra estiver muito cheia, remova o que for desnecessário e mova as ações secundárias para um menu extra, a fim de manter tudo limpo e acessível. Agrupe os itens da barra por função e frequência. Os botões que executam ações relacionadas geralmente devem estar juntos. Não agrupe símbolos com texto, como Selecionar e este ícone de compartilhamento, pois isso pode ser percebido como um único botão. Se você precisar de botões de texto, deixe que eles fiquem nos próprios contêineres.

Uma ação primária, como Concluído, fica separada e aparece colorida, muitas vezes como uma marca de seleção azul no iOS e iPadOS, ou como um botão de texto proeminente no macOS, criando um ponto focal claro, fácil de identificar e interagir. A barra de abas é uma das partes mais persistentes do seu app. Uma boa organização dá às pessoas uma noção clara do layout e ajuda a navegar facilmente entre as seções. Quando o conteúdo não está visível inicialmente, a Busca se torna essencial. Por isso, o iOS incluiu uma aba de busca na parte inferior, o que torna o acesso mais rápido e fácil. As barras de abas também podem incluir recursos persistentes, como controles de reprodução de mídia que permanecem visíveis em todo o app. Evite colocar ações específicas da tela aqui. Um botão de checkout, por exemplo, pertence ao conteúdo associado a ele. Misturar elementos de diferentes partes da interface pode distorcer a hierarquia e dificultar a distinção entre o que é persistente e o que é contextual. A seguir, vamos conferir como os efeitos visuais priorizam o conteúdo e mantêm as interações claras. Os elementos que usam o Liquid Glass precisam ser claramente separados do conteúdo para manter a legibilidade. Como no Safari atualmente, os controles ficam sobre um material do sistema, não diretamente sobre o conteúdo. Sem essa separação, pode haver problemas de contraste. Os efeitos de borda de rolagem reforçam esse limite, substituindo divisores rígidos por um desfoque sutil para manter a ordem e deixar a interface legível. Lembre-se, os efeitos de borda de rolagem não são decorativos. Eles não bloqueiam nem escurecem como as sobreposições. Eles simplesmente delimitam onde a interface e o conteúdo se encontram, e não devem ser usados onde não há elementos de interface flutuantes.

As visualizações de rolagem mostram automaticamente um efeito de borda quando os controles fixados se sobrepõem a elas. Você notará dois estilos em todo o sistema: suave e intenso. Você deve evitar misturá-los ou sobrepor uns sobre os outros. Suave é o padrão: é o que você usará na maioria dos casos, especialmente no iOS e iPadOS. Ele faz uma transição sutil e funciona bem para elementos interativos, como botões ou entradas, usando o Liquid Glass.

O intenso é usado principalmente no macOS. Ele cria um limite mais forte e opaco, ideal para texto interativo, controles sem plano de fundo ou cabeçalhos de tabela fixados que requerem maior clareza. Aplique um efeito de borda de rolagem por visualização. Nos layouts Split View no iPad ou no macOS, cada painel pode ter um estilo. Deixe a altura consistente para manter o alinhamento. O foco no conteúdo é transferido para as barras laterais, onde o estilo pode ser estendido até a borda. Você notará que as barras laterais são recuadas e integradas ao Liquid Glass, permitindo que o conteúdo flua por trás delas criando uma sensação mais imersiva. Os efeitos de extensão de fundo permitem que o conteúdo se expanda atrás da barra lateral, preenchendo toda a largura, com a imagem no centro do layout. Use-os para imagens principais, fundos coloridos ou superfícies que devam parecer amplas. Os textos e os controles devem ficar em camadas superiores para evitar distorções visuais indesejadas. E tem mais! As visualizações de rolagem agora se estendem sob a barra lateral por padrão, para que os carrosséis deslizem naturalmente, permitindo a navegação sem interrupção.

Você pode aplicar efeitos de extensão de fundo por visualização, tendo muita flexibilidade para criar layouts mais sofisticados. Aqui, as visualizações superior e inferior usam o efeito de extensão de fundo, enquanto a visualização de rolagem no meio fica separada. Quando a linguagem do design gera coesão e a estrutura molda a ação, a continuidade conecta tudo em uma experiência fluida. É uma ideia simples: quando alguém alterna entre dispositivos ou redimensiona uma janela, não está recomeçando, mas sim continuando a mesma tarefa. Seu app deve levar esse movimento adiante sem interrupção, mantendo o momento vivo. Uma decisão, seja sobre layout, hierarquia ou interação, deve ser tomada em todos os dispositivos em que seu design aparece.

Isso simplifica seu processo de design. Em vez de começar cada plataforma do zero, você só precisa projetar a anatomia do seu app uma vez. Não é um conceito novo, mas estamos confiantes nele. Então, vamos revisar rapidamente como abordamos o contexto do dispositivo. Conforme atualiza seu app para adotar o novo sistema de design, você deve reavaliar se a experiência se mantém entre as plataformas.

No iPhone, o conteúdo aparece em um layout estreito e vertical. No Mac, tudo se desdobra em uma tela ampla e vasta. O iPad é a camada intermediária no ecossistema, unindo a praticidade do iPhone com a profundidade do Mac. É aqui que o seu design deve saber como se ajustar. Tendo essa base em mente, vamos conferir como o conteúdo compartilhado possibilita essa sensação de continuidade. Lembra dos exemplos anteriores de organização espacial? É aqui que isso realmente importa. Quando agrupado intencionalmente, o conteúdo deve permanecer junto mesmo quando o layout se adapta. Use os mesmos símbolos em todos os dispositivos para preservar o significado e aumentar a familiaridade por repetição. No entanto, nem toda ação é autoexplicativa. Um lápis pode sugerir anotar, uma marca de seleção, confirmar. Isso torna fácil confundir ações como Selecionar ou Editar. Quando não há um símbolo claro, um rótulo de texto é sempre a melhor opção.

Você já deve ter notado que as barras agora usam mais símbolos do que texto, e essa mudança está acontecendo em toda a plataforma, inclusive nos menus. Recomendamos preencher os menus com símbolos quando isso ajudar no reconhecimento. Quando as ações estiverem relacionadas, como várias maneiras de copiar, não repita ou modifique os ícones. Use o símbolo uma vez para apresentar o grupo e deixe o texto fazer o resto. A página Icons na Human Interface Guidelines também foi atualizada para incluir uma lista de glifos preferidos para ações comuns. É um bom ponto de partida se você está usando Símbolos SF diretamente ou mapeando-os em seu próprio sistema. Para manter a continuidade entre dispositivos, estruture os componentes para que sejam ajustáveis, tratando a variação de plataforma como uma expressão de um framework compartilhado, não como uma exceção.

Fazê-los funcionar entre os ambientes geralmente se resume a dois fatores: como são criados e como se comportam. Comece definindo uma anatomia compartilhada. Assim como os símbolos, as partes do layout de um componente devem ser persistentes e reutilizadas em posições familiares. Você já viu isso nas barras laterais e no itens de tabela, e trouxemos uma abordagem semelhante para os menus. Um menu pop-up no macOS e um menu de contexto no iOS podem não parecer iguais, mas ambos incluem um indicador de seleção, ícone, rótulo e item acessório. Mesmo quando a estrutura muda, o comportamento preenche a lacuna. Os componentes devem sempre ser compatíveis com o mesmo conjunto de interações principais. Por exemplo, componentes como barras de abas, controles segmentados e barras laterais indicam seleção, navegação e estado, de forma consistente, fornecendo a mesma função e feedback, independentemente da forma. Não se trata apenas de unir plataformas, mas também de aproximar componentes relacionados dentro de cada uma delas. Quando esses componentes funcionam e parecem conectados, tudo se encaixa.

Essas são as novidades no sistema de design: atualizações no design visual, arquitetura e componentes, todos integrados pelo Liquid Glass. Agora é a sua vez. Mal podemos esperar para compartilhar este novo capítulo do design da Apple com você. Explore o Human Interface Guidelines, confira os novos kits de interface no Apple Design Resources e coloque essas ideias em prática em seus apps. Agradeço a participação. Até a próxima.