Meer informatie over pixeldichtheid in het ontwerp van mobiele interfaces. Is een hoge pixeldichtheid belangrijk op het scherm van een smartphone?

Bij het kopen van smartphones, monitoren en andere apparatuur met een scherm horen we vaak over zoiets als ppi, maar weinigen van ons kunnen zeggen wat het precies is en wat het beïnvloedt.

Maar in feite is dit kenmerk een van de belangrijkste bij het kiezen.

We zullen je vertellen wat de werkelijke betekenis van dit concept is (je kunt tenslotte veel mythen over dit onderwerp op internet vinden). Gaan!

Theoretische pagina en berekeningen

Het begrip in kwestie staat voor pixels per inch, dat wil zeggen het aantal pixels per inch. Ook uitgesproken als pee-pee-ay.

Het betekent letterlijk hoeveel pixels er passen in één inch van het beeld dat we zien op het scherm van een monitor, smartphone, tablet of ander apparaat.

Dit concept wordt ook wel de meeteenheid van resolutie genoemd. Deze waarde wordt berekend met behulp van twee eenvoudige formules:
Waar:

• dp– diagonale resolutie;
• di– diagonale maat, inches;
• Wp- breedte;
• PK- hoogte.

De tweede formule is ontworpen om de diagonale resolutie te berekenen en is gebaseerd op het gebruik van de beroemde stelling van Pythagoras.

Rijst. 1. Breedte, hoogte en diagonale grootte op de monitor

Om te laten zien hoe al deze formules worden gebruikt, nemen we bijvoorbeeld een 20-inch diagonale monitor met een resolutie van 1280x720 (HD).

Wp zal dus gelijk zijn aan 1280, Hp – 720 en Di – 20. Dankzij de aanwezigheid van deze gegevens kunnen we pi-pi-ai berekenen. Eerst gebruiken we formule (2).

Laten we deze gegevens nu toepassen op formule (2).

Opmerking: in feite hebben we 73,4 pixels, maar er kan geen niet-geheel aantal pixels zijn, er worden alleen gehele waarden gebruikt.
Op precies dezelfde manier kun je op elk apparaat de werkelijke waarden van het aantal pixels per inch berekenen.

Om te begrijpen hoeveel dit in centimeters is, een meer gebruikelijke waarde voor ons gebied, moet je het resulterende getal delen door 2,54 (er zijn precies zoveel centimeters in één inch). In ons voorbeeld is dit dus 73/2,54=28 pixels. centimeter.

In ons voorbeeld is dit 73, en 25,4/73 = 0,3. Dat wil zeggen dat de grootte van elke pixel 0,3x0,3 mm is.

Is het goed of slecht?

Laten we het samen uitzoeken.

Is deze hoeveelheid belangrijk?

Pee-pee-ay heeft op basis van het bovenstaande invloed op de helderheid van het beeld dat de gebruiker op zijn scherm ontvangt.

Hoe hoger de waarde van de indicator, hoe duidelijker het beeld dat de gebruiker krijgt.

Hoe groter deze waarde, hoe minder “vierkantjes” een persoon zal zien. Dat wil zeggen dat elke pixel klein zal zijn, niet groot, en dit maakt het mogelijk om er helemaal geen aandacht aan te besteden. De waarde van het kenmerk is duidelijk te zien in figuur 2

Rijst. 2. Het verschil tussen indicatoren wordt steeds groter

Niemand wil natuurlijk een foto zoals hiernaast op zijn smartphone of tablet hebben staan. Daarom is het bij het kiezen van dergelijke apparatuur erg belangrijk om op dit kenmerk te letten. Dit geldt vooral als u op internet koopt en niet de mogelijkheid heeft om de foto met eigen ogen te beoordelen en te begrijpen hoe duidelijk deze is.

Het vinden van een indicator in de kenmerken van dezelfde smartphone is meestal eenvoudig. Het bevindt zich meestal in het gedeelte 'Weergave'. Een voorbeeld is te zien in Figuur 3.

Rijst. 3. Indicator in de kenmerken van de smartphone

Belangrijk! Op internet kun je vaak informatie vinden dat ppi belangrijker is dan bijvoorbeeld resolutie of diagonaal en dat sommige van deze kenmerken een belangrijkere rol zouden moeten spelen bij de keuze. Dit is helemaal niet waar. Zoals we hierboven kunnen zien, zijn al deze drie concepten onlosmakelijk met elkaar verbonden.

Voor-en nadelen

Aantal pixels per inch heeft een positief effect op de helderheid van het beeld en daarmee op de kwaliteit ervan.

Het zal voor de gebruiker veel prettiger zijn om naar een afbeelding met een hogere indicator te kijken.

In Figuur 2 heeft de foto aan de linkerkant 30 ppi en de foto aan de rechterkant 300. Hieronder ziet u nog een soortgelijk voorbeeld.

Maar dit concept heeft ook nadelen. In het bijzonder hebben we het over de autonomie van het apparaat. Alles is vrij eenvoudig: als het beeld helder is, kan een smartphone, tablet of ander apparaat met een scherm lange tijd niet werken zonder op te laden. Je kunt zelfs een simpele regel maken: hoe meer pi-pi-ay, hoe korter de levensduur van de batterij.

Voor een pc is dit uiteraard geen probleem, aangezien daar de monitor altijd is aangesloten, maar voor sommige telefoons kan dit een groot probleem worden. Let daarom bij het kiezen van een apparaat niet alleen op het aantal pixels. per inch, en ook op batterijcapaciteit!

Zo gingen we soepel verder met het onderwerp van keuze.

Over het kiezen van beeldschermen

Er zijn verschillende regels die u zullen helpen het scherm correct te kiezen, rekening houdend met de pixels, ze klinken als volgt:

