Wat is schermpixeldichtheid (PPI) op een smartphone? Wat is pixeldichtheid en hoe hiermee rekening te houden bij het ontwerpen van mobiele interfaces.

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.

Deze longread is bedoeld voor gevorderde ontwerpers die vanaf de basis meer willen leren over cross-DPI en cross-platform ontwerp.

Geen ingewikkelde wiskunde of onleesbare grafieken, alleen eenvoudige uitleg, opgesplitst in korte secties voor een beter begrip en snelle toepassing in uw ontwerpproces.

Wat zijn DPI en PPI

DPI of Dots Per Inch is een meting van de puntdichtheid die oorspronkelijk bij het afdrukken werd gebruikt. Dit is het aantal inktpunten dat in één inch past. Hoe lager de DPI, hoe minder gedetailleerd de afdruk.

Dit concept is ook van toepassing op computerschermen die PPI of Pixels Per Inch worden genoemd. Het principe is hetzelfde: de waarde telt het aantal pixels dat je scherm op 1 inch kan weergeven. De term DPI wordt ook gebruikt om schermeigenschappen te beschrijven.

Windows-computers hebben standaard PPI=96. Mac gebruikt PPI=72. Deze waarden waren te danken aan het feit dat de destijds geproduceerde schermen 72 “dots” of pixels per inch vertoonden. Dit was het geval in de jaren 80, en nu hebben apparaten op Windows, Mac en andere platforms veel variaties in de PPI-schermresolutie.

Resolutie, pixel en fysieke grootte

Iemand vragen hoe groot een pixel is, is een geweldige manier om de persoon te verwarren met de lastigheid van de vraag. Een pixel heeft geen grootte, geen fysieke betekenis of betekenis buiten zijn wiskundige representatie. Dit maakt deel uit van de verbinding tussen fysieke schermgrootte, uitgedrukt in inches, en schermresolutie, uitgedrukt in pixels per inch, en pixel schermgrootte, uitgedrukt in pixels. In grote lijnen ziet het er als volgt uit:

Normale niet-retina desktopschermen (inclusief Mac) hebben een PPI tussen 72 en 120. Ontwerpen met een PPI tussen 72 en 120 zorgt ervoor dat uw werk overal ongeveer dezelfde verhoudingen in grootte zal hebben.

Hier is een voorbeeld:

De Mac Cinema Display 27" heeft een PPI van 109, wat betekent dat hij 109 pixels per inch schermoppervlak weergeeft. De afgeschuinde breedte is 25,7 inch (65 cm). De breedte van het scherm zelf is ongeveer 23,5 inch, dus 23,5*109~2560, wat de oorspronkelijke schermresolutie van 2560x1440px vormt.

*Ik weet dat 23,5*109 eigenlijk niet gelijk is aan 2560. Het zou eigenlijk 23,486238532 inch zijn. Een nauwkeuriger resultaat wordt verkregen door het tellen van pixels per centimeter, maar hopelijk begrijp je het idee.

Impact op uw ontwerp

Laten we zeggen dat je een blauw vierkant van 109*109px hebt getekend op het scherm waar we het zojuist over hadden.

Dit vierkant heeft een fysieke grootte van 1*1 inch. Maar als het scherm van de gebruiker een PPI van 72 heeft, zal uw blauwe vierkant fysiek groter zijn. Omdat PPI = 72, duurt het ongeveer anderhalve centimeter schermruimte om een ​​vierkant met een zijde van 109 pixels weer te geven. Bekijk hieronder een simulatie van dit effect:

Ongeacht de verschillen in kleur en resolutie, onthoud dat iedereen uw ontwerp anders zal zien. Uw doel zou moeten zijn om het beste compromis te vinden dat het grootste percentage gebruikers dekt. Verwacht niet dat elke gebruiker hetzelfde scherm heeft als jij.

Schermresolutie (en native resolutie)

Schermresolutie kan een aanzienlijke impact hebben op hoe een gebruiker uw ontwerp waarneemt. Sinds CRT-monitoren zijn vervangen door LCD's, beschikken gebruikers nu over een native resolutie die een goede verhouding tussen grootte en PPI garandeert.

De resolutie bepaalt het aantal pixels dat op het scherm wordt weergegeven (bijvoorbeeld 2560 * 1440 px voor een 27-inch bioscoopscherm) - 2560 in de breedte en 1440 in de hoogte. Nu je weet waar PPI voor staat, besef je natuurlijk dat het geen maateenheid voor fysieke afmetingen kan zijn. Een afbeelding met deze resolutie kan over de hele muur of op een heel klein scherm worden uitgerekt.

Tegenwoordig worden LCD-monitoren geleverd met een vooraf ingestelde of eigen resolutie die het aantal pixels weerspiegelt dat het scherm kan weergeven. Het was wel even wat anders dan de oude CRT-monitoren, maar aangezien die tot het verleden behoren gaan we hier niet op details in (zo kan ik ook mijn gedeeltelijke gebrek aan kennis op het gebied van good old TV’s verbergen).

Laten we ons 27-inch Cinema Display nemen, dat 190 PPI kan weergeven met de oorspronkelijke resolutie van 2560*1440px. Als u de resolutie verlaagt, worden de elementen groter. Maar in feite heb je horizontaal 23,5 inch om te vullen met pixels, zij het met minder.

Ik zei ‘eigenlijk’, omdat dat in dit geval zo zal zijn. Het scherm heeft een native resolutie van 2560*1440px. Als de resolutie wordt verlaagd, blijven de pixels op hun plaats en worden 109PPI weergegeven. Om de kloof tussen deze opties te dichten, zal uw besturingssysteem eenvoudigweg alles gaan uitrekken. Uw GPU neemt elke pixel en berekent een nieuwe beeldverhouding om deze weer te geven.

