L'impatto di Google Material Design sulla progettazione di app mobili [Guida completa]

Pubblicato: 2019-02-06

Nei prossimi otto minuti leggerete come il Material Design ha un impatto sulle aziende di progettazione di app mobili in tutto il mondo. Leggerai i principi guida su cui si basano gli standard di Google Material Design e come incorporare Material Design nella tua app mobile.

Continuiamo con il Design Journey chiamato Material Design.

UI e UX sono i due elementi dell'app mobile che decidono il presente e il futuro non solo dell'app, ma anche dell'azienda di progettazione di app mobili che l'ha progettata e sviluppata.

Tutti i suggerimenti comprovati per migliorare l'interfaccia utente dell'app mobile si concentrano su un elemento: la progettazione dell'app mobile.

Il modo in cui è progettata la tua app è ciò che influisce sull'emozione dell'esperienza che gli utenti stanno affrontando quando operano all'interno della tua app Android.

Le esigenze di un moderno utente di app - app che hanno lo stesso aspetto dei loro elementi della vita reale - sebbene apparentemente facili da capire, possono rappresentare una sfida se convertite in un design.

Ora, quando si tratta della creazione e dell'inclusione di elementi di design interattivi che danno la sensazione del mondo materiale, Google con il suo Material Design ha fornito agli sviluppatori di app mobili l'aiuto tanto necessario.

Il mondo della progettazione che prima era dominato dalla piattezza minimalista è stato ora sostituito dagli elementi dei materiali interattivi minimalisti con l'introduzione di Material Designs.

Ora che abbiamo capito cos'è il design dei materiali di Google , analizziamo ora l'interfaccia utente di Google Material Design e i suoi suggerimenti e trucchi

Ecco i principi di Google Material Design

Principles of Google Material Design

Le app di design dei materiali sono guidate dai tre principi mostrati nell'immagine sopra. I principi su cui giurano tutte le principali società di progettazione di app Android in tutto il mondo.

Il materiale è la metafora

Il principio fantasioso si basa sullo studio del materiale e su come appaiono diversi nella varia quantità di luce e come appaiono quando accatastati uno sopra l'altro.

Il principio è supportato da attributi come bordi, ombre, dimensioni, ecc.

Audace, intenzionale, grafico

Bold, Intentional, Graphic Design

Lo spazio bianco intenzionale nel design, l'uso di set di colori audaci e tuttavia non sincronizzati e la grafica che si adatta da uno schermo all'altro, pur servendo il loro scopo diretto è ciò che definisce il secondo indicatore più importante nei principi di progettazione dei materiali di Google .

Il movimento offre un significato

Motion Offers Meaning

L'animazione in Material Design è quella che non interferisce con gli altri elementi di design, né sembra forzata. Emergono come risultato delle azioni primarie dell'utente e seguono i suoi segnali.

Sebbene questi siano i tre principi guida principali del Material Design, ci sono anche altri due principi che definiscono lo standard di progettazione accettato a livello globale: Flexible Foundation e Cross Platform.

Fondazione flessibile

Flexible Foundation Design

Material Design offre il vantaggio della base di codice personalizzata che consente ai progettisti dell'interfaccia utente di app mobili di aggiungere i propri elementi di branding al design.

Multipiattaforma

Cross-Platform Material Design

Material Design aiuta a mantenere un'interfaccia utente simile tra le diverse piattaforme, che aiuta a utilizzare i componenti condivisi su tutte: Android, Flutter, iOS e Web.

Ecco quindi i 5 principi guida del Material Design per le app Android. Per accelerare il tuo approccio alla comprensione di questi principi, è tempo di esaminare come applicarli nella progettazione dell'interfaccia utente dell'app mobile.

Come padroneggiare il design dei materiali di Google nella tua app Android?

Come padroneggiare il design dei materiali di Google nella tua app per Android

Partendo dal presupposto che avresti letto le risorse ufficiali sulla progettazione dei materiali rilasciate da Google come Bibbia, iniziamo ad applicare le linee guida per la progettazione dei materiali Android nella tua app mobile.

Di seguito sono riportati i suggerimenti che potrebbero aiutarti a creare un'app mobile di Google Material Design ed emergere come la star della progettazione della tua azienda di progettazione di app mobili seguendo le linee guida di Android ux .

1. Usa le ombre per mostrare la gerarchia

Use Shadows in Material Design to Show Hierarchy

Bordi, superficie e ombre realistiche contano come lo strumento principale delle linee guida dell'interfaccia utente di Google . Usa le ombre per mostrare la gerarchia degli elementi di design per mostrare quale elemento viene su cosa.

2. Colori audaci

Bold Colours Material Design

Intenzionale, grafico e audace è il mantra dell'implementazione del nuovo design dei materiali di Google quando si tratta di sviluppo di UI/UX mobile. L'uso di colori audaci rende le cose interattive e divertenti per gli utenti, rendendo l'app piacevole da usare.

3. Utilizzo del colore primario e dell'accento

Usage of Primary and Accent Colour

I documenti sui materiali di Google chiedono ai progettisti di app mobili di utilizzare tre tonalità del colore principale e una del colore principale.

Il set principale di colori verrebbe utilizzato per caratteri, caselle e sfondi, ecc., mentre il colore dell'accento può essere riempito per mostrare l'elemento principale della schermata dell'app mobile.