1Let op het weergavetype. De prioriteit zou AMOLED moeten zijn, nog beter SuperAMOLED of OLED. Dergelijke apparaten zullen altijd beter zijn dan IPS, LCD en andere.

Laten we zeggen dat we naar de winkel komen en bijvoorbeeld twee uitstekende apparaten zien: Samsung Galaxy J7 en Xiaomi Redmi Note 3. Hun prijs is bijna hetzelfde, het tweede apparaat is trouwens krachtiger.

De specificaties geven aan dat Xiaomi 400 ppi heeft (om de een of andere reden schrijven sommigen 400,53, maar zoals we hierboven al zeiden, kan er geen niet-geheel aantal pixels zijn). Samsung heeft 267 PPI en de resolutie is navenant lager (1280x720 versus 1920x1080). De diagonaal is hetzelfde: 5,5 inch.

Maar om de een of andere reden is het beeld duidelijker op Samsung. En dat allemaal dankzij het gebruik van gepatenteerde SuperAMOLED+ technologie. Je kunt dit zelf zien als je aandacht besteedt aan figuur 5.

2Probeer een gelegenheid te vinden om alle door u gekozen monsters persoonlijk te bekijken. Je kunt eerst op internet naar hun opties kijken en dan naar een elektronicawinkel gaan en zien hoe ze afbeeldingen daadwerkelijk weergeven. Een persoonlijke mening is in dit geval eenvoudigweg onvervangbaar.

3Let op de batterij. Als we het over smartphones hebben, zou de batterijcapaciteit ongeveer 3000 mAh moeten zijn om een ​​langdurige werking van het toestel met een helder beeld (hoge ppi en/of goede technologie) te garanderen.

Voor tablets zou dit zelfs nog hoger moeten zijn, omdat hun diagonaal groter is dan die van telefoons

4Onthoud: hoe kleiner de diagonaal en hoe hoger de pixeldichtheid (het aantal pixels per inch), hoe duidelijker het beeld. Houd uzelf niet voor de gek: u zult geen heel helder beeld kunnen krijgen met een enorm scherm en een kleine pi-ay-waarde. Het is belangrijk om hier een gulden middenweg te handhaven.

5Het is ook belangrijk om rekening te houden met de dekking. Zo zorgen matte schermen voor een minder helder en verzadigd beeld, maar zijn ze wel vriendelijker voor je ogen.

Maar glanzende beeldschermen zullen uw gezichtsvermogen negatief beïnvloeden, maar het beeld erop zal veel mooier zijn. In dit geval kan hun ppi-waarde hetzelfde zijn.

Dit is vooral relevant bij het kiezen van monitoren voor pc's en laptops. Als je fulltime of zelfs vaker op een computer werkt, kun je beter voor de matte optie kiezen.

Met dit alles kunt u zelf het meest geschikte display kiezen.

Resultaten

ppi of pi-pi-ai is de pixeldichtheid of het aantal pixels per inch van een afbeelding. Om het cijfer naar centimeters om te rekenen, moet je het delen door 2,54. Er kan geen niet-gehele hoeveelheid zijn, er kan alleen sprake zijn van een geheel.

Hoe hoger je hem laat zien, hoe duidelijker en prettiger het beeld zal zijn om naar te kijken. Bij het kiezen van smartphones, tablets, pc-monitoren, laptops en andere apparatuur met een display is het erg belangrijk om op deze indicator te letten.

Maar het is niet fundamenteel. Ook is het belangrijk om te kijken naar de technologie en schermdekking. Zorg er ook voor dat u naar de batterijcapaciteit kijkt en een gelukkig midden houdt tussen het aantal pixels. en schermgrootte.

Weten wat het verschil is tussen deze hoeveelheden en waar ze worden gebruikt, zal nuttig zijn voor velen die met drukwerk te maken hebben. Of het nu een ontwerper, schrijver of andere maker van drukwerk is.

Wat is ppi

Simpel gezegd bestaat elke rasterafbeelding uit pixels: gekleurde rechthoekige stippen. Laten we dat verduidelijken rasterafbeelding is een afbeelding waarvan de structuur een raster van pixels op een computermonitor vertegenwoordigt. Populaire rasterformaten - psd, Tiff, png, bmp of jpg- waarvan bewerking mogelijk is in de omgeving van gespecialiseerde software, zoals Adobe PhotoShop. Er zijn natuurlijk veel meer rasterformaten dan de genoemde, maar om te begrijpen waar we het over hebben, zullen de gegeven formaten ruim voldoende zijn.

Terugkerend naar de pixels waaruit een rasterafbeelding bestaat, kunnen we zeggen dat dit een soort mozaïek van gekleurde stippen is. Om precies te zijn, vierkanten. Elk vierkant kan slechts één kleur hebben. Maar de afbeelding kan pixels van verschillende kleuren en tinten bevatten. Hierdoor wordt de overgang van de ene kleur naar de andere bereikt.

Laten we bijvoorbeeld een strook van 1000 van dergelijke vierkanten (pixels) nemen. Er zal een zwart vierkant aan de ene kant zijn en een wit vierkant aan de andere kant. Daartussen zullen er vierkanten van verschillende tinten zijn. Elk vierkant dat zich van zwavel af beweegt en wit nadert, zal iets lichter zijn dan het vorige. Bij een hoge vergroting zullen we natuurlijk zien dat alle vierkanten verschillende tinten hebben. Maar met afstand zal de illusie van een vloeiende stroom van kleur of verloop verschijnen.

