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

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

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

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

Theoretische pagina en berekeningen

Het beschouwde concept staat voor pixels per inch, dat wil zeggen het aantal pixels per inch. Het wordt ook uitgesproken als pee-pee-ah.

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 andere apparatuur.

Dit concept wordt ook wel een meeteenheid voor resolutie genoemd. Deze waarde wordt berekend met behulp van twee eenvoudige formules:
waar:

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

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

Rijst. 1. Breedte, hoogte en grootte van de diagonaal op de monitor

Om te illustreren hoe al deze formules worden gebruikt, nemen we als voorbeeld een 20-inch monitor met een resolutie van 1280x720 (HD).

Dus Wp is gelijk aan 1280, Hp - 720 en Di - 20. Dankzij de aanwezigheid van deze gegevens kunnen we pi-pi-ah berekenen. Eerst gebruiken we formule (2).

En nu gaan we deze gegevens toepassen voor formule (2).

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

Om te begrijpen hoeveel het is in centimeters, een meer bekende maat 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. in centimeters.

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

Is dit goed of slecht?

Laten we het samen uitzoeken.

Is deze hoeveelheid belangrijk?

Pee-pee-ah heeft op basis van het voorgaande invloed op de helderheid van het beeld dat de gebruiker op zijn scherm krijgt.

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

In feite, hoe groter deze waarde, hoe minder "vierkanten" een persoon zal zien. Dat wil zeggen, elke pixel zal klein zijn, niet groot, en dit zal het mogelijk maken om er helemaal geen aandacht aan te besteden. De waarde van het kenmerk is duidelijk te zien in figuur 2.

Rijst. 2. Het verschil wanneer de indicatoren steeds meer worden

Natuurlijk wil niemand een foto zoals links op zijn smartphone of tablet hebben. Daarom is het bij het kiezen van een dergelijke techniek erg belangrijk om aandacht te besteden aan deze eigenschap. Dit geldt met name wanneer u op internet koopt en niet de mogelijkheid heeft om de afbeelding 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 is meestal te vinden in het gedeelte "Weergave". Een voorbeeld is te zien in figuur 3.

Rijst. 3. Indicator in de kenmerken van een smartphone

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

Voor-en nadelen

Aantal foto's. per inch heeft een positief effect op de helderheid van het beeld en daarmee op de kwaliteit.

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

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

Maar dit concept heeft zijn nadelen. We hebben het met name over de autonomie van het apparaat. Alles is vrij eenvoudig - als het beeld duidelijk 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 pie-pee-ah, hoe korter de batterijduur.

Voor een pc is dit natuurlijk geen probleem, aangezien de monitor daar nog steeds constant in het stopcontact zit, maar voor sommige telefoons kan dit een groot probleem zijn. Let daarom bij het kiezen van een apparaat niet alleen op het aantal pixels. per inch, en ook de capaciteit van de batterij!

Zo gingen we soepel over naar het onderwerp van keuze.

Over schermselectie

Er zijn verschillende regels om u te helpen bij het kiezen van de juiste weergave op basis van pixels, ze klinken als volgt:

1Let op het type display. 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 een 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 kenmerken geven aan dat Xiaomi 400 ppi heeft (om de een of andere reden schrijven sommigen 400.53, maar, zoals we hierboven al zeiden, er kan geen niet-geheel aantal pixels zijn). Samsung heeft 267 PPI en de resolutie is respectievelijk 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 door het gebruik van gepatenteerde SuperAMOLED+ technologie. U kunt het zelf zien als u aandacht besteedt aan figuur 5.

2Probeer de mogelijkheid te vinden om persoonlijk alle monsters die u hebt gekozen te bekijken. Je kunt eerst hun opties op internet bekijken en dan naar een elektronicawinkel gaan en zien hoe ze foto's daadwerkelijk weergeven. Een persoonlijke mening is in dit geval gewoon onvervangbaar.

3 Let op de batterij. Als we het hebben over smartphones, dan moet de batterijcapaciteit ongeveer 3000 mAh zijn om een ​​langdurig gebruik van het apparaat met een duidelijk beeld (hoge ppi en / of goede technologie) te garanderen.

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

