Padomi, kā noformēt gludus iPhone App UI izkārtojumus Photoshop
Web grafiskais dizains ir bijusi populāra tendence visu vecumu. Līdz ar Apple iPhone izgudrošanu 2007. gadā, App Store ir audzis milzīgu daudzumu. Tagad mums ir iOS lietotņu izstrādātāji un izstrādātāji, kas apvienojas, lai īstenotu patiešām fantastiskas idejas.
Bet, ja jums nepatīk mācīties Xcode un programmēt Objective-C, Photoshop var radīt lielāku interesi. Zemāk es piedāvāšu dažus padomus, ko esmu izvēlējies killer iOS lietotņu maketu izstrādei. Un, tā kā vienmēr parādās jaunas tendences, dizaina kopiena pastāvīgi pārdomā, kā izveidot lietotnes. Padomājiet par to kā vairāk par iesācēju resursu rokasgrāmatu Apple ierīču projektēšanai.
Pareiza dokumentu iestatīšana
Pirms pat apsvērt lapas elementus, jums vajadzētu saprast, kā tiek veidota iPhone grafika. Jaunākā tīklenes displejā iPhone 4 / 4S modeļos ekrāns joprojām tiek fiziski izmērīts tādā pašā izmērā. Tomēr displejs pikseļos faktiski tiek dubultots no oriģināla - tas nozīmē, ka mēs izmantojam 640 × 960 ar 326ppi izšķirtspēju.
Turklāt iPhone 3 / 3GS ikonas parasti bija 57 × 57 pikseļi. iPhone 4 un 4S ekrāni pēc noklusējuma izmanto izmēru 114 × 114 (bet palielinās vecāku izšķirtspēju). Par laimi ikonu projektēšanas process ir diezgan atdalīts no lietotāja saskarnes izkārtojuma izveides. Bet kā dizaineram nekad nav sāp veidot abas prasmes.
Ja jūs šos iestatījumus izmantosit daudz, iesaku tos saglabāt kā iepriekš iestatītus dokumenta lielumus. Jaunajā Photoshop dokumentu logā jūs redzēsit pogu ar norādi “Save Preset…”. Vienkārši piešķiriet tam vārdu, un jūs to varat atlasīt nolaižamajā sarakstā katru reizi, kad izveidojat jaunu dokumentu.
Tā vietā, lai manuāli izveidotu iPhone UI elementus, emuārs Teehan + Lax piedāvā bezmaksas UI komplekta lejupielādi, kas īpaši paredzēts Photoshop. Tas ietver iPhone 4 apmetumu, augšējās joslas, pogas, tastatūras un tonnas citas noderīgas lietas. Noteikti paķeriet to vispirms un saglabājiet vietējā direktorijā, kur jums ir viegli piekļūt šiem elementiem.
Pielāgojiet joslas un pogas
Gan lietotnes augšējā, gan apakšējā daļā, iespējams, būs izvēlņu joslas. Augšdaļu izmanto pašreizējā skata marķēšanai, kā arī pogas Atpakaļ un Rediģēt. Apakšdaļa parasti ir navigācija, un visbiežāk to izmanto cilnes.
Teehan + Lax izmanto dažus patiešām vispārīgus piemērus. Bet tos ir daudz vieglāk pielāgot savām krāsām, faktūrām un jebkurai citai acu konfektēm. Kā piemēru ņemsim grupas slāņa joslu (pelēkzilā) un velciet to jaunā iPhone izmēra dokumentu logā. Pēc tam noklikšķiniet uz mazā trīsstūra pa kreisi un atveriet citu apakšgrupu ar nosaukumu Bar Top . Pašā apakšā ir fona slānis ar gradienta pārklājuma efektu.
Šajā fona slānī atveriet FX un veiciet dubultklikšķi uz gradienta pārklājuma. Es noņēmu noklusējuma krāsas no Apple un esmu iestatījis (no kreisās uz labo) # 3478a7 uz # 5eb0e7. Arī abām pogām nāksies zaudēt slīpumu - šīm es izmantoju vērtības no # 052b50 līdz # 044a8e, lai iegūtu bagātīgu tumšo efektu.
Jautri ar faktūrām
Ar šīm mazajām gradienta izmaiņām jūs varat pateikt, ka jūsu lietotnes pielāgošana ir diezgan vienkāršs uzdevums. Lai iegūtu tikai nelielu detaļu, joslu gradienta apgabalam varam pievienot tekstūru vai rakstu. Šis demonstrācijas piemērs tiks apskatīts ar dažām slīpām svītrām.
Sāciet ar jauna dokumenta izveidi 7 × 7 pikseļos ar caurspīdīgu fonu. Pēc tam iestatiet savu zīmuļa rīku pēc iespējas mazākā mērogā (1xx1xx) un pievienojiet no augšējā labā stūra apakšējā kreisajā stūrī. Esmu izmantojis melno HEX # 000000, taču tam nevajadzētu būt nozīmei, jo jūs vienmēr varat mainīt krāsu vēlāk. Pārbaudiet zemāk redzamo ekrānuzņēmumu, ja neievērosit:
Tagad noklikšķiniet uz Rediģēt -> Definēt modeli… un piešķiriet tam vārdu, pēc tam noklikšķiniet uz Saglabāt. Jūtieties brīvi aizvērt logu tūlīt (nesaglabājot), jo viss, kas mums vajadzīgs, bija raksts. Tagad atpakaļ joslu augšējā grupā izveidojiet jaunu slāni virs fona. CMD + klikšķis vai CTRL + noklikšķiniet uz vektora maskas, kas atlasīs visu fona gradienta joslu.
Bet pārliecinieties, ka noklikšķiniet uz tikko izveidotā jaunā slāņa, lai tas būtu izcelts zilā krāsā. Mēs to piepildīsim ar jauno modeli, bet mēs vēlamies redzēt svītras tikai virs augšējās joslas gradienta (un zem pogām). Augšējā izvēlnē dodieties uz Rediģēt -> Aizpildīt un nolaižamajā izvēlnē atlasiet “Pattern”. Zemāk esošajā lodziņā jāizvēlas pēdējais punktētais raksts un jānospiež OK.
Līnijas sākumā šķiet diezgan stingras. Tātad paletēs slāņos nometiet pildījumu līdz aptuveni 20%. Arī sajaukšanas režīmu mēs varētu mainīt uz Overlay, lai joslas plūst ar gradienta krāsām. Tuviniet 100% un pārbaudiet satriecošo efektu!
Jūs varat izveidot vēl vienu saldu tekstūru, iestatot 3xx3px doc un aizpildot plus simbolu. Iepriekš pievienoju piemēru, kā tas tik dramatiski maina mūsu augšējās joslas gradienta izskatu. Jūs varat arī mēģināt mainīt krāsu no tīri melnas uz tīri baltu #FFFFFF.
Cilnes joslas ikonas
Navigācijas pogas, kas atrodamas jūsu lietotnes apakšā, ir ļoti svarīgas vispārējai lietotāju pieredzei. Lietotājiem ir jāizdomā, kur rediģēt iestatījumus, kā veikt uzdevumus un kas ātri jādara jūsu lietotnē. Pretējā gadījumā viņi bieži kļūst neapmierināti vai garlaicīgi un pārtrauc mēģināt. Tā kā vēl viens gals tiks izveidots, izveidosim navigācijas zonu apakšējā joslā.
Izmantojot to pašu iPhone 4 GUI PSD failu, atrodiet “cilnes joslas” grupu. Atcerieties, ka varat to izdarīt, izmantojot CMD / CTRL +, noklikšķinot uz bloka Photoshop. Līdzīgi kā augšējā josla, mēs varam rediģēt dažu atbilstošo stilu fona FX gradientu. Bet kā alternatīva melnais noklusējuma slīpums der arī lielākajai daļai krāsu shēmu.
Dažām ikonām es ļoti iesaku darba grupas tīklenes komplektu, kura izmēri ir 24, 48 un 64 pikseļi. Katrai no GUI PSD ikonām ir piemēroti FX slāņu stili - pamatā viegla kritiena ēna un pārklājuma gradients. Šīs mazās detaļas var radīt drausmīgu dizainu, tāpēc pievērsiet īpašu uzmanību pikseļiem. Mēģiniet izmantot šo krāsu shēmu dizaineru, ja rodas problēmas.
Jums vajadzētu padomāt par to, kā teksta etiķetes ietekmēs lietotāju pieredzi. Ja jums liekas, ka cilnes ikonu vien ir pietiekami, etiķetes teksts var vienkārši nonākt šķēršļos. Tomēr ir svarīgi saglabāt savas iespējas atvērtas un spēlēt ar dažām dažādām idejām. Mēģiniet iegūt draugu un kolēģu viedokli, lai redzētu, kura metode ir vislabākā jūsu lietotnei.
Vēl viena diezgan populāra metode ir lietotņu izstrādātāji, lai izveidotu centrālo pogu, sadalot cilnes joslu 5 slotos. Esmu redzējis daudz ļoti radošu lietojumu, izmantojot šo dizainu, lai ietaupītu vietu un pievienotu navigācijai nedaudz elegances. Formspring ir viens piemērs, es pievienoju zemāk redzamo ekrānu.
Noderīgas saites
- Glifu ikonu komplekts
- Izveidojiet iPhone bankas lietotni Photoshop [Tutorial]
- IPhone lietojumprogrammu dizains Photoshop [PDF]
- Noderīga iPhone / iPad lietotņu izstrādātāju rīku un resursu kolekcija
- iOS lietojamības padomi un resursi iPhone un iPad lietotnēm
- Kā izveidot savu pirmo iPhone lietojumprogrammu
Secinājums
Šīs stratēģijas darbam ar iOS lietotnēm un Adobe Photoshop būs noderīgas, kad jūs turpmāk attīstīsit dizaina sajūtas. Mobilās lietojumprogrammas, salīdzinot ar vietnēm un logotipiem, ir pilnīgi dažādas spēles. Paturiet to prātā visa procesa laikā, jo jūs pastāvīgi mācīsities jaunas tehnikas.
Kopā ar iepriekš pievienotajām saitēm jums vajadzētu justies daudz ērtāk, virzoties uz priekšu, izmantojot lietotnes interfeisa dizainu. Izkārtojuma maketi vienmēr ir sarežģīti, un to veidošanai un studijām ir vajadzīgs laiks. Bet, ja jums ir pietiekami daudz centību, iespējams, ka visizdevīgākais ir mobilais tirgus. Ja jums ir papildu jautājumi vai komentāri, lūdzu, informējiet mūs zemāk esošajā diskusiju jomā.