Als u de resolutie instelt op 1280*720 (de helft van de vorige breedte, de helft van de hoogte), simuleert uw GPU een pixel die twee keer zo groot is als voorheen om het scherm te vullen. Wat zal het resultaat zijn? Welnu, de graphics kunnen wazig worden. Hoewel de halve proportie er min of meer goed uit zal zien omdat het een eenvoudige deler is, krijg je, als je de proportie instelt op ⅓ of ¾, fractionele waarden en kun je de pixel NIET verdelen. Hier is een voorbeeld:

Kijk naar het onderstaande voorbeeld. Neem een ​​lijn van 1 pixel dik op een scherm met native resolutie. Pas nu een 150% kleinere resolutie toe. Om het scherm met afbeeldingen te vullen, zal de processor afbeeldingen op 150% moeten genereren, waarbij alles met 1,5 wordt vermenigvuldigd. 1*1,5=1,5, maar we hebben geen halve pixels. Als gevolg hiervan worden de buitenste pixels gevuld met een fractionele kleurtint, wat een wazig effect creëert.

Dus als u een Retina Macbook Pro heeft en u de resolutie moet meten, krijgt u het onderstaande venster te zien, waarin u wordt geïnformeerd dat de geselecteerde resolutie "eruit zal zien als" 1280*800px. Dit is hoe het systeem de grootteverhoudingen uitdrukt via gebruikersresolutie.

Dit is een zeer subjectief idee omdat het de pixelresolutie gebruikt als maatstaf voor de fysieke grootte, maar het is geen leugen, althans vanuit hun oogpunt.

Conclusie: Als u uw ontwerp altijd in pixel-perfecte kwaliteit wilt zien, gebruik dan nooit een andere resolutie dan uw eigen resolutie. Ja, misschien voelt u zich prettiger bij een kleinere beeldverhouding, maar als het om pixels gaat, is het raadzaam om zo nauwkeurig mogelijk te zijn. Helaas gebruiken sommige mensen resolutie als een manier om beter te zien wat er op het scherm staat (vooral een computerscherm). Ook hier ziet je ontwerp er misschien slecht uit, maar hier vinden gebruikers de leesbaarheid belangrijker dan de authenticiteit van het ontwerp.

Wat is 4K-resolutie?

Je hebt de term 4K vast wel veel gehoord de laatste tijd, dit onderwerp is momenteel trending. Laten we, om te begrijpen wat het is, eerst kijken naar wat "HD" betekent. Onthoud dat dit een supervereenvoudigde versie van de uitleg is. Ik zal het alleen uitleggen met behulp van de meest voorkomende machtigingen als voorbeeld. Er zijn verschillende HD-categorieën.

De term HD is van toepassing op elke resolutie vanaf 1280x720px of 720p bij 720 horizontale lijnen. Sommigen noemen deze resolutie volgens de standaarddefinitie SD.

De term full HD is van toepassing op schermen van 1920x1080px. De meeste tv's gebruiken deze resolutie, evenals een toenemend aantal geavanceerde high-end telefoons (Galaxy SIV, HTC one, Sony Xperia Z, Nexus5).

4K-resolutie begint bij 3840 x 2160 pixels. Het wordt ook wel Quad HD, UHD van Ultra HD genoemd. Grofweg kun je 4 x 1080p in een 4K-scherm passen op basis van het aantal pixels.

De tweede 4K-resolutie is 4096x2160. Het is iets groter en wordt gebruikt voor projectoren en professionele camera's.

Wat gebeurt er als ik een 4K-scherm op mijn computer aansluit?

Moderne besturingssystemen schalen 4K niet, wat betekent dat als u een 4K-scherm op een Chromebook of Macbook aansluit, het de hoogste DPI-bron zal gebruiken, in dit geval 200% of @2x, en dit in de normale beeldverhouding zal weergeven. Alles ziet er goed uit, maar vrij klein.

Hypothetisch voorbeeld: als u een 12″ 4K-scherm aansluit op een 12″ hoge resolutie (2x) computer, wordt alles half zo groot weergegeven.
Conclusie:

- 4K is 4 keer groter dan Full HD.

- Als het besturingssysteem 4K ondersteunt, maar niet schaalt, is er geen speciale 4K-bron.

- Er zijn momenteel geen telefoons of tablets met 4k-resolutie.

Flikkersnelheid controleren

Laten we even een pauze nemen van PPI en schermresoluties. Je hebt waarschijnlijk al gezien dat de scherminstellingen ook een waarde in Hertz (Hz) tonen. Dit heeft niets te maken met PPI, maar voor het geval u het zich afvraagt: de flikkeringssnelheid van de monitor of de vernieuwingsfrequentie van afbeeldingen is een maateenheid voor de snelheid waarmee uw monitor een vast beeld of frame per seconde weergeeft. Een 60Hz-monitor kan 60 frames per seconde (60 fps) weergeven. Monitor met een frequentie van 120 Hz - 120 fps, enz.

In de context van een gebruikersinterface bepaalt de flikkersnelheid van uw monitor hoe vloeiend en gedetailleerd uw animatie eruit zal zien. De meeste schermen hebben een frequentie van 60 Hz. Houd er rekening mee dat het aantal weergegeven frames per seconde ook afhankelijk is van de processor en grafische kracht van het apparaat. Het heeft geen zin om een ​​120Hz-scherm aan te passen aan Atari 2600.