4Onthoud: hoe kleiner de diagonaal en hoe hoger de pixeldichtheid (per inch), hoe scherper het beeld. Bedrieg jezelf niet - je zult geen heel duidelijk beeld kunnen krijgen met een enorm scherm en een kleine pi-pi-ah-waarde. Het is belangrijk om hier de gulden middenweg in acht te nemen.

5Bedekken is ook belangrijk. Matte schermen geven dus een minder helder en verzadigd beeld, maar zijn wel zachter voor je ogen.

Maar glanzende schermen zullen het zicht negatief beïnvloeden, maar het beeld erop zal veel mooier zijn. In dit geval kan de ppi-waarde voor hen hetzelfde zijn.

Dit geldt vooral voor het kiezen van monitoren voor pc's en laptops. Werk je fulltime of zelfs langer op een computer, dan kun je beter voor de matte optie kiezen.

Dit alles stelt u in staat om het meest geschikte scherm voor uzelf te kiezen.

resultaten

ppi of pi-pi-ai is de pixeldichtheid of maat voor pixels per inch van een afbeelding. Om de indicator om te zetten in centimeters, moet u deze delen door 2,54. Er kan geen niet-hele hoeveelheid zijn, alleen het geheel.

Hoe hoger deze wordt weergegeven, hoe duidelijker en aangenamer het beeld zal zijn om naar te kijken. Bij het kiezen van smartphones, tablets, monitoren voor pc's, 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 techniek en schermdekking. Let daarnaast goed op de accucapaciteit en houd de middenweg tussen het aantal pixels. en schermgrootte.

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

Wat is ppi

In eenvoudige bewoordingen - elke rasterafbeelding bestaat uit pixels - gekleurde rechthoekige stippen. Laten we dat verduidelijken bitmap is een afbeelding die is gestructureerd als een raster van pixels op een computermonitor. Populaire bitmapformaten - psd, tiff, png, bmp of jpg- waarvan bewerking mogelijk is in de omgeving van gespecialiseerde software, zoals Adobe PhotoShop... Rasterformaten zijn natuurlijk veel meer dan de genoemde, maar om te begrijpen waar we het over hebben, zullen de gegeven formaten voldoende zijn.

Terugkerend naar de pixels waaruit de rasterafbeelding bestaat, kunnen we zeggen dat dit een soort mozaïekdoek van gekleurde stippen is. Meer precies vierkanten. Elk vierkant kan maar één kleur hebben. Maar de afbeelding kan pixels van verschillende kleuren en tinten bevatten. Hierdoor wordt de stroom van de ene kleur in de andere bereikt.

Laten we bijvoorbeeld een strook van 1000 van dergelijke vierkanten (pixels) nemen. Aan de ene kant is er een zwart vierkant en aan de andere kant een wit vierkant. Tussen hen zullen er vierkanten van verschillende tinten zijn. Elk vierkant met afstand tot zwavel en naderend wit zal iets lichter zijn dan het vorige. Bij hoge vergroting zullen we natuurlijk zien dat alle vierkanten een andere tint hebben. Maar met een afstand, zal er een illusie zijn van een vloeiende stroom van kleur of een verloop.

Omdat de afbeelding niet alleen lengte, maar ook breedte heeft en het vlak vult, geeft de ppi-waarde aan hoeveel vierkanten (pixels) zich aan de zijkant van de conventionele maateenheid bevinden. Als maateenheid voor pixels in rasterafbeeldingen wordt standaard één inch genomen. Daarom vertelt het 100 ppi-teken ons dat er 100 pixels per inch zijn. In een vierkante inch zijn pixels bij deze resolutie van een grafische afbeelding 10.000 (100x100). Nogmaals, de kleur van een vierkante inch kan alles zijn wat je maar wilt. Er is maar één kleur van één pixel.

Wat is lpi

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

De printers losten het probleem van het aanbrengen van de hoeveelheid inkt op specifieke gebieden op met hun inherente elegantie. Ze passen eenvoudig het gebied van het geverfde oppervlak op een specifieke locatie op het papier aan. Met deze benadering kunt u, zelfs met dezelfde dikte van de aangebrachte inktlaag, de helderheid aanpassen door de afgedrukte punten te vergroten of te verkleinen. Dit proces wordt rastering 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 methode van rasteren veel eerder verscheen dan de uitvinding van computers, heeft de grootte van de rastermeting er niets mee te maken. Aanvankelijk werden contactrasters gebruikt voor screening. Dit is een transparante plaat waarop fijne arcering is aangebracht.

