Retina Display Resolution Design: Tippek és trükkök a felhasználói felület tervezőinek

a Vandelay Design kártérítést kaphat a webhelyünkön szereplő vállalatoktól, termékektől és szolgáltatásoktól. További részletekért, kérjük, olvassa el a közzétételi oldalunkat.

a hi-res okostelefonok és a retina iMac megjelenésével nyilvánvalóvá vált, hogy a web & mobil tervezőknek figyelembe kell venniük a retina kijelzőket a tervezési folyamat során. Több eszköz jön le a polcról egy retina kijelző felbontással, amely több pixelt csoportosít ugyanabba a fizikai képernyőtérbe.

ez azt jelenti, hogy a tartalom élesebb lesz, ha megfelelően tervezték. Tehát hogyan kell egy UI tervezőnek dolgoznia a retina képernyők kezelésén? Milyen jelenlegi technológia áll rendelkezésre, és mi a legjobb módja a legnagyobb felhasználói bázis kezelésének?

szeretném bemutatni a legmegbízhatóbb módszereket a retina/hi-dpi képernyők kezelésére és az éppen működő interfészek létrehozására. Ha követi ezt az útmutatót, akkor biztos lehet benne, hogy elhagyja a vonatkozó tippeket és gyakorlati megoldásokat a retina display conundrum számára.

13" 15 " MacBook felbontás

Retina eszközök kezelése

az első lépés a képernyőmegjelenítések ellenőrzése a hi-DPI felbontások alapján. Most, hogy egyes eszközök @3x méretűek, a képek megjelenítése előtt ellenőrizni kell számos képernyőfelbontást. A @3x képekkel mindig biztonságban lehet, de sokkal nagyobbak is, és nagyobb sávszélességet igényelnek a letöltéshez.

ez az ellenőrzés elvégezhető srcset de sok különböző módszerek segítségével JavaScript is. Nézze meg ezt a bemutatót további információkért.

egy szép trükk a retina-kész ikonok, hogy egy ingyenes iconfont helyett bitmap képeket. A Font Awesome egy nagyon népszerű választás, amely teljesen ingyenes, nyílt forráskódú,és ikonok könyvtárát kínálja.

betűtípus awesome icons homepage

egy másik választás az SVG képek használata bitképek helyett. Ezek az SVG-k teljesen skálázható Vektorok, amelyek lassan teljes böngésző támogatást nyertek.

caniuse svg ellenőrzés

az egyetlen nehézség az SVG-k tervezése a semmiből, és a megfelelő exportálás megtanulása, ami sokkal bonyolultabb lehet, mint pusztán a PNG-k vagy a JPEG-k használata. Plusz SVG nem hasznos részletes képeket, mint a fényképek, mivel ez tényleg egy vektor fájltípus.

de SVG több hely egyéni animáció, amely megjeleníti éles minden felbontásban.

a cél a fájltípusok és a böngésző ellenőrzése eseti alapon. Egyes képek jobbak, mint a JPG-k, egyes webhelyek pedig jobbak a CSS vs JS retina ellenőrzésekkel. Én személy szerint jobban szeretem a CSS-t, de azt javaslom, hogy próbálja meg mindkettőt megnézni, amit jobban szeret.

CSS háttérképek

az egyedi hátterek kezelésének legegyszerűbb módja a retina háttérképek használata a háttérméret tulajdonság használatával.

gyakran ez a leggyorsabb módja a retina képek ellenőrzésének, mert minden eszközön működhetnek, még a nem retina eszközökön is. Nem árt, ha túl optimalizált kép van a CSS-ben, ha nem bánja a meghosszabbított betöltési időket.

az alternatív módszer a különböző CSS fájlok betöltése JavaScript-ellenőrzések vagy háttérkiszolgáló-ellenőrzések alapján.

de talán a CSS kezelésének legjobb módja a CSS retina média lekérdezés. Ezek a lekérdezések ellenőrzik a pixelsűrűséget, és különböző háttérképeket töltenek be ezekhez az eszközökhöz(a háttér méretének beállítása is).

a CSS általában a legegyszerűbb módja a képek kezelésének, de nem használható postán lévő képekhez. Ezek sokkal trükkösebbek, vagy a lehető legnagyobb felbontással kell feltölteni, vagy JavaScripttel frissíteni.

ha nem annyira foglalkozik a betöltési időkkel, akkor csak az összes kép legnagyobb felbontásával járjon. Ha nem, akkor a @2x és a @3x képeket manuálisan szeretné feltölteni egy ingyenes JavaScript könyvtárral, például a Retina-val.js.

JavaScript ellenőrzések

ha a legtöbb ellenőrzést szeretné elérni a retina felbontású tartalom felett, akkor JavaScriptre van szüksége. A legtöbb látogató JS kódot futtat, és ez a legegyszerűbb módja a felbontások felismerésének a beépített JavaScript módszerekkel.

