-
Conheça o novo sistema de design
Aprofunde-se no novo sistema de design para explorar as principais mudanças no design visual, na arquitetura da informação e nos principais componentes do sistema. Saiba como o sistema redefine a relação entre interface e conteúdo, permitindo criar designs dinâmicos, harmoniosos e consistentes entre vários dispositivos, tamanhos de tela e modos de entrada.
Capítulos
- 0:00 - Introdução
- 2:06 - Linguagem de design
- 6:16 - Estrutura
- 13:34 - Continuidade
Recursos
- Human Interface Guidelines: Toolbars
- Adopting Liquid Glass
- Human Interface Guidelines: Icons
- Human Interface Guidelines
- Human Interface Guidelines: Materials
Vídeos relacionados
WWDC25
-
Buscar neste vídeo...
-
-
- 0:00 - Introdução
A nova linguagem de design da Apple remodela fundamentalmente a relação entre interface e conteúdo, proporcionando uma experiência harmonizada, coesa e adaptável em todos os tamanhos de tela e dispositivos da Apple.
- 2:06 - Linguagem de design
O sistema usa uma paleta de cores refinada, tipografia alinhada à esquerda com traços mais fortes e concentricidade para criar uma harmonia visual entre hardware e software.
- 6:16 - Estrutura
Entender como estruturar um app de modo eficaz é fundamental ao utilizar o Liquid Glass.Ele introduz uma nova camada funcional na interface, flutuando acima do conteúdo sem roubar o foco. Para isso, ele cria relações espaciais entre superfícies, fazendo com que as interações pareçam mais intuitivas e sólidas. Os menus Action Sheet agora surgem da ação específica a que referem, em vez de aparecerem na parte inferior da tela. Essa abordagem, aplicada também a controles personalizados, ajuda o sistema a entender e ancorar melhor as interações. Remova as cores de fundo das barras de ferramentas e abas personalizadas. Use o layout e o agrupamento para expressar hierarquia, evitando decorações desnecessárias. Organize os itens de barra de maneira lógica por função e frequência de uso. Use cores para destacar claramente as ações principais. As barras de abas devem ser bem-estruturadas, com uma aba dedicada à busca incluída agora no iOS para acesso rápido. O Liquid Glass trabalha em conjunto com os efeitos de borda de rolagem, que substituem divisores rígidos por um desfoque sutil para reduzir a poluição visual. As visualizações de rolagem agora se estendem por baixo das barras laterais por padrão, permitindo que carrosséis e outros conteúdos deslizem naturalmente. As barras laterais são recuadas e integradas ao Liquid Glass, possibilitando que o conteúdo flua atrás delas, cirando uma sensação mais imersiva. Com os efeitos de extensão de plano de fundo, o conteúdo se expande para atrás das barras laterais, preenchendo toda a largura, enquanto a imagem fica centralizada no layout. É essencial garantir que o texto e os controles fiquem em camadas superiores para evitar distorção.
- 13:34 - Continuidade
A continuidade é fundamental no novo sistema de design, garantindo uma experiência perfeita para o usuário em todos os dispositivos. O processo de design é simplificado ao definir a anatomia do app apenas uma vez, que depois é dimensionada adequadamente para cada plataforma: o layout vertical e estreito do iPhone, o formato intermediário e flexível do iPad e a tela ampla e expansiva do Mac. O conteúdo compartilhado e os símbolos e rótulos de texto consistentes criam familiaridade e evitam confusões. Estruture os componentes para que sejam ajustáveis, com uma anatomia compartilhada e interações centrais que permanecem as mesmas, independentemente do formato. Essa abordagem não apenas conecta as plataformas, como também reforça a coesão dentro de cada uma, fazendo com que o app pareça intuitivo e integrado.