Tervezői útmutató a DPI-hez – Átalakítás valós méretekké

Közzététel: Támogatása segít fenntartani a webhely működését! Az ezen az oldalon javasolt szolgáltatások némelyikén referenciadíjat keresünk.


Az interneten a DPI a sűrűség pixeleket hüvelykenként jelenti. A PPI egyszerűen a pixeleket hüvelykenként jelenti. (Noha a DPI a nyomtatásból származik, modernizált meghatározása miatt gyakran használják az interneten a PPI helyett.)

Bármelyik inicializálást részesíti előnyben, meg kell értenie, hogy a DPI-beállítások hogyan befolyásolják a képernyőn megjelenő grafika megjelenését, ha webhelyeket vagy alkalmazásokat tervez.

Az internetes grafikai tervezés nem hivatalos szabványa a 72 DPI. Ez volt a Photoshop szokásos DPI-beállítása az első Mac számítógép, a 128K napjain. (Íme egy szép összehasonlítás a 128K képpontsűrűségének és egy iPad készüléknek.)

A 72 DPI használatával a nyomtatás megbízhatóbb volt. És 72 DPI ragaszkodott hozzánk, helyesen vagy helytelenül.

A gyakorlatban sok általunk használt eszköz DPI-je jóval magasabb, mint a 72, ami sok kihívást jelent. Szerencsére vannak ismert konvenciók, amelyek segítenek a tervezés kidolgozásában.

Miért számít a képernyőfelbontás?

Képzelje el, hogy két azonos fizikai méretű eszközöd van. Az 1. eszköz képernyője 72 DPI. A 2. eszköz kijelzője 144 DPI.

Ha képet készít a 72 DPI-nél, akkor a kép pontosan olyan méretben jelenik meg, mint amit a 72 DPI-képernyőn tervezett. De a 144 PPI képernyőn a kívánt méret felére csökken, mert a képernyő kétszer annyi pixeltel rendelkezik.

Ne feledje: a fizikai méret egyáltalán nem befolyásolja a DPI-t, kivéve, hogy a kisebb képernyőket olcsóbban lehet előállítani, így általában nagyobb DPI-vel rendelkeznek, mint a nagy képernyők. A mai eszközökön hatalmas eltérések vannak a DPI-ben, még hasonló méretű eszközöknél:

  • Apple Cinema Display: 99
  • Microsoft felület: 148
  • Amazon Kindle Fire 7 ”: 170
  • Apple 12 ″ MacBook: 226
  • BlackBerry útlevél: 453
  • Samsung Galaxy S7: 576
  • Sony Xperia Z5 Premium: 801.

(Azonnal megtudhatja a képernyő DPI-jét, és megnézheti, hogyan hasonlítja össze.)

Ha nem ezt helyesbítette a terveiben, akkor a 72 DPI grafikája apró lenne a Sony Xperia Z5 Premium készüléken. Ezért kell tudnia, hogyan kell kezelni a pixel felbontás hatalmas különbségeit.

Ne támaszkodjon márkajelzésre vagy marketingre a képernyő felbontásának következetes leírására. Például az Apple Retina márkaneve sokféle megjelenítési sűrűséget ír le, attól függően, hogy milyen készüléket keres. A legalacsonyabb retina kijelző 218 DPI, a legmagasabb pedig több mint 400.

A következetes tervek kidolgozásához más megközelítésre van szüksége.

Dp és pontok használata az egyszerű méretezéshez

Miután megértette az iOS és az Android mértékegységeit, teljes mértékben figyelmen kívül hagyhatja a pixel mérését.

Ehelyett használhatja a virtuális pixelek vagy a CSS pixelek fogalmát:

Ez kissé eltér az Android vs iOS rendszeren:

  • A dp az eszközfüggetlen pixelt vagy sűrűségtől független pixelt jelenti. Androidon használják. Az egyik dp 1/160 inch-t méri.
  • A pontok ekvivalensek az iOS esetén. Az egyik pont egy hüvelyk 1/163-át méri.