Omdat de afbeelding niet alleen lengte maar ook breedte heeft en het vlak vult, geeft de ppi-waarde aan hoeveel vierkanten (pixels) er zijn aan de zijkant van de conventionele meeteenheid. De standaardmaateenheid voor pixels in rasterafbeeldingen is één inch. Daarom vertelt de markering van 100 ppi ons dat er 100 pixels per inch zijn. Bij deze resolutie van de grafische afbeelding zijn er 10.000 pixels per vierkante inch (100x100). Laten we herhalen dat de kleur van een vierkante inch van alles kan zijn. Er is slechts één kleur per pixel.

Wat is lpi

Laten we het nu hebben over het overbrengen van afbeeldingen van een computermonitor naar papier. Met de monitor kunt u niet alleen de kleuren van de pixels weergeven, maar ook de helderheid ervan aanpassen. Hetzelfde kan niet gezegd worden over offsetdrukpersen en printers. Dit komt door de puur technische onmogelijkheid om het verfniveau voor elke individuele pixel op dergelijke apparaten aan te passen. Met printapparaten kunt u alleen inkt op bepaalde plaatsen op het papier aanbrengen of niet.

Printers losten het probleem van het aanbrengen van inktvolumes op specifieke gebieden op met hun gebruikelijke elegantie. Ze passen eenvoudigweg het te schilderen oppervlak aan op een specifieke plaats op het papier. Met deze aanpak kan, zelfs bij dezelfde dikte van de aangebrachte inktlaag, de helderheid worden aangepast door de afgedrukte stippen te vergroten of te verkleinen. Dit proces wordt rasterisatie genoemd.

Alle offsetdrukmachines werken volgens het zeefprincipe. Als u een vergrootglas neemt en naar offsetdruk kijkt, kunt u gemakkelijk de punten onderscheiden waaruit de afgedrukte afbeelding bestaat. Omdat de rasterisatiemethode veel eerder verscheen dan de uitvinding van computers, heeft de grootte van de rastermetingen er niets mee te maken. Aanvankelijk werden voor de screening contactschermen gebruikt. Dit is een transparante plaat waarop fijne schaduwen zijn aangebracht.

De lpi-waarde toont het aantal lijnen op de rasterplaat per inch. Deze waarde komt overeen met het aantal dots per inch in afgedrukte gerasterde afbeeldingen. Deze indicator is alleen van toepassing op gerasterde afbeeldingen en wordt nergens anders gebruikt. Deze parameter is van toepassing op rasterafdrukapparaten. Het kan niet worden toegepast op een computerafbeelding omdat het, hoewel het een rasterafbeelding wordt genoemd, in werkelijkheid een halftoonafbeelding is.

Als u de lpi-waarde in de printerinstellingen ziet, moet u begrijpen dat deze niets anders beïnvloedt dan het aantal rasterpunten per inch. Om de verschillen tussen ppi en lpi beter te begrijpen, is het de moeite waard om te zeggen dat het kleinste deel van een afbeelding op een computer een pixel is. Het kleinste deel van een afbeelding op papier is een punt.

In principe moeten deze indicatoren overeenkomen bij het afdrukken van een afbeelding. Ontwerpers maken echter vaak niet alleen een fout... Ze dienen eenvoudigweg een lay-out in voor afdrukken, die vele malen groter is dan de technische mogelijkheden van de afdrukapparatuur. De meest voorkomende beeldresolutie onder ontwerpers is 300 ppi. Ze brengen het project met dergelijke toestemming naar de krant. Maar bij het drukken van kranten wordt gebruik gemaakt van een rasterisatie van maximaal 100 lpi. Als resultaat krijgen we dat het originele bestand 9 keer kleiner zou kunnen zijn.

Wat is dpi

Laten we nu eens kijken naar de dpi-waarde. Deze waarde is alleen van toepassing op het rasterafdrukapparaat. In feite zijn de punten waaruit de lpi-indicator bestaat, op hun beurt weer opgebouwd uit kleinere punten. Een reeks van deze kleine puntjes is gelijk aan één doorgang van de laser op de fotodrum of film. Het blijkt dat er veel dpi gebruikt wordt om één lpi in beeld te brengen.

Het is duidelijk dat hoe hoger de verhouding tussen lpi en dpi, des te hoger de kwaliteit van de afdrukken zal zijn. Ook hier komt het mozaïekeffect om de hoek kijken. Hoe kleiner de stukjes, hoe nauwkeuriger en gedetailleerder het wordt. Dpi heeft ook invloed op lpi; hoe meer kleine punten worden gebruikt om een ​​grote rasterpunt te creëren, hoe nauwkeuriger deze punt zal zijn. Bij het afdrukken van afbeeldingen met een hoge resolutie kunnen verhoudingen van 150 lpi tot 2540 dpi en hoger worden gebruikt. Voor het drukken van kranten is een verhouding van 100 lpi op 1200 dpi voldoende.

Deze animatievideo behandelt de meeste onderwerpen in het artikel, maar als je geïnteresseerd bent in meer belerende details, lees dan zeker het hele bericht.

Pixeldichtheid verwijst naar het aantal pixels dat binnen een bepaalde fysieke grootte past (meestal een inch). Op de eerste Mac waren er 72 pixels per inch - het aantal lijkt groot, maar in feite waren dit enorme pixels, die nog niet elke grafische kaart aankan.

De schermtechnologie is sindsdien enorm vooruitgegaan en nu hebben zelfs de meest elementaire computerschermen een resolutie ergens tussen de 115 en 160 pixels per inch (ppi). Maar een nieuw hoofdstuk in dit verhaal begon in 2010, toen Apple de iPhone met Retina-display introduceerde, een superscherp scherm dat het aantal pixels per inch verdubbelde. Het resultaat van deze release zijn graphics die scherper zijn dan we ooit hebben gezien.