Bekijk het onderstaande voorbeeld voor een beter begrip. De T. rex gaat van punt A naar punt B in een snel en nauwkeurig constant ritme op beide schermen - 60 Hz en 120 Hz. Een scherm van 60 fps kan tijdens het rekenen 9 frames weergeven, en een scherm van 120 Hz kan logischerwijs twee keer zoveel frames weergeven in dezelfde tijdseenheid. Animaties zullen veel vloeiender zijn op een 120Hz-scherm.

Conclusie: Sommigen beweren dat het menselijk oog geen frequenties boven 60 fps kan detecteren. Dit is fout. Luister niet naar zulke slimme mensen, lach ze zo duidelijk mogelijk uit.

Wat is een retinascherm

De naam “Retina display” werd door Apple geïntroduceerd bij het uitbrengen van de iPhone 4. Het scherm heette Retina omdat de PPI van het toestel zo hoog was dat het netvlies van het menselijk oog (in het Engels netvlies) de pixels op het toestel niet zou mogen onderscheiden. de schermen.

Dit geldt voor sommige schermformaten, maar omdat schermen steeds beter worden, zijn onze ogen nu voldoende getraind om pixels te zien, vooral op gebogen UI-elementen.

Technisch gezien geven deze schermen twee keer zoveel pixels in hoogte en breedte weer bij dezelfde fysieke grootte.

iPhone 3G/S had een diagonaal van 3,5 inch en een resolutie van 480*320px, wat overeenkomt met 163PPI.

Telefoon 4/S had ook een diagonaal van 3,5 inch en een resolutie van 960*640px, wat overeenkomt met 326PPI.

WAUW! Precies twee keer. Eenvoudige vermenigvuldiger. Dus in plaats van kleiner te zijn, zijn de elementen op het scherm twee keer zo scherp omdat ze twee keer zoveel pixels hebben en dezelfde fysieke grootte hebben. 1 normale pixel = 4 retinapixels, vier keer zoveel pixels.

Gebruik het onderstaande voorbeeld voor het beoogde doel bij het ontwikkelen van complexe ontwerpen.

Let op: het is vrij moeilijk om een ​​verschillende beeldkwaliteit van twee apparaten op een derde te simuleren, d.w.z. waar je nu naar kijkt. Een retina-muziekspeler, zelfs die dezelfde fysieke ruimte in beslag neemt, zal er op de iPhone 4 twee keer zo scherp en van betere kwaliteit uitzien. Als je hem wilt uitproberen, gebruik dan een van mijn gratis demo's.

De naam "Retina" is van Apple, dus andere bedrijven gebruiken in plaats daarvan "HI-DPI", of helemaal geen naam.

Conclusie: Apple-producten zijn een geweldige manier om vertrouwd te raken met DPI-conversie om de verschillen tussen resolutie, PPI en verhouding tot fysieke grootte te begrijpen, omdat je maar één vermenigvuldiger hoeft te gebruiken.

Wat is een vermenigvuldiger?

De vermenigvuldiger is uw wiskundige redder als het gaat om het converteren van ontwerpen in verschillende PPI-resoluties. Zodra u de vermenigvuldiger kent, hoeft u zich geen zorgen meer te maken over gedetailleerde apparaatspecificaties.

Laten we de iPhone 3G en 4 als voorbeeld nemen. Je hebt 4 keer meer pixels (2x breedte en 2x hoogte) voor dezelfde fysieke grootte. Daarom is uw vermenigvuldiger 2. Dit betekent dat u, om uw bronnen compatibel te maken met de 4G-resolutie, alleen maar de grootte van de bronnen met 2 hoeft te vermenigvuldigen, en dat is alles.

Laten we zeggen dat je een knop maakt van 44*44px, wat de aanbevolen grootte is voor aanraakknoppen in iOS (we komen hier later in dit bericht op terug). Laten we het een typische knop noemen met de naam 'Jim'.
Om onze Jim er goed uit te laten zien op de iPhone 4, moet je een versie maken die twee keer zo groot is. Dat is wat wij hier doen:

Het is heel eenvoudig. Er is nu een versie van Jim.png voor normale PPI (iPhone 3) en een versie [e-mailadres beveiligd] voor 200% PPI (iPhone 4.)

Nu zeg je: "Ik ben er vrij zeker van dat er nog andere factoren zijn dan twee." Dat is zo, en dit is waar de nachtmerrie begint. Misschien geen nachtmerrie, maar ik weet zeker dat je liever de hele dag sokken strijkt in plaats van met die talloze vermenigvuldigers te werken. Godzijdank is dit niet zo eng als het op het eerste gezicht lijkt. Wij komen hier later op terug.

Laten we het eerst over eenheden hebben, omdat je de eenheid nodig hebt, en niet de pixel, om multi-DPI-ontwerpen te specificeren. En dit is waar DP en PT in beeld komen.

Conclusie: De vermenigvuldiger is iets dat u moet weten voor elk ontwerp waaraan u werkt. Deze hele wereld van chaos berust op vermenigvuldigers, waardoor al deze schermformaten, PPI en andere dimensies begrijpelijk zijn voor mensen.

Wat zijn DP, PT en SP?

DP of PT is een meeteenheid die kan worden gebruikt om ontwerplay-outs voor veel apparaten, bij veel DPI's, te beschrijven.

DP of DiP is een afkorting voor Device Independent Pixel, en PT staat voor Point. PT verwijst naar Apple, DP verwijst naar Android, maar ze betekenen ongeveer hetzelfde.

Kortom, deze eenheden bepalen de grootte, ongeacht de apparaatvermenigvuldiger. Dit is erg handig als u specificaties moet bespreken met verschillende deelnemers aan de workflow, zoals de ontwerper en de ingenieur. Laten we teruggaan naar het button-Jim-voorbeeld.

