Retina Display Resolution Design: Tips & Tricks For UI Designers

Vandelay Design voi saada korvausta yrityksiltä, tuotteilta ja palveluilta, joita sivustollamme käsitellään. Lisätietoja, Katso paljastus sivu.

hi-res-älypuhelimien ja retina-iMacin myötä on käymässä ilmeiseksi, että web & mobiilisuunnittelijoiden on otettava retina-näytöt huomioon suunnitteluprosessissaan. Hyllyltä on tulossa lisää laitteita, joissa on retina-näytön resoluutio, joka ryhmittelee useita pikseleitä samaan fyysiseen näyttötilaan.

tämä tarkoittaa, että sisältö näyttää terävämmältä, jos se on suunniteltu oikein. Joten miten käyttöliittymän suunnittelija työskentelee käsitellä verkkokalvon näytöt? Mitä nykyinen teknologia on saatavilla ja mikä on paras tapa käsitellä suurin userbase?

haluaisin kattaa luotettavimmat menetelmät retina / hi-dpi-näyttöjen käsittelyyn ja käyttöliittymien luomiseen, jotka vain toimivat. Jos noudatat yhdessä tämän oppaan voit varmasti kävellä pois soveltuvia vinkkejä ja käytännön ratkaisuja retina näyttö arvoitus.

13" ja 15" Macbook-päätöslauselmat

Retina-laitteiden käsittely

ensimmäinen vaihe on hi-dpi-resoluutioihin perustuvien näyttöjen tarkistaminen. Nyt kun joillakin laitteilla on @3x-koko, kannattaa tarkistaa useita näyttötarkkuuksia ennen kuvien näyttämistä. Voit aina olla turvassa @3x-kuvien kanssa, mutta ne ovat myös paljon suurempia ja vaativat enemmän kaistanleveyttä lataamiseen.

tämä tarkistus voidaan tehdä srcsetillä, mutta myös JavaScriptiä käytetään monin eri tavoin. Tutustu opetusohjelma lisätietoja.

yksi kiva kikka retina-ready-kuvakkeille on käyttää vapaata iconfontia bittikarttakuvien sijaan. Font Awesome on erittäin suosittu valinta, joka on täysin ilmainen, avoin lähdekoodi, ja tarjoaa kirjaston kuvakkeet valita.

font awesome icons Kotisivu

toinen vaihtoehto on käyttää SVG-kuvia bittikarttojen sijaan. Nämä SVGs ovat täysin skaalautuvia vektoreita, jotka ovat hitaasti saaneet täyden selaintuen.

caniuse svg check

ainoa vaikeus on suunnitella SVGs tyhjästä ja oppia viemään niitä oikein, joka voi olla mutkikkaampi kuin vain käyttämällä PNGs tai JPEG. Plus SVG ei ole hyödyllinen yksityiskohtaisia kuvia, kuten valokuvia, koska se on todella vektori tiedostotyyppi.

mutta SVGs: ssä on enemmän tilaa kustomoidulle animaatiolle, joka näyttää terävyyttä kaikilla resoluutioilla.

tavoitteena on päättää tiedostotyypit ja selaimen tarkistukset tapauskohtaisesti. Jotkut kuvat ovat parempia kuin JPGs ja jotkut sivustot ovat parempia CSS vs JS retina tarkistuksia. Itse mieluummin CSS, mutta suosittelen yrittää molemmat nähdä, mitä haluat.

CSS-taustakuvat

yksinkertaisin tapa käsitellä mukautettuja taustoja on retina-taustakuvilla käyttäen taustakoko-ominaisuutta.

tämä on usein nopein tapa tarkistaa retina-kuvat, koska ne voivat toimia kaikilla laitteilla, myös muilla kuin retina-laitteilla. Se ei haittaa olla yli-optimoitu kuva CSS jos et välitä laajennettu latausajat.

vaihtoehtoinen tapa olisi ladata erilaisia CSS-tiedostoja JavaScript-tarkistusten tai backend-palvelimen tarkistusten perusteella.

mutta ehkä paras tapa käsitellä CSS: ää on CSS retina media-kysely. Nämä kyselyt tarkistavat pikselitiheyden ja lataavat erilaisia taustakuvia kyseisille laitteille(säätäen myös taustakokoa).

CSS on yleensä yksinkertaisin tapa käsitellä kuvia, mutta sitä ei voi käyttää Post-kuviin. Nämä ovat paljon hankalampia ja pitäisi joko ladata korkeimmalla mahdollisella resoluutiolla tai päivittää JavaScript.

jos et ole yhtä huolestunut latausajoista, valitse kaikkien kuviesi Suurin resoluutio. Jos ei, sinun kannattaa ladata @2x ja @3x kuvia manuaalisesti ilmainen JavaScript kirjasto, kuten Retina.js.

JavaScript Checks

jos haluat eniten kontrolloida retinan resoluutiosisältöä, tarvitset JavaScriptin. Useimmat kävijät ajaa JS koodi ja se on helpoin tapa havaita päätöslauselmat sisäänrakennettu JavaScript menetelmiä.

löydät paljon ilmaisia tutoriaaleja JavaScript retina-näyttöjen havaitsemiseen, mutta tämä on vasta puolet taistelusta. Kun tiedät näytön resoluution, sinun täytyy päivittää kuvat vastaavasti.