De lpi geeft het aantal slagen op de rasterplaat weer in inches. Deze waarde komt overeen met het aantal dots per inch in de afgedrukte gerasterde afbeeldingen. Deze statistiek is alleen van toepassing op gerasterde afbeeldingen en wordt nergens anders gebruikt. De opgegeven parameter is van toepassing op rasterprinters. Het kan niet worden toegepast op een afbeelding op een computer, omdat het, hoewel het een bitmap wordt genoemd, in feite een grijsschaal is.

Als u de lpi-waarde in de printerinstellingen ziet, moet u begrijpen dat deze niets anders heeft dan het aantal rasterpunten in een inch. Voor een vollediger begrip van de verschillen tussen ppi en lpi, 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 de afbeelding op papier is de stip.

Deze cijfers zouden in principe gelijk moeten zijn bij het printen van een afbeelding. Ontwerpers maken echter vaak niet zozeer een fout ... Ze dienen gewoon een lay-out in om te printen, die vele malen groter is dan de technische mogelijkheden van printapparatuur. De meest voorkomende beeldresolutie voor ontwerpers is 300 ppi. Zij brengen het project met deze toestemming naar de krant. Maar bij het drukken van kranten wordt een rastering van maximaal 100 lpi gebruikt. Als resultaat krijgen we dat het originele bestand 9 keer kleiner zou kunnen zijn.

Wat is dpi

Laten we nu de dpi-waarde berekenen. Deze waarde is alleen van toepassing op een rasterafdrukapparaat. In feite zijn de punten waaruit de lpi bestaat op hun beurt samengesteld uit kleinere punten. De rij van deze kleine puntjes is gelijk aan één laserpassage op een fotodrum of film. Het blijkt dat voor de afbeelding van één lpi meerdere dpi wordt gebruikt.

Het is duidelijk dat hoe hoger de verhouding van lpi tot dpi, hoe hoger de kwaliteit van de afdruk die we bij de uitvoer krijgen. Ook hier wordt het mozaïekeffect geactiveerd. Hoe kleiner de stukken, hoe nauwkeuriger en gedetailleerder het wordt. Evenzo heeft dpi invloed op lpi, hoe meer kleine stippen worden gebruikt om een ​​grote stip op het raster te maken, hoe nauwkeuriger die stip zal zijn. Afbeeldingen met een hoge resolutie kunnen worden afgedrukt met verhoudingen van 150 lpi tot 2540 dpi en hoger. Bij het drukken van kranten is een verhouding van 100 lpi tot 1200 dpi voldoende.

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

Pixeldichtheid verwijst naar het aantal pixels dat in een specifieke fysieke grootte past (meestal een inch). Op de eerste Mac was het 72 pixels per inch - het aantal lijkt groot, maar in feite waren dit enorme pixels waar niet elke afbeelding in zou passen.

De schermtechnologie is sindsdien enorm vooruitgegaan en nu hebben zelfs de meest basale computerschermen een resolutie tussen de 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. Als gevolg van deze release zijn de graphics duidelijker dan we ooit hebben gezien.

Om dezelfde fysieke grootte van de gebruikersinterface te behouden, zijn de pixelafmetingen verdubbeld. De knop, die voorheen 44px was, is nu 88px. Voor compatibiliteit tussen verschillende apparaten moeten ontwerpers afbeeldingen (zoals pictogrammen) vrijgeven in "1x" en in het nieuwe formaat "2x". Maar toen deed zich een ander probleem voor: je kunt niet meer zeggen: "Hallo, deze knop moet 44 pixels hoog zijn", want op een ander apparaat moet het ook 88 pixels zijn. Voorheen was er geen pixelonafhankelijke meeteenheid. De oplossing was "punten" of "pt". 1 punt komt overeen met 1 pixel op pre-retina-schermen en 2 pixels op retina-schermen bij 2x. Met stippen kun je zeggen "hallo, deze knop moet 44 stippen hoog zijn", en dan kan elk apparaat deze grootte aanpassen aan de pixeldichtheidsfactor ... zoals 1x of 2x. Of 3x in het geval van de iPhone 6 Plus.

