Papel e Tinta

A inspiração fundamental por trás do MD é um par de materiais simples que têm sido utilizados por um longo tempo até agora - papel e tinta. O papel é considerado a tela e o elemento que define a estrutura de uma interface, enquanto a tinta é a cor, as animações, o dinamismo do movimento, e o "toque" do design. Papel na visão da Google não é apenas papel em si. Ele tem a profundidade aproximada de cartolina, mas comporta-se como "uma substância avançada tecnologicamente" com seus próprios caprichos, movimento, e - é claro - terminologia.

Papel Co-Planar

Um termo fundamental para entendimento quando se fala sobre o projeto do material é o "co-planar." Em referência ao papel, isso significa que dois pedaços de papel estão no mesmo plano ou nível no eixo Z. As peças podem sentar-se perto uma da outra, sem tocar (chamado de passo), ou eles podem ser bem próximas umas das outras, reunidas em uma costura. A imagem abaixo mostra dois pedaços de papel de união numa costura na parte inferior, com um amplo passo acima.

Camadas & Z-Axis

Um dos grandes componentes do material de desenho é a profundidade e o eixo z. O eixo z é perpendicular a ambos os eixos x e y, e desenvolvedores serão capazes de posicionar os elementos sobre este eixo. Mas eles não ião posicionar as coisas no eixo z apenas por diversão - com o lançamento do Android L, que possui um sistema de renderização surpreendentemente com base na posição de elementos no espaço, poderá ser calculada corretamente a forma de cada sombra de cada elemento de forma perfeita, seguindo princípios de iluminação de elementos. Sombras podem mudar dependendo de como o elemento anima-se, mas sempre terá sua forma exata dentro da interface a que pertence.

Chet Haase, em conversa sobre Design Material do Android, explicou que aqueles que trabalham no design do sistema especificamente, poderão escolher onde as sombras irão se expandir com base em sua posição, e também ser possível tornar as sombras parte do ambiente da interface. Isto significa que as sombras sobre os elementos da interface na versão L não terá manchas completamente escuras - a luz salta em torno de elementos como seria na vida real, proporcionando uma sombra suave.

FAB

FAB será uma enorme mudança para o projeto Android. Caso você esteja se perguntando, FAB significa botão de ação flutuante. É aquela pequena parte inferior circular flutuando no canto inferior direito do Google+, mas pode ser muito mais.

FAB tem a intenção de fornecer um ponto de acesso óbvio e fácil aos usuários para a "ação principal" de cada página em um aplicativo. Assim, para o Google+, a ação principal é a criação de novos conteúdos. Para algo como um aplicativo de mapeamento, ele estaria recebendo direções ou iniciando a navegação, como no caso do Google Maps. Da mesma forma em um aplicativo de música que seria iniciar ou pausar a música em questão.

FAB é flexível. Ele pode expandir-se para uma lista de FAB menores ancoradas ao botão principal, ou pode expandir-se para uma nova superfície inteiramente. Se for usado para um controle de play/pause, FAB poderia expandir para uma superfície totalmente nova, incluindo ao player, as opções avançar/recuar, e os controles de rastreamento.

FAB é uma característica de destaque do design de materiais - não é apenas reconhecível e familiar, mas ele cria uma compreensão instantânea do kernel do núcleo de funcionalidades para cada exibição. Ele informa aos usuários o que eles podem ou devem fazer a seguir para obter a melhor experiência, e isso é incrível.

Cores e Contraste

Outro aspecto crucial da concepção material é a cor e o contraste - designers e engenheiros do Android têm ido além, em um esforço para trazer cor para o Android. Anteriormente, a paleta para projetos holo era limitado - os desenvolvedores foram incentivados a trazer suas cores que caracterizam os seus apps, mas não foi tão fácil como deveria ter sido, e com temas padrão do holo não havia muito incentivo para realmente fazê-lo de uma forma significativa.

Isso tudo está mudando. Com o Android L, os desenvolvedores serão capazes de expandir facilmente com várias cores de tinta em seus aplicativos, com imagens adicionais que tornem tudo mais belo. A especificação de design oferece uma enorme paleta de cores, mas os desenvolvedores vão começar a usar outra ferramenta para tornar as coisas ainda mais fácil.

Paleta

Paleta é uma ferramenta que visa tornar as cores no aplicativo mais consistentes, sensíveis e de fácil realização. Usando o valor RGB dominante de elementos existentes, Paleta pode gerar ... uma paleta de cores ... para que os desenvolvedores possam usá-las de forma mais abrangente. Por padrão, Paleta vai gerar uma seleção de cores com base em cores suaves e vibrantes, quebrando-as ainda mais para o escuro, passando por vários tons e nuances com sombras diversas. Uma paleta maior será possível, mas mesmo esta configuração padrão é altamente impressionante e útil.

