Ontwerpersgids vir DPI – Omskakeling na regte wêreldgroottes

openbaarmaking: U ondersteuning help om die webwerf aan die gang te hou! Ons verdien ‘n verwysingsfooi vir sommige van die dienste wat ons op hierdie bladsy aanbeveel.


Op die web staan ​​DPI vir digtheidpixels per duim. PPI staan ​​eenvoudig vir pixels per duim. (Alhoewel DPI in die drukkery ontstaan ​​het, word dit dikwels gebruik in die plek van PPI op die web vanweë die gemoderniseerde definisie.)

Ongeag die inisialisme wat u verkies, moet u verstaan ​​hoe DPI-instellings die manier waarop u grafika op die skerm sal verskyn, beïnvloed as u webwerwe of programme ontwerp.

Die nie-amptelike standaard vir grafiese ontwerp vir die web is 72 DPI. Dit was Photoshop se standaard DPI-instelling in die dae van die eerste Mac-rekenaar, die 128K. (Hier is ‘n goeie vergelyking van die pixeldigtheid van die 128K teenoor ‘n iPad.)

Deur 72 DPI te gebruik, was drukwerk meer betroubaar. En 72 DPI het met reg of verkeerd by ons gebly.

In die praktyk het baie van die toestelle wat ons gebruik aansienlik hoër DPI as 72, wat baie uitdagings meebring. Gelukkig is daar bekende konvensies wat u kan help met die ontwikkeling van u ontwerp.

Hoekom skermresolusie-aangeleenthede

Stel jou voor dat jy twee toestelle het wat dieselfde fisiese grootte het. Toestel 1 het ‘n skermvertoning van 72 DPI. Toestel 2 het ‘n vertoning van 144 DPI.

As u ‘n prent op 72 DPI ontwerp, sal die prentjie presies die grootte vertoon wat u op die 72 DPI-skerm bedoel het. Maar op die 144 PPI-skerm is dit die helfte van die grootte wat u bedoel het, want die skerm het twee keer soveel pixels.

Onthou: fisiese grootte het glad nie ‘n invloed op DPI nie, behalwe dat kleiner skerms goedkoper is om te produseer, dus is hulle geneig om hoër DPI te hê as groot skerms. Op toestelle van vandag is daar groot variasie in DPI, selfs vir toestelle van dieselfde grootte:

  • Apple Cinema Display: 99
  • Microsoft-oppervlak: 148
  • Amazon Kindle Fire 7 ″: 170
  • Apple 12 ″ MacBook: 226
  • BlackBerry Paspoort: 453
  • Samsung Galaxy S7: 576
  • Sony Xperia Z5 Premium: 801.

(U kan die DPI van u skerm onmiddellik uitvind om te sien hoe dit vergelyk word.)

As u dit nie reggemaak het in u ontwerpe nie, sou u 72 DPI-grafika klein wees op die Sony Xperia Z5 Premium. Dit is die rede waarom u moet weet hoe om groot verskille in resolusie van pixels te hanteer.

Moenie op handelsmerke of bemarking staatmaak om vertoonoplossing op ‘n konsekwente manier te beskryf nie. Byvoorbeeld, die retina-handelsmerk van Apple beskryf baie verskillende vertoondigthede, afhangend van die toestel waarna u kyk. Die laagste Retina-skerm is 218 DPI, en die hoogste is meer as 400.

Om konsekwente ontwerpe te ontwikkel, benodig u ‘n ander benadering.

Die gebruik van Dp en punte vir eenvoudige skaal

Sodra u die meeteenhede in iOS en Android verstaan, kan u die pixelmeting vir u ontwerp heeltemal ignoreer.

In plaas daarvan kan u die konsep van virtuele pixels of CSS-pixels gebruik:

Dit is effens anders op Android vs iOS:

  • dp staan ​​vir apparaat-onafhanklike pixel, of digtheid-onafhanklike pixel. Dit word op Android gebruik. Een dp meet 1/160 duim.
  • Punte is die ekwivalent vir iOS. Een punt meet 1/163 duim.