rengeteg ingyenes oktatóanyagot talál a JavaScript retina kijelzők észleléséhez, de ez csak a csata fele. Miután megismerte a képernyő felbontását, ennek megfelelően frissítenie kell a képeket.

javaslom egy előre elkészített megoldás használatát, hogy időt és fejfájást takarítson meg a folyamat során.

a fejlesztők soha nem akarják újra feltalálni a kereket. Tehát, ha valaki más már megoldotta ezt a problémát, miért kellene a semmiből indulnia?

az egyetlen ok, hogy roll a saját megoldás, ha szükség van az egyéni funkciókat. Ebben az esetben nézze meg az alábbi linkeket, hogy megtudja, hogyan hajthatja végre az egyéni js retina ellenőrzést.

ellenkező esetben görgessen tovább, és ragadja meg a következő részben felsorolt ingyenes JS könyvtárak egyikét.

  • 5 Ways to Support nagy sűrűségű Retina kijelzők
  • Easy 2x retina képek a jQuery
  • szolgálja fel Retina grafika a honlapon

nyílt forráskódú Retina eszközök

több tucat egyedi retina eszközök kimutatására és kezelésére retina képek. Ezeket nem mindig a legkönnyebb megvalósítani, de hosszú távon sokkal boldogabbá tehetik a közönséget.

tehát melyiket válassza az induláshoz? Tényleg nincs rossz válasz.

szeretném bemutatni a legnépszerűbb eszközöket, és lehetőséget adni arra, hogy kiválassza azt, ami a legjobban megfelel a webhelyének.

Retina.js

retinajs nyílt forráskódú javascript

a Retina.a js library egy ingyenes, nyílt forráskódú JavaScript kódbázis, amely automatikusan felismeri a retina felbontásokat és a képernyőméreteket. A szkript azt is ellenőrzi, hogy van-e meglévő nagy felbontású kép az apple tervezési irányelveinek megfelelően, és ha igen, akkor a hi-res verzió megjelenítésére vált.

az elnevezési konvenciók a Fájltípus előtt @2x utótagot követnek. Tehát, ha van my_image.jpg akkor is szeretné, hogy [email protected] ugyanabban a mappában.

ez az egyik legegyszerűbb szkript, mert valójában csak plug and play. De a retina tartalmának némi ismeretét is megköveteli, hogy tökéletesen működjön. Ha csak most kezded el, ez egy nagyszerű szkript, és nem tévedhet el az alapértelmezett funkcióval.

jQuery Retina

jQuery js retina plugin

egy másik lehetőség a jQuery Retina, amelyet a jQuery könyvtár működtet. Ez kicsit másképp működik, mert HTML5 adatattribútumokon fut.

egyszerűen átad egy kép URL-értékét a data-retina attribútumnak minden olyan képcímkében, amelyhez retina kép alternatíva szükséges. Több kemény kódolást igényel, de az egyéni opciókkal is a legegyszerűbb visszagörgetni. A GitHub oldalon további információk találhatók a telepítés alapvető lépéseiről.

WP Retina 2x

wp WordPress retina @ 2x bővítmény

ha WordPress felhasználó vagy, akkor a WP Retina 2x nagyszerű alternatíva lehet A GitHub js plugin hozzáadásához. A wp Retina plugin közvetlenül működik a WordPress-szel, hogy ellenőrizze a retina méretű képeket, és automatikusan helyettesíti őket.

ez egy másik plug-and-play megoldás, ahol csak aktiválja a plugint, és hagyja futni. Szuper könnyű használni, és határozottan tiszta megoldás a nem technikai WP felhasználók számára.

sűrű.js

densejs plugin jquery

amit a legjobban szeretek a sűrűben.a js library a különböző eszközarányok támogatása. Nem minden retina kijelző egyszerűen 2x méretű. Más arányok lehetnek 1,5 x vagy 3x.

ez a plugin automatikusan felismeri, hogy melyik képernyő sűrűségét használja, és ennek megfelelően állítja be a képeket. Rengeteg lehetőség van, így a testreszabás nem jelent problémát. Nézze meg a GitHub-ot az induláshoz, és az online dokumentumokat további információkért.

ha több retina megjelenítési erőforrást keres, akkor ezeket a bővítményeket is ajánlom.

  • CSS média lekérdezések iPad-ekhez & iPhone-ok
  • adaptív képek HTML-ben
  • Swipebox jQuery Lightbox
  • grails Retina Images Plugin
  • reszponzív Képmegoldás kiválasztása

Remélhetőleg ez az anyag több mint elegendő hogy segítsen kezelni a képeket és a média retina kijelzők. Mivel a CSS automatikusan méretezi az összes felbontást, valójában nem kell aggódnia olyan dolgok miatt, mint a margók vagy az oldalszélesség.

de az oldalon lévő adathordozókat, például az ikonokat és a fényképeket egyedi módon kell megtervezni a retina eszközökhöz.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.