iPhone Skærme: Glem DPI, Forstå Pixels og Punkter

Som app-udvikler eller designer, der arbejder med skabeloner til iPhone, er det et yderst relevant spørgsmål at stille sig selv: Hvilken DPI (Dots Per Inch) eller PPI (Pixels Per Inch) skal jeg bruge? Spørgsmålet om 300 DPI eller 72 DPI er en klassisk kilde til forvirring, der stammer fra en tid, hvor skærmteknologien var langt simplere. For moderne iPhones, især dem med Apples banebrydende Retina-skærme, er svaret dog mere nuanceret og kræver en grundlæggende forståelse af, hvordan digitale billeder og skærme fungerer.

Lad os starte med at afklare den mest fundamentale misforståelse: For skærme og digitalt indhold er DPI stort set irrelevant. DPI er et udtryk, der primært anvendes inden for trykkeribranchen og refererer til antallet af blækdråber pr. tomme, en printer kan placere på papir. Når vi taler om digitale skærme, taler vi derimod om PPI – Pixels Per Inch. PPI beskriver tætheden af fysiske pixels på en skærm. Jo højere PPI, desto skarpere og mere detaljeret fremstår billedet, da der er flere pixels pakket ind på den samme fysiske plads. iPhones har, med deres Retina-skærme, en ekstremt høj PPI, langt højere end de traditionelle 72 PPI, der ofte blev anvendt som standard for webdesign i fortiden.

DPI vs. PPI: Hvad er Forskellen og Hvorfor er det Vigtigt?

For at dykke dybere ned i emnet er det afgørende at forstå forskellen mellem DPI og PPI. Som nævnt er DPI (Dots Per Inch) et mål for printkvalitet. En printer med 300 DPI kan placere 300 blækpunkter på hver lineær tomme. Dette er relevant for at opnå høj billedkvalitet på trykte materialer, såsom fotos eller magasiner, hvor detaljer er altafgørende. Hvis du for eksempel skulle printe din app-skabelon ud på papir og ønskede den skarpeste kvalitet, ville 300 DPI være et godt udgangspunkt for printfilen.

Men på en digital skærm har vi pixels, ikke blækpunkter. PPI (Pixels Per Inch) fortæller os, hvor mange individuelle pixels der er samlet på en lineær tomme af skærmen. En skærm med en høj PPI vil vise et billede, der ser glattere og mere detaljeret ud, selv når man ser tæt på, fordi de enkelte pixels er så små og tæt pakket, at de er svære at skelne med det blotte øje. Dette er præcis princippet bag Apples Retina-skærme. En typisk iPhone Retina-skærm kan have en PPI på over 300, og nogle modeller endda over 450. Dette betyder, at den fysiske opløsning er utrolig høj, hvilket giver en utrolig skarp visuel oplevelse.

Så, for at besvare dit oprindelige spørgsmål direkte: Ingen af dine foreslåede DPI-værdier (300 eller 72) er direkte relevante for, hvordan du designer din app-skabelon i et digitalt designprogram. Du designer ikke i DPI. Du designer i pixels – eller mere præcist, i Apples økosystem, designer du i 'punkter'.

Design i 'Points': Apples Tilgang til UI-Skalering

Apple har, for at forenkle designprocessen på tværs af deres mange forskellige enheder med varierende skærmstørrelser og PPI-tætheder, introduceret konceptet 'punkter' (points) eller 'logiske pixels'. Når du designer en app til iOS, arbejder du ikke direkte med de fysiske pixels på skærmen, men snarere med disse abstrakte 'punkter'. Et 'punkt' er en måleenhed, som iOS bruger til at skalere UI-elementer. Én punkt kan repræsentere én, to eller endda tre fysiske pixels, afhængigt af enhedens skærmtæthed.

