Share
Det er mye "prosess" som går inn i design for mobile enheter, men noen ganger vil du bare hoppe inn og få hendene skitne! Dette innlegget er designet for å gi deg de verktøyene du trenger og de grunnleggende design og tekniske krav for å få deg raskt i gang.
Hvis du ikke har lest retningslinjene for Apple-grensesnittet for iPhone og iPad ennå, bør du. Det er mye informasjon, men vel verdt tiden å forstå hvordan Apple tenker på applikasjonsdesign. Disse veiledningene staver også ut detaljerte spesifikasjoner for skjermstørrelse, ikonstørrelse og oppløsning. Deretter skal jeg ta opp noen vanlige spørsmål og oppsummere disse spesifikasjonene i et enkelt å fordøye format!
IPhone netthinnen skjermen er en fantastisk ting å se. Når du ser på den nye og gamle skjermen ved siden av, er det åpenbart at det er endringer i denne skjermen som påvirker utformingen av appen din. Se denne sammenlikningsvideoen for side ved side.
Du kan se i sammenlikning av de to enhetene at skjermdimensjonene for iPhone 4 er uendret fra den forrige modellen. Imidlertid er både iPhone 4-skjermstørrelsen og pikseldensiteten på skjermen DOUBLED, noe som gir den en 640 x 960px skjermstørrelse (sammenlignet med den forrige 320 x 480px-størrelsen) og en fullstendig 326 piksler per tomme (sammenlignet med tidligere 163ppi). Denne nye skjermen klemmer 4 piksler der det pleide å være en - derfor ser bildene seg så skarpe og deilige ut!
Når du leser om skjermoppløsning, er det enkelt å raskt bli forvirret. Faktum er at den endelige eksporterte filtypen på iPhone er vanligvis .png og Xcode vurderer ikke ppi-verdien som er lagret når du gjør bilder. Hvis du følger dimensjonene som er angitt nedenfor, vil du være i god form!
| iPhone 3.0 Skjermoppløsning: 72 ppi Skjerm størrelse: 320 x 480 px Ikonstørrelse: 57 x 57 px Filformat: PNG-24 | iPhone 4.0 Skjermoppløsning: 72 ppi Lærretstørrelse: 640 x 960 px Ikonstørrelse: 114 x 114 px Filformat: PNG-24 | iPad Skjermoppløsning: 72 ppi Lærretstørrelse: 768 x 1024 px Ikonstørrelse: 72 x 72 px Filformat: PNG-24 |
Ikon: 512 x 512 px (.tif, .jpg eller .png, 72dpi, RGB)
iPhone Skjermbilder: 320 x 480 px eller 640 x 860 px (.tif, .jpg eller .png, 72dpi, RGB)
iPad Skjermbilder: 1024 x 768 px (.tif, .jpg eller .png, 72dpi, RGB)
Mens vi diskuterer skjermstørrelser, er det viktig å snakke om fremtiden for digitale enheter generelt. Jeg er ingen formue, men i det siste året er det ingen hemmelige berøringsskjerm enheter av alle slag som multipliserer som kaniner, og de produserer avkom med varierende skjermstørrelser. Aye! Som designere betyr det at vi må være forberedt på hvordan vi oversetter design til flere enheter og operativsystemer.
En app livssyklus kan kjøre en av mange kurs. Enkelte apper lever utelukkende på en plattform, andre forgrener seg til andre mobile enheter eller til og med en nettbasert tilstedeværelse. Å skape skalerbar grafikk sparer deg for hodepine for å gjenopprette grafikk for hver bestemt plattform. Bruk av formlag eller vektor-smarte objekter er den beste måten å håndtere spredning av skjermstørrelser og operativsystemer.
Design av ikoner for iPhone var min første introduksjon til beslutningen om å starte små og skalere opp eller starte stor og nedskalere. For meg ble det åpenbart etter noen få henrettelser som designe for 320 x 480px skjermstørrelsen og deretter dimensjonering opptil 640 x 960px er det beste alternativet. Design for den minste skjermstørrelsen eliminerer skuffelsen ved å miste detaljer når et design må dimensjoneres senere.
La oss si at du har laget en app for en iPhone 3.0, og du vil prep denne appen til iPhone 4 retina displayet. Hva gjør du? Bare størr den opp fra 320 x 480 til 640 x 960? Ja. Problemet er at hvis du ikke har opprettet all grafikken din ved hjelp av formlag eller vektor-smarte objekter, så vil bildene dine se pikselagtige og kornete.
For både iPhone og iPad må minimumstørrelsen trykke på målområdet Apple anbefaler 44 x 44 piksler. Legg det til Apple for å kvantifisere gjennomsnittlig fingertuppestørrelse for mennesker. :) Hvis du vil gå mindre, må du sørge for at det er tilstrekkelig plass på tappbare områder for å forhindre feilkraner.
"Testing" et design kan høres rart, men det kan være vanskelig å designe for en mobil enhet på en bærbar eller stasjonær skjerm. Selv om du følger standardretningslinjer som 44 x 44px-tapmålregelen, kan proporsjoner og størrelser se vesentlig annerledes ut når de vises på enheten vs. datamaskinskjermen.
Den enkleste måten å teste design på, er å "Lagre for web" hvert skjermdesign i .png-format og synkronisere med telefonen din ved hjelp av iPhoto. Når bildene er synkronisert, kan du bla gjennom og simulere hva den faktiske appen vil se ut. Dette er også en fin måte å dele mockups med klienter for å gi dem en ekte forhåndsvisning av appen.
Nå som du har noen grunnleggende under beltet ditt, er det på tide å begynne å designe! Heldigvis er det mange ressurser tilgjengelig for å hjelpe deg med å bli kjent med de forskjellige iPhone- og iPad-grensesnittelementene. Selv om målet ditt er å skape helt tilpassede grensesnitt, er disse malene nyttige for å få et grunnlinje eller dimensjoner på skjermelementene riktig proporsjonert.
iPhone GUI PSD fra Teehan + Lax
iPhone GUI PSD Retina fra Teehan + Lax
iPhone Stencil for OmniGraffle fra Patrick Crowley
iPhone UI Vector Elementer fra Mercury Intermedia
iPad Stencil for OmniGraffle fra Information Architects
iPad GUI PSD fra Teehan + Lax
iPad Vector GUI fra Icon Library
Alle grafiske eiendeler som skal brukes til å bygge en app, blir eksportert i Portable Network Graphics (.png) format. Teknisk kan iPhone også vise andre filformater, men PNG-filer optimaliseres automatisk av iOS SDK, og bør derfor være det foretrukne formatet.
Dette gjelder alle elementer (nav knapper, barer, etc.) og andre bilder vist i appen. For eksempel, la oss si at appen din er en portefølje for en fotograf. Bildene som vises, vil også bli eksportert i .png-format.
Innstillingen for å eksportere .png-format i Photoshop (Fil> Lagre for web og enheter) ser slik ut:
Før du overfører filene til en utvikler, er det viktig å forstå deres evner med hensyn til skiver og dicing filen din. Hvis utvikleren har erfaring med å skli og eksportere, kan det være en stor tidsbesparelse å avlaste denne oppgaven. Personlig foretrekker jeg å kutte opp alle filene mine for å sikre at alle bildene blir skåret ut ordentlig.
Når du lagrer de endelige bildene dine, kan du prøve å bruke intuitive filnavnkonvensjoner som gjør det enklere for utvikleren å finne og referere til de riktige bildefilene. Her er noen eksempler på prefikser og suffikser jeg bruker:
Et annet verktøy jeg bruker til å kommunisere med utviklere er en .pdf-fil som inneholder alle skjermbilder pluss notater om designet. Jeg definerer skrifter, størrelser, linjeavstand og alle andre styling, så det er en enkel referanse som utvikleren kan bruke uten å måtte åpne Photoshop. En annen ressurs jeg gir, spesielt når jeg jobber med utviklere utenfor nettstedet, er en screencast (ScreenFlow og iShowU er mine favoritter) av appen, og går gjennom alle aspekter av designet. Dette er spesielt nyttig hvis appen inneholder animasjoner og / eller overganger som er bedre illustrert i en video.
Tekniske spesifikasjoner er ikke sexy, men de er viktige. Forbind disse detaljene til minne, og du vil spare deg for mye hodepine underveis!
Accentsconagua