A IU do Material Design do Google está sendo renovada com novas cores, iconografia e foco no toque

Novos commits no Chromium Gerrit parecem fazer referência ao "Material Design 2", que pode ser uma versão nova e aprimorada da linguagem Material Design do Google.

Material Design, a linguagem de design unificada lançada junto com o Android Lollipop, apresenta paletas de cores pastéis planas, profundidade, iluminação suave e física realista. O objetivo é imitar a tatilidade dos objetos do mundo real sem recorrer ao skeuomorfismo; O Google o descreve como uma síntese de “princípios clássicos” com “[a] inovação e possibilidade” da tecnologia.

Desde a estreia do Material Design em 2014, ele se espalhou pelo ecossistema Android como um incêndio, sem mencionar os aplicativos do Google, como YouTube, Chrome, Gmail, Hangouts e Google Agenda. Botões de ação flutuantes, cores agradáveis ​​e técnicas de elevação foram disponibilizados como parte do Biblioteca de componentes de materiais no GitHub (a continuação da Design Support Library do Android e do Material Design Lite do Google, focado na web), que traz o Material's bondade para o Android na forma de visualizações personalizadas e para a web na forma de pacotes que podem ser importados e usados ​​como HTML padrão Tag.

Agora, às vésperas do quarto aniversário do Material Design, o Google parece estar preparando a próxima geração de seu inspirado em papel e tinta estética: Projeto de Materiais 2. Poucas informações estão disponíveis publicamente sobre o Material Design 2, cuja existência descobrimos esta semana em novos commits no Chromium Gerrit. Não afirmamos que seja um apropriado sucessor da mais nova estrutura do Material Design, mas os commits apontam para mudanças perceptíveis, embora sutis, nas paletas de cores, iconografia e comportamento da tela sensível ao toque.


Material Design 2 aparece no Chromium Gerrit

No início de fevereiro, novos commits no Chromium Gerrit implementaram a UI "Material Design 2" no Chrome tabstrip - as guias arrastáveis ​​​​contendo títulos de páginas da web, favicons e o botão "fechar guia" acima do Chrome Barra de endereço.

Os commits não são drásticos, mas fazem alterações na aparência das guias do Chrome. Eles aumentam a altura da tabstrip; fazer ajustes não especificados no layout do conteúdo das guias, especificamente nos títulos e indicadores de alerta; e diminuir a largura de toque da guia enquanto aumenta a largura padrão da guia. Eles explicitamente não modifique as cores dos indicadores de alerta de guia, as cores do separador de guia, o botão "nova guia" ou qualquer tipografia de guia.

Uma coleção de guias do Chrome.

Reveladoramente, os commits fazem referência a um ícone de botão para fechar a guia "Material Design 2" e "constantes de cores básicas necessárias para o Google Material Design 2".

Aprofundar-se no código de commit mostra novas paletas de cores “Material Design 2” para temas cinza, vermelho e vermelho-escuro do Chromium, e novas cores para a barra de ferramentas padrão do Chrome e a barra de ferramentas anônima. Usamos uma tabela de pesquisa hexadecimal para gerar as amostras RGB:

O vermelho do Material Design 2 é um pouco mais escuro do que o atual Material Design Vermelho 800 (#C62828) e Vermelho 600 (#E53935), enquanto os novos tons de cinza (#3C4043, #5F6368, #BDC1C6, #F1F3F4) têm um tom azulado mais claro. O design do material apresenta cinzas tradicionais, onde R=G=B, enquanto aqui, B>G>R em todas as tonalidades (mas apenas por 1-4 em 255).

Versões compatíveis com Material Design 2 O Chrome também apresentará uma barra de ferramentas muito mais brilhante do que as versões atuais – é quase branca em comparação com o esquema de cores acinzentado atual.

Aqui está um modelo rápido de como a barra de ferramentas ficará com as novas cores aplicadas:

Finalmente, o commit adiciona um novo IsTouchOptimizedMaterial() bandeira para o Controlador de design de materiais, que pode se referir a elementos do Material Design 2 otimizados para toque. Escrevemos no início de janeiro sobre o esforço do Google para melhorar o Suporte à tela sensível ao toque do navegador Chrome em dispositivos Chrome OS e parece ser uma continuação dele.

Por exemplo, o commit mostra que em dispositivos touchscreen, o SetStackedLayout do Chrome será 'sempre habilitado.' Por padrão, quando você abre muitas guias, a largura das outras guias diminui para acomodar o novas guias. O layout empilhado do Chrome mantém as larguras das guias originais e adiciona novas guias atrás delas.


A importância da cor no design de materiais

Então, o que significam as novas cores no contexto mais amplo do Material Design?

O Material Design é mais do que apenas camadas, componentes e elementos, e como eles se comportam em relação uns aos outros. No centro do tema de design do Google estão os temas de alto contraste, cores brilhantes e destaques ousados ​​– são eles que fazem os aplicativos compatíveis com o Material Design se destacarem da multidão.

Google fornece amostra paletas de cores projetado para "trabalhar bem juntos" em todas as plataformas e incentiva os desenvolvedores que aproveitam a fonte uma cor primária do aplicativo - também conhecida como cor "dominante" - de uma coleção de 500 cores diferentes amostras. (Pense em "azul", "verde" ou "roxo" e outras cores básicas.) Se necessário, eles obtêm uma cor secundária de uma coleção expandida de 700 cores (cores complementares para os elementos mais importantes da interface do usuário e análogas para elementos da interface do usuário menos importantes e uma cor terciária de um subconjunto de 300).

A cor desempenha um papel importante na hierarquia do Material Design. Cores brilhantes sugerem importância – elas são reservadas para botões proeminentes e outros elementos interativos. Cores mais sutis, por outro lado, adicionam interesse visual ao acentuar campos de texto, barras de progresso, links e outras partes da IU.

Pelo que sabemos sobre a paleta de cores do Material Design 2, pelo menos algumas das amostras nas “500 primárias” do Google, como Red 600 e 800, são mais escuras do que seus antecessores do Material Design. Mas outros, como o cinza, recebem o tratamento oposto – as amostras de cinza e branco mostradas na maquete da guia do Chrome têm uma escala de cinza mais fria e valores de azul mais altos.


No momento, isso é tudo o que sabemos sobre o Material Design 2. Mas os commits podem ser um sinal de que algo está acontecendo nos bastidores e, se isso for verdade, poderemos aprender mais, mais cedo ou mais tarde. Espera-se que o Google retire o Android P, a próxima versão principal do Android, já em março, e o Google I/O 2018 começa em 8 de maio. Ambos são excelentes oportunidades para desvendar o Material Design 2.

Atualização 04/02/2018: Pouco depois da publicação deste artigo, o commit tornou-se privado, o que potencialmente significa que deveria ser mantido em segredo. Continuaremos verificando se há alterações no Chromium Gerrit e atualizaremos este artigo se encontrarmos alguma.