De breedte van Jim is 44 px op normale niet-retina-schermen en 88 px op retina-schermen. Laten we 20px opvulling rond de knop toevoegen, omdat Jim van wat witruimte houdt. Voor het netvlies is de opvulling dan 40px. Maar het tellen van retinapixels heeft helemaal geen zin als je ontwerpt voor niet-retina-schermen.

We nemen dus gewoon de normale 100% niet-retina-verhouding als basis voor alles.

In dit geval is de maat van Jim 44*44DP of PT en is de opvulling 20DP of PT. Specificaties kun je in elke PPI opgeven, Jim zal altijd 44*44dp of pt zijn.

Android en iOS passen dit formaat aan het scherm aan en converteren met de juiste vermenigvuldiger. Daarom vind ik het gemakkelijker om altijd in de native PPI van je scherm te ontwerpen.

SP is een term die los staat van DP en PT, maar werkt volgens hetzelfde principe. SP is een afkorting voor Schaal-onafhankelijke pixel. SP wordt beïnvloed door de lettertype-instellingen van de gebruiker op het Android-apparaat. Als ontwerper lijkt een SP-opdracht mij een DP-opdracht voor iets anders. baseer het op wat leesbaar is op schaal 1x (16sp is bijvoorbeeld een geweldige lettergrootte).

Conclusie: Gebruik altijd resolutie en schaal onafhankelijke waarden voor opvulling. Altijd. Hoe gevarieerder de schermformaten en resoluties worden, hoe belangrijker dit wordt.

PPI-configuratie

Nu je weet wat PPI, netvlies en vermenigvuldiger zijn, is het belangrijk om erover te praten “Wat gebeurt er als ik de PPI-instellingen in mijn ontwerpeditor wijzig?”

Als je jezelf deze vraag hebt gesteld, betekent dit dat je iets weet over ontwerpsoftware. Hier is iets dat me een tijdje kostte om erachter te komen, en het is een belangrijk punt:

Alle niet-gedrukte inhoud gebruikt pixelafmetingen, ongeacht welke PPI-configuratie aanvankelijk is ingesteld.

PPI-configuratie in software is het voorrecht van afdrukken. Als u voor het web ontwerpt, heeft PPI geen enkel effect op uw rastergrootte.

Daarom gebruiken we vermenigvuldigers in plaats van directe PPI-waarden. Uw canvas en afbeeldingen worden door het programma altijd omgezet naar pixels met behulp van de juiste vermenigvuldiger.

Hier is een voorbeeld. U kunt proberen hetzelfde zelf te doen in een programma dat PPI-instellingen ondersteunt, zoals Photoshop. Ik tekende een rechthoek van 80*80px en 16pt tekst in Photoshop met 72PPI-instellingen. De tweede is hetzelfde, maar met instellingen op 144PPI.

Zoals je kunt zien is de tekst iets groter geworden, twee keer zo groot om precies te zijn, terwijl het vierkant niet is veranderd. De reden is dat het programma (in dit geval Photoshop) de pt-waarden schaalt (zoals ze zouden moeten) op basis van de PPI-waarde, wat resulteert in tweemaal de grootte bij het renderen van tekst bij een dubbele PPI-configuratie. Aan de andere kant, wat werd gedefinieerd in pixels, d.w.z. het blauwe vierkant blijft even groot. Een pixel is een pixel en blijft een pixel, ongeacht welke PPI u instelt. Alleen de PPI van het scherm dat dit weergeeft, zal dit veranderen.

Het is belangrijk om te onthouden dat bij het ontwerpen voor digitale apparaten PPI alleen invloed heeft op hoe u het ontwerp waarneemt, evenals op het proces van het maken ervan en op grafische afbeeldingen zoals lettertypen. Als u bronnen met verschillende PPI-waarden in uw ontwerpproces opneemt, zal het programma de grootte van alle bestanden aanpassen aan de PPI-verhouding van het resulterende bestand. Dit kan een probleem voor u zijn.

Oplossing? Gebruik een PPI (bij voorkeur in het bereik van 72-120 voor 1x-ontwerpen). Persoonlijk gebruik ik 72PPI omdat dit de standaardinstelling is in Photoshop en de meeste van mijn collega's gebruiken dezelfde.

Conclusie:

- PPI-instellingen hebben geen effect op webexport.

- PPI-instellingen hebben alleen invloed op afbeeldingen die zijn gegenereerd op basis van PPI-onafhankelijke metingen zoals PT.

- Pixel is een maateenheid voor digitale afbeeldingen.

- Houd rekening met vermenigvuldigers en waarom u ontwerpt in plaats van u te concentreren op PPI.

- Gebruik realistische PPI-instellingen bij digitaal ontwerpen. Gebruik iets dat u een duidelijk beeld geeft van de uiteindelijke weergave op het apparaat (bijvoorbeeld 72-120ppi voor 1x web/desktop).

- Gebruik dezelfde PPI-waarde voor alle bestanden.
Dit probleem wordt gedetailleerder besproken in een bericht op StackExchange.

Hoe om te gaan met PPI op iOS

Het is tijd om in platformspecifiek ontwerp te duiken.

Laten we onthouden welke iOS-apparaten sinds begin 2014 zijn uitgebracht.

Als het gaat om schermgrootte en DPI, heeft iOS 2 soorten mobiele apparaten en 2 soorten schermen voor tablets en desktops.

In de mobiele branche hebben ze iPhone en natuurlijk iPad.

In de telefooncategorie is er de oude 3GS (nog steeds ondersteund door iOS6) en hoger. Alleen de iPhone 3GS is niet-retina. iPhone 5 en hoger gebruiken een langer scherm met dezelfde DPI als de iPhone 4 en 4s. Hier is een spiekbriefje voor je:

