Material Design
Material Design (codinomeado Quantum Paper)[1] é uma linguagem de design livre desenvolvida pela Google com o objetivo de unificar e padronizar as interfaces gráficas dos sistemas da empresa (conjunto de diretrizes ou guidelines),[2] anunciado em 2014 como uma melhoria no "card" do assistente pessoal Google Now do sistema Android, que usa layouts mais liberal baseados em grids, minimalismo e clean, com animações e transições responsivas, preenchimentos, e efeitos de profundidade como luzes e sombras. O designer Matías Duarte explicou que "diferente do papel real, o nosso material digital pode se expandir e se modificar de forma inteligente. O Material tem bordas e superfícies físicas. Costuras e sombras dão um sentido com o que você pode tocar." Conforme a Google a linguagem de design é baseada em papel e tinta e,[3][4] pode ser usado a partir da versão 2.1 do Android através da biblioteca v7 appcompat library (presente nos dispositivos Android criados depois de 2009).
O Material Design será progressivamente implementado ao portfólio de produtos de web e móveis da Google, fornecendo uma experiência consistente em todas as plataformas e aplicações. A Google também lançou uma interface de programação de aplicações (APIs) para desenvolvedores terceiros incorporarem a linguagem de design em seus aplicativos.[5][6][7]
Implementação
[editar | editar código]
A Google anunciou o Material Design em 25 de junho de 2014 na conferência Google I/O. Como em 2015[update], a maioria dos aplicativos móveis da Google para Android já aplicaram a nova linguagem de design, incluindo o Gmail, YouTube, Google Drive, Google Documentos, Planilhas e Apresentações, Google Maps, Inbox, todas os aplicativos com a marca Google Play, e, em menor medida, no navegador Chrome e no Google Keep. A interface web para desktop do Google Drive, Documentos, Planilhas, Apresentações e o Inbox também o incorporaram.
A implementação canônica do Material Design para a interface de usuário de aplicativos web é chamada de Polymer.[8] Ela consiste da biblioteca Polymer, um shim que fornece uma API com o Componentes Web para navegadores que não implementaram o padrão nativamente, e um catálogo de elementos, entre eles a "coleção de elementos de papel", que apresenta elementos visuais do Material Design.[9]
Atualizações
[editar | editar código]
Material Design 2
[editar | editar código]Após a reformulação de 2018, o Google iniciou a reestruturação da maioria de seus aplicativos com base em um conjunto atualizado de princípios e diretrizes denominado Material Design 2, que estreou no Android Pie.[10] Essa versão trouxe maior foco na personalização dos componentes básicos do Material Design, permitindo que se adaptassem à identidade visual dos produtos em que eram aplicados.[11] As diretrizes revisadas passaram a enfatizar fortemente o uso de espaços em branco, cantos arredondados, ícones coloridos e barras de navegação inferiores. O Google também passou a utilizar uma versão otimizada em tamanho da fonte proprietária Product Sans, chamada Google Sans.[12]
Material Design 3 (Material You)
[editar | editar código]Durante o evento Google I/O em maio de 2021, foi apresentado um novo conceito no Android 12 chamado Material You (também conhecido como Material Design 3[13]), com foco em animações mais dinâmicas, botões maiores e a capacidade de gerar temas personalizados de interface a partir do papel de parede do usuário.[14] O Material You foi gradualmente implementado em diversos aplicativos do Google em versões anteriores do Android nos meses seguintes, tornando-se um dos principais destaques da linha de smartphones Pixel 6 e Pixel 6 Pro.[15][16][17]
Material 3 Expressive
[editar | editar código]No evento The Android Show: I/O Edition, realizado em maio de 2025, o Google anunciou o Material 3 Expressive para o Android 16 e o Wear OS 6. Essa nova versão do Material Design mantém semelhanças com sua antecessora, mas apresenta animações mais intensas, além de uma estética mais colorida e moderna.[18]
Características
[editar | editar código]Algumas das diretrizes são:
Formas: a interface é baseada principalmente em cartões, com um visual sólido, limpo e, geométrico. Por exemplo, são utilizados retângulos com grandes espaços em branco e, bordas suaves para aumentar a clareza do conteúdo.[2]
Cores: possui paleta de cores própria bastante agradável e chamativa.[2]
Ícones: Os ícones também são feitos a partir de formas geométricas e devem ser simples, para parecer tátil, ou seja, partindo do propósito acima de como se o usuário realmente estivesse no mundo real. De antemão precisamos saber que existem dois tipos: de produto e de sistema. O de produto é o ícone do aplicativo e o segundo se refere aos ícones internos do app, para identificação de funcionalidade.[2]
Tipografia: O Material tem duas fontes padrão, chamadas Roboto e Noto.[2]
Imagens: A utilização de imagens deve ser relevante ao que o usuário está consumindo, como por exemplo, para apresentar conteúdos e avatares, por exemplo.[2]
Animação: o movimento das animações simula o movimento de objetos no mundo real, de forma simples e rápida.[2]
Integração: pode utilizar API de terceiros que permitem as animações de forma mais facilitada. Algumas já vem presente de forma nativa no Android.[2]
Ver também
[editar | editar código]Referências
- ↑ "Exclusive: Quantum Paper And Google's Upcoming Effort To Make Consistent UI Simple".
- ↑ a b c d e f g h guedes, marylene. «O que é Material Design?». TreinaWeb
- ↑ «Google's new 'Material Design' UI coming to Android, Chrome OS and the web». Engadget (em inglês). Consultado em 5 de janeiro de 2023
- ↑ Chester, Brandon. «Google Reveals Details About Android L at Google IO». Anandtech. Consultado em 5 de janeiro de 2023
- ↑ Chris Smith (30 de julho de 2014). «Google's Material Design is about to change the way we look at the worldwide web». BGR
- ↑ "We just played with Android's L Developer Preview".
- ↑ "Google's next big Android redesign is coming in the fall".
- ↑ "Polymer paper elements" Arquivado em 14 de fevereiro de 2015, no Wayback Machine..
- ↑ "Material design with Polymer" Arquivado em 20 de agosto de 2014, no Wayback Machine..
- ↑ Hall, Stephen (26 de abril de 2018). «What exactly is this so-called 'Material Design 2,' and what will it look like?». 9to5Google (em inglês). Consultado em 6 de setembro de 2020
- ↑ «Material Design». Material Design (em inglês). Consultado em 6 de setembro de 2020
- ↑ Hall, Stephen (9 de maio de 2018). «Now we know: Google Sans is actually a size-optimized version of Product Sans». 9to5Google (em inglês). Consultado em 6 de setembro de 2020
- ↑ Material Design [@materialdesign] (27 de outubro de 2021). «The latest in Material Design is NOW available. With Material Design 3, our next generation of the system, we're introducing Material You — a new set of features that help make your apps more personalized. Give it a try → goo.gle/m3-material-io #AndroidDevSummit» (Tweet). Consultado em 27 de outubro de 2021 – via Twitter
- ↑ Bohn, Dieter (18 de maio de 2021). «Android 12 preview: first look at Google's radical new design». The Verge (em inglês). Consultado em 19 de maio de 2021
- ↑ Warren, Tom (10 de setembro de 2021). «Google's Material You design is coming to Gmail, Calendar, and Docs on Android». The Verge. Consultado em 19 de setembro de 2021
- ↑ Li, Abner (15 de setembro de 2021). «Google Photos rolling out Material You redesign, but without Dynamic Color». 9to5Google. Consultado em 19 de setembro de 2021
- ↑ «Google Contacts is already getting its Material You UI makeover». Android Police. 29 de julho de 2021. Consultado em 19 de setembro de 2021
- ↑ «Android and Wear OS are getting a big refresh». Google (em inglês). 13 de maio de 2025. Consultado em 13 de maio de 2025
Ligações externas
[editar | editar código]- [www.google.com/design/spec/material-design/introduction.html «Página oficial»] Verifique valor
|url=(ajuda) (em inglês)
| Desenvolvimento | .svg?lang=pt){kind=logo} | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Lançamentos |
| ||||||||
| Derivados | |||||||||
| Smartphones, tablets |
| ||||||||
| Ramificações e distribuições | |||||||||
| Aplicativos | |||||||||
| APIs | |||||||||
| Interfaces de usuário alternativas | |||||||||
| Listas | |||||||||
| Outro | |||||||||
| Tópicos relacionados | |||||||||
| Visão geral | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Ferramentas e serviços |
| ||||||||||||||||||||
| Pessoas-chave | |||||||||||||||||||||
| Filmes | |||||||||||||||||||||
