-
Conheça o novo visual dos ícones de apps
Conheça o visual dos novos ícones de apps para iOS, iPadOS e macOS, incluindo tons claros e escuros e opções transparentes. Saiba como usar translucidez para deixar o ícone do seu app mais vibrante, dinâmico e expressivo e descubra como garantir que o ícone funcione bem com realces especulares.
Capítulos
- 0:00 - Introdução
- 0:53 - Visão geral
- 2:20 - Sistema de design
- 5:18 - Criar ícones
Recursos
Vídeos relacionados
WWDC25
-
Buscar neste vídeo...
-
-
- 0:00 - Introdução
Saiba mais sobre o novo visual dos ícones dos apps, totalmente repaginado, com detalhes sobre a visão criativa, os novos modos de aparência e o sistema de design subjacente.
- 0:53 - Visão geral
A reformulação foi inspirada nos ícones em camadas do visionOS e nas propriedades reais do vidro. O material combina elementos como destaques nas bordas, efeito fosco e translucidez para adicionar profundidade, criar a impressão de iluminação interna e refletir o movimento com base nos dados do giroscópio. O novo tratamento de material fica bonito tanto no modo claro quanto no escuro, e há novos modos de aparência translúcida, incluindo vidro monocromático em versões clara e escura, além de dois modelos coloridos: um escuro, que adiciona cor ao conteúdo em primeiro plano, e um claro, em que a cor é infundida no vidro. Todos os modos de aparência estão disponíveis no iPhone, iPad e Mac. No Apple Watch, os ícones de apps no modo claro recebem o novo visual.
- 2:20 - Sistema de design
A nova linguagem unificada de iconografia funciona em todos os dispositivos Apple, com uma grade de design simplificada para formatos retangulares arredondados e circulares. A nova grade oferece mais espaço e permite criar composições visualmente equilibradas para diferentes proporções. Os ícones do macOS agora são mascarados ou ajustados para se adequar ao novo modelo de retângulo arredondado, recebendo uma aparência moderna com o novo material. Já os ícones do watchOS usam uma grade circular atualizada, que se alinha de forma mais próxima à nova grade retangular arredondada. Modelos atualizados para o novo sistema de design estão disponíveis para Figma, Sketch, Photoshop e Illustrator.
- 5:18 - Criar ícones
A nova linguagem de design para ícones de apps enfatiza o uso eficaz de camadas, translucidez e desfoque. O uso de camadas é essencial para criar composições com dimensão. Mesmo ícones simples, com apenas uma camada em primeiro plano, se beneficiam de efeitos de material como translucidez e sombras, ganhando profundidade e realismo. No entanto, é fundamental manter o equilíbrio: Objetos 3D muito realistas podem competir com as propriedades do material. Por isso. uma abordagem mais plana e frontal costuma ser preferível. Translucidez e desfoque agora são mais fáceis de aplicar, adicionando nuances, leveza e profundidade aos designs. Esses efeitos funcionam bem tanto no modo claro quanto no escuro e se adaptam lindamente a modos transparentes, permitindo que a imagem de fundo apareça ao fundo. Evite cantos vivos e linhas muito finas, optando por cantos mais arredondados e traços mais espessos. Gradientes suaves de claro para escuro harmonizam melhor com os novos efeitos de iluminação, e os gradientes System Light (Claro do sistema) e System Dark (Escuro do sistema) garantem o contraste. Também é recomendado ampliar o uso de fundos coloridos em ícones de apps no modo claro (ou padrão), ajudando a diferenciar melhor os modos.