iPhone design – tips til webdesigneren

Noget der gælder for de fleste iPhone-projekter vi er involveret i er, at vi har en grafiker med, som ikke tidligere har lavet design til iPhone – men derimod har lavet masser af design til webløsninger.

Jeg er ikke grafiker – og bliver det heller aldrig – men der er en del spilleregler, formater og best-practices, som er anderledes ved iPhone-design end ved web-design. Her kommer en lille liste:

Formater

Brug PNG’er eller eventuelt JPEGs.

Retina display – @2x

Der er pt. følgende skærmopløsninger til iOS-platformen:

iPhone3: 480×320 pixels
iPhone4: 960×640 pixels (Retina Display)
iPad: 1024×768 pixels

Når man designe interfaces til iPhone skal der både laves png’er til både iPhone3 og iPhone4. Udgangspunktet er iPhone3 og opløsningen 480×320 pixels. Så hvis man f.eks. er en grafik på 10×10 pixels med navnet “10pix.png”, så skal den laves i to versioner:

  • 10pix.png (10 x 10 pixels til iPhone3)
  • 10pix@2x.png (20 x 20 pixels til iPhone4)

iOS vil så automatisk vise den grafik der passer til den aktuelle telefons opløsning.

App-ikonet

App-ikonet vises i henholdsvis AppStore og på telefonens “desktop” og er en helt central identitet for app’en. App-ikonet bruges i mange sammenhænge, og skal leveres i 7 forskellige størrelser.

De vigtigste to versioner af ikonet er ikonet til AppStore (512×512 pixels) og ikonet på brugerens “desktop” (57×57 pixels på iPhone3 og 114×114 pixels på iPhone4). Derudover vises ikonet også når man søger og i andre sammenhænge.

Michael Flarup fra RobocatApps har lavet en fin guide til best practice for design af ikonet og en lækker lille Photoshop-template.

Navngivningen skal være:

  • Icon-72.png (72x72px)
  • Icon-Small-50.png (50x50px)
  • Icon-Small.png (29x29px)
  • Icon-Small@2x.png (58x58px)
  • Icon.png (57x57px)
  • Icon@2x.png (114x114px)
  • iTunesArtwork.png (512x512px)

For alle ikonerne gælder, at hvis du ikke laver de rundede hjørner – så gør Apple det for dig. Så nogle gange kan det være lettere og bedre bare at fylde canvas helt ud.

Tab-ikoner

Tab bar icons er de små grå/blå ikoner nede i bunden af en app. Disse ikoner er lavet efter en helt bestemt logik: PNG’ere i størrelsen 30×30 pixels eller 60×60 pixels for Retina display. De ikke-transparente dele af ikonet vises med en blå farve ligemeget hvilken farve du har givet dem og de transparente dele vises som sorte. Vil du have toner, så lav en delvist transparent grafik.

Her er en lille guide til tab icons.

Med denne lille Google-søgning kan du hente en masse eksempler til inspiration:

Templates

Der er masser af templates mv. på nettet. Denne lille Google-søgning giver dig masser at arbejde med.

Generelt

Den mest typiske fejl vi møder er, at designere ikke er fortrolig med iPhone som medie. Et typisk eksempel er, at designeren laver navigationen med samme “folde-ud folde-ind”-struktur som kendes fra mange websites. Dette fungerer ikke på en iPhone. En anden typisk fejl er, at knapper og klik-bare områder er alt, alt for små. Det virker fint når man tester på en Mac med en mus eller man kigger på sit fine design i Photoshop – men når brugerne sidder med app’en i toget er det ubrugeligt.

En anden ting der ofte går galt er, hvis designeren ikke følger de spilleregler for brugerinteraktion, som findes for platformen. Nogle gange kan der selvfølgelig være gode argumenter for at bryde disse spilleregler – ved spil eller ved apps der skal være en oplevelse. Et eksempel på hvordan dette kan gå helt galt, er DRs Nyheds-app. Her er der placeret en “Tilbage”-knap i interfacets øverste højre hjørne. I alle andre apps hedder “Tilbage”-knappen ikke “Tilbage”, men derimod navnet på det interface man kom fra og er placeret i øverste venstre hjørne.

Apple har lavet en god guide til Human Interface design på iPhone – men, generelt vil mit råd være, at man som designer skal gøre en indsats for at gøre sig dus med mediet og f.eks. finde nogle gode apps og bruge lidt tid på at finde ud af hvorfor de er gode.

Det gamle design-slogan fra web-design, “Don’t make me think”, gælder endnu mere ved iPhone apps. Her er ingen hjælpetekster, ingen mouse-over og slet ingen tålmodighed – så brugeren skal kunne afkode et interface med det samme. Derfor synes jeg at DRs “Tilbage”-knap er katastrofal. Det eneste den gør er, at gøre app’en lidt sværere for brugeren at bruge.

Design til tommelfingeren

Størstedelen af brugen af iPhone apps foregår ved at brugeren holder telefonen i højre hånd og bruger tommelfingeren til at navigere. Dette har flere interessante følger:

Delvist er nederste venstre del af skærmen det område, hvor det er lettest for brugeren at navigere. Derfor skal de vigtigste funktioner gerne være her. Det sværeste område er øverste højre hjørne.

Delvist er navigationen ret upræcis. Når man sidder med telefonen i en hånd og samtidigt navigerer med tommeltotten på samme hånd, så rammer man bare ikke ret præcist. Så, det er igen et argument for at knapper og tilsvarende skal være store og lette at ramme og at man skal begrænse antallet af mulige interaktioner per interface.

KISS

I modsætning til websider, så skal apps helst kun gøre en ting, og gøre den godt. Dette skal også gå igen i det grafiske design som jo oftest også er en del af det generelle design. Så godt design til apps er enkelt og overskueligt design.

Max 20MB

Apps der fylder mere end 20MB kan kun hentes via Wifi eller iTunes og ikke via 3G. Derfor er det en god ide, at komprimere grafikken fornuftigt eller begrænse mængden af grafikker, video og andre media.

Og – så er det bare at komme i gang :-)

Skriv en kommentar

 
Af Jakob Mikkelsen
jakob@greenerpastures.dk
+45 70 26 00 69