Introduksjon til iPhone Design

Dette innlegget er det første i en 10-delig iPhone Design-serie som er omtalt på Mobiletuts +. Hver uke vil vi dykke inn i en rekke aspekter ved hvordan du utformer vakre og brukbare mobilgrensesnitt for iOS. For å få en påminnelse hver gang et nytt innlegg kommer inn i denne serien, sørg for å abonnere via e-post eller vår RSS-feed!

Serieoversikt

Er du en webdesigner, begeistret av ideen om å designe iPhone apps, men usikker på hvordan du kommer i gang? Eller kanskje du har designet et par apps, men ser ut til å øke dine ferdigheter med litt grunnleggende kunnskap om hvorfor vi tar visse designbeslutninger for mobil? Denne serien er for både nybegynnere og mellomstore designere som ønsker å lage et stort sprut i det mobile designområdet!

Emnene du kan se frem til i denne serien inkluderer både hands-on teknikker og eksempler, samt mobil relatert designteori. Følgende er en oppsummering av hva vi vil dekke i løpet av denne serien:

  • Design for iPhone målgruppe og App Store
  • Slik bruker du iPhone og iPad designmaler
  • Utforme apper som bruker all tilgjengelig iPhone-funksjonalitet
  • Hvordan designe for ulike typer iPhone Apps
  • Den mobile designprosessen
  • Fordeler og ulemper med å bruke Apple Standard vs Custom Graphics
  • Forstå appens målgruppe
  • Ikon Design Tips for iPhone og iPad
  • iPhone Mockup Tools og Wireframing Process
  • Opprette skjermbilder og ikoner for iTunes

Design for mobil vs web

Kan jeg ikke bare begynne å designe apper? Tross alt er design for mobil bare å designe for en mindre skjerm, til høyre?

Ikke egentlig. Design for mobil er annerledes enn å designe nettsteder eller skrivebordsprogrammer, og forskjellene multipliserer raskt som flere mobile enheter med ekstra funksjonalitet og unike maskinvarehensyn slår markedet. La oss se på forskjellene mellom å designe for web vs mobil for å få bedre forståelse av hvordan brukerne samhandler med hver plattform.

Designing for web

I denne artikkelen refererer begrepet "web" til bærbare / desktop-baserte nettsteder og webapplikasjoner. Når vi designer for web-baserte applikasjoner, vil vanligvis maskinvaren som vårt design blir vist på, bli tatt for gitt. Vi kommer ikke til å hente og vippe eller berøre våre skjermer eller bærbare datamaskiner. Faktisk er de taktile samhandlingene vanligvis begrenset til:

  • Museklikk
  • tastetrykk
  • Mikrofoninngang
  • Høyttaler lydutgang

Design for mobil

Mobile er et helt annet dyr. Ikke bare jobber vi med ny og mangfoldig maskinvare, men mobil design har også potensial til å påvirke oss på svært forskjellige måter følelsesmessig. Mobile er en personlig og folkemessig plattform. Tross alt, tenk på hva vi kaller mange av disse enhetene: telefoner. De passer i vår hånd, lommen eller ved siden av lommeboken. Vi bruker dem til å ringe og sosialisere, og de er nesten alltid ved siden av oss. Disse faktorene påvirker alle våre følelsesmessige oppfatninger av enheten.

Når det gjelder maskinvarefunksjoner, er det massevis av interaksjonspunkter som direkte påvirker designhensyn. Disse inkluderer:

  • Gesture deteksjon (klype, flick, dra, etc.)
  • Enkel og multi-touch deteksjon (muliggjør direkte interaksjon med innhold)
  • På skjermen, programvaren tastatur eller trådløst, fysisk tastatur
  • Mikrofoninngang (ofte brukt til oppgaver som navigasjon)
  • Høyttaler lydutgang
  • Plasseringsklar informasjon og tilbakemelding

Er du en god passform for mobil?

Som designere har vi alle sterke og svake sider, kompetanseområder og uinteresserte områder. Før du hopper inn i grunnlaget for iPhone Design, er det en god ide å se på egenskapene til dyktige mobile designere.

Den gode nyheten er at du kan lære dette. Spørsmålet er, hvor interessert er du i det? Designing for mobile enheter krever en dedikasjon til brukeropplevelse utover alt de fleste har sett i å designe for nettet. Sjelden oppretter vi mobile grensesnitt som er ment å bli overvekt og nytes rent for den estetiske verdien. Et stort flertall av mobilgrensesnitt er oppgaveorientert og brukerfokusert.

Sannheten er, med de fleste bruksbaserte mobilappene, ser folk ikke på designet ditt veldig lenge. Hvis de er, har du gjort noe galt, og hvis de ikke kan finne ut hvordan du får det du har gjort feil fort nok, går de ut. De sletter. De skriver deretter en stygg anmeldelse.

Designere som har den enkleste overgangen til mobil er de som omfavner en høy standard av brukervennlighet og kreativitet. Tanken om at design for brukeropplevelsen på en eller annen måte deflates kreativt potensial er det motsatte av virkeligheten.

Design for mobile er en av de mest spennende og kreative lekeplassene rundt for designere i dag. Det er bokstavelig talt et åpent spillerom, moden til innovasjon. For å forklare hvordan det er å være en mobildesigner, er det best å ta en titt tilbake til produktdesignhistorikken.

Før du kunne kjøpe en mobil enhet som utførte flere oppgaver, hadde vi ett produkt som oppfylte en oppgave. En touch-tone telefon, en vekkerklokke, en lommelykt - hver av disse individuelle objektene krevde et dedikert produktutviklingslag, en designer og en markedsfører.

