Kako dizajnirati korisničko sučelje za Android aplikaciju koje nije sranje

Kako Treba
. Ali zašto programeri ne mogu učiniti isto?



U ono doba, kad su animirane početne stranice i otmjeni raspored stvari bile stvar, tada je sigurno bilo smisla angažirati profesionalnog dizajnera. Ali trend je danas minimalno - ili barem uvelike pojednostavljeno.

Dopustite mi da vam dam jedan anegdotski primjer - neko vrijeme prije neko me zamolio da napravim početni zaslon za njihov računalni softver. Stoga sam sve izvukao - nacrtao na papiru za skice, uvezao u PhotoShop, stvorio puno otmjenih neonskih linija i efekata. Mogla je to biti pozadina radne površine, a ne početni zaslon. Poanta je u tome što sam za njih kreirao ovaj stvarno otmjeni i razrađeni dizajn.



Kao što vjerojatno možete pretpostaviti, nije im se svidjelo. Dizajn s kojim su pošli bio je doslovno mali logotip nekoliko preklapajućih obojenih krugova i naziv softvera ispod njega. Kao, dvije minute u PhotoShop poslu. I znate što? Morao sam se nekako složiti da je to bolje od mog.



Poenta koju iznosim je stoga - mislim da programeri upadaju u ovu zamku čineći istu grešku kao i ja. Skloni smo razmišljati o korisničkom sučelju i početnim zaslonima koji bi trebali biti stvarno dopadljive, privlačne stvari koje čine aplikaciju isticati se . Ali ne moraju biti - iskreno, ne bi smjeli biti. Trebali bismo uzeti programeri razmišljanje i primijenite ga na estetski dizajn - jednostavno, funkcionalno, djeluje.



U ovom ćemo članku razmotriti nekoliko vrlo jednostavnih načina za stvaranje elegantnog UI / UX-a za Android APP, čak i ako nemate gotovo nikakvog dizajnerskog iskustva.

Ako stvarno ne želite nešto drugo, držite se dizajna materijala

Vaša aplikacija ne mora biti ' jedinstveno ” i ' izdvojiti se od ostalih ” kako bi bila popularna i dobro izgledala. To je ono što Google ima Dizajn materijala namjeravaju postići - standard za korisničko sučelje aplikacija u industriji i učinili su dobar posao. Postoji mnoštvo popularnih aplikacija koje se drže Materijalnog dizajna - neka od najvećih imena u Android aplikacijama, poput SwiftKey, Nova Launcher, Textra SMS, YouTube, da nabrojimo samo neke.

Osnovni fokus Material Design-a usmjeren je na izgled zasnovan na karticama, s jednobojnom paletom. Google je surađivao s vrhunskim dizajnerima u industriji, izvlačeći puno elemenata iz minimalističke dizajnerske prakse, a zatim je cijelu stvar objavio besplatno - to je prilično dobra stvar, jer tečajevi za dizajn web stranica i aplikacija mogu zaraditi stotine dolara za e-knjige, videozapise, itd.



Početak rada s Material Designom nevjerojatno je jednostavan, a postoji pregršt alata koji ga čine još jednostavnijim, a koje ćemo navesti u nastavku:

  • Uređivač teme materijala (macOS + skica)
  • Dodatak za paletu boja materijala za dizajn (PhotoShop / Illustrator)
  • UI Kit za dizajn materijala PSD (PhotoShop)
  • Komplet korisničkog sučelja za dizajn Android materijala ( Skica)
  • Generator tema korisničkog sučelja za materijal

A ako vam treba inspiracija za stvaranje jednostavnih, elegantnih tema Materijalnog dizajna, pogledajte ove blogove s popisa:

Gradijenti u boji su puno lakši nego što mislite

Kao alternativa dizajnu materijala, gradijenti dolora su jednostavni, trendovski i privlačni. I možda mislite da dizajneri provode puno vremena slikajući u svim bojama ili dizajnirajući krajnji gradijent. Pogriješili biste - to možete učiniti za 10 sekundi u PhotoShopu.

10 sekundi u korisničkom sučelju gradijenta PhotoShop.

Čak ću vas i provesti kroz ovo, da vam pokažem koliko je to lako.

Izradite novi PS projekt za mobilne uređaje ( 1080 x 1920 px @ 72 ppi dobro radi)

UIGradients.com - Velika kolekcija unaprijed izrađenih gradijenata.

Ići UIGradients.com i pronađite nešto što vam se sviđa.

Kopirajte heksadecimalne vrijednosti boje iz UIGradients

Kopirajte boje gradijenta iznad pregleda.

PhotoShop birač gradijenta.

Desnom tipkom miša kliknite prazan sloj u PS-u i idite na Blending Options> Gradient Overlay.

Kliknite izravno na pregled uzorka gradijenta na padajućem izborniku - nemojte kliknuti na padajući gumb. Klikom izravno na gradijent otvara se uređivač boja.

Unesite hex vrijednosti iz UIGradienta u alat za gradijent PS.

Sada samo zalijepite hex vrijednosti boje iz UIGradienta u uređivač gradijenta PS.

Prilagodite po potrebi. Sada imate profesionalnu pozadinu gradijenta za svoju Android aplikaciju.

Ostali alati za gradijent koje vrijedi pogledati:

Koristite SVG umjesto JPG / PNG

Umjesto da koristite PNG ili JPG za svoje grafičke elemente (gumbi, logotipi itd.), Trebali biste doista koristiti SVG ( Skalabilna vektorska grafika) umjesto toga. To je zato što se SVG-ovima može promijeniti veličina bez gubitka kvalitete - na primjer, ako JPG povećate na veću vrijednost, on gubi kvalitetu i postaje zamućen / pikseliziran. SVG nema. Ljudi se trude koristiti ogromne PNG datoteke koje će biti smanjena kako bi se uklopili u Android zaslone - kada umjesto toga možete koristiti manje SVG-ove koji jesu upscaled bez ikakvog gubitka u kvaliteti.

world of warcraft nije uspio pokrenuti 3d ubrzanje

Nadalje, SVG-ovi mogu biti do Veličina datoteke od 60% do 80% manja od PNG-a . To znači da će se vaša aplikacija ili mobilno web mjesto brže učitati za korisnika i izgledat će dobro bez obzira na razlučivost zaslona.

Uključite mračni način rada pomoću Theme.AppCompat.DayNight

Ne trebate dizajnirati dvije zasebne teme da biste u svoju aplikaciju uključili temu mračnog / noćnog načina rada. Prilično je ugrađen u knjižnicu AppCompat, samo ga trebate omogućiti i urediti vrijednosti.

Pogledajte Appualov vodič ' Kako implementirati tamni način rada u svoju Android aplikaciju '.

Upotrijebite komplet predložaka ili mobilnog korisničkog sučelja

Ako vaša aplikacija ne zahtijeva otmjeni, prilagođeni GUI, nema apsolutno ništa loše u korištenju predloška ili kompleta. Predlošci i kompleti mogu se koristiti kao inspirativna smjernica ili doslovno možete koristiti predložak / komplet kakav jest dodajući vlastite gumbe i ostalo.

Neki izvrsni resursi za predloške i komplete korisničkog sučelja za Android:

  • SpeckyBoy - 50 besplatnih mobilnih korisničkih sučelja za iOS i Android
  • SketchAppSources - Resursi aplikacija za korisničko sučelje za Android ( Skica)
  • Freebiesbug - PSD UI setovi ( PhotoShop)
Oznake android Razvoj 4 minute čitanja