iPhone Skærmstørrelser: En Komplet Guide for Designere

At designe en brugerflade til iPhone-apps kan være en kompleks opgave, især når man skal navigere i de mange forskellige skærmstørrelser, opløsninger og pixelspecifikationer, som Apple har introduceret gennem årene. Mange designere, både nye og erfarne, støder ofte på modstridende informationer om de korrekte dimensioner og indstillinger for deres designfiler. Denne artikel vil give dig en omfattende forståelse af iPhone-skærmstørrelser, de relevante designprincipper og de anbefalede indstillinger for populære designværktøjer, så du kan skabe app-interfaces, der ser fantastiske ud på enhver enhed.

Lad os dykke ned i de vigtigste aspekter, fra de tidlige dage med faste pixelmål til nutidens adaptive designprincipper, der er essentielle for moderne app-udvikling.

Historisk Overblik: Fra Faste Pixels til Retina-opløsning

Da den første iPhone blev lanceret i 2007, var verden enkel. Skærmen målte 3,5 tommer diagonalt og havde en fast opløsning på 320x480 pixels. Den såkaldte 'dpi' (dots per inch) var 163, hvilket dengang var en banebrydende klarhed for en mobilskærm. Hvis du designede til denne skærm, var dine Photoshop-filer typisk 320x480 pixels, og du skulle huske at trække 20 pixels fra toppen til statuslinjen, hvilket efterlod et arbejdsområde på 320x460 pixels.

Den første store ændring kom med iPhone 4 i 2010. Apple introducerede Retina-displayet, som revolutionerede mobilskærme. Selvom den fysiske skærmstørrelse forblev 3,5 tommer, blev antallet af pixels fordoblet i både bredden og højden. Dette betød en fysisk opløsning på 640x960 pixels. For udviklere og designere var dette en udfordring, da apps nu skulle understøtte både den originale opløsning og den nye, skarpere Retina-opløsning. Apple introducerede begrebet 'points' (eller 'logiske pixels') for at forenkle processen. En 'point' på en Retina-skærm svarede nu til 2x2 fysiske pixels. Dette gjorde, at designere stadig kunne tænke i den logiske størrelse på 320x480 points, men skulle levere grafik i dobbelt opløsning (640x960 pixels) for at udnytte Retina-skærmens skarphed. Dette er ofte refereret til som @2x-aktiver.

Med iPhone 5 i 2012 udvidede Apple skærmen til 4 tommer, hvilket resulterede i en logisk opløsning på 320x568 points og en fysisk opløsning på 640x1136 pixels (stadig @2x). Dette er de dimensioner, som ofte nævnes i ældre designvejledninger for Photoshop, som dem du stødte på. Det var en populær størrelse i mange år, der dækkede modeller som iPhone 5S og den første generation af iPhone SE.

Nutidens iPhone Skærmstørrelser og Adaptive Design

Siden iPhone 5 har antallet af iPhone-modeller og dermed skærmstørrelser eksploderet. Med introduktionen af iPhone 6, 6 Plus, og senere iPhone X med dens notch og kant-til-kant-display, blev det klart, at det ikke længere var holdbart at designe til faste pixelmål for hver enkelt enhed. I dag findes der en lang række skærmstørrelser, herunder:

• Standard (@2x): F.eks. iPhone 6/7/8/SE (2. og 3. Gen) med en logisk opløsning på 375 x 667 points og en fysisk opløsning på 750 x 1334 pixels.
• Plus-modeller (@3x): F.eks. iPhone 6/7/8 Plus med en logisk opløsning på 414 x 736 points og en fysisk opløsning på 1242 x 2208 pixels (her gengives 1 point med 3x3 pixels).
• iPhone X-serien og nyere (@3x for de fleste): Disse introducerede nye aspektforhold, den berygtede 'notch' og afrundede hjørner. Eksempelvis har iPhone X/XS/11 Pro en logisk opløsning på 375 x 812 points og en fysisk opløsning på 1125 x 2436 pixels. iPhone 12/13/14-serien har 390 x 844 points (1170 x 2532 pixels) for standardmodellerne og op til 430 x 932 points (1290 x 2796 pixels) for Pro Max-modellerne.

Denne diversitet betyder, at moderne UI-designere skal tænke i adaptive layouts. I stedet for at designe en specifik fil for hver iPhone-model, designer man til et system af 'points' og lader iOS's Auto Layout eller SwiftUI håndtere tilpasningen til forskellige skærmstørrelser, orienteringer (stående/liggende) og enheder. Dog skal alle grafiske aktiver (ikoner, billeder osv.) stadig eksporteres i de korrekte opløsninger (@1x, @2x, @3x) for at sikre skarphed på alle skærme.

