Come progettare un'interfaccia utente dell'app per Android che non fa schifo
I programmatori e gli sviluppatori non sono generalmente designer: questo è ampiamente riconosciuto come vero. Gli sviluppatori tendono a concentrarsi sul funzionamento di un'app: i progettisti si concentrano sul rendere l'app esteticamente accattivante . Ma perché gli sviluppatori non possono fare lo stesso?
In passato, quando le landing page animate e layout di fantasia erano una cosa, allora sicuramente aveva senso assumere un designer professionista. Ma la tendenza oggi è minima o almeno enormemente semplificata.
Lascia che ti dia un esempio aneddotico: qualche tempo fa qualcuno mi ha chiesto di creare una schermata iniziale per il suo software per PC. Così ho fatto di tutto: l'ho disegnato su carta per schizzi, l'ho importato in PhotoShop, ho creato molte linee ed effetti neon fantasiosi. Potrebbe essere stato uno sfondo del desktop, piuttosto che una schermata iniziale. Il punto è che ho creato per loro questo design davvero elaborato ed elaborato.
Come puoi immaginare, a loro non piaceva. Il design che seguivano era letteralmente un piccolo logo con alcuni cerchi colorati sovrapposti e il nome del software sotto di esso. Ad esempio, un lavoro di 2 minuti in PhotoShop. E tu sai cosa? Ho dovuto concordare sul fatto che era meglio del mio.
Il punto che sto facendo è quindi: penso che i programmatori cadano in questa trappola di fare lo stesso errore che ho fatto. Tendiamo a pensare a interfacce utente e schermate iniziali che devono essere queste cose davvero fantasiose e accattivanti che fanno risaltare l'app. Ma non devono essere - onestamente, non dovrebbero esserlo. Dovremmo prendere la mentalità di un programmatore e applicarla al design estetico: lavori semplici, funzionali.
In questo articolo, esamineremo alcuni modi molto semplici per creare un'elegante UI / UX per APP Android, anche se non hai quasi esperienza di progettazione.
A meno che tu non voglia davvero qualcos'altro, attenersi al design materiale
La tua app non deve essere " unica" e " distinguersi dal resto" per essere popolare e avere un bell'aspetto. Questo è quello che il Material Design di Google si prefiggeva di raggiungere: uno standard per le UI delle app in tutto il settore e hanno fatto un buon lavoro. Ci sono un sacco di app popolari là fuori che si attaccano a Material Design - alcuni dei più grandi nomi delle app Android, come SwiftKey, Nova Launcher, Textra SMS, YouTube, solo per citarne alcuni.
Il focus principale di Material Design è su un layout basato su carta, con una tavolozza di colori a tinta unita. Google ha lavorato con i migliori designer del settore, attingendo molti elementi dalle pratiche di design minimalista, e quindi ha rilasciato il tutto gratuitamente - è un buon affare, dal momento che i corsi di progettazione di siti Web e app possono eseguire centinaia di dollari per e-book, video, eccetera.
Iniziare con Material Design è incredibilmente facile e ci sono una manciata di strumenti che lo rendono ancora più semplice, che elencheremo di seguito:
- Editor dei temi dei materiali (macOS + Sketch)
- Plug-in Tavolozza colori Material Design (PhotoShop / Illustrator)
- Material Design UI Kit PSD (PhotoShop)
- Kit UI di progettazione materiale Android ( schizzo)
- Material UI Theme Generator
E se hai bisogno di ispirazione per creare temi di Material Design semplici ed eleganti, dai un'occhiata a questi blog di elenco:
- MaterialDesignBlog - 15 fantastici esempi di Material Design fatti bene
- MockPlus - 12 migliori esempi di siti Web per la progettazione di materiali per trarre ispirazione
- AndroidAuthority - 10 migliori app di Material Design per Android
Le sfumature di colore sono molto più facili di quanto pensi
Per un'alternativa al Material Design, i gradienti dolor sono semplici, di tendenza e accattivanti. E potresti pensare che i designer trascorrano molto tempo a dipingere in tutti i colori o a progettare il gradiente finale. Ti sbaglieresti - può essere fatto in 10 secondi in PhotoShop.
Ti guiderò anche attraverso questo, per mostrarti quanto sia facile.
Crea un nuovo progetto PS per dispositivi mobili ( 1080 x 1920 px a 72 ppi funziona correttamente)
Vai su UIGradients.com e trova qualcosa che ti piace.
Copia i colori sfumati sopra l'anteprima.
Fai clic con il pulsante destro del mouse su un livello vuoto in PS e vai a Opzioni di fusione> Sovrapposizione sfumatura.
Fai clic direttamente sull'anteprima del motivo sfumato nel menu a discesa, non fare clic sul pulsante a discesa. Facendo clic direttamente sul gradiente si apre l'editor dei colori.
Ora incolla semplicemente i valori esadecimali del colore da UIGradient nell'editor del gradiente PS.
Regolare se necessario. Ora hai uno sfondo sfumato professionale per la tua app Android.
Altri strumenti a gradiente che vale la pena provare:
- WebGradients.com
- Generatore di forme Android ( per generare forme tramite XML, con opzione per gradiente)
Usa SVG invece di JPG / PNG
Invece di usare PNG o JPG per i tuoi elementi grafici (pulsanti, loghi, ecc.) Dovresti invece usare SVG ( Scalable Vector Graphics) . Questo perché gli SVG possono essere ridimensionati senza perdere la qualità - ad esempio, se si esegue l'upscaling di un JPG a un valore più grande, si perde qualità e diventa sfocato / pixel. Un SVG no. Le persone cercano di utilizzare enormi file PNG che verranno ridimensionati per adattarsi agli schermi Android - quando invece, è possibile utilizzare SVG più piccoli che vengono ingranditi senza alcuna perdita di qualità.
Inoltre, gli SVG possono avere dimensioni del file fino al 60% - 80% inferiori rispetto a PNG . Ciò significa che l'app o il sito Web mobile si caricheranno più velocemente per l'utente e avranno un bell'aspetto, indipendentemente dalla risoluzione dello schermo.
Includi una modalità oscura usando Theme.AppCompat.DayNight
Non è necessario progettare due temi separati per includere un tema della modalità notte / buio nella tua app. È praticamente integrato nella libreria AppCompat, devi solo abilitarlo e modificare i valori.
Consulta la guida di Appual "Come implementare una modalità oscura nella tua app Android".
Utilizzare un modello o un kit di interfaccia utente mobile
Se la tua app non richiede una GUI elegante e personalizzata, non c'è assolutamente nulla di sbagliato nell'utilizzo di un modello o kit. Modelli e kit possono essere usati come linee guida ispiratrici, oppure puoi letteralmente usare il modello / kit così com'è, aggiungendo i tuoi pulsanti e le tue cose.
Alcune grandi risorse per i modelli e i kit dell'interfaccia utente Android:
- SpeckyBoy - 50 kit di interfaccia utente mobile gratuiti per iOS e Android
- Origini SketchApp - Risorse app UI Android ( Sketch)
- Freebiesbug - Kit interfaccia utente PSD ( PhotoShop)