Dette system er designet til at sikre, at din app ser korrekt dimensioneret og skarp ud på alle iPhones, uanset deres specifikke pixelopløsning. For eksempel vil en knap, der er defineret som 44x44 punkter, have en konsistent fysisk størrelse på tværs af forskellige iPhone-modeller, selvom den på en ældre, ikke-Retina-skærm ville optage 44x44 fysiske pixels, mens den på en Retina-skærm med dobbelt pixeltæthed (en @2x-skærm) ville optage 88x88 fysiske pixels, og på en Super Retina-skærm med tredobbelt pixeltæthed (en @3x-skærm) ville optage 132x132 fysiske pixels. Dette sker automatisk i iOS, så længe du designer i punkter.

Forstå Skaleringsfaktorer (@1x, @2x, @3x)

For at understøtte dette 'punkt'-system, bruger Apple skaleringsfaktorer. Disse faktorer dikterer, hvor mange fysiske pixels der svarer til ét logisk punkt på en given enhed:

• @1x: Dette er den oprindelige densitet, hvor 1 punkt svarer til 1 fysisk pixel. Disse skærme findes typisk på ældre iPhones uden Retina-display.
• @2x: På disse skærme svarer 1 punkt til 2x2 fysiske pixels (altså 4 pixels i alt). De fleste almindelige Retina-iPhones bruger denne skalering. Dette betyder, at for hver 'punkt' du designer, skal du levere billedmateriale, der er dobbelt så stort i bredde og højde i fysiske pixels.
• @3x: På de nyeste og mest avancerede iPhones med Super Retina-skærme svarer 1 punkt til 3x3 fysiske pixels (altså 9 pixels i alt). For disse enheder skal du levere billedmateriale, der er tre gange så stort i bredde og højde i fysiske pixels for at opnå den skarpeste visning.

Som designer skal du altså primært designe din brugergrænseflade i 'punkter'. Når du eksporterer dine grafiske elementer (ikoner, billeder osv.), skal du dog typisk eksportere dem i flere versioner – en @2x-version og en @3x-version – for at sikre, at de ser skarpe ud på alle skærme. Et ikon, der er 20x20 punkter, skal altså eksporteres som 40x40 pixels (@2x) og 60x60 pixels (@3x).

Praktiske Råd til App-Designere

Når du arbejder på en skabelon til en iPhone-app i designsoftware som Sketch, Figma, Adobe XD eller lignende, er det vigtigt at indstille dit arbejdsområde korrekt. De fleste moderne designværktøjer er bygget til at forstå disse 'punkter' eller 'logiske pixels' som standard. Du bør derfor:

• Design i punkter: Opret dine artboards og designelementer baseret på de logiske punkt-mål for de forskellige iPhone-modeller. For eksempel er den mest almindelige vertikale iPhone-opløsning 375x667 punkter (for iPhone 6/7/8), 414x736 punkter (for iPhone 6/7/8 Plus) eller 375x812 punkter (for iPhone X/XS/11 Pro). Vælg den mest repræsentative størrelse for din app, ofte iPhone 11 Pro / XS / X (375x812 punkter) eller iPhone 12 / 13 / 14 (390x844 punkter) som udgangspunkt, da de dækker et bredt spektrum af de nyere enheder.
• Brug vektorbaserede elementer: Opret ikoner og illustrationer som vektorgrafik (SVG), når det er muligt. Dette gør dem skalerbare uden tab af kvalitet, hvilket er ideelt til eksport i forskellige @Nx-størrelser.
• Eksporter i de rette skaleringsfaktorer: Sørg for at eksportere dine rasteriserede billeder (f.eks. fotos, der er indlejret i din UI) i de nødvendige @2x og @3x opløsninger. Udvikleren vil derefter inkludere disse i app-bundtet, så iOS automatisk kan vælge den korrekte version til den specifikke enhed.
• Test på rigtige enheder: Selvom designsoftware er god, er den bedste måde at sikre, at din app ser perfekt ud, at teste den på forskellige fysiske iPhone-modeller. Dette giver dig en reel fornemmelse af størrelse, læsbarhed og visuel skarphed.

Almindelige iPhone-Opløsninger og Point-Mål

