Design dei materiali di Google: pro e contro. Best practice di Google Immagini

Nel nostro articolo di oggi, toccheremo un argomento che non è stato ancora discusso sulla Rusability. Per correttezza, notiamo che in Runet in quanto tale, l'interesse per questo argomento sta appena iniziando a prendere slancio, nonostante il fatto che il concetto stesso sia nato l'anno scorso. Questa è una direzione di design sensazionale e, come alcuni credono, rivoluzionaria, che Google ha soprannominato material design.

Il material design non è tanto nemmeno un nuovo approccio alla costruzione di relazioni tra l'utente e l'ambiente virtuale, ma piuttosto un'intera filosofia che regola tali relazioni. Come molti fenomeni veramente brillanti e freschi degli ultimi tempi, il design dei materiali è una raccolta riuscita di quelle idee e concetti che sono già stati incontrati separatamente in vari prodotti o, come si suol dire, erano nell'aria. Il dibattito sul fatto che il material design sia una buona direzione è ancora in corso, così come una ricerca pignola e scrupolosa di tutti i tipi di carenze, tuttavia, forse nessuno nega che questo concetto sia un riflesso molto accurato dello spirito dei tempi e del aspirazioni degli utenti ordinari. È esteticamente coerente, attraente, intuitivo e, apparentemente, molto facile da usare. "Il design dei materiali è cool" - questo tipo di emozione riunisce sia un pubblico entusiasta che un pubblico con un occhio più critico, sottolineando le carenze del design dei materiali.

Il material design può essere visto come il primo passo importante e abbastanza prevedibile verso una massiccia unificazione dell'interfaccia, e quindi un'esperienza utente unificata in quanto tale. Questa caratteristica è fondamentale per il design dei materiali: è versatile e coerente. La seconda caratteristica del design dei materiali è l'intuitività, che è l'aspetto più importante dopo l'unificazione totalizzante. Infatti, queste due componenti - unificazione dell'interfaccia e massima intuitività - sono progettate per rendere il design dei materiali un fenomeno davvero di massa.

Google ha rilasciato Material Design al pubblico il 25 giugno 2014 come design del nuovo sistema operativo Android, in seguito chiamato Lollipop. Il design del materiale può essere utilizzato completamente solo nell'ambito della creazione di applicazioni per Lollipop, ma alcune applicazioni per Android 4 possono anche essere ridisegnate nello stile del materiale, tuttavia, con alcune restrizioni. Il principale e probabilmente l'unico fattore che limita in modo significativo la libertà degli sviluppatori di applicazioni per Lollipop è la scarsa compatibilità del concept design dei materiali con le versioni precedenti di Android e l'ancora bassa prevalenza di Android 5.1 Lollipop. In ogni caso, l'eliminazione di quest'ultima carenza è solo questione di tempo.

Android Lecca-lecca

Il rilascio del concetto di design del materiale è stato associato all'emergere di un dettagliato, accessibile e dettagliato Le linee guida di Google... Mentre discutiamo del design dei materiali nel nostro articolo, faremo regolarmente riferimento a questo tutorial completo e colorato dei designer di Google.

Punti chiave e principi di base del Material Design

L'intera filosofia del design dei materiali si basa su quattro principi fondamentali e comprensibili:

1. Superfici. Incarnate sotto forma di carte create da "carta digitale", tali superfici obbediscono pienamente alle leggi del mondo fisico, hanno una risposta tattile e forniscono un forte feedback insieme a un'elevata intuizione.
2. Tipografia del senso poligrafico. Invece di reinventare la ruota, perché non sfruttare più di un secolo di esperienza di stampa? Considerando che la superficie originale è ora rappresentata da strati di carta virtuale, praticamente tangibile, è abbastanza logico applicare su di essa informazioni secondo i migliori campioni di prodotti di stampa. Più esageratamente, Google ha adattato le regole della tipografia "reale" per gli schermi mobili.
3. Animazione. L'animazione nella progettazione dei materiali deve obbedire alle leggi fisiche e, quindi, alle aspettative intuitive dell'utente. La relazione tra gli oggetti in movimento, la loro influenza reciproca, il modo in cui appaiono e si muovono: tutto questo dovrebbe essere reale, logico e prevedibile.
4. Design adattivo. L'aspetto principale di cui abbiamo parlato all'inizio dell'articolo. Il design reattivo mira a unificare l'esperienza dell'utente e renderla coerente su tutte le piattaforme.

Combinando questi principi abbastanza semplici ed evidenti, Google ha creato un sistema potente e altamente logico, che, molto probabilmente, verrà utilizzato da noi almeno per i prossimi cinque anni. Diamo uno sguardo più da vicino a ciascuno dei quattro aspetti del design dei materiali.

Superfici, loro proprietà e funzioni

La materialità stessa del concetto di Google è concentrata nelle proprietà delle superfici. La struttura dell'interfaccia stessa è il più realistica possibile: ha una profondità limitata dallo spessore del dispositivo. Ad esempio, un dispositivo spesso 1 cm per design del materiale conterrà un mondo interno dello stesso spessore. Questo è molto simile a un acquario sottile, che ha una parete posteriore e un vetro anteriore, ma al posto della vita marina, in questo acquario galleggiano superfici che assomigliano a fogli di carta e sono distribuite a strati in tutto lo spessore dell'acquario. E, proprio come gli abitanti sottomarini, queste carte di superficie sono completamente soggette a leggi fisiche - a volte sembra che siano più che reali, racchiuse tra il retro dello smartphone e il vetro del display.

Spaccato del design del materiale

AsseZnel mondoMateriale design responsabile del volume dell'interfaccia

Nel mondo del design materico, le superfici hanno diversi livelli di profondità. E se nel design piatto, che è uno dei predecessori del materiale, non c'era alcun accenno di volume, nel design del materiale, quasi impercettibili, le ombre leggere formano una profondità incredibilmente realistica.

Come visualizzare le ombre nel design dei materiali

Immagina di avere pezzi di carta comune sulla tua scrivania, tagliati in rettangoli di varie dimensioni. Spostandoli sul piano del tavolo e sovrapponendoli, vedrai chiaramente quale delle carte di carta è sopra l'altra. Ciò è dovuto alla leggera ombra proiettata dai bordi della carta. Nella progettazione dei materiali, gli sviluppatori hanno completamente ricreato questo principio e la distribuzione delle carte cartacee digitali a diversi livelli, quando una carta si sovrappone a un'altra, corrisponde pienamente alla gerarchia dei contenuti: la superficie sopra l'altra e proiettando un'ombra su di essa è attualmente quello principale, su di esso si concentra l'attenzione dell'utente.

La superficie prioritaria viene in primo piano, proiettando un'ombra sulla "foglia" inferiore

La superficie stessa è infatti un piano di una certa forma (nella maggior parte dei casi - rettangolare), che è in grado di proiettare un'ombra. La superficie funge da piattaforma per i contenuti, un foglio bianco su cui appariranno in seguito altri elementi. Non si intende altro per superficie nel design del materiale: i pezzi di "carta digitale" non hanno e non possono avere alcuna trama o transizioni sfumate.

Caratteristiche della tipografia in Material Design

