Como estilo botões usando material Theming

Um botão não é apenas um botão.

David Allin Reese Blocked Desbloquear Seguir Seguindo 12 de dezembro de 2018

A Material Design lançou recentemente orientações atualizadas sobre formas, ferramentas e estudos de caso para mostrar como é fácil modelar componentes de interface do usuário usando o Material Theming. Para ilustrar ainda mais as capacidades de temas do novo sistema de formas, criamos exemplos vivos de Botões de Material em uma variedade de temas usando Componentes de Material para a Web no Glitch. O Glitch permite que qualquer pessoa (até você) remixe esses exemplos de botão e perceba seu potencial expressivo usando o código. Em suma, os exemplos de botões a seguir torcer os mesmos botões proverbiais dentro Material Theming para alcançar resultados visuais muito diferentes. Como cada vez mais marcas existem exclusivamente no espaço digital, os componentes temáticos são agora tão importantes quanto um logotipo em como os usuários se relacionam com sua marca.

Cada botão no Glitch tem como tema uma marca ou produto fictício, como um serviço de entrega de flores ou um aplicativo de podcast. Este guia irá desconstruir o tema de cada botão em termos de marca e os sistemas Material Color, Type e Shape.

Material DIY – Aprenda a remixar esses botões você mesmo no arquivo .readme do botão.

Sinergia

App de orientação de meditação

Synergee é um aplicativo de orientação de meditação que orienta os usuários através de jornadas de meditação via tecnologia háptica e outros meios não visuais. A marca da Synergee possui os seguintes atributos: brilhante, humilde e sofisticado .

Cor

O uso de azuis claros e escuros domina a marca da Synergee e fala com seus atributos brilhantes e humildes. Ao replicar a sensação de olhar para o céu, as cores expressam uma certa familiaridade que parece agradavelmente amigável.

 $ mdc-theme-primary: # ded7ff; 
 $ mdc-theme-on-primary: # 003db8;

Tipo

A Synergee expressa seu sofisticado atributo de marca através do uso do K2D, um tipo de letra tailandês e latino criado por Cadson Demak. O K2D inclui letras tradicionais tailandesas que são inerentemente redondas e “loopy”, é legal ver como as características de design do alfabeto latino e da abugida tailandesa foram transformadas em algo único e excitante.

 $ mdc-tipografia-fonte-família: unquote ("K2D, sans-serif"); 
 $ mdc-typography-styles-button: ( 
 tamanho da fonte: 14px, 
 font-weight: 500, 
 espaçamento entre letras: 0.05em, 
 );

Forma

O brilhante atributo de marca da Synergee determina que o tema expresse um sentimento de amizade e otimismo. Para expressar isso, o sistema de formas da Synergee é fortemente arredondado, com pequenos componentes como botões sendo completamente redondos.

 $ mdc-shape-small-componente-raio: (24px);

Rosas vermelhas

Serviço de entrega de flores

Red Roses é um serviço de entrega de flores que promove a positividade através do ato de dar e incorpora os seguintes atributos da marca: natural, alegre e elegante.

Cor

O sistema de cores utiliza tons de vermelho que falam da naturalidade das rosas e facilitam a criação de contraste entre diferentes componentes. Os botões usam a cor primária do seu tema de material por padrão.

 $ mdc-theme-primary: # b31839; 
 $ mdc-theme-on-primary: #ffffff;

Tipo

O tema Red Roses usa Cabin, um humanista sans typeface encontrado no Google Fonts; Letras de cabine da cabine possuem uma combinação de contornos redondos e nítidos que falam atributos de marca natural e elegante da Red Roses. (A Cabin se inspira em Gill Sans, inspirada no Underground Alphabet, do Underground de Londres).

 $ mdc-typography-font-family: unquote ("Cabina, sem serifa"); 
 $ mdc-typography-styles-button: ( 
 tamanho da fonte: 14px, 
 font-weight: 500, 
 espaçamento entre letras: 0.05em, 
 );

Forma

O sistema de forma da Red Roses fala tanto dos seus atributos alegres como naturais, imitando pétalas de flores. Os raios alternados para este botão refletem a (im) perfeição da flora e do mundo natural; em combinação com a cor, esta forma cria um forte impacto visual.

 $ mdc-shape-small-componente-raio: (4px 12px 4px 12px);

Feito!

Aplicativo de gerenciamento de tarefas

Feito! é um aplicativo de gerenciamento de tarefas que enfatiza experiências rápidas e compactas para permitir que os usuários concluam suas tarefas, sem distrações. O feito! A marca tem os seguintes atributos: profissional, rápida e sucinta.

Cor

Para falar com os atributos profissionais e simples da marca Done !, o tema usa uma paleta conservadora composta de branco e um azul neutro. Além disso, para minimizar a distração e aumentar a velocidade, os botões do Done! Evitam incluir uma sombra.

 $ mdc-theme-primary: # 5973bf; 
 $ mdc-theme-on-primary: #ffffff;