Her er en oversigt over nogle almindelige iPhone-modeller og deres logiske punkt-opløsninger, som du skal designe efter, samt de tilsvarende fysiske pixel-opløsninger:

Bemærk, at selvom iPhone XR/11 har en logisk bredde på 414 punkter, ligesom Plus-modellerne, er dens fysiske pixelopløsning lavere end de tilsvarende Plus-modeller, da den kører med en @2x skalering, mens Plus-modellerne kører med @3x (men nedskalerer fra en endnu højere intern rendering). Dette er et eksempel på, hvorfor det er vigtigt at fokusere på punkter som designer.

Ofte Stillede Spørgsmål om iPhone-Skærme og Design

Q: Skal jeg designe min app-skabelon i 72 DPI eller 300 DPI?
A: Ingen af delene. Disse DPI-værdier er irrelevante for digitalt skærmdesign. Du skal designe i pixels eller, mere specifikt for iOS, i 'punkter'. Dit designprogram vil automatisk håndtere den interne 'DPI' (som egentlig er PPI) for skærmvisning. Fokusér på de logiske punkt-mål for de iPhones, du designer til.

Q: Hvad er et 'punkt' på en iPhone?
A: Et 'punkt' (også kendt som en 'logisk pixel' eller 'retina-punkt') er en abstrakt måleenhed, som Apple bruger til at definere størrelsen af brugergrænsefladeelementer i iOS. Det er designet til at sikre, at elementer har en ensartet fysisk størrelse på tværs af forskellige iPhone-modeller med varierende skærmtætheder (PPI).

Q: Hvorfor er Retina-skærme så vigtige for app-design?
A: Retina-skærme har en så høj pixeltæthed (PPI), at individuelle pixels ikke kan skelnes med det blotte øje ved en normal betragtningsafstand. Dette giver en utrolig skarp og glat visuel oplevelse, hvor tekst og billeder fremstår med printkvalitet. For app-designere betyder det, at du skal levere billedmateriale i højere opløsninger (@2x, @3x) for at udnytte denne skarphed fuldt ud og undgå slørede elementer.

Q: Hvordan håndterer jeg forskellige iPhone-skærmstørrelser i mit design?
A: Ved at designe i 'punkter' og anvende responsivt design. Apples Auto Layout-system i Xcode (udviklingsmiljøet) hjælper udviklere med at placere elementer dynamisk baseret på skærmstørrelse og orientering. Som designer bør du overveje, hvordan din UI skal tilpasse sig forskellige skærmforhold og -størrelser, selvom de grundlæggende elementstørrelser defineres i punkter.

Q: Skal jeg altid levere @1x, @2x og @3x billeder?
A: For de fleste moderne apps er det tilstrækkeligt at levere @2x og @3x billeder, da de dækker langt størstedelen af de iPhones, der er i aktiv brug i dag. Ældre @1x-enheder er sjældne. Dog, hvis du har brug for bagudkompatibilitet, kan det være relevant at inkludere @1x-aktiver. Designsoftware kan ofte automatisere eksporten til alle disse skalaer.

Konklusion

For at opsummere, når du designer en app-skabelon til iPhone, skal du helt glemme begreberne DPI og fokusere på PPI og især Apples 'punkter'. Du designer din brugergrænseflade i logiske punkter, og dit designsoftware vil typisk give dig mulighed for at vælge de korrekte artboard-størrelser baseret på disse punkt-mål. Når du eksporterer dine aktiver, skal du sørge for at generere dem i de relevante skaleringsfaktorer (@2x og @3x) for at udnytte den fulde skarphed, som Retina-skærmene tilbyder. Ved at følge disse principper sikrer du, at din app ser professionel, skarp og ensartet ud på tværs af alle iPhones, og du undgår den forvirring, der ofte opstår med de forældede DPI-koncepter.

Hvis du vil læse andre artikler, der ligner iPhone Skærme: Glem DPI, Forstå Pixels og Punkter, kan du besøge kategorien Mobilteknologi.