Näpunäited sujuva iPhone Appi kasutajaliidese kujunduse kujundamiseks Photoshopis
Veebi graafiline disain on läbi aegade olnud populaarne trend. Ja koos Apple'i iPhone'i leiutamisega 2007. aastal on rakenduste pood kasvanud tohutult suureks. Nüüd on iOS-i rakenduste disainerid ja arendajad kokku tulnud, et ehitada reaalselt fantastilisi kontseptsioone.
Kuid kui teile ei meeldi Xcode õppimine ja Objective-C programmeerimine, võib Photoshop rohkem huvi tunda. Allpool pakun mõnda näpunäidet, mille olen valinud tapja-iOS-i rakenduse maketide kujundamiseks. Ja kuna alati on ilmnenud uusi suundumusi, määratleb disainerikogukond pidevalt rakenduste loomise viise. Mõelge sellele kui rohkem algajate ressursside juhendile Apple'i seadmete kujundamisel.
Õige dokumendisätted
Enne lehe elementide kaalumist peaksite mõistma, kuidas iPhone'i graafika luuakse. Uuematel võrkkesta ekraanidel iPhone 4 / 4S mudelitel on ekraan endiselt füüsiliselt samas suuruses. Kuid pikslites kuvamine on originaalist tegelikult kahekordistunud - see tähendab, et kasutame eraldusvõimega 326ppi 640 × 960.
Lisaks olid iPhone 3 / 3GS ikoonid tavaliselt 57 × 57 pikslit. iPhone 4 ja 4S ekraanid kasutavad vaikimisi 114 × 114 (kuid suurendavad seda vanemate eraldusvõimete korral). Õnneks on ikooni kujundamise protsess kasutajaliidese paigutuse loomisest üsna lahus. Kuid disainerina pole mõlemat mõtet ehitada.
Kui kasutate neid sätteid palju, soovitan need salvestada eelseatud dokumendi formaadina. Photoshopi uues dokumendiaknas näete nuppu sildiga „Salvesta eelseade…”. Pange lihtsalt nimi ja saate selle valida ripploendist iga kord, kui loote uue dokumendi.
IPhone'i kasutajaliidese elementide käsitsi loomise asemel pakub Teehan + Lax spetsiaalselt Photoshopi jaoks UI-komplekti allalaadimist. See hõlmab iPhone 4 renderdamist, ülaribasid, nuppe, klaviatuure ja palju muud kasulikku. Kindlasti haarake see kõigepealt ja salvestage see kohalikku kataloogi, kus teil on neile elementidele hõlpsasti juurde pääseda.
Kohandage Baarid ja nupud
Nii rakenduse üla- kui ka alaosa sisaldavad tõenäoliselt menüüribasid. Ülemist osa kasutatakse praeguse vaate märgistamiseks koos tagasi- ja redigeerimisnuppudega. Põhi on üldiselt navigeerimine ja selle saavutamiseks kasutatakse kõige sagedamini sakke.
Teehan + Lax kasutab nende jaoks mõnda tõeliselt üldist näidet. Kuid neid on palju lihtsam kohandada oma värvide, tekstuuride ja mis tahes muu silmailu abil. Näitena võtame rühmakihi riba (hall-sinine) ja lohistage see uude iPhone'i suurusesse dokumendiaknasse. Seejärel klõpsake vasakul asuvat väikest kolmnurka ja avage teine alamrühm nimega Baari ülaosa . Kõige alumises osas on taustkiht, millel on gradiendi kattuv efekt.
Avage sellel taustkihil FX ja tehke topeltklõps gradiendi ülekattel. Eemaldasin Apple'ilt vaikevärvid ja seadsin (vasakult paremale) # 3478a7 väärtuseks # 5eb0e7. Ka need kaks nuppu peavad kaotama oma kalded - nende jaoks kasutasin rikkaliku tumeda efekti jaoks väärtusi # 052b50 kuni # 044a8e.
Lõbus tekstuuridega
Nende väikeste gradiendimuudatuste abil saate öelda, et teie rakenduse kohandamine on üsna lihtne ülesanne. Pisikese detaili jaoks saame riba tekstuuri või mustri lisada riba kaldealale. Selle demonstreeritava näite jaoks läheme koos mõne kaldu triibuga.
Alustage uue, läbipaistva taustaga 7 × 7 piksli suuruse dokumendi loomisega. Seejärel seadke pliiatsi tööriist väikseima skaala järgi (1xx1xx) ja ühendage parempoolsest ülanurgast vasakusse alumisse nurka. Olen kasutanud musta HEX # 000000, kuid see ei tohiks olla oluline, kuna värvi saate hiljem alati muuta. Vaadake allolevat ekraanipilti, kui te ei järgi:
Vajutage nüüd nuppu Redigeerimine -> Määratle muster… ja andke sellele nimi, seejärel vajutage nuppu Salvesta. Sulgege nüüd aken (säästmata), sest meil oli vaja ainult mustrit. Nüüd looge riba ülaosasse uus taust, taustal uus kiht. CMD + klõps või CTRL + klõpsake vektormaskil, mis valib kõik taustagradiendi ribad.
Kuid veenduge, et klõpsate äsja loodud uuele kihile tagasi, nii et see on sinisega esile tõstetud. Täidame selle uue mustriga, kuid soovime näha triibusid ainult ülemise riba gradiendi kohal (ja nuppude all). Valige ülamenüüst Redigeerimine -> Täitke ja valige rippmenüüst “Muster”. Allolevas kastis peaksite valima viimase punktiirmustri ja vajutama nuppu OK.
Jooned tunduvad alguses üsna jäigad. Nii et kihtides kaubaalustel tilk täitke umbes 20% -ni. Samuti võiksime segamisrežiimi muuta ülekatteks, nii et ribad voolaksid koos gradiendivärvidega. Suumige tagasi 100% -ni ja kontrollige vinge efekti!
Saate luua veel ühe magusa tekstuuri, seadistades 3xx 3px doc ja täites pluss sümboli. Lisasin ülaltoodud näite, kuidas see muudab meie ülariba gradiendi ilmet nii dramaatiliselt. Võite proovida muuta värvi ka mustast puhtaks valgeks #FFFFFF.
Vahelehe riba ikoonid
Rakenduse allosas olevad navigeerimisnupud on üldise kasutajakogemuse jaoks üliolulised. Kasutajad peavad välja mõtlema, kus sätteid redigeerida, kuidas ülesandeid kiiresti täita ja mida teie rakenduses kiiresti teha. Muidu muutuvad nad sageli pettunud või igavaks ja lõpetavad proovimise. Nii et kui veel üks näpunäide, kasvatage alumisel ribal navigeerimisala üles.
Sama iPhone 4 GUI PSD-faili abil leidke rühm „sakiriba”. Pidage meeles, et saate seda teha CMD / CTRL + abil, klõpsates Photoshopis plokil. Sarnaselt ülaribaga saame redigeerida ka mõnede sobivate stiilide taustal olevat FX-gradienti. Kuid alternatiivina sobib must vaikimisi gradient enamiku värviskeemidega hästi.
Mõne ikooni puhul soovitan tungivalt töörühma võrkkestakomplekti, mis on 24x, 48px ja 64px. Kõigis GUI PSD ikoonides on rakendatud FX-kihi stiilid - põhimõtteliselt hele vari ja ülekatte gradient. Need väikesed detailid annavad tõesti suurepärase kujunduse, nii et pöörake oma pikslitele suurt tähelepanu. Proovige seda värviskeemi kujundajat kasutada, kui teil on probleeme.
Peaksite mõtlema, kuidas tekstimärgised mõjutavad kasutajakogemust. Kui tunnete, et vahekaartide ikoonidest piisab, võib sildi tekst lihtsalt tõusta. Siiski on oluline hoida oma võimalused avatuna ja mängida ringi mõne erineva ideega. Proovige saada sõprade ja töökaaslaste arvamusi, et näha, milline meetod on teie rakenduse jaoks parim.
Veel üks üsna populaarne tehnika on rakenduste kujundajate jaoks kesknupu loomine, mis jagab vahekaardi riba viieks pesaks. Olen näinud palju tõeliselt loomingulisi rakendusi, kasutades seda kujundust ruumi kokkuhoiuks ja navigeerimise elegantsi lisamiseks. Formspring on üks näide, lisasin allpool oleva ekraani.
Kasulikke linke
- Glüüfi ikoonikomplekt
- IPhone Banki rakenduse kujundamine Photoshopis [Õpetus]
- IPhone'i rakenduste kujundamine Photoshopis [PDF]
- IPhone'i / iPadi rakenduse arendaja tööriistade ja ressursside kasulik kogum
- iOS-i kasutatavuse näpunäited ja ressursid iPhone'i ja iPadi rakenduste jaoks
- Kuidas luua oma esimene iPhone'i rakendus
Järeldus
Need iOS-i rakenduste ja Adobe Photoshopiga töötamise strateegiad on kasulikud, kui arendate oma disaini meeli edasi. Mobiilirakendused on võrreldes veebisaitide ja logodega täiesti erinevad pallimängud. Pidage seda meeles kogu protsessi vältel, kuna õpite pidevalt uusi tehnikaid.
Koos ülaltoodud linkidega peaksite rakenduse liidese kujundusega edasi liikudes palju mugavamalt tundma. Paigutuse maketid on alati rasked ja nende ehitamiseks ning uurimiseks on vaja aega. Kuid kui teil on piisavalt pühendumust, on mobiilsideturg tõenäoliselt kõige jõukam piirkond. Kui teil on lisaküsimusi või kommentaare, andke meile sellest teada allpool olevas arutelupaigas.
