Vodič za oblikovalca za DPI – Pretvarjanje v velikosti realnega sveta

Razkritje: Vaša podpora pomaga pri vzdrževanju spletnega mesta! Za nekatere storitve, ki jih priporočamo na tej strani, zaslužimo naročnino.


Na spletu DPI pomeni pik gostote na palec. PPI preprosto pomeni pike na palec. (Čeprav DPI izvira iz tiskarske industrije, se zaradi modernizirane definicije pogosto uporablja namesto PPI v spletu.)

Ne glede na izvirnost, ki jo želite, morate razumeti, kako nastavitve DPI vplivajo na to, kako bodo vaše grafike prikazane na zaslonu, če oblikujete spletna mesta ali aplikacije.

Neuradni standard grafičnega oblikovanja za splet je 72 DPI. To je bila Photoshopova standardna nastavitev DPI v času prvega računalnika Mac, 128K. (Tu je lepa primerjava gostote slikovnih pik 128K v primerjavi z iPadom.)

Z uporabo 72 DPI je bil tisk bolj zanesljiv. In 72 DPI se je zataknilo pri nas, pravilno ali napačno.

V praksi ima večina naprav, ki jih uporabljamo, precej višji DPI kot 72, kar predstavlja veliko izzivov. Na srečo obstajajo znane konvencije, ki vam bodo pomagale pri razvoju vašega dizajna.

Zakaj je pomembna ločljivost zaslona

Predstavljajte si, da imate dve napravi enake fizične velikosti. Naprava 1 ima zaslon 72 DPI. Naprava 2 ima zaslon 144 DPI.

Če zasnovo oblikujete pri zaslonu 72 DPI, se bo slika prikazala v točno isti velikosti, kot ste jo načrtovali na zaslonu 72 DPI. Toda na zaslonu 144 PPI bo za polovico manjši, kot ste ga nameravali, saj ima zaslon dvakrat več slikovnih pik.

Ne pozabite: fizična velikost sploh ne vpliva na DPI, le da so manjši zasloni cenejši za izdelavo, zato imajo ponavadi višji DPI kot veliki zasloni. V današnjih napravah je zelo veliko odstopanja v DPI, tudi za naprave podobne velikosti:

  • Apple Cinema Display: 99
  • Microsoftova površina: 148
  • Amazon Kindle Fire 7 ″: 170
  • Apple 12 ″ MacBook: 226
  • Potni list BlackBerry: 453
  • Samsung Galaxy S7: 576
  • Sony Xperia Z5 Premium: 801.

(Takoj lahko ugotovite, kakšen je DPI vašega zaslona, ​​da vidite, kako se primerja.)

Če tega niste naredili v svojih dizajnih, bi bila vaša slika 72 DPI drobna na Sony Xperia Z5 Premium. Zato morate vedeti, kako se spopasti z velikimi razlikami v ločljivosti pikslov.

Ne zanašajte se na blagovno znamko ali trženje, da bi na kakršen koli dosleden način opisovali ločljivost zaslona. Na primer, Apple-jeva blagovna znamka Retina opisuje veliko različnih gostot zaslona, ​​odvisno od naprave, ki jo gledate. Najnižji prikaz mrežnice je 218 DPI, najvišji pa več kot 400.

Za razvoj doslednih modelov potrebujete drugačen pristop.

Uporaba Dp in točk za preprosto skaliranje

Ko razumete merske enote v iOS-u in Androidu, lahko meritve slikovnih pik v celoti ne upoštevate v svojem dizajnu.

Namesto tega lahko uporabite koncept virtualnih pik ali CSS pik:

Pri Androidu in iOS-u je to nekoliko drugače:

  • dp pomeni neodvisen slikovni pik ali gostoto neodvisen. Uporablja se v sistemu Android. En dp meri 1/160 palca.
  • Točke so enakovredne za iOS. Ena točka meri 1/163 palca.

Medtem ko so razlike v gostoti majhne, ​​so sistemi zelo podobni.

Če oblikujete z meritvijo dp za postavitev aplikacije za Android, vam ni treba natančno vedeti, kakšne so meritve za vsako napravo, ki bo prikazala to postavitev. Naprava pozna svoj množitelj in ga uporabi za vrednost dp, zato bo samodejno upodobil vašo obliko v predvideni velikosti. Več o tem je v dokumentaciji za razvijalce za Android.

Če oblikujete točke za iOS, morate vedeti, da nekatere naprave Apple prikazujejo točko kot kvadrat v 1 sliki pik, nekatere prikazujejo v kvadratku 4 slikovnih pik, nekatere pa 9 kvadratnih pik. Z drugimi besedami, za merjenje točke velja množitelj 1, 2 ali 3, da se prilega zahtevani ločljivosti zaslona za katero koli napravo iOS.

Uporaba kvalifikatorjev gostote zaslona Android

Vsaka naprava Android je razvrščena v kategorije ali vedra glede na gostoto zaslona. Na tisoče je različnih naprav, zato ta koncept pomaga poenostaviti oblikovalčevo pripravo, tako da zoži naprave, ki jih potrebujejo za ustvarjanje slik.

Ko ustvarite sliko za Android, kot je ikona aplikacije, morate vedeti šest kvalifikatorjev:

  • Nizka (LDPI): katera koli naprava do 120 DPI, množitelj 0,75
  • Srednja (MDPI): med 120 in 160 DPI, množitelj 1 (osnovna gostota)
  • Visoka (HDPI): med 160 in 240 DPI, množitelj 1,5
  • Zelo visoko (XHDPI): 240 do 320 DPI, množitelj 2
  • Ekstra-ekstra-visok (XXHDPI): 320 do 480 DPI, množitelj 3
  • Extra-extra-extra-high (XXXHDPI): 480 do 640 DPI, množitelj 4.

Ko ustvarite slike ali ikone aplikacij, jih preprosto vstavite v mape v skladu z vedri, ki ste jih ustvarili. Android bo skupaj z meritvami dp za postavitev, ki ste jo ustvarili, samodejno izbral najboljše slike za opravilo.

Oblikovanje za dotik

V sestavljanki DPI je en zadnji del in to je razlika med zasloni na dotik in običajnimi zasloni. Čeprav ni neposredno povezano z DPI, je dobro razmisliti.

Grafika je očitno enaka na zaslonih na dotik ali na dotik, če nimajo enake ločljivosti zaslona. Vendar je zelo pomembna razlika: ljudje jih ne premikajo enako. Dotikanje prsta je veliko manj natančno kot kazalec miške.

Cilji na dotik so v iOSu 44x44pt, v Androidu pa 48x48pt. Da bi se izognili možnosti napak, boste morali povečati svojo navigacijo in povečati razmik okoli nje.

Viri

  • Pretvarjanje DP v PPI: vodnik s spletnega mesta Android Developer
  • Pixplicity DP v PPI pretvornik: Odličen kalkulator in pretvornik
  • Nasveti za oblikovalce: Več o Androidovih kvalifikatorjih gostote in izračunih dp
  • BBC-jeve smernice za dostopnost mobilnih telefonov glede velikosti ciljev na dotik: Ta članek ponuja odlične nasvete za najboljše prakse o oblikovanju dostopnih mobilnih postavitev v HTML
  • Smernice za oblikovanje iOS: Zajema ločljivost, zmanjšanje vzorca, ikone, tipografijo, komponente standardne postavitve in samodejne učinke ikon.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me