PT en DP

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

Mogelijk bent u geïnteresseerd in de fysieke grootte van het punt. In feite is dit niet bijzonder belangrijk voor UI-ontwerpers, omdat we geen controle hebben over de hardwarefuncties van de schermen van verschillende apparaten. Ontwerpers hoeven alleen maar te weten welke pixeldichtheid de fabrikant heeft aangenomen voor hun apparaten en zorgen voor het voorbereiden van ontwerpen in 1x, 2x, 3x en andere noodzakelijke factoren. Maar als je echt nieuwsgierig bent, weet dan dat er bij Apple geen constante conversie is tussen inches en dots. Met andere woorden, er is geen enkele pixeldichtheid die 1 punt vertegenwoordigt - het hangt af van het specifieke apparaat (zie de sectie "Schaalperceptie" hieronder). Op iOS varieert de punt van 132 dpi tot 163 dpi. Op Android is de DIP altijd 160 ppi.

Gecontroleerde chaos

Maak je nu klaar om je in de realiteit te storten. In de begindagen van high-definition mobiele apparaten was de pixeldichtheid slechts 1x of 2x. Maar nu is iedereen volledig ontspoord - er zijn tonnen pixeldichtheden die het ontwerp moet ondersteunen. Android heeft een goed voorbeeld: op het moment van schrijven ondersteunen verschillende fabrikanten zes verschillende pixeldichtheden. Dit betekent dat een icoon dat op alle schermen even groot is, eigenlijk in 6 verschillende variaties gemaakt moet worden. Voor Apple zijn twee of drie verschillende bronnen relevant.

Vectorontwerp. Ontwerp in 1x.

Er zijn een paar praktische lessen die je uit dit alles moet leren. Eerst moet je ontwerpen in vector maken. Hierdoor kunnen onze interfaces, pictogrammen en andere afbeeldingen worden geschaald naar elke gewenste grootte.

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

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

Doe net alsof totdat het waar is!

Het is hier iets ingewikkelder, maar het is het vermelden waard: soms liegen apparaten. Ze doen alsof hun conversiefactor van pixel naar punt één is, bijvoorbeeld 3x, maar in feite is het 2,61x, en de bron zelf is voor het gemak 3x geschaald. Dit is wat de iPhone Plus nu doet. Het comprimeert een interface gemaakt in 1242 × 2208 tot een schermresolutie van 1080 × 1920 (de grafische chip van de telefoon implementeert deze realtime schaling).

Omdat de graphics maar een klein beetje zijn verkleind (87%), ziet het resultaat er nog steeds goed uit - een 1px-lijn op een bijna 3x-scherm ziet er nog steeds ongelooflijk scherp uit. En de kans is groot, hoewel ik geen inside-informatie heb, dat Apple in de toekomst een echte 3x iPhone Plus zal introduceren, aangezien de juiste hardwaremogelijkheden heel goed beschikbaar kunnen zijn voor een product in zulke enorme hoeveelheden. De huidige versie van de iPhone Plus bestaat gewoon totdat het 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 zo'n schaalvergroting voldoende onzichtbaar? Veel Android-apparaten nemen ook hun toevlucht tot schalen om te passen in een meer standaard pixel-tot-punt-verhouding, maar helaas doen sommige het niet erg goed. Het schalen van zo'n plan is onwenselijk, omdat alles wat je scherp en pixel-perfect op dezelfde schaal wilt hebben, wazig wordt door interpolatie (een 1px-lijn wordt bijvoorbeeld 1,15 pixels). Zelfs als je niet zo fan bent van pixelperfect zoals ik, heeft het geen zin om te ontkennen dat ontwerpelementen hele pixel moeten zijn om er zo scherp uit te zien als bedoeld.
Helaas, naarmate de pixeldichtheid tot 4x en hoger gaat, wordt de onscherpte veroorzaakt door niet-gehele schaling veel minder waarneembaar, dus ik voorspel dat apparaatfabrikanten deze benadering in de loop van de tijd steeds meer zullen gebruiken. We kunnen alleen maar hopen dat de prestatiefouten ze zullen tegenhouden!