Tipo

A rígida tipografia Libre Franklin permanece corajosamente e de forma confiável, em contraste com a conservadora paleta de cores de Done !. Libre Franklin é uma expansão do tipo de letra Franklin Gothic, que era freqüentemente usado para manchetes de jornais ou outdoors; é fácil ver as qualidades comerciais do Libre Franklin no contexto do botão Done !.

 $ mdc-tipografia-fonte-família: unquote ("Libre Franklin, sans-serif"); 
 $ mdc-typography-styles-button: ( 
 tamanho da fonte: 14px, 
 font-weight: 500, 
 espaçamento entre letras: 0.02em, 
 text-transform: capitalize, 
 );

Forma

O sistema de formas do Done fala da velocidade e sucessão da marca, abstendo-se de adicionar o peso visual dos cantos curvos ou angulados.

 $ mdc-shape-small-componente-raio: (0px);

Moodie

Aplicativo anel de humor

Moodie é um aplicativo misterioso anel de humor que determina o seu humor através da recolha de dados biométricos. Sua marca tem os seguintes atributos de marca: misteriosa, técnica e deliciosa.

Cor

Os atributos misteriosos e técnicos da Moodie são caracterizados pelo uso de “terminal” verde, muitas vezes associado a sistemas de computador e gráficos antigos. Em contraste com as interfaces mais comuns, o uso que Moodie faz da cor fala em grande parte da narrativa ambígua das marcas e serve como base para a mágica que muda a cor da imitação de um anel de humor.

 $ mdc-theme-primary: # 009b3b; 
 $ mdc-theme-on-primary: # 003db8;

Tipo

O IBM Plex Mono exagera o atributo técnico de marca da Moodie de maneira semelhante ao seu sistema de cores; o uso de uma fonte monoespaçada sugere a tecnicidade envolvida no produto da Moodie. Em combinação com um misterioso e delicioso call-to-action, o IBM Plex Mono age subtextualmente, insinuando algo estranho.

 $ mdc-typography-font-family: unquote ("IBM Plex Mono, sem serif"); 
 $ mdc-typography-styles-button: ( 
 tamanho da fonte: 14px, 
 peso da fonte: 600, 
 espaçamento entre letras: 0.05em, 
 );

Forma

Continuando em temas de ambigüidade, a história da Moodie se concentra no espaço entre macio e rígido, redondo e afiado, para expressar novamente uma visão distorcida, mas divertida, da tecnologia “misteriosa” por trás do produto.

 $ mdc-shape-small-componente-raio: (8px);

Waverly

Aplicativo de streaming de podcast

O Waverly é um serviço de streaming de podcast que se concentra na organização de listas de reprodução para diferentes tipos de conteúdo em torno de um único tópico, como podcasts, artigos, vídeos ou músicas. A Waverly incorpora os seguintes atributos de marca: trabalhadora, contemporânea e curada.

Cor

Para colocar o foco principal no conteúdo selecionado, o Waverly’s Material Theme é um tema escuro, o que significa que a maioria da interface do usuário é de cor escura com toques de cor clara para indicar elementos acionáveis, como seus botões. No caso diligente da Waverly, o cinza escuro destaca uma laranja brilhante para garantir sua hierarquia em um ambiente de contexto pesado.

 $ mdc-theme-primary: # FE8A00; 
 $ mdc-theme-on-primary: # 003db8;

É importante observar que um “tema” escuro é diferente de um “modo escuro”. Um modo escuro é ativado por um usuário ao executar uma ação específica, enquanto um tema escuro é inerente ao tema com base nas cores da marca ou outros fatores .

Tipo

O atributo da marca contemporânea da Waverly é expresso usando Montserrat, uma fonte criada por Julieta Ulanovsky, residente do bairro de Montserrat, em Buenos Aires. Embora seja apenas semelhante à primeira vista a um tipo de letra como Gotham, com letras largas e contornos arrojados, Montserrat se encaixa perfeitamente no fenômeno contemporâneo conhecido como “tipos de letra de marca” com uma amizade arredondada que encontrou seu caminho na identidade de muitos produtos.

 $ mdc-typography-font-family: unquote ("Montserrat, sans-serif"); 
 $ mdc-typography-styles-button: ( 
 tamanho da fonte: 14px, 
 peso da fonte: 600, 
 espaçamento entre letras: 0.05em, 
 );Forma

Neste exemplo específico, a Waverly está usando um botão de texto Material, no qual não há contorno ou caixa para indicar uma forma. Embora não haja uma forma visível, na interação (como pairar com um cursor ou tocar), um usuário é capaz de ver os limites de um botão e sua forma. A história de forma da Waverly é de fala mansa e fala aos seus atributos contemporâneos e diligentes, aproveitando a forma de referência familiar do Material.

 $ mdc-shape-small-componente-raio: (4 px);