DPI/PPI og Opløsning i Designværktøjer

Du nævner en DPI på 163, hvilket var relevant for de første iPhones. I designværktøjer som Photoshop ser du ofte indstillingen 'Resolution' (pixels/inch eller PPI). Selvom mange guider anbefaler 72 PPI, er det vigtigt at forstå, at dette primært er en standard for skærmvisning i Photoshop og ikke direkte relateret til den faktiske fysiske pixeltæthed på en iPhone-skærm. Moderne iPhones har langt højere PPI, f.eks. over 300 PPI for Retina-skærme. For UI-design er det de fysiske pixeldimensioner af dine aktiver og den logiske point-baserede designflade, der er afgørende, ikke den specifikke PPI-indstilling i din designfil.

Anbefalede Indstillinger for Designværktøjer

Baseret på din oplevelse med Photoshop og overvejelser om Sketch, lad os gennemgå de anbefalede indstillinger og den moderne tilgang til UI-design.

Photoshop-indstillinger (historisk og til specifikke aktiver):

De indstillinger, du fandt (Bredde: 640 pixels, Højde: 1136 pixels, Opløsning: 72 pixels/inch), er perfekte som udgangspunkt, hvis du designer til en iPhone 5/5S/SE (1. Gen) i dens @2x opløsning. Disse indstillinger var standard for mange år siden. Her er en gennemgang af dem:

• Bredde: 640 pixels
• Højde: 1136 pixels (Dette svarer til iPhone 5/5S/SE (1. Gen) i @2x opløsning)
• Opløsning: 72 pixels / inch (PPI): Som nævnt, dette er primært en indstilling for Photoshop-arbejdsfladen. Det er vigtigere, at dine pixeldimensioner er korrekte, når du eksporterer.
• Farvetilstand: RGB Color: Standard for skærmdesign.
• Baggrundsindhold: Hvid (Valgfrit, men ofte praktisk).
• Farveprofil: Don't Color Manage This Document: For UI-design er det ofte bedst at undgå farvestyring, medmindre du har specifikke krav til farvenøjagtighed på tværs af enheder og medier.
• Pixel Aspect Ratio: Square Pixels: Dette er afgørende for at undgå forvrængning.

Du bør gemme disse indstillinger som en forudindstilling i Photoshop, hvis du ofte arbejder med ældre iPhone-applikationer eller specifikke @2x-aktiver. Husk dog, at for moderne app-interfaces, der skal understøtte mange skærmstørrelser, er denne faste dimension kun et udgangspunkt for en specifik enhed.

Den Moderne Tilgang: Sketch, Figma, Adobe XD

Du nævner, at du er skiftet til Sketch, og det er et fremragende valg. Moderne UI/UX-designværktøjer som Sketch, Figma og Adobe XD er designet fra grunden til at håndtere de udfordringer, som adaptive skærmstørrelser medfører. De arbejder typisk med 'artboards' eller 'frames' (svarende til Photoshop-lærreder), hvor du designer i 'points' (logiske pixels) og derefter nemt kan eksportere alle dine aktiver i flere skalaer (@1x, @2x, @3x) med et par klik. Dette eliminerer behovet for manuelt at oprette separate filer for hver pixelopløsning.

Disse værktøjer giver også bedre understøttelse for:

• Symboler/Komponenter: Genanvendelige UI-elementer, der kan opdateres ét sted og reflekteres overalt.
• Responsivt Design: Funktioner som 'Smart Layout' i Sketch eller 'Auto Layout' i Figma, der hjælper dig med at designe elementer, der automatisk tilpasser sig forskellige størrelser.
• Prototyping: Opret interaktive prototyper direkte fra dine designs.
• Samarbejde: Især Figma er kendt for sine stærke samarbejdsfunktioner i skyen.

Når du designer i disse værktøjer, vælger du typisk en standard artboard-størrelse baseret på en almindelig iPhone-model i dens logiske point-opløsning. For eksempel vælger mange at designe til iPhone X/XS/11 Pro med en artboard-størrelse på 375x812 points, da dette er en god baseline, der tager højde for notch og safe areas. Derefter sørger du for, at dine layouts er fleksible, så de kan skaleres op eller ned til andre enheder.

Statuslinjen og Safe Areas

