Share
Negli ultimi mesi, Material Design è cresciuta in un ampio movimento di design. Diversi componenti del Material Design, come le schede di contenuto e un miglior uso dell'animazione, si possono trovare in molte applicazioni che usiamo oggi.
Come molti post di blog hanno coperto, da un lato questa è una buona evoluzione poiché sta diventando più facile che mai creare un solido design. D'altra parte, ci sono voci che smentiscono la mancanza di originalità poiché tutti usano uno stile simile. Inoltre, l'accesso a un buon linguaggio di progettazione non significa che sia applicato correttamente.
In questo tutorial, tratteremo come è possibile prendere concetti di Material Design e migliorarli per creare interfacce migliori che sono allo stesso tempo più distinte nel loro stile visivo. Vedremo anche alcuni suggerimenti generali prima di iniziare a progettare utilizzando Material Design come punto di partenza.
Innanzitutto, non bisogna disapprovare la progettazione di interfacce partendo da Material Design. Affatto. Io, in effetti, aiuta a stabilire una base su cui gli utenti Android sono portati.
Quando si tratta di costruire una buona esperienza utente, non è consigliabile reinventare la ruota.
Usare gli standard è un inizio particolarmente importante per assicurare che tu stia costruendo qualcosa che funzioni. La struttura dell'interfaccia e le sue interazioni hanno dimostrato di funzionare. Ciò detto, ciò non significa che non ci sia spazio per errori o miglioramenti.
Un esempio di design di una cartaIl punto cruciale del Material Design ritorna all'uso delle schede di contenuto. Ora, le carte sono sicuramente un componente applicabile in molte situazioni, quindi sono modelli di progettazione molto utili. Allo stesso tempo, può essere una buona sfida per il design pensare se ci potrebbero essere alternative di design più interessanti. Visto che stiamo vedendo sempre più progetti basati su carte, è bello pensare a come progettare qualcosa meglio.
Prendi il calendario come esempio. Invece di una lista al giorno con una carta per ogni appuntamento, nota come Sunrise ha una vista combinata in cui vedi sia la vista mensile che la vista giornaliera.
A sinistra: un concetto di calendario per la progettazione dei materiali; A destra: albaI giochi sono un'altra grande fonte di ispirazione se stai cercando di trovare interfacce uniche come forma di ispirazione. Scopri siti Web di ispirazione come UIMovement per vedere nuovi e freschi tipi di interfacce come ispirazione.
Quando costruisci un'interfaccia, le schede di contenuti sarebbero la soluzione ottimale o potrebbero esserci altri modi interessanti di visualizzare contenuti che potrebbero essere una soluzione migliore?
Ogni app sta tentando di risolvere un problema nel proprio modo unico. Con questa linea di pensiero, potrebbe aver senso che la tua soluzione richieda un diverso tipo di interfaccia.
Bene, come procedi? Tutto inizia con il contenuto e la navigazione, di cui discuterò più dettagliatamente in seguito.
Esempio di un pulsante di azione mobile nella Posta in arrivo di GoogleUn altro modello di progettazione introdotto da Material Design è il pulsante di azione mobile. Un pulsante di azione fluttuante è un ottimo modo per mettere in risalto un'azione in un'interfaccia. Allo stesso tempo, può essere uno dei peggiori meccanismi di progettazione possibili. Esistono molti modi per utilizzare un pulsante di azione mobile nel modo sbagliato:
Personalmente, vedo un paio di casi in cui un pulsante di azione mobile è una grande aggiunta al prodotto, principalmente nelle app che hanno un'interazione principale per l'utente. Un'app di messaggistica è un ottimo esempio. Il pulsante di azione mobile consente all'utente di comporre un nuovo messaggio. Uber sarebbe un altro grande esempio in cui ha senso. L'interazione principale del prodotto è di fermare un'auto.
Il trucco è fare attenzione e vedere se ha senso nel contesto del tuo prodotto. Non è perché è un elemento di interfaccia standard che potrebbe essere adatto per la tua app. Per i prodotti più complicati, in cui un utente esegue spesso più azioni, un pulsante di azione mobile raramente si adatta bene.
Con una forte direzione progettuale da cui partire, Material Design, a volte è abbastanza facile dimenticare una base strategica prima di iniziare a progettare. Come decidi cosa puoi utilizzare da Material Design e cosa puoi migliorare?
Alcune scelte di design, come ad esempio l'uso di schede di contenuto, potrebbero limite presto.
Di seguito, puoi trovare una breve lista di controllo di alcuni elementi della tua applicazione che devono essere definiti bene prima di prendere questo tipo di decisioni di progettazione.
Fare le domande giuste ti dà una migliore comprensione di ciò che stai cercando di costruire e sulla base di ciò puoi creare interfacce che funzionano meglio.
Per concludere, ci sono due semplici regole che tendo a ricordare mentre strutturo la navigazione di un prodotto.
Applica la regola 80/20. L'80% dei miei utenti utilizzerà solo il 20% delle mie funzionalità. Come posso assicurare che il 20% delle mie funzionalità sono le più facili da accedere al mio prodotto?
Se esistono diversi modi per accedere a uno schermo in un prodotto, assicurarsi che si verifichi in modo molto coerente. Ad esempio, lo spostamento da una schermata panoramica a una schermata dei dettagli dovrebbe avvenire nello stesso modo.
Sulla base di quanto sopra, puoi decidere quale sarebbe il più ottimale per gli utenti per navigare attraverso un prodotto. Se hai un prodotto complicato con molte opzioni, un cassetto è la scelta giusta. Prodotto semplice? In genere, lavorare con le schede è la tua risposta. Per ulteriori informazioni sulla navigazione e sulla progettazione dei materiali, ti consiglio di consultare le linee guida sulla progettazione dei materiali.
Questo concetto di app musicale trovato su Dribbble è un esempio di gestione di più tipi di contenuti.Ogni app ha contenuti. Le seguenti domande dovrebbero aiutarti a decidere come strutturare e visualizzare il contenuto da una prospettiva di progettazione:
Una volta capito il tuo contenuto, sarà molto più facile prendere decisioni sul design. Questo è il momento in cui puoi definire se usare le carte ha senso o se ci sono alternative migliori o più interessanti da usare per la tua interfaccia.
La più grande sfida di progettazione che puoi affrontare è la seguente:
Come faccio a garantire che la mia applicazione sia ugualmente gratificante per i nuovi utenti e per gli utenti di ritorno? Come ciò influenzerebbe il mio contenuto e la navigazione?
Questa è una sfida difficile e spesso si riduce a un effettivo onboarding e assicura che la schermata principale del tuo prodotto sia la schermata in cui la maggior parte del valore è per gli utenti. Hai bisogno di alcuni esempi? Dai un'occhiata ai seguenti prodotti. Qual è la loro schermata principale e che valore ha? Come si avvicinano l'onboarding dell'utente?
I prodotti di cui sopra dovrebbero darti qualche ispirazione. Non scoraggiarti se all'inizio ti sembra scoraggiante. Ha preso i prodotti sopra più iterazioni per arrivare dove sono oggi.
L'onboarding è un argomento a sé stante. Ti consiglio di verificare alcune risorse che ti forniscono informazioni preziose, come Utente a bordo.
Ora che abbiamo una buona idea di come funzionerà fondamentalmente il tuo prodotto e quali elementi possibili puoi utilizzare in Material Design, è il momento di dare un po 'di pepe alle cose. Esistono molti modi per migliorare esteticamente la tua app, alcuni dei quali sono elencati di seguito.
La selezione dei font contribuisce enormemente all'aspetto e al tatto del tuo prodotto. Scegliere un font personalizzato può aiutare a creare un design più vario e applicare un aspetto e un tocco unici al tuo prodotto senza apportare grandi cambiamenti. Trovare i caratteri giusti può essere complicato e in gran parte dipende anche dal gusto del design. La mia risorsa preferita è Typewolf.
Dropbox è un ottimo esempio di applicazione di icone e illustrazioni personalizzate sui loro prodotti.L'aggiunta di icone personalizzate è un altro modo per incorporare il proprio aspetto personalizzato all'interno di un'applicazione. L'utilizzo dell'iconografia personalizzata è complicato in quanto Material Design ha creato un grande standard. Per le icone, ciò significa che determinate azioni, navigazioni e altri elementi hanno la stessa icona.
Se decidi di iniziare a lavorare con il tuo set di icone, ci sono due aspetti importanti da ricordare:
Timehop è un ottimo esempio di utilizzo di illustrazioni personalizzate per creare un aspetto distinto.Il modo in cui visualizzi contenuti fotografici o l'uso di illustrazioni può aggiungere facilmente carattere alla tua app. Essere creativo.
Questo è un esempio di un'animazione unica e dell'interazione corrispondente. fonte.Le animazioni e le interazioni personalizzate richiedono il massimo sforzo, ma è un lavoro gratificante vedere prendere vita in un prodotto. Animazioni uniche create su interfacce uniche solo lavoro sono alcuni dei lavori di design più gratificanti che puoi trovare online.
Questo design utilizza concetti di Material Design con colori che non ti aspetteresti. fonte.Material Design offre una grande selezione di colori tra cui scegliere. Ciò non significa che non puoi diventare molto creativo con il tuo uso del colore per creare qualcosa di davvero unico.
C'è una ragione per cui la maggior parte delle interfacce che conosciamo quotidianamente sono progetti abbastanza semplici, ha dimostrato di funzionare ed è qualcosa con cui gli utenti si familiarizzano mentre la usano.
Il design sperimentale può danneggiare la tua app.
Detto questo, con alcune modifiche minori, ad esempio, concentrandoci solo su tipografia e colore, puoi fare molto per progettare qualcosa di unico per la tua app.
Material Design ha creato un comodo ripiego quando sei bloccato su un problema di progettazione. Fino ad allora, hai tutta la libertà creativa di ripensare il modo in cui un'interfaccia dovrebbe funzionare. Snapchat ha creato un prodotto incentrato sui gesti, la gerarchia e l'animazione di Facebook Paper (iOS) e Media ha ridotto efficacemente un'interfaccia per concentrarsi solo sulla lettura (e sulla scrittura).
Con questo in mente, vai avanti e progetta. Qualche commento o domanda? Lasciali nei commenti o contattami su Twitter.
Accentsconagua