Come abbiamo detto, la tipografia nel design dei materiali è “reale” come le superfici. Ciò significa che utilizza tutte le stesse regole e gli stessi approcci utilizzati nella composizione. Negli esempi mostrati da Google, puoi trovare i migliori esempi di tipografia classica in esecuzione virtuale.

Esempi di tipografiadesign dei materiali

caratteri

Il carattere predefinito utilizzato in Android per molto tempo è Roboto. Nel nuovo sistema operativo Lollipop e in Material Design, viene utilizzato anche come carattere principale. Oltre a Roboto, le applicazioni Android possono anche utilizzare il font Noto, che si rivolge a lingue per le quali Roboto non è stato sviluppato. Nonostante lo stile generale delle applicazioni Android e i consigli sui font forniti nelle linee guida, in alcuni casi è abbastanza accettabile utilizzare il proprio font di marca invece di Roboto, progettato per formare le associazioni appropriate per l'utente.

FontRoboto

Una delle caratteristiche tipografiche più importanti in Material Design è l'uso di dimensioni dei caratteri contrastanti. Questa tecnica classica può essere vista in molti esempi di Google: i titoli sugli schermi sono digitati in dimensioni molto grandi e, grazie a ciò, si distinguono notevolmente dal resto del testo. In una certa misura, a causa dei titoli grandi e visibili da lontano, l'utente può navigare facilmente tra le schermate delle applicazioni e cogliere rapidamente l'essenza del contenuto corrente. Inoltre, titoli come questi sembrano davvero fantastici.

Tipografia a contrasto in azione

La posizione del contenuto o il principio del layout inMateriale design

Anche il modo in cui il contenuto viene inserito nel concetto di design dei materiali è conforme ai principi del design di stampa. Il componente principale e che forma lo stile del layout virtuale nella progettazione dei materiali è la disposizione dei campi. Margini e padding sono disposti in modo tale che l'attenzione dell'utente sia concentrata sul contenuto situato al centro della colonna principale e l'accesso facile e veloce a elementi aggiuntivi è possibile grazie all'ampio margine sinistro. Un principio simile può essere osservato sulle pagine di molte pubblicazioni a stampa.

Struttura e disposizione dei margini nel material design

Icone

L'iconografia utilizzata in Material Design è uno sviluppo logico dell'idea di massima semplificazione riscontrabile nelle versioni precedenti di Android. Google descrive le icone per il materiale come semplici, chiare e amichevoli. Allo stesso tempo, l'idea di materialità può essere estesa anche alle icone: Google stesso incarna coerentemente l'idea di materiale nelle icone dei suoi prodotti. Ad esempio, l'icona della busta di carta di Gmail deriva dalla sua controparte reale. In un ambiente di progettazione dei materiali, un'immagine di busta semplificata appare reale quasi quanto il prototipo "reale": l'icona mostra ombre distintive che rappresentano le curve e la struttura fisica della busta di carta piegata.

Un prototipo virtuale di una busta di carta e un'icona già prontaGmail