Uma nova e mais 'otimista' Roboto

Christian Robertson é o principal designer de Roboto, a fonte que tem sido o padrão em design Android desde o Ice Cream Sandwich, e lentamente, em silêncio, vinha sofrendo uma pequena evolução. Com a inauguração do projeto material, no entanto, a Google está celebrando abertamente o maior conjunto de mudanças para a fonte desde a sua introdução.

Em sua página na especificação design, Roboto é dita como tendo sido "refinada extensivamente" para torná-la mais versátil. Refinada, de fato, a fonte tem re-estilizado as letras K e R com uma perna reta, e glifos que são - em geral - mais redondos, convidativos, e - nas palavras da Google - "Otimistas". Basta dar uma olhada nos pontos - o ponto de exclamação, a minúscula I e J têm pontos redondos em vez de quadrado. Formas redondas são mais atraentes, mais confortável para ler, e apontam para um ritmo de leitura.

Google também reformulou complementos o itálico, ajustando alguns ângulos e derrames para parecer mais equilibrada.
As mudanças são sutis para a maioria dos usuários, mas é inegável o facelift dramático sofrido pela nova fonte. Uma mudança bem-vinda em um pequeno pacote com 1.2MB.

Imagens

Com design de materiais, a Google finalmente está fazendo sugestões fortes para imagens in-app.

Como nos produtos da próprio Google, designers e desenvolvedores devem se sentir próximos, confortáveis com suas imagens, sejam fotos ou ilustrações. O ponto crucial das diretrizes de imagens da Google é esta - os usuários devem obter informações relevantes, apresentados de uma forma que se relaciona com eles em um nível pessoal. Isso torna a experiência divertida. As imagens deve ser envolventes, devem criar a profundidade e, acima de tudo, devem ser usadas ​​cuidadosamente.

Indo um pouco mais fundo, imagens de dentro de aplicativos deve ser consistentes e coesas - não se misturam ativos desenhados a mão com clipart. Imagens devem ser confortáveis, e não deve se sentir fora de lugar.

Google ainda define a diferença entre um avatar e uma miniatura - os avatares são círculos, e representam entidades como pessoas, empresas, etc. Miniaturas, entretanto, são quadrados e pertencem entre conteúdo homogêneo como revisões, cópia geral, etc. Miniaturas devem também ser objetos de recurso .

Por fim, as imagens heróis - Google as dividiu em duas partes: herói de destaque e herói integrado. Heróis em destaque são os pontos fortes de foco com tão pouco conteúdo envolvente possível. Heróis integrados por outro lado, levam menos foco do conteúdo, e são usados ​​para adicionar textura ou profundidade, sem distração.

A expectativa de imagens em aplicativos é uma maneira em que o design de material preenche a lacuna entre o nivelamento simples e design altamente estilizado - imagens fazem uso de todos os pixels na tela, mas complementa a filosofia geral de criação e não é usado para o ornamento sozinho.

Grids

Massimo Vignelli, famoso designer de sistemas, comentou que os grids são como a roupa interior do projeto (ele estava falando de livros, mas funciona). Google dá aos designers diretrizes para os grids - as interfaces funcionam melhor com certos alinhamentos, como uma linha de chave em 16 e 72dp, com outro 16DP linha da direita, ou que tipo deve ser usado com uma grade 40DP linha de base, mas o que é importante aqui não é a medida exata.

O que é importante é que a Google está dizendo aos desenvolvedores e designers para usarem os grids - para interfaces e até mesmo ícones. Os grids são uma daquelas coisas em que ninguém vai saber se você fez certo, mas certamente vai saber se você fez errado. Grids subjacentes possuem conteúdo para fazer as coisas parecerem ordenadas. Quando uma rede é mal implementada, as coisas parecem fora de lugar, e a Google está fazendo o seu melhor esforço para evitar isso, dando-nos algumas ideias sobre o que funciona melhor.

E muito mais está por vir

É claro que os designers e engenheiros do Android colocaram uma tonelada de pensamento e esforço em design de materiais, e as informações que tinham que compartilhar no Google I / O torna o ecossistema Android mais completo, pensativo, e significativamente melhor. Fornecer ferramentas como a paleta e o sistema de renderização de sombra vai torná-lo um pouco mais fácil para criação de designs atraentes ao obter muitos benefícios de um bom design "gratuito", como a Google oferece.
Todos - desenvolvedor, designer ou outros contribuintes do sistema, devem olhar para o projeto de especificação de materiais. É uma explicação detalhada do novo ajuste e acabamento do Android, com ricos exemplos e explicações.

Ainda assim, não há como dizer quando ou até que ponto os desenvolvedores irão participar desta festa de materiais orgaizada pela Google, mas quando o fizerem, estaremos todos prontos para experimentar uma melhor experiência no Android. [Android Police]