Om dezelfde fysieke grootte van de gebruikersinterface te behouden, werden de pixelafmetingen verdubbeld. De knop, die voorheen 44px in beslag nam, neemt nu 88px in beslag. Voor compatibiliteit tussen verschillende apparaten moeten ontwerpers afbeeldingen (zoals pictogrammen) in “1x” en in het nieuwe “2x” formaat produceren. Maar dan is er nog een probleem: je kunt niet meer zeggen: "Hé, deze knop moet 44 pixels hoog zijn", omdat deze op een ander apparaat ook 88 pixels moet zijn. Voorheen was er geen pixelonafhankelijke meeteenheid. De oplossing was “punten” of “pt”. 1 punt komt overeen met 1 pixel op schermen tot de retinageneratie en 2 pixels op een 2x retinascherm. Met de stippen kun je zeggen: "Hé, deze knop moet 44 stippen groot zijn", en vervolgens kan elk apparaat die grootte aanpassen aan de pixeldichtheidsverhouding... zoals 1x of 2x. Of 3x in het geval van de iPhone 6 Plus.

PT en DP

Dit alles is natuurlijk niet alleen relevant voor Apple-apparaten; tegenwoordig ondersteunt elk besturingssysteem - of het nu desktop- of mobiele versies zijn - schermen met hoge ppi/dpi. Google kwam met dit idee een eigen meeteenheid voor Android, onafhankelijk van pixels. Het wordt geen "punt" genoemd, maar een "DIP" - dichtheidsonafhankelijke pixel, afgekort als "dp". Dit is niet het iOS-equivalent van stippen, maar het idee is vergelijkbaar. Dit zijn universele meeteenheden die kunnen worden omgezet in pixels met behulp van de schaalfactor van het apparaat (2x, 3x, enz.).

U vraagt ​​zich misschien af ​​wat de fysieke grootte van de stip is. In feite geven UI-ontwerpers hier niet zoveel om, omdat we geen enkele controle hebben over de hardware-eigenschappen van de schermen van verschillende apparaten. Ontwerpers hoeven alleen maar te weten welke pixeldichtheden de fabrikant voor hun apparaten heeft aangenomen, en moeten zorgen voor het voorbereiden van ontwerpen met 1x, 2x, 3x en andere noodzakelijke verhoudingen. Maar als je echt nieuwsgierig bent: Apple heeft geen permanente conversie tussen inches en dots. Met andere woorden, er is geen enkele pixeldichtheid die 1 punt vertegenwoordigt; deze hangt af van het specifieke apparaat (zie het gedeelte 'Schaalperceptie' hieronder). Op iOS varieert de punt van 132 dpi tot 163 dpi. Op Android is DIP altijd 160 ppi.

Gecontroleerde chaos

Maak je nu klaar om je in de realiteit te storten. In de begindagen van mobiele apparaten met hoge resolutie waren de pixeldichtheden eenvoudigweg 1x of 2x. Maar nu is alles helemaal gek geworden: er zijn veel pixeldichtheden die het ontwerp moet ondersteunen. Android heeft een mooi voorbeeld: op het moment van schrijven ondersteunen verschillende fabrikanten zes verschillende pixeldichtheden. Dit betekent dat een icoontje dat op alle schermen even groot is, eigenlijk in 6 verschillende varianten gemaakt moet worden. Voor Apple zijn twee of drie verschillende bronnen relevant.

Ontwerp in vectorvorm. Ontwerp in 1x.

Er zijn een aantal praktische lessen die u uit dit alles moet leren. Om te beginnen moet u uw ontwerpen in vector maken. Hierdoor kunnen onze interfaces, pictogrammen en andere afbeeldingen naar elk gewenst formaat worden geschaald.

Tweede les: we moeten alles op 1x schaal tekenen. Met andere woorden, ontwerp met behulp van punten voor alle dimensies en schaal vervolgens naar verschillende grotere pixeldichtheden bij het exporteren... in plaats van te ontwerpen met de eindige pixelresoluties van specifieke apparaten (2x, 3x, enz.) en een hoop problemen te hebben bij het exporteren . Omdat het schalen van 2x afbeeldingen met 150% om een ​​3x versie te genereren wazige contouren veroorzaakt, is dit niet de beste optie. Maar door 1x graphics op 200% en 300% te schalen, kunt u de visuele helderheid behouden.

Lay-outs voor standaard iPhone-formaten moeten 375 x 667 zijn, en niet 750 x 1334, wat precies de resolutie is waarin deze wordt weergegeven. De meeste ontwerptools maken geen onderscheid tussen punten en pixels (Flinto is een uitzondering op deze trend), dus ontwerpers kunnen doen alsof punten pixels zijn en de middelen vervolgens eenvoudigweg exporteren in een formaat van 2x en 3x.

Bluf je erdoor heen!

Dit is iets ingewikkelder, maar toch het vermelden waard: soms liegen apparaten. Ze doen alsof hun conversiefactor van pixel naar punt één is, bijvoorbeeld 3x, maar in werkelijkheid is deze 2,61x, en de bron zelf wordt voor het gemak 3x geschaald. Dat is wat de iPhone Plus nu doet. Het comprimeert een interface gemaakt op 1242x2208 naar een schermresolutie van 1080x1920 (de grafische chip van de telefoon implementeert deze schaalvergroting in realtime).

Omdat de graphics maar een klein beetje zijn verkleind (87%), ziet het resultaat er nog steeds behoorlijk uit: een 1px dikke lijn op een bijna 3x scherm ziet er nog steeds ongelooflijk scherp uit. En er zijn kansen, ook al beschik ik niet over enige voorkennis, dat Apple in de toekomst een echte 3x iPhone Plus zal introduceren, aangezien de noodzakelijke hardwaremogelijkheden wel eens beschikbaar zouden kunnen zijn voor een product dat in zulke grote hoeveelheden wordt geproduceerd. De huidige versie van de iPhone Plus is er gewoon totdat dat mogelijk wordt.

