Un pulsante materiale è più di un pulsante

Come modellare (e differenziare) i pulsanti usando i temi di Material Design

Material Design ha recentemente rilasciato una guida alla forma, strumenti e case study aggiornati per mostrare quanto sia facile progettare i componenti dell'interfaccia utente usando il tema dei materiali. Per illustrare ulteriormente le capacità tematiche del nuovo sistema di forme, abbiamo creato esempi dal vivo di pulsanti di materiali in una varietà di temi utilizzando i componenti di materiali per il Web su Glitch. Glitch consente a chiunque (anche a te) di remixare questi esempi di pulsanti e realizzare il loro potenziale espressivo usando il codice. In breve, i seguenti esempi di pulsanti ruotano le stesse manopole proverbiali all'interno di Material Theming per ottenere risultati visivi molto diversi. Poiché sempre più marchi esistono esclusivamente nello spazio digitale, i componenti a tema sono ora importanti quanto un logo nel modo in cui gli utenti si relazionano al tuo marchio.

Ogni pulsante su Glitch è stato tematico per riflettere un marchio o un prodotto immaginario come un servizio di consegna di fiori o un'app podcast. Questa guida decostruirà il tema di ciascun pulsante in termini di marchio e sistemi di colore, tipo e forma del materiale.

Materiale fai-da-te - Impara come remixare questi pulsanti tu stesso nel file .readme del pulsante.

Synergee

App guida alla meditazione

Synergee è un'app di guida alla meditazione che guida gli utenti attraverso i viaggi di meditazione attraverso la tecnologia aptica e altri mezzi non visivi. Il marchio Synergee ha i seguenti attributi: brillante, umile e sofisticato.

Colore

L'uso del blu chiaro e scuro domina il marchio Synergee e parla dei suoi attributi brillanti e umili. Replicando la sensazione di guardare il cielo, i colori esprimono una certa familiarità che risulta piacevolmente amichevole.

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

genere

Synergee esprime il suo sofisticato attributo del marchio attraverso l'uso di K2D, un carattere tipografico tailandese e latino creato da Cadson Demak. K2D include i tradizionali formati di lettere tailandesi che sono intrinsecamente rotondi e "circolari", è bello vedere come le caratteristiche di design dell'alfabeto latino e dell'abugida tailandese siano state trasformate in qualcosa di unico ed eccitante.

$ mdc-typography-font-family: unquote ("K2D, sans-serif");
$ mdc-typography-styles-button: (
 dimensione carattere: 14px,
 peso carattere: 500,
 spaziatura lettere: 0,05 em,
);

Forma

Il brillante attributo del marchio Synergee impone che il tema dovrebbe esprimere un senso di simpatia e ottimismo. Per esprimere ciò, il sistema di forme di Synergee è fortemente arrotondato con piccoli componenti come i pulsanti completamente rotondi.

$ mdc-shape-small-component-radius: (24px);

Rose rosse

Servizio di consegna fiori

Red Roses è un servizio di consegna di fiori che promuove la positività attraverso l'atto di dare e incarna i seguenti attributi del marchio: naturale, gioioso ed elegante.

Colore

Il sistema di colori utilizza tonalità di rosso che parlano della naturalezza delle rose e facilitano la creazione di contrasto tra i diversi componenti. I pulsanti utilizzano il colore principale del tema materiale per impostazione predefinita.

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

genere

Il tema Red Roses utilizza Cabin, un carattere umanistico senza caratteri trovato su Google Fonts; I moduli letterari di Cabin possiedono una combinazione di contorni arrotondati e nitidi che parlano degli attributi naturali ed eleganti del marchio Red Roses. (Cabin prende ispirazione da Gill Sans, che è stato ispirato al "Underground Alphabet" di London Underground).

$ mdc-typography-font-family: unquote ("Cabin, sans-serif");
$ mdc-typography-styles-button: (
 dimensione carattere: 14px,
 peso carattere: 500,
 spaziatura lettere: 0,05 em,
);

Forma

Il sistema di forme delle rose rosse parla sia dei suoi attributi gioiosi che naturali, imitando i petali dei fiori. I raggi alternati per questo pulsante riflettono la (im) perfezione della flora e del mondo naturale; in combinazione con il colore, questa forma crea un forte impatto visivo.

$ mdc-shape-small-component-radius: (4px 12px 4px 12px);

Fatto!

App di gestione delle attività

Fatto! è un'app di gestione delle attività che enfatizza esperienze rapide e compatte per consentire agli utenti di completare le proprie attività senza distrazioni. Fatto! Il marchio ha i seguenti attributi: professionale, veloce e succinto.

Colore

Per parlare degli attributi di marchio semplici e professionali di Done !, il tema utilizza una tavolozza conservativa composta da bianco e un blu abbastanza neutro. Inoltre, per ridurre al minimo la distrazione ed esprimere la velocità, i pulsanti Fine! Evitano di includere un'ombra.

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

genere

