L'interfaccia utente di Material Design di Google viene rinnovata con nuovi colori, iconografia e un focus sul tocco

click fraud protection

I nuovi commit in Chromium Gerrit sembrano fare riferimento a "Material Design 2", che potrebbe essere una versione nuova e migliorata del linguaggio Material Design di Google.

Material Design, il linguaggio di design unificato lanciato insieme ad Android Lollipop, presenta tavolozze di colori piatti e pastello, profondità, luci soffuse e fisica realistica. Ha lo scopo di imitare la tattilità degli oggetti del mondo reale senza ricorrere allo scheumorfismo; Google lo descrive come una sintesi di "principi classici" con "[l'] innovazione e possibilità" della tecnologia.

Dal debutto di Material Design nel 2014, si è diffuso nell'ecosistema Android a macchia d'olio, per non parlare delle app Google come YouTube, Chrome, Gmail, Hangouts e Google Calendar. Pulsanti di azione mobili, colori piacevoli e tecniche di elevazione sono stati resi disponibili come parte del Libreria dei componenti dei materiali su GitHub (il seguito della Design Support Library di Android e del Material Design Lite di Google incentrato sul web), che porta Material bontà per Android sotto forma di visualizzazioni personalizzate e per il Web sotto forma di pacchetti che possono essere importati e utilizzati come HTML standard tag.

Ora, alla vigilia del quarto anniversario di Material Design, sembra che Google stia preparando la prossima generazione ispirato alla carta e all'inchiostro estetico: Progettazione dei materiali 2. Sono disponibili al pubblico poche informazioni preziose su Material Design 2, la cui esistenza abbiamo scoperto questa settimana in nuovi commit in Chromium Gerrit. Non affermiamo che sia a corretto successore del più recente framework Material Design, ma gli impegni indicano cambiamenti evidenti, anche se sottili, nelle tavolozze dei colori, nell'iconografia e nel comportamento del touchscreen.


Material Design 2 si presenta in Chromium Gerrit

All'inizio di febbraio, nuovi commit su Chromium Gerrit hanno implementato l'interfaccia utente "Material Design 2" in Chrome tabstrip: le schede trascinabili contenenti titoli di pagine web, favicon e il pulsante "chiudi scheda" sopra quello di Chrome barra degli indirizzi.

I commit non sono drastici, ma apportano modifiche all'aspetto delle schede di Chrome. Aumentano l'altezza della tabstrip; apportare modifiche non specificate al layout del contenuto delle schede, in particolare ai titoli e agli indicatori di avviso; e diminuire la larghezza del tocco della scheda aumentando la larghezza standard della scheda. Loro esplicitamente non modificare i colori dell'indicatore di avviso della scheda, i colori del separatore di scheda, il pulsante "nuova scheda" o qualsiasi tipografia di scheda.

Una raccolta di schede di Chrome.

È significativo che i commit facciano riferimento all'icona del pulsante di chiusura della scheda "Material Design 2" e alle "costanti di colore di base richieste per Google Material Design 2".

Scavando più a fondo nel codice di commit vengono mostrate le nuove tavolozze di colori "Material Design 2" per i temi Chromium grigio, rosso e rosso-scuro e nuovi colori per la barra degli strumenti standard di Chrome e la barra degli strumenti di navigazione in incognito. Abbiamo utilizzato una tabella di ricerca esadecimale per generare i campioni RGB:

Il rosso di Material Design 2 lo è leggermente più scuro rispetto all’attuale Material Design Rosso 800 (#C62828) e Rosso 600 (#E53935), mentre le nuove tonalità di grigio (#3C4043, #5F6368, #BDC1C6, #F1F3F4) hanno una tinta più chiara e bluastra. Il design dei materiali presenta i grigi tradizionali, dove R=Sol=B, mentre qui, B>Sol>R in ogni tonalità (ma solo 1-4 su 255).

Le versioni conformi a Material Design 2 Chrome presenteranno anche una barra degli strumenti molto più luminosa rispetto alle build attuali: è quasi bianca rispetto all'attuale combinazione di colori grigiastri.

Ecco un rapido mockup di come apparirà la barra degli strumenti con i nuovi colori applicati:

Infine, il commit aggiunge un nuovo file Materiale ottimizzato per il tocco() bandiera al MaterialDesignController, che potrebbe riferirsi a elementi Material Design 2 ottimizzati per il tocco. All'inizio di gennaio abbiamo scritto degli sforzi di Google per migliorare il Supporto touchscreen del browser Web Chrome sui dispositivi Chrome OS e sembra esserne una continuazione.

Ad esempio, il commit mostra che sui dispositivi touchscreen SetStackedLayout di Chrome sarà "always abilitato.' Per impostazione predefinita, quando si aprono molte schede, la larghezza delle altre schede si riduce per adattarsi nuove schede. Il layout in pila di Chrome mantiene le larghezze delle schede originali e aggiunge nuove schede dietro di esse.


L'importanza del colore nella progettazione dei materiali

Cosa significano quindi i nuovi colori nel contesto più ampio del Material Design?

Il Material Design non riguarda solo livelli, componenti ed elementi e il modo in cui si comportano tra loro. Al centro del motivo del design di Google ci sono temi ad alto contrasto, colori vivaci e punti salienti audaci: sono ciò che distingue le app conformi al Material Design dalla massa.

Google fornisce un esempio tavolozze di colori progettato per "lavorare bene insieme" su tutte le piattaforme e incoraggia gli sviluppatori che traggono vantaggio dal codice sorgente un colore principale dell'app, altrimenti noto come colore "dominante", da una raccolta di 500 diversi campioni. (Pensa al "blu", al "verde" o al "viola" e ad altri colori di base.) Se necessario, ottengono un colore secondario da una raccolta ampliata di 700 colori (colori complementari per gli elementi dell'interfaccia utente più importanti e analoghi per gli elementi dell'interfaccia utente meno importanti e un colore terziario da un sottoinsieme di 300).

Il colore gioca un ruolo importante nella gerarchia del Material Design. I colori vivaci suggeriscono importanza: sono riservati ai pulsanti prominenti e ad altri elementi interattivi. I colori più tenui, d'altra parte, aggiungono interesse visivo accentuando campi di testo, barre di avanzamento, collegamenti e altre parti dell'interfaccia utente.

Da quello che sappiamo della tavolozza dei colori di Material Design 2, almeno alcuni dei campioni nei "500 primari" di Google, come Red 600 e 800, sono più scuri dei loro predecessori Material Design. Ma altri, come il grigio, ricevono il trattamento opposto: sia i campioni di grigio che quelli di bianco mostrati nel mockup della scheda Chrome hanno una scala di grigi più fredda e valori di blu più alti.


Al momento, questo è tutto ciò che sappiamo veramente di Material Design 2. Ma i commit potrebbero essere un segno che qualcosa sta accadendo dietro le quinte e, se ciò fosse vero, potremmo imparare di più prima o poi. Si prevede che Google svelerà Android P, la prossima versione principale di Android, già a marzo, mentre Google I/O 2018 inizierà l'8 maggio. Entrambe sono ottime opportunità per svelare Material Design 2.

Aggiornamento 04/02/2018: Poco dopo la pubblicazione di questo articolo, il commit è stato reso privato, il che potenzialmente significa che doveva essere mantenuto segreto. Continueremo a controllare le modifiche di Chromium Gerrit e aggiorneremo questo articolo se ne troviamo.