Dus is daar ‘n subtiele verskil in digtheid, is die stelsels baie dieselfde.

As u ‘n dp-meting ontwerp vir ‘n Android-programuitleg, hoef u nie presies te weet wat die metings is vir elke toestel wat daardie uitleg gaan vertoon nie. Die toestel ken sy eie vermenigvuldiger en pas dit toe op die dp-waarde, sodat dit u ontwerp outomaties op die beoogde grootte sal lewer. Daar is meer hiervan in die dokumentasie vir Android-ontwikkelaars.

As u punte vir iOS ontwerp, moet u net weet dat sommige Apple-toestelle ‘n punt as 1-pixel-vierkant vertoon, sommige vertoon dit as 4 pixels vierkantig, en ander vertoon dit as 9 pixels-vierkant. Met ander woorde, die puntmeting is onderhewig aan ‘n vermenigvuldiger van 1, 2 of 3 om by die vereiste skermoplossing vir enige iOS-toestel te pas.

Gebruik Android-skermdigtheidskwalifiseerders

Elke Android-toestel word in kategorieë of emmers gekategoriseer volgens die skermdigtheid. Daar is duisende verskillende toestelle daarbuite, so hierdie konsep help om die voorbereidingswerk van ‘n ontwerper te vereenvoudig deur die toestelle wat hulle benodig om beelde te skep, te verklein.

As u ‘n beeld vir Android skep, soos ‘n app-ikoon, is daar ses kwalifiseerders wat u moet weet:

  • Laag (LDPI): enige toestel tot 120 DPI, vermenigvuldiger van 0,75
  • Medium (MDPI): tussen 120 en 160 DPI, vermenigvuldiger van 1 (basisdigtheid)
  • Hoog (HDPI): tussen 160 en 240 DPI, vermenigvuldiger van 1,5
  • Ekstra-hoog (XHDPI): 240 tot 320 DPI, vermenigvuldiger van 2
  • Ekstra-ekstra-hoog (XXHDPI): 320 tot 480 DPI, vermenigvuldiger van 3
  • Ekstra-ekstra-ekstra-hoog (XXXHDPI): 480 tot 640 DPI, vermenigvuldiger van 4.

As u u appprente of -ikone skep, plaas dit eenvoudig in gidse volgens die emmers wat u gemaak het. Saam met die dp-metings vir die uitleg wat u gemaak het, sal Android outomaties die beste prente vir die werk kies.

Ontwerp vir aanraking

Daar is een laaste stuk in die DPI-legkaart, en dit is die verskil tussen raakskerms en gewone skerms. Alhoewel dit nie direk met DPI verband hou nie, is dit ‘n goeie ding om te oorweeg.

Grafieke lyk natuurlik dieselfde op aanraakskerms of nie-aanraakskerms, as daar aanvaar word dat hulle dieselfde skermoplossing het. Maar daar is ‘n baie belangrike verskil: mense navigeer nie op dieselfde manier nie. ‘N Vingerkraan is baie minder presies as ‘n muiswyser.

Raakdoelwitte is 44x44pt in iOS en 48x48pt vierkante vir Android. U moet al u navigasie groter maak en die afstand daar rondom vergroot, om die moontlikheid van foute te vermy.

hulpbronne

  • Omskep DP na PPI: ‘n handleiding vanaf die Android-webwerf vir ontwikkelaars
  • Pixplicity DP na PPI-omskakelaar: ‘n uitstekende sakrekenaar en omskakelaar
  • Wenke vir ontwerpers: kom meer te wete oor Android se digtheidskwalifiseerders en dp-berekeninge
  • Riglyne vir mobiele mobiele toeganklikheid van BBC oor aanrakingsdoelgrootte: Hierdie artikel bied uitstekende wenke vir beste praktyk oor die ontwerp van toeganklike mobiele uitlegte in HTML
  • Riglyne vir iOS-ontwerp: dek resolusie, downsampling, ikone, tipografie, standaarduitlegkomponente en outomatiese ikooneffekte.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map