In september 2014 werd de Apple Keynote 2014 aangekondigd, nu heb je 2 nieuwe iPhone-categorieën: iPhone 6 en iPhone 6 Plus.

iPhone 6 is iets groter dan 5 (met 0,7 inch), maar de PPI is hetzelfde. De iPhone 6 Plus introduceert daarentegen een geheel nieuwe vermenigvuldiger voor iOS - @3x, vanwege zijn formaat van 5,5″.

Er is iets speciaals aan de manier waarop de iPhone 6 Plus met het scherm omgaat in vergelijking met andere iPhone-modellen: Het vermindert de grafische weergave.

Wanneer u bijvoorbeeld een ontwerp voor de iPhone 6 maakt, tekent u op een canvas van 1334*750px en geeft de telefoon 1334*750 fysieke pixels weer. In het geval van de iPhone 6 Plus heeft de telefoon een lagere resolutie dan de afbeelding, dus je moet het ontwerp maken in een resolutie van 2208 * 1242px, en de telefoon zal het al verkleinen tot het ideale formaat. Bekijk de onderstaande illustratie:

De fysieke resolutie is 15% lager dan de weergaveresolutie. Er zullen enkele glitches optreden, zoals halve pixels, waardoor de fijnste details een beetje wazig kunnen zijn. De resolutie is zo hoog dat deze onvolkomenheden vrijwel onzichtbaar zullen zijn, tenzij je te goed kijkt. Teken dus op een canvas van 2208*1242px en onthoud de mogelijke problemen voor superkleine details zoals scheidingslijnen. Kijk naar de simulatie:

Conclusie, Android-regels:

- Android heeft 7 verschillende DPI's, je moet je zorgen maken over 4 daarvan: mdpi,hdpi,xhdpi,xxhdpi plus één als je een toekomstige versie wilt maken, in XXXHDPI

- MDPI is de basis-DPI met een vermenigvuldiger van 1x

- Android gebruikt dp in plaats van pt voor specificaties, maar ze zijn in wezen hetzelfde

- Ronde pixels verkregen uit decimale factoren.

- Lever bronnen aan in .png-formaat.

- Ontwikkel een uniform naamgevingssysteem voor bronbestanden samen met de persoon die verantwoordelijk is voor de implementatie ervan.

PPI op Mac en Chrome OS

Mac (OSX) en Chrome OS gedragen zich redelijk vergelijkbaar in termen van PPI. Beide besturingssystemen ondersteunen standaard PPI (100%) en hogere resoluties, inclusief retina (200%). Net als bij de iPhone- en iPad-modellen wordt hier slechts een vermenigvuldiger van 2x gebruikt.

Zelfs als de meerderheid van uw gebruikers, zowel Mac als Chrome OS, apparaten met een lage resolutie gebruikt, raad ik u ten zeerste aan om ook versies met een hoge resolutie van de schermen te maken. Bronnen voor toekomstige versies van Chrome OS omvatten bestanden met een hoge resolutie. Geloof me, het zal geen tijdverspilling zijn.

Momenteel gebruiken slechts drie laptops deze PPI: Macbook pro 13″, 15″ en Chromebook Pixel. Daarnaast is de Chromebook Pixe ook touchscreen.

Vereiste bronnen, bijvoorbeeld Chrome

Een perfect voorbeeld van deze gelijkenis is de broncode van de Chrome-werkbalkknop. We gebruiken op beide platforms dezelfde knoppen. Zelfs als de code anders is, zijn de afbeeldingen identiek. Kijk naar het Chrome-menu en de bladwijzerknoppen:

Conclusie:

- Chrome OS en OSX gebruiken één vermenigvuldiger, 2.

- Alleen het Chrome OS-scherm met hoge resolutie ondersteunt ook aanraakbediening.

Rekbare bronnen

Het maakt niet uit of u een desktop- of mobiele app ontwikkelt, u heeft bijna altijd rekbare assets nodig. Met deze broncode kan het formaat van de code worden aangepast aan de gewenste grootte zonder kwaliteitsverlies bij het renderen.

Dit is niet hetzelfde bij herhaalbare assets, die anders werken, ook al laten ze soms hetzelfde resultaat zien.

Kijk naar het onderstaande voorbeeld. De werkbalk op iOS wordt gegenereerd vanuit één superdunne bron die zich langs de X-as over het hele scherm herhaalt.

Rekbare bronnen op iOS

iOS maakt het werk van de ontwerper eenvoudiger omdat het uitrekken in code wordt gedefinieerd. Het enige wat u hoeft te doen is een basisimage aan te bieden en, als u het ontwerp niet zelf in code implementeert, specificaties opgeven om horizontaal, verticaal of beide uit te rekken. Hier is een voorbeeld van een standaard Chrome-knop in iOS.

Rekbare bronnen op Android

Android gebruikt dergelijke bronnen anders dan iOS. De bron zelf is omgeven door 4 lijnen. Ze moeten in de slice/afbeelding worden gespecificeerd als onderdeel van de grafische weergave, waarbij de bronspecificaties letterlijk visueel in de bron zelf worden weergegeven.

Deze vier lijnen definiëren twee dingen: het zoomgebied en het vulgebied. Als deze twee parameters zijn gespecificeerd, kan de code eenvoudigweg de bron uitrekken en de inhoud op de opgegeven locatie plaatsen. Kijk eens naar het onderstaande voorbeeld: een Android-versie van de standaard Chrome-knop die je eerder hebt gezien.

