Retina Display Resolution Design: tipy a triky pro UI designéry

Vandelay Design může obdržet náhradu od společností, produktů a služeb zahrnutých na našich stránkách. Pro více informací, naleznete na naší stránce zpřístupnění.

s příchodem hi-res smartphonů a retina iMac je zřejmé, že web & mobilní návrháři musí zvážit Retina displeje v jejich procesu návrhu. Další zařízení přicházejí z police s rozlišením displeje retina, které seskupuje více pixelů do stejného fyzického prostoru na obrazovce.

to znamená, že obsah bude vypadat ostřejší, pokud je navržen správně. Tak jak by měl UI designer pracovat na zpracování sítnice obrazovky? Jaká současná technologie je k dispozici a jaký je nejlepší způsob, jak zvládnout největší uživatelskou základnu?

chtěl bych pokrýt nejspolehlivější metody pro manipulaci s sítnicemi/hi-DPI a vytváření rozhraní, která fungují. Pokud budete postupovat podle této příručky, určitě odejdete s příslušnými tipy a praktickými řešeními hlavolamu displeje sítnice.

13" a 15 " rozlišení MacBooku

manipulace se zařízeními sítnice

prvním krokem je kontrola zobrazení na základě rozlišení hi-DPI. Nyní, když některá zařízení mají velikost @3x, budete chtít před zobrazením obrázků zkontrolovat několik rozlišení obrazovky. S obrázky @3x můžete být vždy v bezpečí, ale jsou také mnohem větší a vyžadují větší šířku pásma ke stažení.

tuto kontrolu lze provést pomocí srcset, ale existuje mnoho různých metod používajících JavaScript. Podívejte se na tento návod pro více informací.

jedním z pěkných triků pro ikony připravené na sítnici je použití bezplatného iconfont místo bitmapových obrázků. Font Awesome je velmi populární volbou, která je zcela zdarma, open source, a poskytuje knihovnu ikon z čeho vybírat.

písmo úžasné ikony domovská stránka

další možností je použít SVG obrázky místo bitmap. Tyto svg jsou plně škálovatelné vektory, které pomalu získaly plnou podporu prohlížeče.

caniuse svg kontrola

jediným problémem je navrhování svg od nuly a naučit se je správně exportovat, což může být spletitější než jen pomocí PNG nebo JPEG. Plus SVG není užitečné pro detailní obrázky, jako jsou fotografie, protože je to opravdu vektorový typ souboru.

ale svg mají více prostoru pro vlastní animaci, která zobrazuje ostré ve všech rozlišeních.

cílem je rozhodovat typy souborů a kontroly prohlížeče případ od případu. Některé obrázky jsou lepší jako JPGs a některé webové stránky jsou lepší s CSS vs JS sítnice kontroly. Já osobně preferuji CSS, ale doporučuji zkusit oba, abyste viděli, co dáváte přednost.

CSS obrázky na pozadí

nejjednodušší způsob, jak zpracovat vlastní pozadí, je s obrázky na pozadí sítnice pomocí vlastnosti velikost pozadí.

Toto je často nejrychlejší způsob kontroly obrazů sítnice, protože mohou pracovat na všech zařízeních, dokonce i na zařízeních jiných než sítnice. Není na škodu mít v CSS příliš optimalizovaný obrázek, pokud vám nevadí prodloužené doby načítání.

alternativní metodou by bylo načtení různých souborů CSS na základě kontrol JavaScriptu nebo kontrol backend serveru.

ale možná nejlepší způsob, jak zvládnout CSS, je dotaz CSS retina media. Tyto dotazy kontrolují hustotu pixelů a načítají různé obrázky na pozadí pro tato zařízení(také upravují velikost pozadí).

CSS je obecně nejjednodušší způsob zpracování obrázků,ale nelze jej použít pro obrázky v postu. Jsou mnohem složitější a měly by být buď nahrány v nejvyšším možném rozlišení, nebo aktualizovány pomocí JavaScriptu.

Pokud nejste tak znepokojeni dobou načítání, stačí jít s největším rozlišením pro všechny vaše obrázky. Pokud tomu tak není, budete chtít nahrát @2x a @3x obrázky ručně pomocí bezplatné knihovny JavaScript, jako je Retina.js.

kontroly JavaScriptu

pokud chcete mít největší kontrolu nad obsahem rozlišení sítnice, budete potřebovat JavaScript. Většina návštěvníků spouští kód JS a je to nejjednodušší způsob, jak detekovat rozlišení pomocí vestavěných metod JavaScriptu.