Il carattere tipografico rigido Libre Franklin si pone in modo audace e affidabile in contrasto con la tavolozza dei colori conservativa di Fatto! Franklin è un'espansione del carattere tipografico gotico di Franklin, spesso utilizzato per titoli di giornali o cartelloni pubblicitari; è facile vedere le qualità professionali di Libre Franklin nel contesto del pulsante Fatto!

$ mdc-typography-font-family: unquote ("Libre Franklin, sans-serif");
$ mdc-typography-styles-button: (
 dimensione carattere: 14px,
 peso carattere: 500,
 spaziatura lettere: 0,02 em,
 trasformazione del testo: capitalizza,
);

Forma

Il sistema di forme fatto parla della velocità e della sintonia del marchio astenendosi dall'aggiungere il peso visivo degli angoli curvi o inclinati.

$ mdc-shape-small-component-radius: (0px);

Moodie

Mood ring app

Moodie è un'app misteriosa dell'anello dell'umore che determina il tuo umore raccogliendo dati biometrici. Il suo marchio ha i seguenti attributi: misterioso, tecnico e delizioso.

Colore

Gli attributi del marchio misterioso e tecnico di Moodie sono caratterizzati dall'uso dei marchi di verde "terminale", spesso associato a sistemi informatici e grafici vintage. Contrariamente alle interfacce più comuni, l'uso del colore da parte di Moodie parla in gran parte della narrativa ambigua del marchio e serve come base per la magia che cambia colore nel mimare un anello dell'umore.

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

genere

IBM Plex Mono esagera l'attributo tecnico del marchio Moodie in un modo simile al suo sistema di colori; l’uso di un carattere monospaziale suggerisce la tecnicità del prodotto di Moodie. In combinazione con un misterioso e delizioso invito all'azione, IBM Plex Mono agisce sottotesticamente, accennando a qualcosa di alieno.

$ mdc-typography-font-family: unquote ("IBM Plex Mono, sans-serif");
$ mdc-typography-styles-button: (
 dimensione carattere: 14px,
 peso carattere: 600,
 spaziatura lettere: 0,05 em,
);

Forma

Continuando su temi di ambiguità, la storia della forma di Moodie si concentra sullo spazio intermedio tra morbido e rigido, rotondo e nitido, per esprimere nuovamente una visione distorta ma giocosa della tecnologia "misteriosa" dietro il prodotto.

$ mdc-shape-small-component-radius: (8px);

Waverly

App di streaming podcast

Waverly è un servizio di streaming di podcast che si concentra sulla cura di playlist per diversi tipi di contenuti attorno a un singolo argomento come podcast, articoli, video o musica. Waverly incarna i seguenti attributi del marchio: industrioso, contemporaneo e curato.

Colore

Per focalizzare l'attenzione sul contenuto curato, il tema materiale di Waverly è un tema scuro, il che significa che la maggior parte dell'interfaccia utente è di colore scuro con accenti di colore chiaro per indicare elementi utilizzabili, come i suoi pulsanti. Nel caso laborioso di Waverly, il grigio scuro evidenzia un'arancia brillante per garantire la sua gerarchia in un contesto pesante.

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

È importante notare che un "tema" scuro è diverso da una "modalità" scura. Una modalità scura viene attivata da un utente eseguendo un'azione specifica, mentre un tema scuro è inerente al tema in base ai colori del marchio o ad altri fattori .

genere

L'attributo del marchio contemporaneo di Waverly è espresso usando Montserrat, un carattere creato da Julieta Ulanovsky, residente nel quartiere Montserrat di Buenos Aires. Mentre solo a prima vista simile a un carattere tipografico come Gotham, con ampie forme letterali e contorni audaci, Montserrat si adatta perfettamente al fenomeno contemporaneo noto come "caratteri tipografici di marca" con una cordialità arrotondata che si è fatta strada nell'identità di molti prodotti.

$ mdc-typography-font-family: unquote ("Montserrat, sans-serif");
$ mdc-typography-styles-button: (
 dimensione carattere: 14px,
 peso carattere: 600,
 spaziatura lettere: 0,05 em,
);Forma

In questo esempio particolare, Waverly sta usando un pulsante di testo Materiale in cui non ci sono contorni o caselle per indicare una forma. Sebbene non vi sia alcuna forma visibile, dopo l'interazione (come passare con il mouse o toccare) un utente è in grado di vedere i limiti di un pulsante e la sua forma. La storia della forma di Waverly è dolcemente parlata e parla dei suoi attributi contemporanei e industriosi sfruttando la familiare forma di base di Material.

$ mdc-shape-small-component-radius: (4px);

Material Design + Glitch

Material Design vuole che chiunque sia in grado di costruire bellissimi prodotti, più velocemente. I nostri componenti open-source ti offrono tutto il necessario per iniziare a costruire. Glitch rende facile iniziare a armeggiare direttamente nel browser, ispirando l'apprendimento attraverso il gioco. Incoraggiamo chiunque e tutti a remixare questi esempi per creare i propri pulsanti e i propri temi, anche se non hanno mai codificato prima.

Remixa e condividi ciò che fai!
glitch.com/@material