(Bruce Wong schreef over het iPhone 6 Plus-scherm).

Is deze niet-gehele schaalbenadering acceptabel? Alles wordt in de praktijk getest. Is het resultaat van een dergelijke schaalvergroting volkomen onzichtbaar? Veel Android-apparaten nemen ook hun toevlucht tot schaalvergroting om aan de meer standaard pixel-tot-punt-verhouding te voldoen, maar helaas doen sommige dit niet zo goed. Het schalen van een dergelijk plan is ongewenst, omdat alles wat u op één schaal scherp en pixel-perfect wilt hebben, door interpolatie wazig zal worden (een lijn van 1 px wordt bijvoorbeeld 1,15 pixels). Zelfs als je geen pixel-perfecte fanaat bent zoals ik, heeft het geen zin te ontkennen dat ontwerpelementen pixel-perfect moeten zijn om er zo scherp uit te zien als bedoeld.
Naarmate de pixeldichtheid 4x en hoger wordt, wordt de onscherpte die wordt veroorzaakt door niet-gehele schaling helaas veel minder subtiel, dus ik voorspel dat apparaatfabrikanten deze aanpak in de loop van de tijd steeds meer zullen gebruiken. We kunnen alleen maar hopen dat tekortkomingen in de prestaties hen tegenhouden!

Waarneming van schaal door uw ogen

Laten we al die pixeldichtheid even opzij zetten en nadenken over de vraag: moet een knop op verschillende apparaten dezelfde fysieke grootte hebben? Natuurlijk gebruiken we slechts een knop als voorbeeld, maar we kunnen ook een pictogram, tekst en werkbalk overwegen. Moeten deze elementen op alle apparaten dezelfde grootte hebben? Het antwoord hangt af van:

• Van nauwkeurigheid invoer methode(sensor of cursor)
• Van fysieke afmetingen scherm
• Van afstanden naar het scherm

De laatste twee factoren gaan hand in hand; Omdat een tablet een groter scherm heeft dan een telefoon, houden we hem veel verder van ons af. En dan is er nog de laptop, de desktop, de tv... de afstand neemt toe met de schermgrootte.

De knop op je tv-scherm heeft het formaat van je telefoon - want dat moet zo zijn voor die afstand.

Hier is een minder dramatisch en zeer waar voorbeeld: app-pictogrammen op een tablet moeten groter zijn dan die op een telefoon, en dit wordt op twee manieren bereikt: door een lagere pixeldichtheid te gebruiken of de grootte van de knoppen te wijzigen (dat wil zeggen de puntgrootte).

Lagere pixeldichtheid

Grotere schermen die we op afstand gebruiken, hebben doorgaans een lagere pixeldichtheid. Een tv kan een resolutie hebben van 40 pixels per inch! Voor regulier tv-kijken is dit heel acceptabel. Het retinascherm van de iPad heeft een resolutie van ongeveer 264ppi, terwijl het retinascherm van de iPhone een resolutie heeft van 326ppi. Doordat de pixels op de iPad groter zijn (het scherm is minder dicht) wordt de gehele interface iets groter. Dit komt door de extra afstand tussen de ogen van de gebruiker en het iPad-scherm.

Verschillende maten

Maar soms is het gebruik van een lagere pixeldichtheid niet voldoende... individuele ontwerpelementen moeten nog groter zijn. Dit gebeurde met iconen op de iPad. Op de iPhone zijn ze 60x60 pixels, maar het grotere scherm van de iPad geeft meer ruimte, dus 76x76 pictogrammen zijn praktischer.

Het veranderen van de formaten voor verschillende apparaten voegt meer werk toe aan ontwerpers. Dit is een van de vele scenario's waarin Apple-apparaten grotere formaten nodig hebben dan Android-apparaten! Gelukkig is dit geen typisch geval voor app-pictogrammen.

Gezondheidsinspectie?

We hebben zojuist een groot aantal moeilijkheden besproken die we het hoofd zullen moeten bieden. Gelukkig betreft interfaceontwerp alleen het gebruik van dichtheidsonafhankelijke eenheden (zoals pt of dp). Het wordt ingewikkelder met app-pictogrammen, maar er zijn sjablonen om hierbij te helpen. Hier is een lijst met bronnen over dit onderwerp:

Belangrijke bronnen

Google Device Metrics: indrukwekkende lijst met specificaties voor alle soorten apparaten (Android, iOS, Mac, Windows, enz.). Ontdek de schermafmetingen, pixeldichtheid en zelfs de geschatte afstand waarop het scherm zich vanaf de ogen van de gebruiker bevindt. ScreenSiz.es is een soortgelijke bron.

: Deze ontwerpsjablonen (beschikbaar voor alle grote ontwerpeditors) zijn zeer nuttig, zowel in praktische zin als als referentie voor de nieuwste specificaties voor Android, iOS, macOS, tvOS, watchOS, Windows, Windows Phone, enz.

A Designer's Guide to DPI en PPI: een uitgebreide gids van Sebastian Gabriel met nog meer details en praktische technieken voor Android- en iOS-ontwerpers.

In de hightechindustrie wint een nieuwe hobby aan momentum: het plaatsen van zoveel mogelijk pixels per eenheid schermoppervlak. Anders hebben we technologiewedstrijden echt gemist nadat de race om megahertz en megapixels tot het verleden behoorde.

