Savjeti za dizajniranje elegantnih izgleda korisničkog sučelja za iPhone u Photoshopu
Grafički dizajn za web već je godinama popularan trend. A s izumom Appleovog iPhonea 2007., trgovina aplikacija je porasla nevjerojatnu količinu. Sada imamo dizajnere i programere iOS aplikacija koji zajedno stvaraju neke zaista fantastične koncepcije u stvarnost.
Ali ako ne volite učiti Xcode i programirati Objective-C, Photoshop će možda imati više interesa. U nastavku ću vam ponuditi nekoliko savjeta koje sam odabrao za dizajniranje maketa ubojica iOS aplikacija. Budući da uvijek postoje novi trendovi, dizajnerska zajednica stalno redefinira kako kreirati aplikacije. Mislite na to kao na više početnih priručnika za uporabu pri dizajniranju za Apple uređaje.
Ispravne postavke dokumenta
Prije nego što uopće razmislite o elementima na stranici, trebali biste razumjeti kako nastaju iPhone grafike. U novijem mrežnom zaslonu na iPhone 4 / 4S modelima zaslon je i dalje fizički izmjeren u istoj veličini. No prikaz u pikselima zapravo se udvostručuje od originala - što znači da koristimo 640 × 960 pri rezoluciji 326 pipi.
Uz to, ikone iPhone 3 / 3GS obično su imale 57 × 57 piksela. Zasloni iPhone 4 i 4S koriste zadane postavke 114 × 114 (ali povećavaju se i za starije rezolucije). Srećom postupak dizajniranja ikona je prilično odvojen od stvaranja UI izgleda. No, kao dizajner nikada ne boli graditi obje vještine.
Ako ćete koristiti ove postavke mnogo, preporučujem ih spremanje kao unaprijed postavljenu veličinu dokumenta. U novom prozoru dokumenta za Photoshop vidjet ćete gumb s oznakom "Spremi unaprijed ...". Samo mu dajte ime i to možete odabrati s padajućeg popisa svaki put kada stvorite novi dokument.
Umjesto stvaranja iPhone UI elemenata ručno, blog Teehan + Lax nudi besplatni UI komplet koji ćete preuzeti posebno za Photoshop. To uključuje render iPhone 4, gornje trake, gumbe, tipkovnice i mnoštvo drugih korisnih stvari. Definitivno prvo zgrabite to i spremite ga u lokalni direktorij gdje imate jednostavan pristup tim elementima.
Prilagodite trake i gumbe
I gornja i donja površina vaše aplikacije vjerojatno će sadržavati trake izbornika. Vrh se koristi za označavanje trenutnog prikaza, zajedno s tipkama za povratak i uređivanje. Dno je općenito navigacija i najčešće se koriste karticama da bi se to postiglo.
Teehan + Lax koristi neke zaista generičke primjere za to. Ali puno ih je lakše prilagoditi svojim bojama, teksturama i svim drugim slatkišima za oči koje imate. Kao primjer, uzmimo traku Grupni sloj (Sivo-Plava) i povučemo je u novi prozor dokumenata veličine iPhonea. Zatim kliknite mali trokut lijevo i otvorite otvorite još jednu podgrupu s oznakom Bar Top . Na samom dnu je pozadinski sloj s efektom prekrivanja za gradijent.
Otvorite FX na ovom pozadinskom sloju i dvaput kliknite na prekrivanje gradijenta. Iz Applea sam uklonio zadane boje i postavio (s lijeva na desno) # 3478a7 na # 5eb0e7. Također će dva gumba morati izgubiti svoje gradijente - za to sam koristila vrijednosti # 052b50 do # 044a8e za bogat tamni učinak.
Zabava s teksturama
S ovim malim promjenama gradijenta možete reći da je prilagođavanje vaše aplikacije prilično jednostavan zadatak. Za samo malo detalja možemo dodati teksturu ili uzorak preko područja gradijenta trake. Otići ćemo s nekim kosim prugama za ovaj demo primjer.
Započnite kreiranjem novog dokumenta veličine 7 × 7 piksela s prozirnom pozadinom. Zatim postavite alat za olovku na najmanju mjeru (1 px za 1 px) i spojite se od gornjeg desnog kuta u donji lijevi kut. Koristila sam crni HEX # 000000, ali to ne bi trebalo biti važno jer kasnije uvijek možete promijeniti boju. Provjerite snimku zaslona u nastavku ako ne slijedite:
Sada pritisnite Edit -> Definiraj Pattern ... i dodijelite mu ime, a zatim pritisnite Save. Slobodno zatvorite prozor (bez uštede), jer sve što nam je trebao bio je uzorak. Sada se vratite u gornju grupu traka stvorite novi sloj iznad pozadine. CMD + klik ili CTRL + klik na vektorsku masku koja će odabrati sve pozadinske gradijentne trake.
Ali obavezno kliknite na novi stvoreni sloj kako bi bio istaknut plavom bojom. Napunit ćemo ga ovim novim uzorkom, ali želimo vidjeti samo pruge preko gornjeg gradijenta (i ispod gumba). U gornjem izborniku idite na Uredi -> Ispunite i na padajućem izborniku odaberite "Uzorak". U okviru ispod trebali biste odabrati posljednji isprekidani uzorak i pritisnuti OK.
Linije su u početku prilično krute. Tako u paleti slojeva ispust ispustite na oko 20% vrijednosti. Također možemo promijeniti način miješanja u Prekrivanje tako da se trake prelijevaju pomoću gradijentskih boja. Ponovo smanjite i proverite strašan efekt!
Možete stvoriti još jednu slatku teksturu postavljanjem dokumenata 3px od 3px i popunjavanjem simbola plus. Gore sam dodao primjer kako to dramatično mijenja izgled našeg nagiba gornje trake. Možete također pokušati promijeniti boju iz čisto crne u čisto bijelu #FFFFFF.
Ikone trake na karticama
Navigacijski gumbi pronađeni na dnu vaše aplikacije presudni su za cjelokupno korisničko iskustvo. Korisnici trebaju shvatiti gdje urediti postavke, kako izvršavati zadatke i što učiniti u vašoj aplikaciji brzo. Inače često postanu frustrirani ili dosadni i prestanu pokušavati. Dakle, kao još jedan savjet, potaknite navvi područje u donjoj traci.
Pomoću iste iPhone 4 GUI PSD datoteke pronađite grupu "traka s karticama". Zapamtite da to možete učiniti CMD / CTRL + klikom na blok u Photoshopu. Slično kao na gornjoj traci možemo urediti gradijentni gradijent pozadine za neke stilove podudaranja. Ali alternativno, crni početni gradijent dobro ide kod većine shema boja.
Za neke ikone toplo preporučujem mrežnicu radne skupine koja dolazi u 24px, 48px i 64px. Svaka od ikona GUI PSD primijenjena je FX slojeve slojeva - u osnovi svjetlo sjena i gradijent prekrivanja. Ovi mali komadići detalja dopunjuju sjajan dizajn, stoga obratite pažnju na svoje piksele. Ako imate problema, pokušajte koristiti ovaj dizajner sheme boja.
Razmislite o tome kako će tekstne oznake utjecati na korisničko iskustvo. Ako smatrate da su ikone na karticama dovoljno same od sebe, tada će vam tekst etikete jednostavno prijeći. No važno je držati svoje mogućnosti otvorenima i igrati se s nekoliko različitih ideja. Pokušajte pribaviti mišljenja prijatelja i suradnika da biste vidjeli koja je metoda najbolja za vašu aplikaciju.
Druga je prilično popularna tehnika za dizajnere aplikacija da naprave središnji gumb koji će traku s tablicama podijeliti na 5 utora. Vidio sam puno zaista kreativnih aplikacija koje se koriste ovim dizajnom kako bi uštedjeli prostor i dodali malo elegancije navigaciji. Formspring je jedan primjer, u nastavku sam dodao zaslon.
Korisne poveznice
- Set glikofičkih ikona
- Dizajnirajte iPhone Bank aplikaciju u Photoshopu [Vodič]
- Dizajnirajte iPhone aplikacije u Photoshopu [PDF]
- Korisna kolekcija alata i resursa za razvojne programere iPhone / iPad
- Savjeti i resursi za iOS upotrebljivost za iPhone i iPad Apps
- Kako stvoriti svoju prvu iPhone aplikaciju
Zaključak
Ove strategije rada s iOS aplikacijama i Adobe Photoshopom bit će vam korisne dok daljnji razvoj svojih osjetila dizajna. Mobilne aplikacije posve su različite igre sa lopticama u odnosu na web stranice i logotipe. Imajte to na umu tijekom cijelog postupka jer ćete stalno učiti nove tehnike.
Uz gornje dodane veze, trebali biste se osjećati ugodnije kretanjem prema naprijed s dizajnom sučelja aplikacija. Izgledi za izgled uvijek su teški i zahtijevaju vrijeme za izgradnju i proučavanje. Ali ako imate dovoljno predanosti, tržište mobilnih uređaja je možda najcjenjenije područje. Ako imate dodatnih pitanja ili komentara, obratite nam se u donjem dijelu rasprave.
