Android dizajn za početnike: Uvod

Autor ovog članka je profesionalni softverski inženjer i nudi konsultantske usluge android razvoja i obuke. Više informacija ovde.

Mislim da mi se još ni jednom nije desilo da na projektu sarađujem sa dizajnerom koji je imao prethodnog iskustva u dizajniranju aplikacija za android. Štaviše, neretko projekat nije ni imao dizajnera jer se kod nas dizajn percipira kao nešto usputno, nešto što ističe vrednost a ne stvara je, pa će biti dodato na kraju kao šlag na tortu (kao da je to moguće…) i to pod uslovom da bude dovoljno resursa. Kad čovek reši da uštedi i sam napravi dizajn, rezultat izgleda otprilike kao ovaj moj sajt :) Elem, da se vratim na temu: ovu seriju članaka sam zamislio kao početno uputstvo nekim sledećim dizajnerima sa kojima ću sarađivati.

Pre nego što krenemo…

…malo upozorenje, da ne kažem “disclaimer”. Ja nisam dizajner, čak nemam ni Photoshop instaliran. Ukoliko vam se čini da sam neke stvari lupio i da nemaju veze sa životom, to je verovatno istina. Nemojte se ustručavati da to i napišete u komentarima. Posebno bih pozvao iskusne dizajnere da se uključe u diskusiju, mislim da bi bilo na svestrano zadovoljstvo. Metod koji će biti prezentovan u ovoj seriji članaka možda nije idealan ili najbolji ali je metod koji meni završava posao.

Pitanje svih pitanja: U kojoj rezoluciji da crtam?

Jednostavno pitanje koje ostaje bez jednostavnog odgovora na androidu. Na iOSu se mnogo lakše dolazi do odgovora: postoje 3 rezolucije za telefone (iste su i za iPod touch-eve), 2 rezolucije za iPad-ove, i to je to. Stvar dodatno pojednostavljuje to što su retina ekrani tačno duplo veće širine i visine u pikselaži od onih drugih. To znači da dizajneri treba da nacrtaju UI u 2-3 rezolucije, iseckaju elemente i mi programeri možemo sve da sklopimo kako je i zamišljeno. U android svetu ovakva uniformnost je nezamisliva. Tako rezolucije android telefona idu od 240x320px (npr. LG L3, Samsung Galaxy Y) do 1080x1920px (kod najnovijih Samsung Galaxy S4 i Sony Xperia Z). Razlika u broju piksela između najmanje i najveće rezolucije je 27x! Između ove dve krajnosti postoji još minimum 15 rezolucija. Ja ne znam za drugu vrstu uređaja, operativni sistem, išta sa ovakvim spektrom razlika. A sve ovo pre nego što tablete uzmemo u obzir, koji idu od besmisleno malih 480x800px (neki pokušaji Acer-a npr.) pa do novog Galaxy Nexus 10 tableta od 1600x2560px.

Od nečega se mora početi, pa neka to bude rezolucija trenutno aktuelnog android “flagship” telefona, s obzirom da skaliranje lakše ide na dole. Istorijski gledano, to su uređaji iz Samsungove Galaxy S serije: originalni S i S II su bili u rezoluciji 480x800px, a trenutna perjanica S III je u rezoluciji 720x1280px. Kada S IV bude zauzeo svoje mesto na tronu verovatno ćemo počinjati od full hd rezolucije ali do tada moj predlog je da dizajn započnemo od rezolucije 720x1280px.

Ali…

Nakon ovakvog dogovora obično dobijem nacrt koji odlično izgleda na monitoru računara ali je teško upotrebljiv za telefon. Najveći problemi budu suviše sitan tekst i premali “tap targeti” – zone koje bi korisnik morao lako da pogodi prstom. Zbog toga je bitno imati nekoliko stvari na umu: Prvo, pogledajte nacrt u fizičkoj veličini u kojoj će biti na samom telefonu, u ovom slučaju dijagonale 4.8 inča. Da bi ovo postigli može vam od pomoći biti informacija da je gustina piksela na ekranu S III telefona 306 piksela po inču. Drugo, držite se guglove preporuke da tap zone budu minimalno 48x48dp veličine (ne px!) U ovom slučaju to znači minimum 96x96px. A šta tačno znači dp (a.k.a. dip), zašto je u ovom slučaju odnos dp:px 1:2 i koliko je u drugim slučajevima ostavljam za sledeći put. Treće, uzmite u obzir da u ukupnu rezoluciju ekrana ulaze i status bar na vrhu i panel sa softverskim dugmadima na dnu (ukoliko nema hardverskih dugmadi). Mogao bih da vam kažem visinu i ovih zona ali neću, zato što ne želim da vam dajem lažnu nadu da će vaš dizajn biti pixel perfect na androidu kao što je možda na drugim platformama. Vreme je da se pomirimo sa činjenicom da neće, i da radimo na tome da bude što je moguće tome bliži!

P.S.

Tu sam za sva pitanja i pojašnjenja, iskoristite mogućnost komentara. Mnogo više informacija možete naći na developer.android.com ali to ste već znali zar ne 😉

Podeli ovaj post preko...

2 thoughts on “Android dizajn za početnike: Uvod”

  1. zdravo,
    Zelim da pocnem andorid programiranje, pa me zanima sta sve treba da imam od software?
    Ako moze linkove i postupak, pokusao sam ali nisam uspeo.

    Hvala za pomoc.

    Pozdrav

Leave a Reply

Your email address will not be published. Required fields are marked *