Apple is een nieuwe race begonnen, zoals de afgelopen tien jaar gebruikelijk is geweest. De eerste iPhone 4-smartphone met een high-definition scherm werd in juni 2010 geïntroduceerd door Steve Jobs zelf. Het was naar huidige maatstaven een vrij klein 3,5-inch scherm, maar het kreeg een hardwareresolutie van 960x640 pixels. De breedte van één pixel op zo'n scherm was slechts 78 micron en de pixeldichtheid was 326 pixels per inch (128 pixels per cm). Ter vergelijking: de pixeldichtheid op het scherm van een gewone smartphone is ongeveer 160 ppi, en op computermonitors minder dan honderd.

Het nieuwe scherm kreeg de plechtige naam Retina-display - van het Engelse woord dat 'retina van het oog' betekent, waarvoor een mooie verklaring werd gegeven: sommige onderzoeken hebben aangetoond dat een persoon met het blote oog geen individuele stippen kan onderscheiden met een dichtheid boven de 300 ppi op een afstand van 10-12 inch, dan is er ongeveer 25-30 cm. Mobiele telefoons worden doorgaans op deze afstand van de ogen gehouden, daarom is voor deze waarde gekozen, iets meer dan 300 ppi.

Natuurlijk waren er meteen mensen die de resultaten van deze anonieme onderzoeken in twijfel wilden trekken. Zo zei de beroemde Amerikaanse popularisator van de wetenschap en astronoom Philip Plate dat als je een scherp zicht hebt, je op zo'n scherm gemakkelijk individuele pixels kunt onderscheiden, zelfs vanaf 30 cm, maar voor een gewoon persoon zullen deze punten niet merkbaar zijn.

Ondertussen merkte beeldkwaliteitsexpert en president van DisplayMate Technologies Raymond Soneira op dat de werkelijke resolutie van het Retina-display aanzienlijk lager is dan de resolutie van het netvlies. Feit is dat de resolutie grotendeels afhangt van de hoek waaronder we naar het object kijken. Voor een persoon met perfect zicht is de resolutie van het oog ongeveer 0,6 boogminuten, dat wil zeggen 0,01 graden. Dit betekent dat twee afzonderlijke objecten die meer dan 1,75 km uit elkaar liggen, als één punt worden waargenomen. Op basis hiervan concludeerde Soneira dat als we naar een smartphone kijken op een afstand van 30 cm, de resolutie van ons oog 477 ppi bereikt, en als we inzoomen tot 20 cm, dan allemaal 716 ppi. Om 318 ppi te krijgen, moet je de telefoon op een afstand van 45 cm houden.

Soneira hield met één ding geen rekening: in werkelijkheid zijn er niet zo veel mensen met een perfect zicht, en de resolutie van het netvlies van een gemiddeld persoon met normaal zicht is ongeveer 1 boogminuut. Nadat we de juiste correctie hebben aangebracht, krijgen we de felbegeerde 300 ppi - een waarde die kan worden afgeleid door eenvoudige berekeningen, en helemaal niet door een of ander mythisch onderzoek waar Jobs over sprak.

Omdat de resolutie van de ogen afhangt van de afstand waarop we het object waarnemen, zijn verschillende puntdichtheden vereist om het effect van een “pixelvrij” beeld op de schermen van verschillende apparaten te bereiken. Daarom heeft het 9,7-inch Retina-display van de iPad-tablet een lagere dichtheid van 264 ppi (105 pixels per cm), en de 15- en 13-inch schermen van MacBook Pro-laptops hebben 220 ppi (87 pixels per cm) en 227 ppi (89 pixels per cm).

Jobs had gelijk over het belangrijkste: om te stoppen met het onderscheiden van de pixels op het scherm van de gadget die zich het dichtst bij de ogen bevindt - een smartphone, is een dichtheid van iets meer dan 300 ppi voldoende. Maar de trekker was al overgehaald en veel bedrijven raakten verwikkeld in een race die theoretisch niet eens zinvol was om de pixeldichtheid van het scherm te vergroten. Het belangrijkste is om Apple in te halen, maar of dit zin heeft of niet, is van secundair belang.

Hierdoor hebben we al heel wat curieuze producten binnengekregen, als je ernaar kijkt weet je niet of je moet huilen of lachen. Het Japanse Sharp was een van de eersten die een smartphone met een vijf-inch Full HD-scherm voor buitenlandse markten uitbracht: met een resolutie van 1920x1080 is de pixeldichtheid van het SH930W-scherm 440 ppi. De HTC J Butterfly heeft een scherm dat qua kenmerken vergelijkbaar is (of misschien gewoon precies hetzelfde). De cijfers zijn indrukwekkend, maar ten eerste is het onduidelijk waarom een ​​zakapparaat Full HD-resolutie nodig heeft op een vijf-inch scherm, en ten tweede kan het je ogen beschadigen door naar de kleinste details te kijken, zelfs op minder hightech apparaten.

De resolutie van het tien inch scherm van de nieuwe Google Nexus 10 tablet is nog hoger: 2560x1600 pixels. Dat wil zeggen, hetzelfde als een desktopmonitor met een diagonaal van 27-30 inch. De pixeldichtheid bedraagt ​​300 pixels per inch. Betekent dit dat Google voorstelt om vanaf een afstand van 25-30 inch naar het display van deze tablet te kijken? Heb je ooit geprobeerd om op anderhalve meter afstand naar een 50 inch tv te kijken? Het gevoel is ongeveer hetzelfde.

Het hoogtepunt van de waanzin is een prototype van een 9,6-inch scherm, ontwikkeld door het Japanse bedrijf Ortus Technology. De resolutie bedraagt ​​3840 x 2160 pixels, wat exact overeenkomt met de veelbelovende Ultra HD, oftewel 4K, televisiestandaard, die voorziet in de weergave van vier keer meer pixels dan de gebruikelijke Full HD. De pixeldichtheid van dit scherm is 485 pixels.