È interessante notare che un approccio materiale alla creazione di icone è consentito solo per quelle icone che simboleggiano un prodotto specifico, come Gmail. Altre, icone di sistema (o icone dell'interfaccia utente) che riempiono le applicazioni sono di natura meno materiale. Sono davvero minimali, uniformi e semplici. Per la loro semplicità e simbologia, sono leggibili anche se molto ridotte. Queste icone sono dominate da forme geometriche.

IconeAndroid Lecca-lecca- cosa potrebbe esserci di più minimalista e semplice?

Per gli sviluppatori, Google offre un impressionante set di icone di Material Design. In questa raccolta puoi trovare, forse, tutte le icone necessarie per creare applicazioni con il design dei materiali. Il set di icone del design dei materiali di Google è disponibile su GitHub. Vorrei anche citare la risorsa materialdesignicons.com, dove si possono trovare non solo le icone di altri autori, ma anche proposte sviluppate in autonomia.

Filosofia del colore

Il colore gioca un ruolo più importante nel nuovo design di Lollipop rispetto alle versioni precedenti di Android. Anche in questo aspetto del design si nota la matericità di cui parliamo in tutto l'articolo. La stessa Google sta manifestando separatamente una nuova politica del colore, evidenziando fonti di ispirazione come l'architettura moderna, i segnali stradali e persino il nastro adesivo sul marciapiede. Allo stesso tempo, le brillanti combinazioni di colori artificiali nel design dei materiali coesistono con sfumature naturali naturali e tenui. Per molti versi, questo approccio è ancora una volta in accordo con i canoni della stampa, secondo cui il colore ha un effetto speciale sulla percezione delle informazioni da parte del lettore.

L'idea principale di lavorare con il colore nel design dei materiali è la separazione delle sfumature in principale e accento. Google suggerisce di utilizzare 500 diverse tonalità come colori primari, che insieme costituiscono la tavolozza primaria. Tutti gli altri colori non inclusi in questa tavolozza possono essere utilizzati come colori di accento.

Esempi di colori primari daPrimariotavolozze e relativi colori di accento (mostrati nei riquadri inferiori, etichettati come "UN"Prima del numero di tonalità)

Durante la progettazione dell'interfaccia, Google suggerisce di limitarla a un massimo di tre colori dalla tavolozza principale e un colore di accento. I colori primari vengono applicati a elementi come la barra delle azioni, nonché (come nel caso del bianco) applicati alla superficie contenente il contenuto del testo principale. È interessante notare che colorando la barra delle azioni dell'applicazione con uno dei colori, dobbiamo colorare la barra di stato con una tonalità più scura dello stesso colore:

Stato sbarraprende coloreazione sbarrama si distingue ancora con una tonalità più ricca e più scura

Per creare accenti vengono utilizzati colori davvero vivaci e accattivanti nel design dei materiali. Gli elementi attivi delle applicazioni necessitano di tali accenti di colore, prima di tutto, ovviamente, il pulsante di azione mobile. Oltre a ciò, è necessario dipingere vari cursori e interruttori con colori accesi luminosi.

Gli elementi di azione come il pulsante mobile e i cursori sono altamente intuitivi grazie in gran parte all'uso di colori accentati che spingono l'utente ad agire

Animazione

Movimento quadrato suprematista, Kazimir Malevich (1920) eSignificativo Movimento, Google Materiale Design (2014)

L'animazione nel material design è uno degli aspetti più interessanti. È grazie all'animazione dettagliata che obbedisce alle leggi fisiche del mondo reale che i dispositivi con Android 5 a bordo sono così accattivanti e fanno venire voglia all'utente di armeggiare per ore, soprattutto la prima volta dopo l'incontro. La funzione dell'animazione nel material design è quella di mostrare costantemente all'utente le conseguenze delle proprie azioni. L'animazione attrae l'occhio e in modo visivo ed eloquente mostra all'utente esattamente cosa sta succedendo in un dato momento.

Come tutti gli altri componenti del design dei materiali, l'animazione che obbedisce alle leggi fisiche non è qualcosa di fondamentalmente nuovo: gli sviluppatori hanno appena adattato le regole dell'animazione classica all'ambiente virtuale del sistema operativo.

La base dell'animazione del material design è l'interazione degli aerei, i pezzi di "carta digitale" di cui abbiamo parlato prima. Questi piani, muovendosi a diversi livelli nel loro mondo, limitati dalla parete di fondo dello smartphone e dal vetro dello schermo, possono incontrarsi, spostarsi e spostarsi l'un l'altro, venire alla ribalta al comando dell'utente, aumentando di dimensioni e riempiendo il schermo.

Proprio come nell'animazione classica, tutti i movimenti dei piani sono regolati da regole rigide, grazie alle quali avviene un'accurata imitazione del movimento delle superfici nel mondo reale.

In primo luogo, tutti gli oggetti nel mondo reale hanno massa e, quindi, una certa resistenza. Per spostare un oggetto, è necessario applicare una forza su di esso. In questo caso, l'oggetto (nel nostro caso, la superficie) non inizierà a muoversi immediatamente - a causa della sua massa e resistenza, accelererà per un po 'di tempo, quindi, al termine del movimento principale causato dall'applicazione della forza, rallenterà anche per un po', muovendosi già per inerzia. Applicando queste semplici leggi, otteniamo un'interfaccia con movimenti di superficie incredibilmente realistici.

Le superfici mobili hanno la capacità di muoversi in modo naturale con una prevedibile resistenza al movimento.

Sposta il livello della carta digitale nella galleria

In secondo luogo, nel material design, un nuovo oggetto appare o esce dallo schermo in modo molto efficace. Proprio come nel mondo reale, nell'ambiente del material design, gli oggetti non appaiono dal nulla, né vanno da nessuna parte. In OS Lollipop, l'apparizione di un nuovo oggetto in primo piano è associata a curiose metamorfosi: l'oggetto, infatti, non appare improvvisamente dal nulla, scivola fuori, allungandosi gradualmente e acquisendo la forma di una superficie. In questo caso non si verifica alcuna osservanza delle proporzioni, perché un aumento o una diminuzione proporzionale e simmetrica della superficie darà l'impressione di avvicinarsi o allontanarsi, mentre bisogna indicare l'apparizione sullo schermo di un nuovo pezzo di "carta digitale" , separato e indipendente.

Per realizzare questo nuovo effetto oggetto, il design dei materiali offre due approcci, con diversi gradi di evidenza. La designazione più vivida e inequivocabile dell'aspetto di una nuova superficie si realizza con l'aiuto di una goccia crescente: dopo aver toccato con un dito e aver chiamato un oggetto, la superficie inizia a diffondersi sullo schermo come un'onda.

Una goccia che forma un nuovo piano di lavoro - uno degli effetti più visibili nel design dei materiali

L'effetto della superficie scorrevole può essere molto delicato e colorato

Un altro modo per mostrare all'utente il principio delle transizioni è creare un aumento asimmetrico e irregolare in una superficie rettangolare causato dall'utente. Il rettangolo di superficie viene allungato in modo sproporzionato rispetto alla forma desiderata. Questa tecnica consente di attirare l'attenzione dell'utente con un movimento attivo e non lineare e di attirare la sua attenzione sul principio dell'aspetto di nuove superfici.

Un esempio di animazione di icone di base inAndroid Lecca-lecca

OnnipresenteOndulazione-l'effetto

L'effetto a catena, ovvero il movimento ondulato delle ombre dove il dito tocca lo schermo del dispositivo, è un altro aspetto importante del feedback. In Lollipop, l'effetto Ripple viene applicato quasi ovunque. Quando si tocca l'interfaccia di un nuovo sistema operativo, le onde divergono nella maggior parte dei casi, sia che si tratti di premere un pulsante o di sfogliare una galleria di foto. Tecnicamente parlando, non appena il sistema riceve le informazioni di input (toccando il display con un dito), il sistema conferma immediatamente l'accettazione di queste informazioni attraverso una sfocatura ondulata di "inchiostro digitale".

Ondulazione-l'effetto che si verifica quando si tocca rapidamente lo schermo con il dito

Ondulazione-effetto che si verifica quando si cerca di spostare un'immagine all'interno della galleria

L'aspetto tecnico dell'animazioneMateriale design o busta naturale

Come abbiamo già detto, nel mondo reale, per portare un oggetto fuori dallo stato di quiete, occorre applicargli uno sforzo; in questo caso, la fase principale del moto dell'oggetto sarà preceduta dalla sua accelerazione, così come un arresto completo sarà preceduto da una decelerazione. Influenzando costantemente il mondo materiale, siamo abituati a questo stato di cose, quindi qualsiasi altro modo di spostare gli oggetti, come l'accelerazione istantanea e un arresto brusco senza inerzia, ci sembra innaturale, strano e, spesso, fastidioso. Considerando questo aspetto, i creatori del design dei materiali hanno fatto un buon lavoro sulla "fisica" dell'animazione, avvicinandola il più possibile alla vita reale.

In un ambiente di design materico, gli oggetti portati fuori da uno stato di quiete rapidamente (ma non istantaneamente!) Accelerano e rallentano dolcemente lentamente. Questo tipo di movimento e animazione è piacevole con cui interagire, poiché corrisponde alla nostra esperienza sviluppata nel processo di comunicazione con il mondo reale.

Grafico del movimento di oggetti animati: accelerazione rapida e decelerazione graduale

Design adattivo

L'aspetto più importante e chiave del design dei materiali. La filosofia del design dei materiali implica una completa unificazione dell'esperienza dell'utente. In altre parole, l'utente non dovrebbe trovarsi di fronte a versioni diverse della stessa applicazione utilizzando gadget diversi. L'esperienza dell'utente dovrebbe essere la stessa per un desktop e per uno smartphone o un tablet. Le uniche differenze accettabili e oggettive sono le diverse dimensioni e proporzioni degli elementi dell'interfaccia dell'applicazione. In caso contrario, versioni diverse della stessa applicazione dovrebbero formare un'esperienza utente completamente identica.

Google è stato uno dei primi a riconoscere la necessità di unificare e sviluppare un'esperienza utente coerente. In pratica questa realizzazione si è trasformata nel cosiddetto progetto "Kennedy", quando nel 2011 l'azienda ha iniziato a sviluppare un'unica tipologia di interfaccia per tutte le sue applicazioni. L'estetica e l'esperienza utente di Google erano buone, ma c'era ancora un divario tra le versioni desktop e mobile dei loro prodotti per Android. In realtà, il material design stesso è il tentativo successivo al progetto Kennedy di creare un'interfaccia veramente unificata.

La semplicità visiva del materiale ci ha permesso di sviluppare una serie di regole e metodi che rendono facile adattare le applicazioni create nello stile del design dei materiali per piattaforme diverse.

Innanzitutto, le applicazioni realizzate secondo il concetto di design dei materiali hanno una struttura a blocchi. Analizzando l'interfaccia di tali applicazioni, si può notare che è caratterizzata da una chiara distribuzione dei blocchi su una griglia modulare. Invece di un design dell'interfaccia vario, non sempre ovvio e confuso, otteniamo una sorta di costruttore, le cui singole parti possono essere facilmente spostate e adattate a un display specifico.

Griglia modulare e blocchi distribuiti

Grazie ai blocchi, ognuno dei quali ha un limite oggettivo di espansione o contrazione, possiamo rendere l'interfaccia dell'applicazione ben leggibile e di facile utilizzo su qualsiasi schermo. È grazie al margine di espansione e contrazione di cui dispone ciascuno dei blocchi applicativi che il material design fornisce uno strumento davvero efficace per unificare completamente le interfacce dei vari prodotti software.

Interfaccia progettata secondo i principiMateriale design, universale per qualsiasi schermo

In secondo luogo, l'adattamento dell'interfaccia dell'applicazione ai diversi dispositivi è legato alla quantità di informazioni visualizzate sullo schermo. Ovviamente, più piccolo è lo schermo, meno informazioni dettagliate possiamo dimostrare all'interno della sua struttura. In questo caso, dobbiamo trasferire parte del contenuto su schermi separati o nasconderlo dietro elementi aggiuntivi: questa pratica è particolarmente tipica per le applicazioni adattate per smartphone.

Gli elementi

Pulsante flottante in design normale o mini

Galleggiante azione pulsante. Il bottone flottante è uno degli elementi più distintivi e riconoscibili del material design. È lei che l'utente nota in primo luogo. Il pulsante mobile è un ottimo modo per spingere l'utente ad alcune azioni chiave, con il suo aiuto una persona ottiene rapidamente l'accesso a quelle funzioni che sono più rilevanti per lui al momento. Il pulsante tende ad apparire in diverse parti dello schermo e, nonostante si trovi più spesso nell'angolo inferiore, può essere posizionato ovunque sullo schermo.

Va ricordato che un pulsante mobile può essere associato solo a un tasto, azione di base eseguita in una specifica applicazione. Ad esempio, nel file manager, un pulsante mobile può significare aggiungere file o creare una nuova cartella, in un'applicazione di messaggistica o di posta - creare un nuovo messaggio o lettera, in un social network - un "mi piace" e così via. L'azione principale è sempre legata a un pulsante mobile, sebbene ci siano alcune limitazioni.

Non tutte le schermate necessitano di un pulsante mobile. Alcune azioni sono più facili da eseguire interagendo direttamente con il contenuto dell'applicazione. L'esempio più tipico di tale eccezione è la galleria fotografica. Visualizzando le foto, è più facile entrare in contatto con le immagini immediatamente, senza intermediari sotto forma di pulsante mobile.

Mentre è nella galleria, l'utente non ha bisogno di un pulsante mobile: l'azione principale è selezionare e visualizzare le foto

Il pulsante fluttuante ha sempre la forma di un cerchio che proietta una piccola ombra ed è lo stesso pezzo di carta digitale delle altre superfici. Il pulsante ha un colore accento brillante che non si sovrappone ai colori principali di primario tavolozza, quindi rimane sempre l'elemento principale e più visibile sullo schermo. Inoltre, il suo predominio è enfatizzato dalla sua posizione rispetto ad altri livelli dell'interfaccia: il pulsante mobile è sempre in primo piano e non può essere sovrapposto ad altri elementi dell'applicazione.

Pulsante di azione mobilev azione

Soprattutto, un pulsante mobile è caratterizzato dal fatto che può essere associato solo ad azioni positive come creare, aggiungere o spostare all'interno della navigazione. Associare un pulsante mobile ad azioni distruttive o atipiche - eliminare, regolare il volume o richiamare il menu delle impostazioni - è illogico e psicologicamente irragionevole.

Azioni positive e negativegalleggiante azione pulsante

E infine, l'ultimo punto importante: può esserci un solo pulsante mobile sullo schermo. La presenza di più pulsanti di azione mobili all'interno della stessa schermata distrugge completamente l'intero punto di un pulsante mobile, ovvero l'esecuzione di un'azione chiave in un'applicazione.

App sbarrasostituzioneazione sbarra

La barra delle azioni è cambiata in modo significativo rispetto alle versioni precedenti. In Android Lollipop, la sua funzionalità è aumentata in modo significativo e ora l'elemento aggiornato si chiama barra delle app. Grazie alle modifiche, la nuova barra delle app è uno strumento per il controllo completo dell'utente sull'applicazione e, come nel caso di altri aspetti del design dei materiali e in particolare del nuovo sistema operativo Lollipop, la barra delle app è completamente intuitiva e comprensibile.

La barra dell'app non è limitata a una dimensione fissa: ora può essere ridimensionata proporzionalmente, posizionando su di essa tutti i contenuti necessari e i controlli dell'applicazione, come menu a discesa, filtri, un modulo di ricerca e così via.

Versione base dell'aggiornamentoazione sbarracontenente gli elementi necessari per controllare l'applicazione

sfumatureapp sbarraproposto daGoogle

Lo stato attuale delle cose con lo sviluppo di app Android Lollipop e AppCompat v21

Il problema principale con il passaggio a Material Design è la scarsa compatibilità delle nuove interfacce con le versioni precedenti di Android. Sono tanti gli sviluppatori che sono restii a sacrificare questa compatibilità, e per questo motivo la distribuzione di applicazioni basate sui principi del material design rimane piuttosto limitata. Questo stato di cose persisterà per qualche tempo, mentre la stragrande maggioranza dei dispositivi Android è in esecuzione su versioni precedenti.

Tuttavia, per quegli sviluppatori che desiderano mantenere le loro applicazioni compatibili con le versioni precedenti di Android, Google offre una serie di strumenti che consentono loro di utilizzare elementi di design dei materiali nelle applicazioni per i predecessori di Lollipop. Nel relativo blog, gli sviluppatori sono incoraggiati a familiarizzare con la libreria AppCombat, con la quale è possibile aggiungere elementi materiali alle versioni precedenti di Android.

Una delle caratteristiche più interessanti è dotare un'applicazione che funziona su versioni precedenti di Android di una barra delle applicazioni completa, che è un elemento di design essenziale in Lollipop. Insieme al nuovo widget, le vecchie applicazioni ricevono tutte le funzionalità avanzate che contraddistinguono la barra delle app dalla precedente barra delle azioni.

Aggeggioapp sbarra

Uno sguardo critico al Material Design

Con tutte le ovvie novità e l'implementazione di successo, ci sono alcuni inconvenienti nel design dei materiali (se lo si desidera). Anche se, come in tutte le questioni simili, ognuno decide da solo se i punti elencati sono svantaggi. Da notare che al momento i sostenitori del concetto di material design costituiscono ancora la maggioranza del totale di coloro che continuano a discutere con vigore dell'ultima idea di Google. Tuttavia, il pubblico più scettico sta avanzando le seguenti lamentele sull'interfaccia di Lollipop.

Microsoft Piatto Designera molto più pratico e di maggior successoMateriale design. Come abbiamo detto prima, il design dei materiali non è altro che una raccolta riuscita di approcci e tecniche che sono già stati sviluppati e utilizzati da qualcun altro. Un concetto che è stato adottato dagli sviluppatori di design dei materiali è il cosiddetto design piatto di Microsoft. L'idea stessa di abbandonare i fronzoli a favore di uno spazio digitale piatto è apparsa per la prima volta nei prodotti Microsoft. Il design piatto rappresentava un completo rifiuto dello scheomorfismo in tutte le sue forme. Il design dei materiali è una versione attenuata di questo concetto simulando la carta digitale e l'inchiostro digitale. Il design dei materiali ha incorporato il meglio di entrambi i mondi: spazi piatti e minimalisti dal design piatto e un certo volume animato dallo skeomorfismo.

Microsoft Flat Design

Tuttavia, non tutti vedono il design dei materiali come il punto debole e la versione più amichevole del design piatto. Molti utenti e sviluppatori considerano un'animazione e un volume sufficientemente ricchi nella progettazione dei materiali un'eccessiva distrazione dell'utente e il caricamento di informazioni visive non necessarie. Inoltre, il design dei materiali è accusato delle elevate esigenze delle risorse utilizzate per animare tutti gli elementi.

Uso inefficiente dell'area dello schermo, troppo spazio bianco. L'abbondanza della famigerata "aria" nel design dei materiali (così come nel design moderno in generale) è oggetto dei dibattiti più accesi tra designer, sviluppatori e utenti comuni. La questione degli spazi vuoti nelle interfacce moderne è infatti piuttosto controversa, poiché l'atteggiamento nei confronti della quantità di spazio libero sullo schermo dipende, tuttavia, dalle preferenze individuali. Molti utenti vogliono avere davanti a sé tutte (o la maggior parte) delle informazioni necessarie, cercando di non ricorrere a scrolling e capovolgimenti. Tali utenti sono francamente infastiditi da grandi rientri e spazi vuoti tra i contenuti, nonché dalla necessità di utilizzare costantemente lo scorrimento. Contenuti raggruppati, dispersi in modo intelligente sull'intera area dello schermo: a loro scelta.

Un altro tipo di utenza, invece, accoglie con favore il contenuto scarso, la presenza di "aria" e lo spazio libero pulito. Non sono gravati dalla necessità di utilizzare più spesso lo scrolling e di sfogliare pagine virtuali, e considerano la presenza di grossi rientri come condizione necessaria per evidenziare rapidamente e facilmente l'elemento desiderato dalla massa generale dei contenuti. Inoltre, questi utenti trovano "l'aria" giustificata ed esteticamente gradevole.

Ad esempio, confrontiamo l'interfaccia del menu Impostazioni su Android e iOS:

Confronto di interfacceiOSeAndroid- il trionfo della percezione soggettiva. Alcuni utenti considerano la posizione del contenuto iniOSpiù razionale e giustificato: tutto è a portata di mano, mentre inAndroidci vuole uno sforzo extra per trovare la voce di menu che desideri. A sua volta, un'altra parte degli utenti trova l'interfacciaiOS troppo congestionato e difficile da capire, e l'interfacciaAndroid- più leggero e più conveniente.

La discussione sui meriti e sui demeriti del design dei materiali è ancora in corso, con utenti e sviluppatori che prestano attenzione a punti controversi e carenze e cercano modi per utilizzare il concetto di design dei materiali nel modo più efficace. In un futuro molto prossimo, vedremo quale destino attende il material design: rimarrà un'ambigua moda passeggera impostaci dal gigante Google per un po', diventerà solo un altro grande esperimento nel campo delle interfacce, o sarà un nuova fase che eleverà l'arte dell'interfaccia utente a un nuovo livello.

Conclusione

Se hai intenzione di impegnarti seriamente nella progettazione dei materiali e vuoi vedere l'intero concetto di materiale nella sua interezza, allora devi studiare un semplice, accessibile e visivo Le linee guida di Google... Ci auguriamo che la nostra breve panoramica fornisca ai lettori interessati un'introduzione a un'area così promettente come il design dei materiali. Comprendendo la filosofia del nuovo progetto Google, puoi non solo implementare le tue idee in questo formato fresco e pratico, ma anche, probabilmente, affinare e migliorare il concetto stesso di materiale, sviluppando i tuoi "chip" e migliorando il rapporto dell'utente con il interfaccia digitale.

Il Google Design Evangelist Mustafa Kurtuldu sull'applicazione della loro tecnologia nello sviluppo delle app Keep e Inbox.

Ai segnalibri

La traduzione è stata preparata dal team della scuola di inglese online Skyeng.

Material Design fornisce una serie di strumenti e linee guida per aiutarti a realizzare un design UX consapevole durante la creazione di un'interfaccia per app.

Ma cosa succede se questi principi non funzionano per un determinato prodotto? E cosa fanno i designer di Google quando progettano un prodotto che va oltre le classiche linee guida?

Le linee guida sui materiali sono reattive. In questo articolo daremo un'occhiata a due app di Google, Keep e Inbox, per capire come non solo si discostino da determinate regole, ma formino anche nuovi principi di Material Design.

Posta in arrivo: griglia modulare

Lo sviluppo di un nuovo servizio di posta elettronica è un compito molto ambizioso per Google, dato il mercato già radicato di Gmail. L'obiettivo di Inbox era approfondire il design dell'interfaccia e creare un'esperienza utente e un'identità aziendale uniche, rispettando le nuove regole del Material Design.

Quando il team di Inbox stava mettendo insieme i progetti preliminari, il concetto di Material Design era ancora in fase di sviluppo. Ciò ha dato a Inbox una grande opportunità per definire gli standard di Material Design affrontando il problema della profondità e del volume nell'interfaccia utente.

Profondità

Il design originale della Posta in arrivo non era abbastanza flessibile: lo spazio della griglia consentiva solo sette lettere di adattarsi a uno schermo da 13 pollici. Era troppo poco, soprattutto rispetto a Gmail, che può contenere 16-20 email.

Se apri Gmail e Inbox in finestre adiacenti, puoi vedere una grande differenza nel peso visivo. E una delle sfide più grandi è stata trovare il giusto equilibrio tra contenuto e spazio bianco.

Tim Smith

Posta in arrivo capo progettista

Modificando le impostazioni della griglia, l'altezza delle linee e l'aspetto del carattere, i designer di Inbox sono stati in grado di ottenere una profondità dell'interfaccia ottimale visualizzando 12-17 e-mail, ciascuna all'interno di una scheda Material Design. L'interfaccia dell'applicazione si adatta al dispositivo dell'utente. Ad esempio, il carattere nella "riga dell'oggetto" cambia a seconda delle dimensioni dello schermo.

Colori, immagini e icone

L'utilizzo di immagini contestuali in gruppi di lettere è un'altra caratteristica distintiva del servizio. Ad esempio, se un utente sta pianificando un viaggio a New York, vedrà il cielo di Manhattan sulla carta con la lettera corrispondente.

Ci sono molte icone sulla barra di navigazione a sinistra, i loro colori corrispondono alle loro funzioni nell'applicazione. Quando l'utente fa clic sul pulsante verde Fine, anche lo sfondo della barra in alto diventa verde, indicando che il contesto è cambiato.

Pannello superiore

Un altro compito importante per il team è stato quello di progettare la barra superiore dell'applicazione. L'idea originale era quella di creare un pannello trasformabile che non si estendesse alla larghezza della finestra del browser, ma cambiasse a seconda del contenuto.

Abbiamo elaborato circa una dozzina di varianti diverse su questo concetto fino a quando non siamo arrivati ​​alla modalità a schermo intero che vedete ora. Abbiamo anche creato alcuni concetti per la barra di ricerca prima di scegliere lo stile migliore.

Tim Smith

Posta in arrivo capo progettista

Le schede nella Posta in arrivo si espandono e si riducono, il che significa che il formato dell'intestazione cambia a seconda di come l'utente interagisce con l'e-mail. La barra in alto mostra anche una barra di ricerca e menu con altre app Google. Questo approccio consente a Inbox di rimanere reattivo senza complicare l'interfaccia.

Mantieni: esempi di navigazione reattiva

Keep è un'applicazione per prendere appunti multipiattaforma che espande e comprime le carte sullo schermo, mantenendo l'attenzione dell'utente concentrata quando si aggiunge una nuova nota. La barra di navigazione in basso consente di creare rapidamente una nuova nota con un clic.

Coinvolgimento, schermi vuoti e animazione

In genere, l'utente si trova di fronte a uno schermo vuoto quando non c'è contenuto nella pagina. In Keep, lo schermo appare come una tela bianca in cui l'utente può annotare rapidamente le proprie idee.

Lo spazio bianco incoraggia l'utente a esplorare le voci di menu sul pannello, che si espande per visualizzare vari filtri presentati come icone; il menu di markup, che puoi utilizzare per passare dall'elenco alla griglia, e la barra di navigazione a sinistra, dove puoi modificare le impostazioni di base dell'applicazione.

Abbiamo lavorato molto sull'animazione: come scorrono le note, come si muovono quando le apri e chiudi.

Genevieve Cuevas

Selezione degli elementi del materiale corretti: nav inferiore o pulsante di azione mobile

Concisione e facilità d'uso sono le caratteristiche principali di Keep. Durante la riprogettazione dell'app, gli sviluppatori hanno studiato i modelli di Material Design e hanno finito per scegliere le carte che aiutano a distinguere le note l'una dall'altra, una barra di navigazione a sinistra che semplifica la personalizzazione dell'app e un menu contestuale che cambia a seconda del tipo di nota - come note con caselle di controllo che visualizzano i menu per controllare e modificare gli elementi nell'elenco.

Insieme, questi elementi creano un'interfaccia chiara e funzionale, adattandosi a una situazione specifica. Durante la rielaborazione di Keep, i creatori hanno sperimentato alcuni elementi di base della navigazione dell'app, in particolare hanno provato a sostituire la navigazione esistente con un pulsante di azione mobile.

La navigazione originale ti permetteva di creare una nuova nota con un tocco e il pulsante di azione mobile richiedeva due clic: uno per mostrare le opzioni e uno per creare una nota.

Quando abbiamo introdotto il pulsante mobile, alcuni dei nostri utenti si sono lamentati del fatto che creare una nota in due clic non fosse così conveniente.

Genevieve Cuevas

Ingegnere software di Google Keep

Molti utenti che hanno utilizzato l'app in precedenza e sono abituati alla navigazione con un clic non hanno approvato questa modifica. Dopo aver testato e infine abbandonato il pulsante mobile, gli sviluppatori di Keep sono stati in grado di scegliere la soluzione che meglio si adattava ai loro interessi di prodotto.

Leadership, non un insieme di regole

I team di Keep e Inbox hanno utilizzato le linee guida come base per le loro applicazioni. Quando hanno riscontrato uno script personalizzato che non funzionava, sono stati in grado di adattare il proprio design alle esigenze degli utenti.

Material Design offre una guida basata su anni di esperienza di Google, ma è impossibile risolvere assolutamente qualsiasi problema con esso. Gli esempi Keep e Inbox mostrano che è possibile utilizzare le linee guida di Material Design e modificarle per adattarle al prodotto specifico.

Che cos'è il design dei materiali? Si tratta di un insieme di stili e grafica sviluppati da Google, nonché linee guida e regole per aderire a tali stili. Il design dei materiali è stato mostrato per la prima volta a una conferenza degli sviluppatori, Google I/O, nell'estate del 2014. Lo stile si basa sul formato di "carte" e "blocchi" - forme ed elementi grafici semplici e laconici, nonché sulla generale semplicità e freschezza del design - colori calmi e opachi, mancanza di volume, piccoli dettagli e dettagli in generale. La prima "pubblicazione" per il material design è avvenuta con il lancio del servizio Google Now, e lo stile è diventato ufficialmente la base per il sistema operativo Android abbastanza recentemente, nella versione 5.0, conosciuta anche come Android Lollipop.

A mio parere, il design dei materiali ha diversi vantaggi molto importanti rispetto a tutti i precedenti tentativi di Google di portare il design del proprio sistema operativo e dei relativi programmi in un'unica forma, ma anche alcuni svantaggi. In questo breve articolo cercherò di presentare il mio punto di vista sul nuovo linguaggio di design di Google.

Design dei materiali: i pro

Il primo e più importante argomento a favore del nuovo stile, secondo me, è la sua esecuzione. Non voglio sembrare un odiatore della tecnologia e dell'approccio di Apple di nuovo, ma in questo caso non fa paura, perché sto solo esprimendo il mio punto di vista. Quindi, secondo me, aggiornare iOS alla settima versione e aggiornare Android alla quinta versione sono, come si suol dire, due grandi differenze.

Nel caso di Apple, abbiamo visto il solito trasferimento della grafica precedente in una vista piatta, nessuna nuova idea, nessun desiderio di portare qualcosa di nuovo: abbiamo semplicemente preso l'interfaccia esistente, l'abbiamo schiacciata con una stampa, ridisegnato le icone e aggiunto l'arcobaleno immagini di sfondo. Sono le immagini di sfondo nel nuovo iOS 7 e gli effetti di trasparenza del menu che sono un indicatore dell'insipidezza e della riluttanza dei designer a fare qualcosa di buono e gentile, come mi sembra. Nei "sette" tutti sono rimasti semplicemente scioccati dai bellissimi effetti di animazione e dalla luminosità complessiva della nuova interfaccia. Mi sembra che nessuno abbia davvero pensato se sarebbe stato conveniente, perché altrimenti i designer di Apple avrebbero prestato più attenzione agli aspetti funzionali e non al design arcobaleno.

L'area notifiche, chiamata dall'alto, e il pannello di controllo, chiamato dal basso, sono esempi illustrativi di un inutile "upgrade" in iOS7. Il primo non è stato reso più chiaro: tutte le notifiche sono ammassate insieme e ce ne sono troppe, il secondo è fatto per metà, gli interruttori consentono di accendere / spegnere le interfacce, ma non andare alla loro configurazione e alla scelta di reti

Android 5.0 è stato aggiornato molto seriamente anche dal punto di vista grafico rispetto alla 4.x proprio per il trasferimento del sistema operativo al material design. E, a prima vista, i cambiamenti qui sono simili a quelli che hanno avuto luogo in iOS: il cambiamento finale di stile in un design generale piatto e più leggero, semplicità esterna. Ma poi iniziano le differenze. In Android 5.0, l'interfaccia è più olistica grazie al design dei materiali: tutto è fatto in uno stile calmo, niente risalta e non sembra colorato o eccessivamente luminoso. Il principio fondamentale del design dei materiali esclude la priorità degli effetti grafici nell'interfaccia rispetto alla sua praticità? ed è molto bello.

Per riassumere il primo argomento: il design dei materiali sembra già molto olistico, questo è esattamente ciò che mancava al sistema operativo di Google e KO: integrità e comunità. Quando, aprendo ogni singolo programma, sia esso contatti, browser, client di posta o altro, vedi la stessa animazione, la stessa tavolozza di colori ed elementi semplicemente riconoscibili. Per questo motivo, è più facile abituarsi al nuovo sistema operativo ed è semplicemente piacevole lavorarci.

Il secondo argomento è che se hai già utilizzato uno smartphone su Lollipop o hai visto screenshot, probabilmente hai notato che l'interfaccia si è ingrandita visivamente. L'ampliamento dell'interfaccia è in corso da molto tempo nei dispositivi touch. Se confrontiamo le prime versioni di Android con l'"allora" Windows Mobile, è ovvio che Android era più grande e più semplice, c'erano meno informazioni sullo schermo, ma era anche più comodo far funzionare lo smartphone. Nel material design, alcuni elementi sono stati sostituiti con "carte", i caratteri, le dimensioni delle icone e delle linee sono stati leggermente aumentati, l'interfaccia nel suo insieme è diventata più grande. Mi piace, probabilmente, perché sto invecchiando, scherzi con battute, ma più invecchi, meno voglia di sbirciare nelle icone e negli elementi "mischia", anche con una buona vista. A proposito, ecco perché non mi piace l'iPhone 5 e niente di meno. Compattezza Compattezza, ma anche su uno schermo con diagonale da 4,5"" si vogliono vedere elementi di dimensioni normali, e non studiarli con una lente di ingrandimento. Questo è più banale in molte situazioni, specialmente quando si lavora con uno smartphone in movimento, ad esempio. Pertanto, il consolidamento generale dell'interfaccia in Android 5.0 basato sul design dei materiali mi sembra un buon passo.

Il terzo argomento è per: Google non solo ha trasferito Android in un nuovo design, ma ha anche preparato immediatamente le guide visive necessarie con una dimostrazione dell'implementazione degli elementi principali per gli sviluppatori di software. In poche parole, se stai creando un nuovo programma o vuoi tradurre uno vecchio in un nuovo design, tu luogo e studia i consigli di Google.

Ad esempio, dice quali colori usare. mostra i caratteri e come usarli. E consigli per l'utilizzo della grafica corretta nel programma.

Design dei materiali - argomenti CONTRO

Tuttavia, il terzo argomento a favore del design dei materiali è anche un argomento contro di esso. Sì, Google è ottimo per non abbandonare gli sviluppatori e fornire loro una guida completa sull'uso corretto del nuovo linguaggio di progettazione, ma in questo caso, diciamo, non ha funzionato pensare agli utenti. I programmi scritti secondo tutte le regole di material design o modificati esternamente secondo le linee guida di Google appariranno molto armoniosi in Android 5.0 e non molto bene nelle versioni precedenti del sistema. E viceversa: tutte le applicazioni che non rispettano le regole di progettazione dei materiali sembreranno in qualche modo estranee su uno smartphone con Android Lollipop. E ci saranno molti di questi programmi nei prossimi sei mesi, mi azzarderei a suggerire. Tuttavia, non tutti gli sviluppatori di un programma richiesto, soprattutto se è complesso e richiede aggiornamenti e miglioramenti costanti, abbandoneranno tutto e inizieranno a tradurlo in material design.

Un buon esempio di un vecchio design in un programma molto aggiornato è WhatsApp. Per quanto tempo l'applicazione non verrà tradotta in md? Buona domanda

Si scopre che alcuni sviluppatori ora rinunceranno davvero a tutto e trasferiranno i loro programmi al material design, mentre altri no. E anche in Google Play ci sono programmi in un vecchio, diciamo, design, ma anche a volte necessario per il lavoro. Di conseguenza, si scopre che il desiderio di Google (indubbiamente corretto!) Per portare Android in una forma comune non è sufficiente, devi fare qualcosa con centinaia di migliaia di programmi. La domanda è cosa?

Cari lettori, cosa ne pensate dell'idea di Google di portare tutti i suoi servizi e applicazioni in una forma comune, utilizzando come base il material design?

• Tutorial

I pulsanti possono essere esagonali?

Google I/O 2018 ha lasciato un'enorme quantità di materiale su cui riflettere. Cosa c'è di nuovo? Come continuare a vivere? La mia domanda è scaduta? I pulsanti possono essere esagonali? I designer non servono più? È più piacevole da comprendere lentamente e in piccole porzioni. Questa parte riguarda il design.

Per quattro anni, Material Design ne ha stufato. Secondo Google, attorno a questo sistema di progettazione sono state costruite 1,5 milioni di app. Come mai? Dopotutto, è stato originariamente creato per le esigenze interne di Google.

Ha risolto i problemi di progettazione eterogenea per Android e la mancanza di qualsiasi sistema.
- Era universale per diversi dispositivi: tablet, smartphone, web.
- È pensato dal punto di vista dell'utente ed è intuitivo.

Il sistema è stato accusato di inflessibilità e, di conseguenza, di ottenere un progetto di progetto. Se progetti il ​​servizio seguendo rigorosamente le guide, visivamente le applicazioni si sono rivelate davvero prive di carattere. D'altra parte, perché dare la colpa al sistema? Le linee guida non sono mai state la Bibbia, potresti deviare da esse. Forse hai ancora scelto un colore per la tua applicazione solo nella tavolozza dei colori di Google? Spero di no.

D'altra parte, aggiungendo elementi personalizzati, hai rischiato di incontrare i tuoi sviluppatori Android in un vicolo buio e ascoltare un lungo discorso sul perché e quanto ti sbagli. Erano tempi pericolosi.

Tutti i vincitori del Material Design Award hanno corso lo stesso rischio. Hai notato l'interfaccia utente personalizzata di questi progetti? Ma Google li ha incoraggiati e tutti sono rimasti sorpresi.

Ora è chiaro che Google vuole che personalizziamo le nostre app. I prodotti dovrebbero essere belli e diversi. L'MD aggiornato è un tentativo di mostrare a designer e aziende come personalizzare l'interfaccia utente senza timore di essere sgridati dagli sviluppatori.

material.io - Progettazione, sviluppo, strumenti

Puoi iniziare a studiare il sistema di progettazione dal sito: non solo una parte del contenuto è stata aggiornata lì, ma anche lo stile visivo. Adesso anche la schermata 404 te lo insegnerà, e cliccando su un elemento delle guide, vedrai la sua specifica con tutte le distanze, i font e i link per il download dalla libreria di Google.

Il risultato non è ancora impressionante. Il più grande vantaggio avrebbe dovuto essere il codice già pronto per gli elementi nativi, ma il collegamento a GitHub non è poi così eccezionale. È troppo presto per chiedere agli sviluppatori di aggiungere nuovi elementi alla tua applicazione: il codice per loro non è stato ancora fornito.

E se i tuoi elementi non sono nativi? Puoi vedere il markup, ma non sarai in grado di ottenere le icone tagliate. Quindi è troppo presto per parlare di sostituzione dello Zeplin.

Il 25 giugno 2014, Google ha presentato al pubblico la sua nuova visione del design dell'interfaccia del futuro: un insieme di regole e condizioni in base alle quali d'ora in poi verranno costruite le interfacce di tutti i prodotti aziendali. Perché tutto questo era necessario? Fino a cinque anni fa, tutti i prodotti Google erano molto diversi tra loro, comprese versioni diverse della stessa applicazione su dispositivi diversi. Gli sviluppatori hanno pensato di creare regole speciali per la costruzione e l'unificazione di tutte le applicazioni e i servizi sviluppati, che sono stati successivamente uniti sotto il nome generale "The Kennedy Project". È stato questo progetto che in seguito si è sviluppato in Design dei materiali (design dei materiali).

Filosofia materiale

Grazie al progetto Kennedy, tutti i principali servizi e servizi di Google hanno ricevuto funzionalità comuni di progettazione e creazione di interfacce. Ciò ha permesso di unificare gli approcci alla creazione di interfacce web e, successivamente, interfacce di applicazioni mobili.

Una delle caratteristiche del design unificato erano le schede informative che potevano essere posizionate ovunque nell'area di lavoro. Esaminandoli nell'applicazione Google Now, gli sviluppatori si sono posti la domanda: "Cosa c'è sotto queste carte?" Secondo Matias Duarte, vicepresidente del design di Google, questa "domanda innocente ha scatenato una potente scintilla".

Il team di progettazione ha iniziato a vedere il design non come una raccolta di piani e pixel, ma come un vero oggetto fisico. Volevano trasmettere lo stesso all'utente, in modo che avesse un senso della tangibilità dell'interfaccia, che ciò che accade sullo schermo fosse il più credibile e logico possibile.

Dopo il dominio totale scheomorfismo(un'esatta imitazione di oggetti reali del mondo fisico nel design) tutto si è mosso bruscamente nella direzione opposta -. È stato lui a prendere come base Google, inventando” Materiale". Allo stesso tempo, facendo un piccolo passo indietro al realismo.

Carta quantistica

L'elemento principale del design dei materiali è metafora di un oggetto fisico per le sue proprietà simili alla carta e in possesso della maggior parte delle sue proprietà: dimensione, colore, spessore. Ogni strato di questo materiale metaforico si trova nello spazio tridimensionale e obbedisce a tutte le leggi fisiche, quindi, a differenza del classico stile piatto, può proiettare un'ombra sugli strati inferiori. Tutti gli strati sono posizionati sul materiale inferiore principale.

A causa delle sue proprietà simili alla carta, il materiale era originariamente chiamato "carta quantistica". Questa è la stessa carta del mondo fisico, ma ha una serie di proprietà "magiche", ad esempio, può cambiare le sue dimensioni e muoversi agevolmente nello spazio, fondendosi con altre "foglie" o rompendosi in più. La carta quantistica si trova appena sopra lo sfondo, che è spesso bianco. L'ombra si sposta a seconda del movimento del materiale stesso, diminuisce o aumenta a seconda dell'altezza del materiale sopra lo sfondo.

Inchiostro digitale

Se la "carta quantistica" ha lo scopo di riflettere le proprietà fisiche di un oggetto, allora tutto ciò che si trova sulla superficie di questa carta - colori, immagini, testo, icone - viene formato usando " inchiostro digitale"- un altro oggetto unico di design dei materiali.

Material Design utilizza tutte le migliori pratiche di stampa nel design dell'interfaccia. Ma anche qui ci sono funzionalità proprietarie di Google. Ad esempio, il carattere principale da utilizzare in Material Design è Roboto. Tuttavia, nulla impedisce alle aziende di utilizzare il proprio font di marca per mantenere la propria identità. Le linee guida di Material Design forniscono esempi per l'utilizzo di diversi pesi e dimensioni dei caratteri nelle interfacce.

Ma la cosa più importante della grafica del material design è colore... Il colore è il principale mezzo di espressione sulla carta quantistica e quindi svolge un ruolo molto importante. È comune utilizzare il design dei materiali di base e colori d'accento... E anche diverse sfumature per situazioni diverse.

Solitamente colori primari utilizzato per dipingere grandi aree come intestazioni, barre delle azioni, barre di stato. Per evidenziare elementi importanti, utilizzare colore accento... Ad esempio, per un biglietto da visita di design materiale: pulsanti di azione mobili.

I principi di base del design dei materiali dettano l'uso delle immagini. Questo è un elemento così importante che si consiglia di utilizzare un'immagine della dimensione massima senza bordi. Inoltre, le barre delle azioni diventano trasparenti per massimizzare la visualizzazione dell'immagine.

Android mantiene una libreria dedicata Tavolozza, che è in grado di estrarre i colori principali e di accento dall'immagine e modificare dinamicamente il design dell'applicazione, adattandosi all'immagine attiva (esempio sopra).

Significato dell'animazione

Continuando a tracciare analogie con il mondo naturale, va notato che nulla scompare nel nulla, così come nulla viene preso dal nulla. Pertanto, nella progettazione dei materiali, è necessario modificare facilmente l'interfaccia esistente in risposta a tutte le azioni dell'utente in modo che tutte le transizioni siano logiche e ovvie. Pertanto, nel design dei materiali, l'animazione è una conseguenza dell'interazione tra l'utente e l'interfaccia.

Il movimento attivo attira l'attenzione dell'utente, quindi, per ottenere l'effetto del realismo, è necessario utilizzare alcune regole:

• Asimmetria
  Solitamente la dimensione degli oggetti è limitata dalla larghezza del dispositivo, quindi per rendere realistico il ridimensionamento della carta quantistica, la larghezza e l'altezza dell'oggetto devono essere modificate in modo asimmetrico indipendentemente, evitando così l'illusione di aumentare o diminuire la oggetto.
• Risposta
  Qualsiasi azione dell'utente deve avere una risposta appropriata. Ad esempio, Google offre un effetto a catena di oggetti di interfaccia con l'epicentro nel punto di interazione.
• Movimento autentico naturale
  In natura, quando si muovono, gli oggetti non possono prendere velocità o fermarsi istantaneamente, quindi per renderli realistici, tutte le animazioni non dovrebbero essere lineari, ma con decelerazioni e accelerazioni.

Conclusione

Design dei materialiÈ un modo completamente nuovo di interagire e costruire interfacce, che è ancora in fase di sviluppo e può essere aggiunto in qualsiasi momento. Tuttavia, è già possibile prevederne le prospettive. Almeno nello sviluppo di applicazioni per Android, dominerà, poiché l'unificazione di tutte le interfacce influenzerà positivamente l'usabilità.

All'interno di Google stesso, il design dei materiali è classificato accanto a sviluppi significativi come il controllo delle finestre e del cursore (Xerox PARC) e i touchscreen (Apple). Bene, vediamo cosa succede.

Il nuovo logo e l'identità di Google promuovono idee di design dei materiali

Le linee guida dettagliate di uno sviluppatore di design dei materiali sono disponibili qui: