Retina-Skjermoppløsning Design: Tips Og Triks For UI-Designere

Vandelay Design kan motta kompensasjon fra selskaper, produkter og tjenester som dekkes på nettstedet vårt. For mer informasjon, vennligst se Vår Avsløring side.

med adventen av høyoppløselige smarttelefoner og retina iMac blir det tydelig at web & mobile designere må vurdere retina-skjermer i designprosessen. Flere enheter kommer fra hyllen med en retina-skjermoppløsning som grupperer flere piksler i samme fysiske skjermplass.

dette betyr at innholdet vil se skarpere ut hvis det er riktig utformet. Så hvordan skal EN UI-designer jobbe for å håndtere retina-skjermer? Hva dagens teknologi er tilgjengelig, og hva er den beste måten å håndtere den største userbase?

jeg vil gjerne dekke de mest pålitelige metodene for å håndtere retina / hi-DPI-skjermer og lage grensesnitt som bare fungerer. Hvis du følger med denne veiledningen, vil du være sikker på å gå bort med gjeldende tips og praktiske løsninger på retina display conundrum.

13" 15 " Macbook-Oppløsning

Håndtering Av Retina-Enheter

det første trinnet er å sjekke skjermdisplayer basert på hi-DPI-oppløsninger. Nå som noen enheter har @3x størrelser, vil du sjekke en rekke skjermoppløsninger før du viser bilder. Du kan alltid være trygg med @3x-bilder, men de er også mye større og krever mer båndbredde for å laste ned.

denne sjekken kan gjøres med srcset, men Det er også mange forskjellige metoder som bruker JavaScript. Sjekk ut denne opplæringen for mer info.

et fint triks for retina-klare ikoner er å bruke en gratis iconfont i stedet for punktgrafikkbilder. Font Awesome er et veldig populært valg som er helt gratis, åpen kildekode, og gir et bibliotek med ikoner å velge mellom.

font awesome ikoner hjemmeside

Et annet valg er å bruke SVG-bilder i stedet for bitmaps. Disse Svgene er fullt skalerbare vektorer som sakte har fått full nettleserstøtte.

caniuse svg check

det eneste problemet er å designe SVGs fra bunnen av og lære å eksportere dem riktig, noe som kan være mer innviklet enn bare Å bruke Png eller Jpeg. Plus SVG er ikke nyttig for detaljerte bilder som fotografier, siden det egentlig er en vektorfiletype.

Men SVGs har mer plass til tilpasset animasjon som viser skarpe i alle oppløsninger.

målet er å bestemme filtyper og nettleserkontroller i hvert enkelt tilfelle. Noen bilder er bedre Som Jpg og noen nettsteder er bedre MED CSS vs js retina sjekker. JEG personlig foretrekker CSS, men jeg anbefaler å prøve begge for å se hva du foretrekker.

CSS Bakgrunnsbilder

den enkleste måten å håndtere egendefinerte bakgrunner er med retina bakgrunnsbilder ved hjelp av egenskapen bakgrunnsstørrelse.

dette er ofte den raskeste måten å sjekke retina-bilder fordi de kan fungere på alle enheter, selv ikke-retina-enheter. Det gjør ikke vondt å ha en over-optimalisert bilde I CSS hvis du ikke tankene de utvidede lastetider.

den alternative metoden ville være å laste inn FORSKJELLIGE CSS-filer basert På JavaScript-sjekker eller backend-serverkontroller.

Men kanskje den beste måten å håndtere CSS er MED EN CSS retina media query. Disse spørringene kontrollerer pikseltetthet og laster inn forskjellige bakgrunnsbilder for disse enhetene (justerer også bakgrunnsstørrelsen).

CSS er vanligvis den enkleste måten å håndtere bilder, men kan ikke brukes til in-post-bilder. Disse er mye vanskeligere og bør enten lastes opp med høyest mulig oppløsning eller oppdateres Med JavaScript.

hvis du ikke er så opptatt av lastetider, så bare gå med den største oppløsningen for alle bildene dine. Hvis ikke, vil du laste opp @2x og @3x bilder manuelt med et Gratis JavaScript-bibliotek som Retina.js.

JavaScript Sjekker

hvis du vil ha mest kontroll over retina oppløsning innhold så du trenger JavaScript. De fleste besøkende kjører js-kode, og det er den enkleste måten å oppdage oppløsninger med innebygde JavaScript-metoder.