Redundantie is al een doel op zichzelf geworden: niemand heeft schermen nodig waarvan de pixels alleen onder een microscoop te zien zijn: ze zijn al niet zichtbaar - wanneer ze traditioneel worden gebruikt door gezonde, verstandige mensen. Ondertussen veroorzaken schermen met een verhoogde pixeldichtheid zelf veel problemen die verband houden met zowel de hardware als de software van de gadgets waarin ze zijn geïnstalleerd.

Ten eerste verbruiken schermen met hogere resoluties en hogere pixeldichtheden veel meer stroom dan schermen van vergelijkbare grootte met lagere resoluties. En dit is alleen bij weergave van een statisch beeld! Ondersteuning voor ultrahoge resoluties verscherpt de eisen voor het grafische subsysteem aanzienlijk, en in het algemeen voor de computerbronnen van het apparaat. Dit betekent niet alleen een veel duurder platform, maar ook een sterke stijging van het stroomverbruik. Moderne smartphones kunnen, zelfs met gewone schermen, nauwelijks een werkdag overleven zonder op te laden, maar wat gebeurt er als hun energieverbruik niet eens anderhalf keer toeneemt, maar met minstens tientallen procenten?

Het softwareprobleem houdt rechtstreeks verband met de belangrijkste vereiste voor een elektronisch apparaat: gebruiksgemak. En als, zoals de praktijk laat zien, gadgets met Android gemakkelijk overweg kunnen met het schalen van de gebruikersinterface en applicaties naar hogere resoluties, dan hebben Windows-apparaten hier vreemd genoeg grote problemen mee.

De Samsung Slate 7-tablet, uitgerust met een 11,6-inch scherm met een resolutie van 1366x768 pixels en een vrij bescheiden pixeldichtheid van 135 ppi, kan de gebruikersinterface met Windows 7 bijvoorbeeld niet optimaal configureren: de elementen zien er te klein uit, of de randen van de vensters zijn buiten het display verborgen. En dit is de standaardinterface van het besturingssysteem! Wat kunnen we zeggen over applicaties van derden, waarvan de ontwikkelaars niet bepaald nadenken over schalen voor verschillende resoluties: veel ervan zijn ontworpen voor 96 ppi, en geen pixel meer! En zelfs in Windows 8, waar, zoals Microsoft opschepte, het probleem met de interface praktisch is opgelost, is het nog steeds net zo relevant als het probleem met applicaties van derden, waarvan de vensters onder een vergrootglas moeten worden onderzocht.

Op de een of andere manier is de start gegeven en zijn we getuige van een nieuwe race om mooie cijfers, waarvan de betekenis niets anders is dan het vliegen met Siberische Kranen. We kunnen alleen maar hopen dat de bedrijven die betrokken zijn bij deze dubieuze gebeurtenis met een aantal werkelijk nuttige ontwikkelingen en technologische doorbraken zullen komen. Anders lopen we opnieuw het risico nutteloze 20-megapixel point-and-shoot-camera's met troebele plastic optiek te krijgen.

Ontwerper Peter Nowell schreef op zijn blog over pixeldichtheid in het ontwerp van mobiele apps - hij legde uit wat het is en sprak over de problemen waarmee ontwerpers worden geconfronteerd bij het ontwerpen van interfaces voor verschillende apparaten.

De redactie van de sectie “Interfaces” publiceert een vertaling van het materiaal gemaakt door het Sketchapp-team.

De video behandelt de meeste onderwerpen in het artikel, maar als je geïnteresseerd bent in meer details, lees dan verder

Pixeldichtheid is het aantal pixels dat binnen een specifieke fysieke grootte past (meestal een inch). De eerste Mac had 72 pixels per inch - een getal dat groot lijkt, maar in feite waren dit enorme pixels die niet elke grafische kaart aankon.

Pictogrammen op een Macintosh-computer uit 1984. Ontwerper Susan Kare

Sindsdien is de schermtechnologie aanzienlijk vooruitgegaan: nu hebben zelfs de eenvoudigste beeldschermen een resolutie tussen 115 en 160 pixels per inch (PPI-pixel per inch). Maar een nieuw hoofdstuk in dit verhaal begon in 2010, toen Apple de iPhone introduceerde met een Retina-display: een superscherp scherm dat het aantal pixels per inch verdubbelde. Het resultaat zijn graphics die scherper zijn dan ooit.

Het verschil is vooral merkbaar in het e-mailapplicatiepictogram en in de tekst

Om dezelfde fysieke afmetingen van UI-elementen te behouden, moest het aantal pixels per inch worden verhoogd. De knop, die voorheen 44px in beslag nam, neemt nu 88px in beslag.

Voor compatibiliteit tussen apparaten moeten ontwerpers afbeeldingen maken voor zowel gewone beeldschermen als Retina-beeldschermen. Maar hier deed zich een ander probleem voor: nu kan de ontwerper niet zeggen dat een bepaald element bijvoorbeeld 44 pixels hoog moet zijn, omdat hetzelfde element op een ander apparaat twee keer zo hoog moet zijn.

De oplossing was punten, of pt. Eén punt komt overeen met één pixel op pre-Retina-schermen en twee pixels op Retina-schermen. Als een ontwerper nu te horen krijgt dat de hoogte van een element 44 pixels is, kan hij deze grootte aanpassen aan elke pixeldichtheidsverhouding - 1x, 2x of 3x in het geval van de iPhone 6 Plus.

PT en DP

Dit is natuurlijk allemaal niet alleen relevant voor Apple-apparaten. Elk besturingssysteem – desktop of mobiel – ondersteunt schermen met hoge ppi/dpi. Google kwam met zijn eigen pixel-onafhankelijke meeteenheid voor Android, genaamd DIP - density independent pixel, afgekort als "dp". Dit is niet het equivalent van iOS, maar het idee is vergelijkbaar. Dit zijn universele meeteenheden die kunnen worden omgezet in pixels met behulp van de schaalfactor van het apparaat (2x, 3x, enzovoort).