Zoals u kunt zien, is de afbeelding met 9 vlakken een set van 4 blanco #000000-strepen. Ze moeten een breedte van 1px hebben voor elke DPI; Dit is een code-indicatie. Het rekgebied bevat geen afgeronde hoeken, omdat dat niet iets is dat kan worden herhaald (anders ziet het er vreselijk uit). In dit geval hebben we 10 dp opvulling rond de knop toegevoegd. Dit is iets wat niet gespecificeerd hoeft te worden in de specificaties.

Als u 9-patch gebruikt, moet u .9 aan de bestandsnaam toevoegen, net zoals u @2x toevoegt voor iOS-bronnen. Nog een voorbeeld met onze knop:

Vergeet niet om voorzichtig te zijn met de grootte van de bron. Als ik het voor demodoeleinden behoorlijk groot heb gemaakt, is het belangrijk om het gewicht van de bron te optimaliseren door de grootte tot een minimum te beperken, zoals hieronder weergegeven. Ik heb de hoeken gelaten zoals ze waren, maar de rek- en inhoudsruimte tot een minimum beperkt.

Zorg ervoor dat de 9-vlakmarkeringen uw ontwerp niet overlappen, zodat de bron correct wordt bijgesneden. .9 moet zo dicht mogelijk bij het origineel liggen zonder het te overlappen. Probeer niet inline te laten inspringen. Het vorige voorbeeld had inlinemarges vanwege de schaduw.

9-patch vervangt niet de bronexport voor elke DPI. Dit moet voor elke versie van de broncode worden gedaan.

Ten slotte kan .9 meerdere rekbare gebieden bevatten (boven en links). Ik heb dit niet vaak of nooit gebruikt in mijn werk, maar het is het vermelden waard.

Conclusie: Vraag altijd aan de uitvoerder van uw ontwerp welke oplossing u het beste kunt gebruiken, vooral voor desktop. Hoe meer afbeeldingen u heeft, hoe zwaarder de toepassing zal zijn en hoe moeilijker het voor u zal zijn om de broncode bij te werken als er wijzigingen nodig zijn. 9-patch mag alleen worden gebruikt met de juiste namen en de juiste organisatie van de bronnen.

Vectorbronnen

Naarmate de verscheidenheid aan schermen met grotere DPI-bereiken blijft groeien, is het overschakelen naar vectorbronnen in plaats van rasterbronnen meer dan het overwegen waard.

De meest gebruikte en wijdverbreide vorm van vectorbron is het .svg-formaat. Het is een op .xml gebaseerd bestand dat door de meeste programma's, inclusief webbrowsers, kan worden gelezen en bewerkt, omdat het oorspronkelijk voor internet is gemaakt. Een ander formaat ondersteunt vectoren zoals .ai (Adobe illustrator), .eps of zelfs .pdf.

Het belangrijkste voordeel van vectorafbeeldingen is hun schaalbaarheid. Het is niet nodig om voor alle PPI-variaties bitmaps te maken; de vector wordt automatisch geschaald op basis van de schermvermenigvuldiger.

Svg bevat XML-informatie over het tekenen van afbeeldingen. De software/OS/browser interpreteert deze opdrachten vervolgens om de bron op de geselecteerde grootte weer te geven.

Het gebruik van dit formaat heeft geweldige voordelen:

• Verklein de toepassingsgrootte
• Totale vermindering van rastergebruik
• Gemakkelijker om kleuren programmatisch te wijzigen
• Automatische en niet-destructieve schaling

Hoewel er enkele nadelen zijn:

• Minder visuele vrijheid, niet erg handig voor complexe afbeeldingen, vooral complexe schaduwen, verlopen en andere effecten
• Kan een negatieve impact hebben op de applicatie of locatie vanwege de benodigde verwerkingsmiddelen.
• Geen controle over pixels vanwege automatisch schalen.

Met de evolutie van het interface-ontwerp naar meer "platte" stijlen, minder gebruik van schaduwen, verlopen, wordt .vector steeds nuttiger en gebruikt. Desondanks moet u vectorbronnen met voorzichtigheid gebruiken.

Zoals al vermeld bij de nadelen, kan .svg de prestaties van het product sterk beïnvloeden. Het formaat werkt prima op internet; afzonderlijke vectoroplossingen verdienen de voorkeur. iOS gebruikt .pdf, Android - Vectortekenbaar.

Chrome OS-specificaties hierover zijn nog niet vrijgegeven. Hoewel alle Chrome OS-apps webapps zijn, zou ik toch aanraden om een ​​aanraakgevoelig ontwerp te gebruiken. Mijn advies: gebruik Android-aanraakstandaarden.

Web, hybride apparaten en de toekomst

Als u ontwerpen voor mobiele apparaten maakt, zal het duidelijk zijn welke kant u op moet - zeker aanraakbediening. Als je voor de desktop ontwerpt, zorg er dan voor dat het non-touch is. Het klinkt eenvoudig, maar het negeert de nieuwste trend met groeiende populariteit: hybride apparaten.
Het hybride apparaat kan worden bestuurd door zowel touch- als non-touch-apparaten. De Chromebook Pixel, Surface Pro en Lenovo Yoga zijn hiervan goede voorbeelden.

Wat te doen in dit geval? Er is geen eenvoudig antwoord op deze vraag, maar ik zal proberen u te adviseren om aanraakbedieningen te kiezen. Dit is de richting waarin de technologie zich ontwikkelt.

Als u voor internet ontwerpt, denk dan van tevoren na over aanraking.
Conclusie:

- Wat u ook doet voor de toekomst, denk na over uw projecten in termen van mobiele apparaten en aanraakbedieningen.