Tehát, bár van egy apró különbség a sűrűségben, a rendszerek nagyon hasonlóak.

Ha egy Android alkalmazás elrendezéséhez dp mérést használ, akkor nem kell pontosan tudnia, hogy milyen mérések vannak minden olyan eszközön, amely ezt az elrendezést megjeleníti. Az eszköz ismeri a saját szorzót, és alkalmazza azt a dp értékre, így automatikusan a tervezett méretet fogja megjeleníteni. Erről bővebben az Android fejlesztői dokumentációban olvashat.

Ha iOS rendszerhez pontokat tervez, akkor csak annyit kell tudnia, hogy egyes Apple eszközök egy pontot 1 pixel négyzet alakban mutatnak, mások négy pixel négyzet alakban, mások pedig 9 pixel négyzet alakban jelennek meg. Más szavakkal: a pontmérést 1, 2 vagy 3 szorzónak kell alávetni, hogy megfeleljen az iOS-eszközökhöz szükséges képernyőfelbontásnak..

Az Android képernyősűrűség-minősítők használata

Minden Android készüléket kategóriákba vagy vödrökbe sorolnak a képernyő sűrűsége szerint. Több ezer különböző eszköz van odakint, tehát ez a koncepció segíti a tervező előkészítő munkájának egyszerűsítését azáltal, hogy szűkíti azokat az eszközöket, amelyekhez képeket kell létrehozniuk a.

Amikor létrehoz egy képet az Android-hoz, például egy alkalmazásikonhoz, hat minősítőt kell tudnia:

  • Alacsony (LDPI): bármilyen eszköz 120 DPI-ig terjedhet, szorzója 0,75
  • Közepes (MDPI): 120–160 DPI, 1 szorzó (alap sűrűség)
  • Magas (HDPI): 160 és 240 DPI között, szorzó 1,5
  • Rendkívül magas (XHDPI): 240-320 DPI, 2-es szorzó
  • Rendkívül extra (XXHDPI): 320 – 480 DPI, 3-szorzó
  • Extra extra, extra magas (XXXHDPI): 480–640 DPI, 4-es szorzó.

Az alkalmazás képeinek vagy ikonjainak létrehozásakor egyszerűen helyezze mappákba a létrehozott vödörnek megfelelően. A létrehozott elrendezés dp méréseivel együtt az Android automatikusan kiválasztja a munka legjobb képeit.

Tervezés érintésre

Van egy utolsó darab a DPI puzzle-ben, és ez a különbség az érintőképernyők és a normál kijelzők között. Jóllehet nem közvetlenül kapcsolódik a DPI-hez, érdemes megfontolni.

A grafika nyilvánvalóan ugyanaz néz ki az érintőképernyőn vagy a nem érintőképernyőn, feltételezve, hogy ugyanaz a képernyőfelbontás. De van egy nagyon fontos különbség: az emberek nem ugyanúgy navigálnak rájuk. Az ujjcsap sokkal kevésbé pontos, mint az egérmutató.

Az érintési célok 44x44pt az iOS-ban és 48x48pt-es négyzetek az Android számára. Az összes navigációt nagyobbá kell tennie, és növelnie kell a távolságot a körül, hogy elkerülje a hibák lehetőségét.

Erőforrások

  • A DP konvertálása PPI-re: Útmutató az Android fejlesztői webhelyről
  • Pixplicity DP – PPI konverter: Kiváló számológép és konverter
  • Tippek a tervezők számára: Tudjon meg többet az Android sűrűségmérőjéről és a dp-számításokról
  • BBC mobil akadálymentesség-iránymutatások az érintéses cél méretére vonatkozóan: Ez a cikk kiváló bevált gyakorlati tippeket tartalmaz a hozzáférhető mobil elrendezések HTML-ben történő megtervezéséhez
  • iOS tervezési irányelvek: Magában foglalja a felbontást, a levonást, az ikonokat, a tipográfiát, a standard elrendezési összetevőket és az automatikus ikonhatásokat.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me