U vraagt ​​zich misschien af ​​wat de fysieke grootte van het item is. Interface-ontwerpers hoeven hier eigenlijk niet over na te denken, omdat ze geen controle hebben over de hardwarefuncties van de schermen van verschillende apparaten. Ontwerpers moeten weten welke pixeldichtheden de fabrikant voor hun apparaten heeft aangenomen, en zorg dragen voor het voorbereiden van interfaces op 1x, 2x, 3x, enzovoort.

Apple-apparaten hebben geen enkele pixeldichtheid die één enkel punt vertegenwoordigt; deze is afhankelijk van het specifieke apparaat (zie "Schaalperceptie" hieronder). In iOS varieert het punt van 132 dpi tot 163 dpi. Op Android is DIP altijd 160 ppi.

Gecontroleerde chaos

In de begindagen van mobiele apparaten met hoge resolutie waren de pixeldichtheden eenvoudigweg 1x of 2x. Maar nu is alles anders: er zijn veel pixeldichtheden die de interface moet ondersteunen. Android heeft een mooi voorbeeld: op het moment van schrijven ondersteunen verschillende fabrikanten zes verschillende pixeldichtheden. Dit betekent dat een icoontje dat op alle schermen even groot is, eigenlijk in zes verschillende varianten moet voorkomen. Voor Apple zijn twee of drie verschillende bronnen relevant.

Vectorontwerp

Er zijn een aantal praktische lessen die u uit dit alles moet leren. Om te beginnen moet u uw ontwerpen in vector maken. Hierdoor kunnen onze interfaces, pictogrammen en andere afbeeldingen naar elk gewenst formaat worden geschaald.

Tweede les: we moeten alles op 1x schaal tekenen. Met andere woorden: maak een ontwerp met punten voor alle dimensies en schaal vervolgens bij het exporteren naar verschillende grotere pixeldichtheden. Het schalen van 2x graphics met 150% om een ​​3x versie te creëren resulteert in onscherpe randen, dus dit is niet de beste optie. Maar door 1x graphics op 200% en 300% te schalen, kunt u de duidelijkheid behouden.

De resolutie van iPhone-app-indelingen mag niet 750x1334 zijn, maar 375x667 - dit is precies de resolutie waarin de applicatie wordt weergegeven. De meeste ontwerptools maken geen onderscheid tussen punten en pixels, dus u kunt ervan uitgaan dat punten pixels zijn en de bron vervolgens eenvoudigweg exporteren naar een formaat van 2x of 3x.

Doe alsof tot het waar is

Het is de moeite waard te vermelden dat apparaten soms liegen. Ze doen alsof hun conversiefactor van pixel naar punt bijvoorbeeld 3x is, maar in werkelijkheid is deze 2,61x, en de bron zelf is voor het gemak 3x geschaald. Dit is bijvoorbeeld wat de iPhone Plus doet. Het comprimeert een interface gemaakt op 1242x2208 naar een schermresolutie van 1080x1920.

Ontwerp voor iPhone Plus alsof het 3x is. De telefoon zelf schaalt dit naar 87%

Omdat de graphics maar een klein beetje zijn verkleind (87%), ziet het resultaat er nog steeds behoorlijk uit: een 1px dikke lijn op een bijna 3x scherm ziet er nog steeds ongelooflijk scherp uit. En de kans bestaat dat Apple in de toekomst een echte 3x iPhone Plus zal introduceren, aangezien de benodigde hardwaremogelijkheden wel eens beschikbaar zouden kunnen zijn voor een product dat in zulke grote hoeveelheden wordt geproduceerd.

Is deze niet-gehele schaalbenadering acceptabel? Alles wordt in de praktijk getest. Is het resultaat van een dergelijke schaalvergroting volkomen onzichtbaar? Veel Android-apparaten nemen ook hun toevlucht tot schaalvergroting om aan de meer standaard pixel-tot-punt-verhouding te voldoen, maar helaas doen sommige dit niet zo goed.

Dit soort schaling is ongewenst omdat alles wat u scherp wilt hebben, door interpolatie wazig wordt. Naarmate de pixeldichtheid 4x of hoger wordt, wordt de onscherpte veroorzaakt door niet-gehele schaling helaas veel minder subtiel, dus ik voorspel dat apparaatfabrikanten deze aanpak in de loop van de tijd steeds meer zullen gebruiken. We kunnen alleen maar hopen dat tekortkomingen in de prestaties hen tegenhouden.

Perceptie van schaal

• nauwkeurigheid van de invoermethode (sensor of cursor);
• fysieke schermafmetingen;
• afstand tot het scherm.

De knop op het tv-scherm moet het formaat van een telefoon hebben, omdat deze anders niet zichtbaar is als je op de bank zit.

Hier is een minder dramatisch en zeer waar voorbeeld: applicatiepictogrammen op een tablet moeten groter zijn dan dezelfde pictogrammen op een telefoon. Dit wordt op twee manieren geïmplementeerd: door een lagere pixeldichtheid of verschillende pictogramgroottes te gebruiken.

Lage pixeldichtheid

Grote schermen waar we van een afstand naar kijken, hebben doorgaans een lagere pixeldichtheid. Een tv kan 40 pixels per inch hebben - en in de regel is dit voldoende. De pixeldichtheid van Retina-displays op de iPad is ongeveer 264 ppi; op iPhone - 326 ppi. Omdat de pixels op de iPad groter zijn (en minder compact), wordt de hele interface iets groter. Dit komt door de extra afstand tussen de ogen van de gebruiker en het iPad-scherm.