- Gebruik standaarden voor het aanraakgebied voor elk besturingssysteem. Dit zal het ontwerp helpen verbeteren en consistentie helpen bereiken. De standaard afmetingen van het aanraakgebied dienen alleen ter referentie en hoeven niet strikt te worden gevolgd. Je beheert het proces en neemt zelf beslissingen.

Interface-ontwerpsoftware

Software bepaalt niet de vaardigheden van een ontwerper, maar het kiezen van de juiste tool voor een bepaalde taak kan de productiviteit aanzienlijk verbeteren en het ontwerpproces zelf vereenvoudigen. Softwarekennis zou niet uw enige vaardigheid moeten zijn, maar het leren en beheersen van de juiste tools zal een uitstekende basis vormen om uw ideeën werkelijkheid te laten worden.

Verschillende software heeft verschillende benaderingen voor het werken met DPI-variaties in interfaceontwerp. Sommige programma's zijn bijzonder goed voor bepaalde doeleinden. Dit zijn de meest populaire oplossingen:

Photoshoppen

De moeder van alle ontwerptools. Tegenwoordig misschien wel de meest populaire keuze voor interface-ontwerp. Er zijn eindeloze bronnen, tutorials en artikelen gewijd aan Photoshop. Deze ‘oude man’ stond aan de oorsprong van de ontwikkeling van de interface-ontwerpindustrie.

Aanvankelijk was het programma gemaakt voor het verwerken van rasterafbeeldingen en foto's, zoals al uit de naam blijkt. In de loop der jaren is het geëvolueerd en ontwerpers begonnen het te gebruiken voor interfaceontwerp. Dit werd deels ingegeven door gewoonte, maar ook door het feit dat het vrijwel het enige instrument was dat de vereiste kwaliteit kon leveren.

Photoshop is veruit de leider op het gebied van rasterbewerking en staat ook op de eerste plaats wat betreft populariteit voor interfaceontwerp. Door het tientallen jaren bestaan ​​is het programma overgroeid met functionaliteit en daarom is het niet zo eenvoudig onder de knie te krijgen. Dit is precies het geval wanneer bijna alles erin kan, maar niet altijd op de meest optimale manier.

Omdat het oorspronkelijk is gemaakt voor rasterafbeeldingen, is Photoshop DPI-onafhankelijk, in tegenstelling tot Illustrator en Sketch, die hieronder worden beschreven.

Illustrator

Dit is het vectorbroertje van Photoshop. Zoals de naam zelf zegt, is deze gemaakt voor illustratoren, maar wordt hij ook actief gebruikt bij interfaceontwerp.

Illustrator is goed aangepast aan printontwerpen, net als de interface. Het werken met kleuren, schaal, linialen en maateenheden kan in het begin verwarrend zijn. Het zal wat tijd en kleine aanpassingen vergen om zich aan te passen aan interfaceontwerpen. Net als Photoshop is het een ongelooflijk krachtig hulpmiddel met een zeer steile leercurve.

In tegenstelling tot Photoshop is Illustrator DPI-onafhankelijk vanwege de vectorisatie. In tegenstelling tot rasterafbeeldingen zijn vectorafbeeldingen gebaseerd op wiskundige formules en kunnen ze programmatisch worden geschaald zonder kwaliteitsverlies.

Het begrijpen van het verschil tussen raster- en vectorafbeeldingen is de sleutel tot het creëren van schaalbare ontwerpen en middelen.

Schets 3.0

Sketch is een relatief nieuwe tool vergeleken met Photoshop en Illustrator. Dit programma, dat pas vier jaar geleden verscheen, heeft veel ophef gemaakt (op een goede manier) in de interface-ontwerpindustrie. De reden is dat Sketch oorspronkelijk met één doel werd ontworpen: interfaceontwerp. Sketch positioneert zichzelf als een hulpmiddel dat perfect is afgestemd op zijn nichepubliek: interfaceontwerpers.

Sketch is geschikt voor zowel ruwe prototyping als complexer visueel ontwerp. Het is volledig vectorgebaseerd, net als Illustrator, met een minimalistische en zeer goed doordachte interface. De combinatie van tekengebieden met het gebruiksgemak en de flexibiliteit van het brongeneratiesysteem maakt Sketch de snelste oplossing voor multi-DPI en multi-platform ontwerp. Recente releases maken het een zeer waardig alternatief voor Photoshop.

Het nadeel is dat Sketch door een kleiner team is ontwikkeld en nog steeds niet zo populair is als Photoshop. Bovendien heeft het een nogal magere reeks mogelijkheden voor rasterverwerking. In dit opzicht is Photoshop veel beter. En ten slotte beschikt hij, omdat hij nog vrij jong is, niet over zoveel bronnen, tutorials en zo'n grote community als Photoshop. Maar er moet worden opgemerkt dat de gemeenschap zeer actief en gemotiveerd is voor ontwikkeling.

Uit persoonlijke ervaring ben ik een Photoshop-gebruiker sinds ik 8 jaar oud was, maar ben onlangs voor de meeste ontwerptaken overgestapt op Sketch 3.0. Dit is geen bewijs van kwaliteit; ik denk dat Photoshop nog steeds een geweldig hulpmiddel is. Sketch past gewoon beter bij mijn behoeften.

Figma

Nieuw eind 2015: Figma is een browsergebaseerde vectorontwerptool (werkt voornamelijk via Chrome). Het is als een cloudgebaseerde versie van Sketch met mogelijkheden voor teamsamenwerking en Slack-integratie. Een indrukwekkend staaltje techniek in een poging om de ontwerptool van de toekomst te realiseren.

Het grootste voordeel van Figma is dat het platformonafhankelijk is (werkt overal waar Chrome draait) en dat het met meerdere mensen tegelijk kan samenwerken en bewerken. Als u of uw bedrijf echter niet bijzonder gewend bent om in webservices te werken, kan de keuze niet succesvol zijn, omdat er geen lokale versie van het programma is.

