Programatorii și dezvoltatorii nu sunt, în general, designeri - acest lucru este larg acceptat ca fiind adevărat. Dezvoltatorii tind să se concentreze pe crearea unei aplicații - proiectanții se concentrează pe a face aplicația atrăgătoare din punct de vedere estetic . Dar de ce dezvoltatorii nu pot face același lucru?

În vremea respectivă, când paginile de destinație animate de splash și machete fanteziste erau un lucru, atunci sigur, avea sens să angajezi un designer profesionist. Dar tendința de astăzi este minimă - sau cel puțin extrem de simplificată.

Permiteți-mi să vă dau un exemplu anecdotic - cu ceva timp în urmă, cineva m-a rugat să creez un ecran splash pentru software-ul PC-ului. Așa că am ieșit totul - am desenat-o pe hârtie de schiță, am importat-o ​​în PhotoShop, am creat o mulțime de linii și efecte neon fanteziste. Ar fi putut fi un tapet pentru desktop, mai degrabă decât un ecran splash. Ideea este că am creat acest design cu adevărat fantezist și elaborat pentru ei.

După cum probabil ghiciți, nu le-a plăcut. Designul cu care au mers a fost literalmente un mic logo al câtorva cercuri colorate suprapuse, iar numele software de sub acesta. Cum ar fi, un job de 2 minute în PhotoShop. Și știi ce? Am trebuit să fiu de acord că era mai bun decât al meu.

Ideea pe care o fac este - cred că programatorii se încadrează în această capcană de a face aceeași greșeală pe care am făcut-o. Avem tendința să ne gândim la interfața de utilizator și la ecranele splash care trebuie să fie aceste lucruri cu adevărat fanteziste, care să atragă atenția . Dar nu trebuie să fie - sincer, nu ar trebui să fie. Ar trebui să luăm mentalitatea unui programator și să o aplicăm la designul estetic - funcțional simplu, funcțional.

În acest articol, vom analiza câteva modalități foarte simple de a crea un UI / UX APP Android elegant, chiar dacă nu aveți aproape nicio experiență de proiectare.

Cu excepția cazului în care doriți cu adevărat altceva, rămâneți la designul materialelor

Aplicația dvs. nu trebuie să fie „ unică” și „ să iasă în evidență de restul” pentru ca aceasta să fie populară și să arate bine. Asta a propus să realizeze Material Design Google - un standard pentru utilizatorii de aplicații din întreaga industrie și au făcut o treabă bună. Există o mulțime de aplicații populare care se potrivesc la Material Design - unele dintre cele mai mari nume din aplicațiile Android, precum SwiftKey, Nova Launcher, Textra SMS, YouTube, doar pentru a numi câteva.

Obiectivul principal al designului materialului este pus pe un layout bazat pe carduri, cu o paletă de culori solidă. Google a lucrat cu designeri de top din industrie, extrăgând o mulțime de elemente din practicile de design minimalist și apoi a lansat gratuit totul - asta este o afacere destul de bună, deoarece cursurile de design pentru site-uri web și aplicații pot rula sute de dolari pentru cărți electronice, videoclipuri, etc.

Începerea cu Material Design este incredibil de ușor și există o serie de instrumente care o fac și mai simplă, pe care o vom enumera mai jos:

• Editor de teme pentru materiale (macOS + Sketch)
• Plug-in pentru paleta de culori de design material (PhotoShop / Illustrator)
• UI Kit de design material PSD (PhotoShop)
• Set de UI pentru designul materialelor Android ( schiță)
• Generator de temă UI pentru materiale

Și dacă aveți nevoie de inspirație pentru a crea teme simple și elegante de design material, consultați aceste bloguri de listă:

• MaterialDesignBlog - 15 exemple extraordinare de proiectare a materialelor făcute corect
• MockPlus - 12 cele mai bune exemple de site-uri de design material pentru a inspira inspirația
• AndroidAuthority - 10 cele mai bune aplicații de design material pentru Android

Gradientele de culoare sunt mult mai ușoare decât credeți

Pentru o alternativă la Material Design, gradientele de dolor sunt simple, la modă și atrăgătoare. Și s-ar putea să credeți că designerii petrec mult timp pictând în toate culorile sau proiectând gradientul final. Ați greșit - se poate face în 10 secunde în PhotoShop.

10 secunde în UI gradient PhotoShop.

Vă voi conduce chiar prin asta, pentru a vă arăta cât de ușor este.

Creați un nou proiect PS pentru mobil ( 1080 x 1920 px @ 72 ppi funcționează bine)

UIGradients.com - Colecție mare de gradații pre-făcute.

Accesați UIGradients.com și găsiți ceva care vă place.

Copiați valorile hex color de la UIGradients

Copiați culorile de gradient de deasupra previzualizării.

Selector gradient PhotoShop.

Faceți clic dreapta pe un strat gol din PS și accesați Opțiuni de amestecare> Suprapunere gradient.

Faceți clic direct pe previzualizarea modelului de gradient din meniul derulant - nu faceți clic pe butonul derulant. Făcând clic direct pe gradient, se deschide editorul de culori.

Introduceți valori hexagonale de la UIGradient în instrumentul pentru gradient PS.

Acum trebuie doar să lipiți pasta valorile hexului de culoare de la UIGradient în editorul de gradient PS.

Reglați dacă este necesar. Acum aveți un fundal profesional de gradient pentru aplicația dvs. Android.

Alte instrumente de degradare care merită verificate:

• WebGradients.com
• Generator de forme Android ( pentru generarea de forme prin XML, cu opțiune pentru gradient)

Folosiți SVG-uri în loc de JPG / PNG

În loc să folosești PNG-uri sau JPG-uri pentru elementele tale grafice (butoane, logo-uri etc.), ar trebui să folosești cu adevărat SVG-uri ( Scalable Vector Graphics) . Acest lucru se datorează faptului că SVG-urile pot fi redimensionate fără a pierde calitatea - de exemplu, dacă îmbunătățiți un JPG la o valoare mai mare, acesta pierde calitatea și devine încețoșat / pixelat. Un SVG nu. Oamenii încearcă să folosească fișiere imense PNG care vor fi reduse pentru a se potrivi ecranelor Android - atunci, în schimb, puteți utiliza SVG-uri mai mici, care sunt reduse fără a pierde calitatea.

Mai mult, SVG-urile pot fi cu dimensiuni de până la 60% până la 80% mai mici decât PNG . Aceasta înseamnă că aplicația sau site-ul dvs. mobil se vor încărca mai rapid pentru utilizator și va arăta bine indiferent de rezoluția ecranului.

Includeți un mod întunecat folosind Theme.AppCompat.DayNight

Nu trebuie să proiectați două teme separate pentru a include o temă de mod întunecat / noapte în aplicație. Este încorporat în biblioteca AppCompat, trebuie doar să o activați și să editați valorile.

Consultați ghidul lui Appual „Cum să implementați un mod întunecat în aplicația dvs. pentru Android”.

Utilizați un șablon sau un kit UI mobil

În cazul în care aplicația dvs. nu solicită un GUI elegant, personalizat, nu este absolut nimic în neregulă cu utilizarea unui șablon sau kit. Șabloane și kituri pot fi utilizate ca ghid de inspirație sau puteți folosi doar șablonul / kitul așa cum este, adăugând propriile butoane și lucruri.

Câteva resurse excelente pentru șabloane și kituri pentru UI Android:

• SpeckyBoy - 50 de kituri UI mobile gratuite pentru iOS și Android
• SketchAppSources - Resurse pentru aplicații UI pentru Android ( Sketch)
• Freebiesbug - Kits UI PSD ( PhotoShop)