Du nævner korrekt, at statuslinjen historisk set var 20 pixels høj, og at skærmbilleder til App Store ikke bør inkludere den. Dette gælder stadig, men med introduktionen af iPhones med 'notch' (iPhone X og nyere) er konceptet blevet udvidet til Safe Areas. En 'Safe Area' er det rektangulære område på skærmen, hvor dit indhold er garanteret ikke at blive skjult af enhedens hardware (som notch'en eller home indicator i bunden) eller systemets UI (som statuslinjen). Det er afgørende at designe din app's indhold, så det respekterer disse safe areas, især når du designer til kant-til-kant-skærme.

Landskabstilstand

Endelig er det vigtigt at overveje landskabstilstand (liggende orientering). Selvom mange apps primært bruges i portrættilstand, skal du overveje, hvordan din brugerflade vil tilpasse sig, når enheden roteres. Dette involverer ofte at omarrangere elementer, justere skriftstørrelser eller endda skjule visse elementer for at optimere pladsen. Moderne designværktøjer og udviklingsframeworks (som SwiftUI) gør det lettere at definere layouts, der automatisk tilpasser sig orienteringsændringer.

Sammenligningstabel: iPhone Opløsninger (Eksempler)

For at opsummere de forskellige skærmstørrelser og resolutioner, her er en tabel med eksempler på populære iPhone-modeller og deres logiske (points) og fysiske (pixels) opløsninger:

Ofte Stillede Spørgsmål (FAQ)

Hvad er forskellen på pixels og points?

Pixels er de fysiske lyspunkter på skærmen. Points er en abstrakt måleenhed, som Apple introducerede for at forenkle designprocessen på tværs af forskellige skærmdensiteter (Retina vs. ikke-Retina). En designer arbejder typisk i points, og udviklingsframeworks oversætter disse points til det korrekte antal fysiske pixels baseret på enhedens skærm. F.eks. kan 1 point være 1 pixel (@1x), 2x2 pixels (@2x), eller 3x3 pixels (@3x).

Skal jeg designe til alle iPhone-størrelser individuelt?

Nej, det anbefales ikke at designe en separat fil for hver enkelt iPhone-størrelse. Den moderne tilgang er at designe et adaptivt og responsivt layout, der automatisk tilpasser sig forskellige skærmstørrelser og orienteringer. Du designer i 'points' og bruger funktioner som Auto Layout (i iOS-udvikling) eller Auto Layout/Smart Layout (i designværktøjer) til at sikre, at dine elementer flyder og justeres korrekt.

Hvad betyder @1x, @2x, og @3x?

Disse suffikser refererer til skalering af grafiske aktiver (billeder, ikoner). @1x er basislinjen (f.eks. et ikon på 24x24 pixels for en ældre skærm). For Retina-skærme (@2x) skal du levere den samme grafik i dobbelt opløsning (48x48 pixels) for at den ser skarp ud. For de skarpeste skærme (@3x) skal du levere den i tredobbelt opløsning (72x72 pixels). Dette sikrer, at din app ser skarp og detaljeret ud på alle enheder, uanset deres pixeltæthed.

Er Photoshop det bedste værktøj til UI-design?

Mens Photoshop kan bruges til UI-design, er det generelt ikke det mest effektive valg for moderne app-interfaces. Vektorbaserede værktøjer som Sketch, Figma eller Adobe XD er specialiseret i UI/UX-design og tilbyder bedre funktioner til artboard-styring, symboler, responsivt design og eksport af aktiver i flere skalaer, hvilket strømliner workflowet betydeligt.

Hvad med statuslinjen og safe areas?

Du skal altid tage højde for statuslinjen (øverst) og, for nyere iPhones med notch og afrundede hjørner, de såkaldte 'safe areas'. Disse områder er reserveret af systemet for at undgå, at dit indhold bliver skjult af hardware eller system-UI. Sørg for, at dit indhold ikke overlapper disse områder, så brugerne altid kan se alt relevant information.

Konklusion

At forstå iPhone-skærmstørrelser og de underliggende designprincipper er afgørende for at skabe app-interfaces, der ikke kun ser godt ud, men også fungerer fejlfrit på tværs af det brede spektrum af Apple-enheder. Fra de tidlige dages faste pixeldimensioner er vi bevæget os mod en verden af adaptive layouts, 'points' som designenhed og behovet for at levere aktiver i flere opløsninger (@1x, @2x, @3x). Ved at omfavne moderne designværktøjer som Sketch eller Figma og forstå koncepterne bag responsivt design, kan du sikre, at din app er fremtidssikret og leverer en optimal brugeroplevelse, uanset hvilken iPhone den kører på. Glem de gamle, faste pixelmål, og tænk i fleksible, punkt-baserede layouts, der tilpasser sig dynamisk.

Hvis du vil læse andre artikler, der ligner iPhone Skærmstørrelser: En Komplet Guide for Designere, kan du besøge kategorien Mobiludvikling.