4. Estrai i colori dalle immagini

Google incoraggia costantemente i progettisti di app mobili a estrarre il colore dalle immagini e a utilizzarle come tavolozza dei colori quando si sviluppa un design basato su immagini.

5. Incorpora il movimento

Incorporate Motion Material Deign

Google va alla grande nell'uso del movimento nel design dell'interfaccia utente di un'app. Ci fa capire come si muovono le cose nell'app e come gli utenti dovrebbero interagire con l'app.

6. Fai fluttuare tutto

Make Everything Float with Material Design

Se è presente un'app USP Material Design visibile, sono gli elementi di design mobili. Il pulsante della tua app o la barra CTA dovrebbero apparire come se fossero fluttuanti sullo schermo e non sdraiati sullo schermo.

7. Scelta dell'icona

Choice of Icon with Material Design

Le icone, se scelte correttamente, migliorano l'usabilità e il design dell'app. Ora, l'interfaccia di Material Design ti offre la scelta di una serie di icone che rientrano in due criteri principali: Icone del prodotto e Icone del sistema.

8. Rendi l'app tipograficamente corretta

Make the App Typographically Right

Se stai appena iniziando con l'idea di sviluppare un'app per la progettazione di materiali Android, quello che ti consigliamo è di attenerti agli stili tipografici Roboto e Noto.

9. Incorpora la reattività nel tuo design

Incorporate Responsiveness in Material design

Uno dei principali principi guida su cui prospera Material è la coerenza. E lo stesso dovrebbe essere visibile nel design della tua app mobile.

Ognuno dei tuoi elementi di design dovrebbe funzionare allo stesso modo su tutti i dispositivi con cui l'utente interagisce.

Sebbene queste 9 inclusioni ti aiutino con le tue attuali app, gli standard di progettazione sono tutti pronti per essere ridefiniti di nuovo con la nuova versione di Material Design in preparazione all'interno del workshop di Google Creative Lab.

E ora è il momento di esaminare le diverse app rinnovate (o rinnovate) utilizzando Material Design di Google.

Le migliori app che hanno rinnovato il loro design con le linee guida per la progettazione dei materiali

1. Calendario di Google

Google Calendar è l'applicazione principale che ha ricevuto cambiamenti davvero impressionanti nel corso degli anni con l'implementazione delle linee guida di Google Material Design. L'applicazione ha ampi tocchi utili come grafica e mappe che vengono introdotte automaticamente agli eventi e un semplice sistema di suggerimento automatico che semplifica l'aggiunta di un nuovo appuntamento.

2. Gmail

Grazie a Material Design, le e-mail in Google Gmail sono classificate in un'interfaccia in stile scheda. Inoltre, all'interfaccia viene aggiunto un menu a scorrimento completamente nuovo insieme a un pulsante mobile per creare un nuovo messaggio, promemoria o eseguire qualsiasi altra azione.

3. Lyft

Lyft è un'altra app che sfrutta la potenza del Material Design. L'app mostra una serie di controlli e una mappa che mostra le informazioni richieste seguendo i principi di progettazione dei materiali di Google senza rendere fastidiosa l'interfaccia utente.

4. BuzzFeed

Un'altra applicazione mobile che ha lasciato il segno tra le app di Google Material Design è BuzzFeed.

L'applicazione era in precedenza popolare per i suoi contenuti divertenti altamente coinvolgenti. Ma ora è anche noto per aver stabilito uno standard su come dovrebbe apparire un'applicazione Web di progettazione dei materiali di Google.

5. Google Maps

Ultimo ma non meno importante, Google Maps è un'altra applicazione che mostra una grande differenza che abbraccia il design dei materiali. Secondo le recenti notizie, il nuovo design di Google Maps include icone rotonde e colorate nella sezione di ricerca e uno sfondo bianco, che in precedenza era disponibile rispettivamente nei colori nero e grigio chiaro.

Read here

Ecco quali sono le prospettive future per il Material Design:

Quali sono le prospettive per la progettazione dei materiali Android?

Dopo aver modificato lo standard mondiale di progettazione con le linee guida di Google ux , Google ha introdotto ancora una volta un cambiamento nella sua struttura con Material Design 2.0.

La seconda generazione di Material Design, che sarà resa disponibile in tutto il mondo in pochi giorni, darà l'addio all'interfaccia rettangolare e proseguirà con il design dell'interfaccia utente mobile dai bordi arrotondati .

Con le sue nuove linee guida per Android ux , Google ha in programma di dare un restyling a tutti i suoi prodotti cruciali come Gmail, Ricerca Google, Google Maps, ecc.

L'obiettivo di Material Design 2.0 - The Material Design Successor - è aumentare l'efficienza, la leggibilità ed eliminare il disordine, fornendo così l'implementazione più pulita di un'interfaccia utente, fino ad oggi.

Nota finale

Quindi eccola qui, la guida all'Android Material Design non solo per i designer di app Android, ma anche per la società di sviluppo di app Android che è appena entrata nel mondo dei design di app Android.

Ora, che tu sia un designer o un'azienda che cerca di dominare il milione di cuori Android, per preparare la tua app a entrare a far parte dell'elenco delle migliori app di progettazione dei materiali di Google , consulta oggi il nostro team di Mobile UI/UX Designer.