I dag kan alle oppgavene selvfølgelig gjøres på en enhet. Ganske fantastisk! Hva er kult, er det samme planlegging, detaljoppmerksomhet og estetisk design som gikk inn i telefonen, klokke og lommelykt av gårdhesten går fortsatt inn i å lage hver av disse appene i dag!

Tenk på det som ikke bare "det er en app for det," og i stedet som "det er et produkt for det." Du designer ikke bare apps. Du designer produkter.

Mobile er et rent lærred

Det som er mest spennende om å designe for mobile enheter, er at det meste du jobber med fra et virkelig tomt lerret. Selvfølgelig er det grunnleggende og universelle designregler som skal vurderes, men sannheten er at mange av designreglene og forventningene som de forholder seg til mobil, fremdeles er definert.

Utfordringen for designere er å skape design som er tro mot brukeren, merkevaren og oppgaven ved hånden. Noen ganger betyr det at du bruker standard kontroller og leverer et grensesnitt som er rent utilitaristisk. På andre tidspunkter betyr det å ignorere alle standarder og skape et design som er helt unikt. Uansett må brukeren intuitivt forstå hvordan du bruker appen på et øyeblikk.

Hvilken programvare bruker jeg til å designe apper?

Dette er det første spørsmålet designere som er nye til mobil synes å spørre. Gode ​​nyheter, pixel pushers: det er Photoshop! Når det er sagt, med spredning av enheter, skjermstørrelser og oppløsninger, er vektorformer (eller vektor-smarte objekter) også en stor del av utformingen av mobile enheter.

Min personlige preferanse er å lage vektorformer i Illustrator, og kopiere og lime inn disse objektene i Photoshop som et formlag. For vektorobjekter som ikke er altfor komplekse, foretrekker jeg denne metoden over ved hjelp av smarte objekter, slik at jeg ikke stadig skifter frem og tilbake fra Photoshop til Illustrator.

Vi vil dykke inn i alle detaljene i de forskjellige skjermstørrelsene, resolusjonene, bildefiltypene og dimensjonene på trykkfeltene i et annet innlegg i denne serien: "Hvordan bruke iPhone og iPad-designmaler."

Hvordan blir apper gjort?

iPhone apps utvikles ved hjelp av flere forskjellige metoder. Vi dykker inn i "Hvordan designe for forskjellige typer iPhone Apps" i et senere innlegg, men generelt sett er iPhone apps skrevet i Objective-C programmeringsspråket ved hjelp av et Apple-program kalt Xcode. Apple gir all utviklingsprogramvaren du trenger for å lage en app gratis når du registrerer deg som en Apple-utvikler. For å installere programvaren trenger du imidlertid en Apple-datamaskin som kjører den nyeste versjonen av OS X-operativsystemet. En ytterligere vurdering er at for å faktisk bygge og teste applikasjoner på en fysisk iPhone eller iPod touch-enhet, må du registrere deg i Apple Developer-programmet og betale en årlig $ 99 USD-avgift.

Hvorfor er noen apps templert og noen tilpasset designet?

Appene du ser som ser ut til å være "templated", bruker vanligvis standardbrukerelementene som leveres av Cocoa-Touch, og følger Apples standard brukergrensesnittretningslinjer. Disse retningslinjene definerer grafiske standarder og bruksmønstre for standardbrukerelementene, og de gjør det enkelt for enhver utvikler å bygge og designe en app. Vanligvis ser du en svart tavla langs bunnen og en navngitt navstang øverst. Flikene hopper deg til forskjellige kategorier av informasjon, mens navlinjen hjelper deg med å navigere i disse kategoriene.

Appene du ser som ikke inneholder standardbrukerelementene, har blitt tilpasset. Nesten alle uformelle og seriøse spill er skreddersydde og noen morsomme verktøy og verktøy apps inkluderer også tilpasset design grafikk.

Beslutningen om å bruke tilpasset versus standardgrafikk er ofte basert på det totale budsjettet som er tilgjengelig for prosjektet. Bare å ha budsjettet til å designe egendefinert grafikk er ikke nok; et budsjett må også eksistere for en utvikler for å implementere den egendefinerte grafikken. Tilpasset app design integrasjon kan noen ganger være svært vanskelig for utvikleren eller utviklingslaget, og den tiden kan legge opp!

I lys av økt tid og penger som er nødvendig for å bygge et tilpasset brukergrensesnitt, er det viktig å vurdere hvor mye tilpasset grafikk står for å faktisk øke brukeropplevelsen utover det som er tilgjengelig med standardleverandører av Apple-brukergrensesnitt. Et godt eksempel på en app som bare gjør en liten ting og egentlig ikke trenger mye tilpasset design er UDID Sender. Denne appen tar tak i enhetens UDID (ganske som lisensmerket til iPhone) og sender det til en utvikler, slik at du kan installere forhåndsversjon av apper for beta-testing. Denne typen app trenger egentlig ikke tilpasset grafikk.

Klar til å dykke inn?

Flott! Det neste innlegget i denne serien vil la deg få føttene våte ved å leke med noen pre-fab design maler. Jeg snakker deg gjennom noen grunnleggende om hvordan du designer din første app, inkludert standarder, beste praksis og grunnleggende designregler og teori for mobil.

Et spesialtilbud fra Jen Gordon @Tapptics

Send meg en epost, og jeg sender deg en 20% rabattkupong for en år verdt nedlastinger på Tapptics!