najdete spoustu bezplatných tutoriálů pro detekci displejů sítnice JavaScript, ale to je jen polovina bitvy. Jakmile znáte rozlišení obrazovky, budete muset obrázky odpovídajícím způsobem aktualizovat.

doporučuji použít předem připravené řešení, které ušetří čas a bolesti hlavy během procesu.

vývojáři nikdy nechtějí znovu objevit kolo. Takže pokud někdo jiný již tento problém vyřešil, proč byste se měli obtěžovat začít od nuly?

jediným důvodem pro zavedení vlastního řešení je, pokud potřebujete vlastní funkce. V takovém případě se podívejte na níže uvedené odkazy a podívejte se, jak můžete implementovat vlastní kontrolu sítnice JS.

jinak pokračujte v posouvání a uchopte jednu z bezplatných knihoven JS, které jsem uvedl v další části.

  • 5 Způsoby, jak podporovat sítnice displeje s vysokou hustotou
  • snadné 2x sítnice obrazy s jQuery
  • servírujte sítnice grafiku na vaše webové stránky

Open Source sítnice nástroje

existují desítky vlastních sítnice nástrojů pro detekci a správu sítnice obrazy. Ty nejsou vždy nejjednodušší implementovat, ale mohou vaše publikum mnohem šťastnější v dlouhodobém horizontu.

takže které byste se měli rozhodnout začít? Opravdu neexistuje žádná špatná odpověď.

chtěl bych poskytnout některé z nejpopulárnějších nástrojů a dát vám šanci vybrat, co nejlépe funguje pro váš web.

sítnice.js

retinajs open source javascript

sítnice.js knihovna je zdarma open source JavaScript codebase, který automaticky detekuje rozlišení sítnice a velikosti obrazovky. Skript také zkontroluje, zda existuje obrázek s vysokým rozlišením podle pokynů pro návrh společnosti apple, a pokud ano, přepne se na zobrazení verze hi-res.

konvence pojmenování následují příponu @2x před typem souboru. Takže pokud máte my_image.jpg budete také chtít mít [email protected] ve stejné složce.

Toto je jeden z nejjednodušších skriptů, protože je to opravdu jen plug and play. Ale také vyžaduje určité znalosti obsahu sítnice, aby to fungovalo perfektně. Pokud právě začínáte, je to opravdu skvělý skript a nemůžete se pokazit s výchozí funkčností.

jQuery Retina

jQuery JS retina plugin

další možností je jQuery Retina poháněná knihovnou jQuery. Funguje to trochu jinak, protože běží na datových atributech HTML5.

jednoduše předáte hodnotu URL obrázku atributu data-retina v každé značce obrázku, která vyžaduje alternativu obrazu sítnice. To vyžaduje více tvrdé kódování, ale je to také nejjednodušší vrátit zpět s vlastními možnostmi. Stránka GitHub obsahuje více informací se základními kroky pro instalaci.

WP Retina 2x

wp wordpress retina @2x plugin

pokud jste uživatel WordPress pak WP Retina 2x může být skvělou alternativou k přidání JS plugin od GitHub. Plugin WP Retina pracuje přímo s WordPress, aby zkontroloval obrázky velikosti sítnice a automaticky je nahradil.

je to další plug-and-play řešení, kde stačí aktivovat plugin a nechat ho běžet. Super snadné použití a rozhodně čisté řešení pro netechnické uživatele WP.

hustá.js

densejs plugin jquery

co se mi nejvíce líbí na hustém.JS knihovna je podpora pro různé poměry zařízení. Ne všechny Retina displeje jsou prostě 2x velikost. Jiné poměry mohou zahrnovat 1,5 x nebo 3x.

tento plugin automaticky detekuje, která hustota obrazovky se používá, a odpovídajícím způsobem upraví vaše obrázky. Existuje spousta možností, takže přizpůsobení není žádný problém. Podívejte se na GitHub, abyste mohli začít, a online dokumenty pro více informací.

pokud hledáte více zdrojů zobrazení sítnice, doporučuji také tyto pluginy.

  • CSS mediální dotazy pro iPady & iPhony
  • adaptivní obrázky v HTML
  • Swipebox jQuery Lightbox
  • grails Retina Images Plugin
  • výběr citlivého obrazového řešení

doufejme, že tento materiál nabízí více než dost, aby vám pomohl zpracovat obrázky a média na displejích sítnice. Vzhledem k tomu, CSS bude automatické měřítko pro všechna rozlišení opravdu nemusíte se starat o věci, jako jsou okraje nebo šířky stránek.

ale média na Stránce, jako jsou ikony a fotografie, budou muset být navržena na míru pro zařízení sítnice.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.