Conclusie: Er zijn geen ideale tools, maar er zijn er wel waarmee je prettig kunt werken. Als je genoeg tijd en geld hebt, test dan alle genoemde programma's om je eigen mening te vormen.

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.

PPI is een afkorting voor ‘pixels per inch’, wat letterlijk het aantal pixels per inch betekent. Uiteraard geldt: hoe hoger deze waarde, hoe hoger de pixeldichtheid zelf kleiner is, wat resulteert in een duidelijker beeld op het smartphonescherm (en het scherm van elk ander apparaat - tablet, monitor, tv, enz.). Bij lage PPI-waarden kan het voorkomen dat je individuele pixels op het scherm ziet, het beeld is korrelig, wat niet erg prettig is voor de ogen. Telefoons met een lage PPI-waarde zijn doorgaans budgetmodellen.

De volledige formule voor het berekenen van PPI ziet er als volgt uit: u moet de vierkantswortel nemen van de som van de kwadraten van het aantal pixels in hoogte en breedte, en het resultaat vervolgens delen door de schermdiagonaal in inches. Dat wil zeggen, de formule zal er als volgt uitzien:

Laten we berekenen met de iPhone 7 als voorbeeld, de resolutie is 1334 bij 750 pixels en de schermdiagonaal is 4,7 inch, dat wil zeggen:

• 1334 kwadraat = 1779556;
• 750 kwadraat = 562500;
• Som van kwadraten, 1779556 562500 = 2342056;
• De vierkantswortel nemen van 2342056 = 1530,378;
• Deel de resulterende waarde door 4,7 = 325,6123;
• We ronden de waarde af en krijgen het getal 326. Dit is de PPI voor de iPhone 7.

Welke PPI-waarde moet de telefoon hebben?

Je moet niet de hoogste PPI-waarde najagen. Er zijn smartphonemodellen op de markt met een PPI-waarde van meer dan 400, en zelfs met meer dan 500. Maar het probleem is dat het menselijk oog het verschil niet ziet als de PPI-waarde boven de 300 komt. Natuurlijk, als je wilt Je kunt de pixels van dichtbij zien, maar bij normaal gebruik. Bij gebruik op een afstand van 20-25 cm van de ogen zal het scherm zeer comfortabel zijn. Bovendien drukt het verwerken van zeer hoge resoluties zijn stempel op de gebruiksduur van de telefoon.

Nog maar een paar jaar geleden leek een pixeldichtheid van 500 ppi ongelooflijk. Bovendien waren smartphones met een QHD-scherm nog maar een jaar geleden zeer zeldzaam. De tijd staat echter niet stil en apparaten met een resolutie van 1440 x 2560 pixels vullen geleidelijk de markt. Laten we dus eens kijken welke smartphone een gebruiker kan kiezen als hij de voorkeur geeft aan schermen van hoge kwaliteit.

Laten we eerst eens kijken waarom schermen met een hoge pixeldichtheid zo goed zijn. Zoals onze collega's van telefoonarena Hoe hoger de dichtheid, hoe beter kleine lettertypen of andere kleine objecten zichtbaar zijn op het scherm. Als je het geluk hebt een smartphone te hebben met veel ingebouwd geheugen, kun je bovendien films in maximale resolutie bekijken zonder dat de kwaliteit vervormt.

Ultraheldere schermen hebben echter ook hun nadelen vanwege hun hoge stroomverbruik. Het is ook vermeldenswaard dat bij dergelijke resoluties niet iedereen individuele pixels op het scherm kan onderscheiden. Maar als u toch besluit een smartphone met QHD-resolutie aan te schaffen, dan kunnen wij u verschillende apparaten van deze klasse aanbieden.

Prime

Ondanks dat de eerste versie van de Samsung Galaxy S5-smartphone na enige tijd een display met een resolutie van 1920 bij 1080 pixels had en naast een krachtigere processor een 5,1 inch QHD-scherm installeerde. De pixeldichtheid was dus 576 ppi. Naast een hoogwaardig scherm heeft de smartphone een Snapdragon 805-processor met Adreno 420 graphics en 3 gigabyte RAM.

LG G3

Een ander Koreaans bedrijf LG installeerde ook een scherm met een resolutie van 2560 bij 1440 pixels. De schermdiagonaal in de G3 is echter iets groter dan in de Galaxy S5 Prime en bedraagt ​​5,5 inch, waardoor de pixeldichtheid 538 ppi heeft bereikt. G3 staat dus op de tweede plaats in onze ranglijst.

De smartphone deelt de tweede plaats met de LG G3. De Find 7 heeft ook een 5,5-inch diagonale matrix met een resolutie van 2560 bij 1440 pixels. Bovendien is het toestel uit China uitgerust met een Snapdragon 801-processor en een 13 megapixelcamera.

De laatste op onze lijst van vandaag is een van de nieuwste smartphones van Samsung. We hebben het over, die een beeldscherm kreeg met QHD-resolutie en een diagonaal van 5,7 inch. De pixeldichtheid bedroeg dus 515 ppi. Naast een groot scherm van hoge kwaliteit beschikt de Galaxy Note 4 over een krachtige Snapdragon 805-processor, een 16 megapixelcamera en een multifunctionele S-Pen-stylus.

Natuurlijk hebben we in deze lijst de pixeldichtheid van verschillende vlaggenschipapparaten vergeleken, maar desondanks heeft elk van de smartphones die we hebben getest een scherm van hoge kwaliteit dat de meeste gebruikers tevreden zal stellen.