Schaal waarnemen door je ogen

Laten we al die pixeldichtheden even opzij zetten en nadenken over de vraag: moet een knop op alle apparaten dezelfde fysieke grootte hebben? Natuurlijk gebruiken we de knop alleen als voorbeeld, maar we kunnen ook het pictogram, de tekst en de werkbalk in overweging nemen. Moeten deze elementen op alle apparaten even groot zijn? Het antwoord hangt af:

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

De laatste twee factoren gaan hand in hand; omdat de tablet een groot scherm heeft ten opzichte van de telefoon, houden we hem veel verder van ons af. En dan is er nog de laptop, desktopcomputer, televisie... de afstand neemt toe met de grootte van het scherm.

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

Hier is een minder dramatisch en zeer waarheidsgetrouw voorbeeld: applicatiepictogrammen op een tablet moeten groter zijn dan die op een telefoon, en dit kan op twee manieren: een lagere pixeldichtheid gebruiken of de grootte van de knoppen wijzigen (d.w.z. puntgrootte).

Lagere pixeldichtheid

Grotere schermen die we op afstand gebruiken, hebben doorgaans een lagere pixeldichtheid. De tv kan een resolutie van 40 ppi hebben! Voor gewoon tv-kijken is dit heel acceptabel. Het retina-scherm op de iPad is ongeveer 264 ppi en het retina-scherm op de iPhone is 326 ppi. Omdat de pixels op de iPad groter zijn (het scherm is minder dicht), wordt de hele interface iets groter. Dit komt door de extra afstand tussen de ogen van de gebruiker en het scherm van de iPad.

Verschillende maten

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

Het formaat wijzigen voor verschillende apparaten voegt werk toe aan de 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 toepassingspictogrammen.

Sanitaire inspectie?

We hebben zojuist een groot aantal complexiteiten besproken waarmee we het hoofd moeten bieden. Gelukkig gaat interface-ontwerp alleen over het gebruik van dichtheidsonafhankelijke eenheden (zoals pt of dp). Het wordt ingewikkeld met app-pictogrammen, maar er zijn sjablonen die u hierbij kunnen helpen. Hier is een lijst met bronnen over het onderwerp:

Belangrijke bronnen

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

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

Een gids voor ontwerpers voor DPI en PPI: een uitgebreide gids van Sebastian Gabriel die nog meer details en best practices voor Android- en iOS-ontwerpers behandelt.

In de hightechindustrie wint een nieuw plezier aan kracht - het plaatsen van zoveel mogelijk pixels per eenheid van schermoppervlak. En dan hebben we de technologische concurrentie al gemist, na de race om megahertz en megapixels is het verleden tijd.

Apple heeft een nieuwe race ontketend, zoals de afgelopen tien jaar gebruikelijk was. De eerste iPhone 4-smartphone met een high-definition scherm werd in juni 2010 door Steve Jobs zelf gepresenteerd. Het was een vrij klein 3,5-inch scherm volgens de huidige normen, met 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 in het scherm van een gewone smartphone is ongeveer 160 ppi, en op computerschermen zelfs minder dan honderd.

Het nieuwe scherm kreeg de plechtige naam Retina-display - van het Engelse woord voor "retina", dat een mooie uitleg kreeg: sommige onderzoeken hebben aangetoond dat een persoon individuele punten niet met het blote oog kan onderscheiden bij een dichtheid hoger dan 300 ppi op een afstand van 10-12 inch, dan is er ongeveer 25-30 cm.Mobiele telefoons worden meestal op deze afstand van de ogen gehouden, dus deze waarde is gekozen, iets meer dan 300 ppi.

Natuurlijk waren er meteen mensen die de resultaten van deze anonieme onderzoeken aanvechten. De beroemde Amerikaanse popularisator van de wetenschap en astronoom Philip Plate zei bijvoorbeeld dat als je een scherp gezichtsvermogen hebt, je gemakkelijk individuele pixels op zo'n scherm kunt onderscheiden vanaf 30 cm, maar tegelijkertijd zullen deze punten niet opvallen voor een gewoon persoon .