du finner mange gratis opplæringsprogrammer for å oppdage JavaScript retina-skjermer, men dette er bare halvparten av kampen. Når du kjenner skjermoppløsningen, må du oppdatere bildene tilsvarende.

jeg anbefaler å bruke en forhåndsbygget løsning for å spare tid og hodepine under prosessen.

Utviklere vil aldri gjenoppfinne hjulet. Så hvis noen andre allerede har løst dette problemet, hvorfor skal du bry deg om å starte fra bunnen av?

den eneste grunnen til å rulle din egen løsning er hvis du trenger tilpasset funksjonalitet. I så fall sjekk ut linkene nedenfor for å se hvordan du kan implementere en tilpasset js retina-sjekk.

ellers fortsett å rulle og ta en av de gratis js-bibliotekene jeg har oppført i neste avsnitt.

  • 5 Måter Å Støtte Retina-Skjermer Med Høy Tetthet
  • Enkle 2x retina-bilder med jQuery
  • Tjene Opp Retina-Grafikk Til Nettstedet Ditt

Åpen Kildekode Retina-Verktøy

det finnes dusinvis av tilpassede retina-verktøy for å oppdage og administrere retina-bilder. Dette er ikke alltid det enkleste å implementere, men de kan gjøre publikum mye lykkeligere i det lange løp.

så hvilken bør du velge å komme i gang? Det er egentlig ikke noe feil svar.

jeg vil gjerne gi noen av de mest populære verktøyene og gi deg sjansen til å velge det som fungerer best for nettstedet ditt.

Netthinnen.js

åpen kildekode javascript

Netthinnen.js library er en gratis Åpen kildekode JavaScript kodebase som automatisk oppdager retina oppløsninger og skjermstørrelser. Skriptet sjekker også om det er et eksisterende høyoppløselig bilde etter apples designretningslinjer, og i så fall vil det bytte til å vise hi-res-versjonen.

Navnekonvensjoner følger et suffiks av @2x før filetypen. Så hvis du har my_image.jpg du vil også ha [email protected] i samme mappe.

Dette er et av de enkleste skriptene fordi det egentlig bare er plug and play. Men det krever også litt kunnskap om netthinnen innhold for å få det fungerer perfekt. Hvis du bare er i gang, er dette virkelig et flott skript, og du kan ikke gå galt med standardfunksjonaliteten.

Jquery Retina

jquery js retina plugin

Et annet alternativ er jQuery Retina drevet av jquery library. Dette fungerer litt annerledes fordi det kjører PÅ HTML5 dataattributter.

du sender bare en url-VERDI for bilde til data-retina-attributtet i hver bildetag som krever et retina-bildealternativ. Det krever mer hard koding, men det er også det enkleste å rulle tilbake med tilpassede alternativer. GitHub-siden har mer info med grunnleggende trinn for installasjon.

WP Retina 2x

wp wordpress retina @2x plugin

HVIS DU Er En WordPress-bruker, KAN WP Retina 2x være et godt alternativ til å legge TIL ET js-plugin fra GitHub. WP Retina plugin fungerer direkte Med WordPress for å se etter retina-størrelse bilder og erstatter dem automatisk.

Det er en annen plug-and-play-løsning der du bare aktiverer pluginet og lar det løpe. Super enkel å bruke og definitivt en ren løsning for ikke-tekniske wp brukere.

Tett.js

densejs plugin jquery

Det jeg liker mest Om Den Tette.js library er støtte for varierende enhetsforhold. Ikke alle retina-skjermer er bare 2x størrelsen. Andre forhold kan omfatte 1,5 x eller 3x.

dette pluginet registrerer automatisk hvilken skjermtetthet som brukes og justerer bildene dine tilsvarende. Det er mange alternativer, så tilpasning er ikke noe problem. Sjekk Ut GitHub å komme i gang og online dokumenter for mer informasjon.

hvis du leter etter flere retina-skjermressurser, anbefaler jeg også disse pluginene.

  • CSS Media Spørringer for iPads & iPhones
  • Adaptive Bilder I HTML
  • Swipebox jQuery Lightbox
  • Grails Retina Images Plugin
  • Velge En Responsiv Bildeløsning

Forhåpentligvis tilbyr dette materialet mer enn nok til å hjelpe deg med å håndtere bilder og medier på retina-skjermer. SIDEN CSS vil automatisk skalere for alle oppløsninger du egentlig ikke trenger å bekymre deg for ting som marginer eller sidebredder.

men medier på siden som ikoner og bilder må være spesialdesignet for retina-enheter.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.