suosittelen käyttämään valmiiksi rakennettua ratkaisua, joka säästää aikaa ja päänsärkyä prosessin aikana.

kehittäjät eivät koskaan halua keksiä pyörää uudelleen. Joten jos joku muu on jo ratkaissut tämän ongelman, miksi sinun pitäisi vaivautua aloittamaan tyhjästä?

ainoa syy rullata oma ratkaisu on, jos tarvitset mukautettuja toimintoja. Siinä tapauksessa tutustu alla olevista linkeistä, miten voit toteuttaa mukautetun JS retina-tarkistuksen.

muuten jatka vierittämistä ja nappaa yksi seuraavasta osiosta listaamistani ilmaisista JS-kirjastoista.

  • 5 tapoja tukea korkean tiheyden Retina-näyttöjä
  • Easy 2x retina-kuvia jQuery
  • tarjoile Retina-grafiikkaa verkkosivustollesi

avoimen lähdekoodin Retina-työkaluja

verkkokalvokuvien havaitsemiseen ja hallintaan on kymmeniä mukautettuja retina-työkaluja. Nämä eivät ole aina helpoin toteuttaa, mutta ne voivat tehdä yleisön paljon onnellisempi pitkällä aikavälillä.

joten kumpi sinun pitäisi valita aloittaaksesi? Väärää vastausta ei todellakaan ole.

haluaisin tarjota joitakin suosituimpia työkaluja ja antaa sinulle mahdollisuuden valita mikä tahansa toimii parhaiten sivustollasi.

Retina.js

retinajs avoimen lähdekoodin javascript

verkkokalvo.js library on ilmainen avoimen lähdekoodin JavaScript-koodebaasi, joka tunnistaa automaattisesti verkkokalvon resoluutiot ja näytön koot. Skripti tarkistaa myös, onko olemassa korkearesoluutioinen kuva Applen suunnitteluohjeiden mukaisesti, ja jos näin on, se siirtyy näyttämään hi-res-version.

nimeämiskäytäntöjä seuraa pääte @ 2x ennen tiedostotyyppiä. Joten jos sinulla on my_image.jpg haluat myös olla [email protected] samassa kansiossa.

tämä on yksi yksinkertaisimmista skripteistä, koska se todella on vain plug and play. Mutta se vaatii myös jonkin verran tietoa verkkokalvon sisällöstä, jotta se toimisi täydellisesti. Jos olet juuri pääsemässä alkuun, Tämä on todella hyvä käsikirjoitus ja et voi mennä vikaan oletustoiminnon kanssa.

jQuery Retina

jQuery JS retina-liitännäinen

toinen vaihtoehto on jQuery Retina powered by jQuery library. Tämä toimii hieman eri tavalla, koska se toimii HTML5 tietojen attribuutteja.

voit yksinkertaisesti siirtää kuvan URL-Arvon data-retina-attribuutille jokaisessa kuvamerkissä, joka vaatii retina – kuvavaihtoehdon. Se ei vaadi enemmän kovaa koodausta, mutta se on myös helpoin rullata takaisin mukautettuja vaihtoehtoja. GitHub-sivulla on lisätietoja asennuksen perusvaiheista.

WP Retina 2x

WP wordpress retina @2x liitännäinen

jos olet WordPress käyttäjä sitten WP Retina 2x voi olla hyvä vaihtoehto lisäämällä JS plugin GitHub. WP Retina plugin toimii suoraan WordPress tarkistaa verkkokalvon kokoinen kuvia ja korvaa ne automaattisesti.

se on toinen plug-and-play-ratkaisu, jossa vain aktivoidaan plugin ja annetaan sen toimia. Erittäin helppokäyttöinen ja ehdottomasti puhdas ratkaisu ei-teknisille WP-käyttäjille.

tiheä.js

densejs-liitännäinen jquery

se, mistä pidän eniten tiheässä.js-kirjasto on tuki vaihteleville laitesuhteille. Kaikki retina-näytöt eivät ole vain 2x kokoa. Muita suhdelukuja voivat olla 1,5 x tai 3x.

tämä liitännäinen tunnistaa automaattisesti käytettävän näytön tiheyden ja säätää kuviasi sen mukaisesti. Vaihtoehtoja on paljon, joten räätälöinti ei ole ongelma. Tutustu GitHub alkuun ja online docs lisätietoja.

jos etsit lisää retina-näytön resursseja, suosittelen myös näitä liitännäisiä.

  • CSS median kyselyt iPadeille & iPhonet
  • mukautuvat kuvat HTML: ssä
  • Swipebox jQuery Lightbox
  • Grails Retina Images Plugin
  • reagoivan Kuvaratkaisun valitseminen

Toivottavasti tämä materiaali tarjoaa enemmän kuin tarpeeksi auttaa käsittelemään kuvia ja mediaa retina-näytöillä. Koska CSS automaattisesti skaalata kaikki päätöslauselmat sinun ei todellakaan tarvitse huolehtia asioita, kuten marginaalit tai sivun leveydet.

mutta sivumediat, kuten kuvakkeet ja valokuvat, täytyy räätälöidä retina-laitteille.

Vastaa

Sähköpostiosoitettasi ei julkaista.