Ondertussen merkte Raymond Soneira, expert op het gebied van beeldkwaliteit en president van DisplayMate Technologies, op dat de echte resolutie van het Retina-display aanzienlijk lager is dan de resolutie van het netvlies. Feit is dat de resolutie grotendeels afhangt van de hoek van waaruit 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 zich op meer dan 5730 voet of 1,75 km afstand bevinden, 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 het dichter bij 20 cm brengen, dan alle 716 ppi. Om 318 ppi te krijgen, moet je de telefoon op een afstand van 45 cm dragen.

Soneira hield geen rekening met één ding: in werkelijkheid zijn er niet zo veel mensen met perfect zicht, en de resolutie van het netvlies van een gemiddeld persoon met normaal zicht is ongeveer 1 boogminuut. Als we de juiste wijziging 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 het over had.

Omdat de resolutie van de ogen afhangt van de afstand waarop we het object observeren, is een verschillende dichtheid van stippen vereist om het effect van een "pixelloos" beeld op de schermen van verschillende apparaten te bereiken. Daarom heeft het 9,7-inch Retina Display van de iPad een lagere dichtheid van 264 ppi (105 pixels per cm), terwijl 15- en 13-inch MacBook Pro-schermen 220 ppi (87 pixels per cm) en 227 ppi (89 pixels) hebben. per cm). ).

Jobs had gelijk met het belangrijkste punt: om te stoppen met het onderscheiden van pixels op het scherm van de gadget die zich het dichtst bij de ogen bevindt - een smartphone, is een dichtheid die iets hoger is dan 300 ppi voldoende. Maar de trekker was al overgehaald en veel bedrijven raakten betrokken in een race zonder zelfs maar theoretisch inzicht om de pixeldichtheid van het scherm te vergroten. Het belangrijkste is om Apple in te halen, en of het goed is of niet, het is het tiende.

Daardoor hebben we al heel wat grappige producten binnen gekregen, waarvan je als je kijkt niet weet of je moet huilen of lachen. Het Japanse Sharp bracht als een van de eersten een smartphone met een vijf inch Full HD-scherm uit voor buitenlandse markten: bij een resolutie van 1920x1080 is de pixeldichtheid van de SH930W 440 ppi. HTC J Butterfly heeft een scherm dat qua kenmerken vergelijkbaar is (of misschien precies hetzelfde). De cijfers zijn indrukwekkend, maar ten eerste is het niet duidelijk waarom een ​​zaktoestel Full HD-resolutie nodig heeft op een vijf-inch scherm, en ten tweede is het mogelijk om je ogen te verwennen, tot in de kleinste details te turen, zelfs op minder hoge resolutie. technische 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 puntdichtheid is 300 pixels per inch. Betekent dit dat Google aanbiedt om vanaf een afstand van 25-30 inch in het display van deze tablet te kijken? Heb je ooit geprobeerd om op anderhalve meter afstand naar een 50-inch tv te kijken? Gevoelens zijn 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 is 3840x2160 pixels, wat precies overeenkomt met de veelbelovende Ultra HD-televisiestandaard of 4K, die vier keer meer pixels weergeeft dan de gebruikelijke Full HD. De pixeldichtheid van dit scherm is 485 pixels.

Redundantie is al een doel op zich geworden: niemand heeft schermen nodig waarvan de pixels alleen onder een microscoop te zien zijn: ze zijn niet meer zichtbaar - met het traditionele gebruik van gezonde, weldenkende mensen. Ondertussen veroorzaken schermen met een hoge pixeldichtheid op zichzelf veel problemen in verband met zowel de hardware als de software stuffing 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 een lagere resolutie. En dit is alleen bij het weergeven van een statische afbeelding! Ondersteuning voor ultrahoge resoluties verscherpt de vereisten voor het grafische subsysteem en in het algemeen voor de computerbronnen van het apparaat aanzienlijk. En dat betekent niet alleen een veel duurder platform, maar ook een forse stijging van het stroomverbruik. Moderne smartphones met gewone schermen kunnen nauwelijks een werkdag zonder opladen, maar wat gebeurt er als hun energieverbruik niet eens anderhalf keer, maar minstens met tientallen procenten groeit?

Het softwareprobleem houdt rechtstreeks verband met de belangrijkste vereiste voor een elektronisch apparaat: de bruikbaarheid ervan. En als, zoals de praktijk laat zien, gadgets met Android gemakkelijk de gebruikersinterface en applicaties aankunnen voor een hogere resolutie, dan heeft technologie op Windows vreemd genoeg grote problemen hiermee.

Zo kan 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, de gebruikersinterface onder Windows 7 niet optimaal aanpassen: ofwel zien de elementen er te klein uit, of de randen van de vensters zijn buiten het scherm verborgen. En dit is de standaard interface van het besturingssysteem! Wat kunnen we zeggen over applicaties van derden, waarvan de ontwikkelaars niet echt nadenken over schalen voor verschillende resoluties: veel van hen zijn ontworpen voor 96 ppi, en geen pixel meer! En zelfs in Windows 8, waar, zoals Microsoft pochte, het probleem met de interface praktisch is opgelost, is het nog steeds even relevant als het probleem met applicaties van derden, waarvan de vensters onder een vergrootglas moeten worden bekeken.

Op de een of andere manier is de start gegeven en zijn we getuige van weer een race om mooie aantallen, die niet logischer zijn dan vliegen met Siberische Kraanvogels. Het valt nog te hopen dat de bedrijven die betrokken zijn bij dit dubieuze evenement een aantal echt nuttige ontwikkelingen en technologische doorbraken zullen hebben. Anders lopen we opnieuw het risico onnodige 20-megapixel "zeepdozen" met modderige plastic optiek te krijgen.

Ontwerper Peter Nowell schreef op zijn blog over pixeldichtheid bij het ontwerpen 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 de vertaling van het materiaal gemaakt door het Sketchapp-team.

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

Pixeldichtheid is het aantal pixels dat in een specifieke fysieke grootte past (meestal een inch). De eerste Mac was 72 pixels per inch, wat veel lijkt, maar in werkelijkheid waren het enorme pixels waar niet elke afbeelding in zou passen.

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

Sindsdien is de schermtechnologie aanzienlijk vooruitgegaan, waarbij zelfs de eenvoudigste schermen nu een resolutie hebben 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 het Retina-display - een superscherp scherm dat het aantal pixels per inch verdubbelde. Als gevolg hiervan zijn afbeeldingen duidelijker dan ooit.

Het verschil is vooral merkbaar in het pictogram van de e-mailapp en in de tekst.

Om dezelfde fysieke afmetingen van de UI-elementen te behouden, moest het aantal pixels per inch worden verhoogd. De knop, die vroeger 44px was, is nu 88px.

Voor compatibiliteit tussen apparaten moeten ontwerpers afbeeldingen vrijgeven voor zowel gewone schermen als Retina-schermen. Maar toen deed zich een ander probleem voor: nu kan de ontwerper niet zeggen dat een element bijvoorbeeld 44 pixels hoog moet zijn, omdat op een ander apparaat hetzelfde element twee keer zo hoog zou moeten 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 wordt verteld dat de hoogte van een element 44 pixels is, kan hij die grootte aanpassen aan elke pixeldichtheidsfactor - 1x, 2x of 3x in het geval van de iPhone 6 Plus.

PT en DP

Dit is natuurlijk niet alleen relevant voor Apple-apparaten. Elk besturingssysteem - desktop of mobiel - ondersteunt hoge ppi/dpi-schermen. Google heeft zijn eigen pixelonafhankelijke meeteenheid voor Android bedacht, genaamd DIP - Density Independent Pixel, afgekort tot "dp". Dit is niet het equivalent van alinea's in iOS, maar het idee is vergelijkbaar. Dit zijn universele maateenheden die kunnen worden geconverteerd naar pixels met behulp van de apparaatschaalfactor (2x, 3x, enzovoort).

Mogelijk bent u geïnteresseerd in de fysieke grootte van het artikel. In feite zouden interface-ontwerpers er niet aan moeten denken, omdat ze geen controle hebben over de hardwarefuncties van de schermen van verschillende apparaten. Ontwerpers moeten weten welke pixeldichtheden de fabrikant heeft aangenomen voor hun apparaten en zorgen voor het voorbereiden van interfaces in 1x, 2x, 3x, enzovoort.

Apple-apparaten hebben geen enkele pixeldichtheid die een enkel punt vertegenwoordigt - dit verschilt van apparaat tot apparaat (zie "Schaalperceptie" hieronder). Op iOS varieert het item van 132 dpi tot 163 dpi. Op Android is de DIP altijd 160 ppi.

Gecontroleerde chaos

In de begindagen van mobiele apparaten met een hoge resolutie was de pixeldichtheid slechts 1x of 2x. Maar nu is alles anders - er zijn veel pixeldichtheden die de interface moet ondersteunen. Android heeft een goed voorbeeld: op het moment van schrijven ondersteunen verschillende fabrikanten zes verschillende pixeldichtheden. Dit betekent dat een icoon dat op alle schermen even groot is, eigenlijk in zes verschillende variaties gedaan moet worden. Voor Apple zijn twee of drie verschillende bronnen relevant.

vector ontwerp

Er zijn een paar praktische lessen die je uit dit alles moet leren. Eerst moet je ontwerpen in vector maken. Hierdoor kunnen onze interfaces, pictogrammen en andere afbeeldingen worden geschaald naar elke gewenste grootte.

Tweede les: we moeten allemaal tekenen op schaal 1x. Met andere woorden, ontwerp met behulp van punten voor alle metingen en schaal vervolgens naar verschillende grotere pixeldichtheden bij het exporteren. Een 2x-afbeelding met 150% schalen om een ​​3x-versie te maken, veroorzaakt wazige contouren, dus dit is niet de beste optie. Maar door graphics 1x op 200% en 300% te schalen, kunt u de duidelijkheid behouden.

De resolutie van lay-outs voor iPhone-applicaties mag niet 750 × 1334 zijn, maar 375 × 667 - 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 middelen vervolgens eenvoudig in 2x- en 3x-formaten exporteren.

Doe net alsof totdat het waar is

Het is vermeldenswaard dat apparaten soms liegen. Ze doen alsof hun pixel-naar-punt-conversieverhouding bijvoorbeeld 3x is, maar in feite is het 2,61x, en de bron zelf is voor het gemak 3x geschaald. Dit is bijvoorbeeld het geval bij de iPhone Plus. Het comprimeert een interface gemaakt in 1242 × 2208 tot een schermresolutie van 1080 × 1920.

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

Omdat de graphics maar een klein beetje zijn verkleind (87%), ziet het resultaat er nog steeds goed uit - een 1px-lijn op een bijna 3x-scherm ziet er nog steeds ongelooflijk scherp uit. En er is een kans dat Apple in de toekomst een echte 3x iPhone Plus zal introduceren, omdat de juiste hardwaremogelijkheden heel goed beschikbaar kunnen zijn voor een product in zulke enorme hoeveelheden.

Is deze niet-gehele schaalbenadering acceptabel? Alles wordt in de praktijk getest. Is het resultaat van zo'n schaalvergroting voldoende onzichtbaar? Veel Android-apparaten nemen ook hun toevlucht tot schalen om te passen in een meer standaard pixel-tot-punt-verhouding, maar helaas doen sommige het niet erg goed.

Deze schaling is ongewenst, omdat alles wat je scherp wilt maken door interpolatie wazig wordt. Helaas, naarmate de pixeldichtheid tot 4x en hoger gaat, wordt de onscherpte veroorzaakt door niet-gehele schaling veel minder waarneembaar, dus ik voorspel dat apparaatfabrikanten deze benadering in de loop van de tijd steeds meer zullen gebruiken. We kunnen alleen maar hopen dat de prestatiefouten ze zullen bevatten.

Perceptie van schaal

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

De knop op het tv-scherm moet ongeveer zo groot zijn als een telefoon, anders is hij niet zichtbaar vanaf de bank.

Hier is een minder dramatisch en zeer waarheidsgetrouw voorbeeld: applicatiepictogrammen op een tablet moeten groter zijn dan die op een telefoon. Dit wordt op twee manieren bereikt: door een lagere pixeldichtheid te gebruiken of door 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 dat is meestal genoeg. De pixeldichtheid van Retina-displays op iPad is ongeveer 264 ppi; op iPhone - 326 ppi. Omdat de pixels op de iPad groter (en minder dicht) zijn, wordt de hele interface iets groter. Dit komt door de extra afstand tussen de ogen van de gebruiker en het scherm van de iPad.