Retina skærm opløsning Design: Tips & Tricks til UI designere

Vandelay Design kan modtage kompensation fra virksomheder, produkter og tjenester, der er omfattet på vores hjemmeside. For flere detaljer, se vores oplysningsside.

med fremkomsten af hi-res smartphones og retina iMac bliver det tydeligt, at mobile designere skal overveje retina-skærme i deres designproces. Flere enheder kommer fra hylden med en retina-skærmopløsning, der grupperer flere billedpunkter i det samme fysiske skærmplads.

dette betyder, at indholdet vil se skarpere ud, hvis det er designet korrekt. Så hvordan skal en UI-designer arbejde for at håndtere retina-skærme? Hvilken nuværende teknologi er tilgængelig, og hvad er den bedste måde at håndtere den største brugerbase på?

jeg vil gerne dække de mest pålidelige metoder til håndtering af retina/hi-DPI-skærme og skabe grænseflader, der bare fungerer. Hvis du følger med denne vejledning, vil du være sikker på at gå væk med gældende tips og praktiske løsninger til nethinden skærm Gåde.

13" og 15 " Macbook-opløsninger

håndtering af Retina-enheder

det første trin er at kontrollere skærmbilleder baseret på hi-DPI-opløsninger. Nu hvor nogle enheder har @3 størrelser, vil du kontrollere et antal skærmopløsninger, før du viser billeder. Du kan altid være sikker med @3 gange billeder, men de er også meget større og kræver mere båndbredde for at hente.

denne kontrol kan udføres med srcset, men der er også mange forskellige metoder ved hjælp af JavaScript. Tjek denne tutorial for mere info.

et godt trick til retina-ready ikoner er at bruge en gratis iconfont i stedet for bitmapbilleder. Font fantastisk er et meget populært valg, der er helt gratis, open source og giver et bibliotek med ikoner at vælge imellem.

skrifttype fantastiske ikoner hjemmeside

et andet valg er at bruge SVG-billeder i stedet for bitmaps. Disse SVG ‘ er er fuldt skalerbare vektorer, der langsomt har fået fuld bro.ser support.

caniuse svg check

det eneste problem er at designe SVG ‘er fra bunden og lære at eksportere dem ordentligt, hvilket kan være mere indviklet end blot at bruge PNG ‘er eller JPEG’ er. Plus SVG er ikke nyttigt til detaljerede billeder som fotografier, da det virkelig er en vektorfiltype.

men SVG ‘ er har mere plads til Brugerdefineret animation, der viser skarp ved alle opløsninger.

målet er at beslutte filtyper og bro.ser kontrol fra sag til sag. Nogle billeder er bedre som JPG ‘ er og nogle hjemmesider er bedre med CSS vs JS retina kontrol. Jeg foretrækker personligt CSS, men jeg anbefaler at prøve begge for at se, hvad du foretrækker.

CSS baggrundsbilleder

den enkleste måde at håndtere brugerdefinerede baggrunde på er med retina baggrundsbilleder ved hjælp af egenskaben baggrundsstørrelse.

dette er ofte den hurtigste måde at kontrollere retina billeder, fordi de kan arbejde på alle enheder, selv ikke-retina enheder. Det gør ikke ondt at have et overoptimeret billede i CSS, hvis du ikke har noget imod de udvidede belastningstider.

den alternative metode ville være at indlæse forskellige CSS-filer baseret på JavaScript-kontrol eller backend-serverkontrol.

men måske er den bedste måde at håndtere CSS på med en CSS retina-medieforespørgsel. Disse forespørgsler kontrollerer billedtætheden og indlæser forskellige baggrundsbilleder for disse enheder(justerer også baggrundsstørrelsen).

CSS er generelt den enkleste måde at håndtere billeder på, men kan ikke bruges til in-post-billeder. Disse er meget vanskeligere og bør enten uploades i den højest mulige opløsning eller opdateres med JavaScript.

hvis du ikke er så optaget af indlæsningstider, skal du bare gå med den største opløsning til alle dine billeder. Hvis ikke, vil du uploade @2 gange og @3 gange billeder manuelt med et gratis JavaScript-bibliotek som Retina.js.

JavaScript-kontrol

hvis du vil have mest kontrol over retina-opløsningsindhold, skal du bruge JavaScript. De fleste besøgende kører JS-kode, og det er den nemmeste måde at registrere opløsninger med indbyggede JavaScript-metoder.

du finder masser af gratis tutorials til at opdage JavaScript retina-skærme, men dette er kun halvdelen af kampen. Når du kender skærmopløsningen, skal du opdatere billederne i overensstemmelse hermed.

jeg anbefaler at bruge en forudbygget løsning for at spare tid og hovedpine under processen.

udviklere vil aldrig genopfinde hjulet. Så hvis en anden allerede har løst dette problem, hvorfor skulle du gider at starte fra bunden?

den eneste grund til at rulle din egen løsning er, hvis du har brug for brugerdefineret funktionalitet. I så fald tjek nedenstående links for at se, hvordan du kan implementere en brugerdefineret JS retina check.

ellers fortsæt med at rulle og tag et af de gratis JS-biblioteker, jeg har angivet i næste afsnit.

  • 5 måder at understøtte Retina-skærme med høj densitet
  • let 2 gange retina-billeder med jforespørgsel
  • Server Retina-grafik til din hjemmeside

Open Source Retina-værktøjer

der er snesevis af brugerdefinerede retina-værktøjer til detektering og styring af retina-billeder. Disse er ikke altid de nemmeste at implementere, men de kan gøre dit publikum meget lykkeligere i det lange løb.

så hvilken skal du vælge at komme i gang? Der er virkelig ikke noget forkert svar.

jeg vil gerne give nogle af de mest populære værktøjer og give dig chancen for at vælge, hvad der fungerer bedst for din hjemmeside.

nethinden.js

retinajs open source javascript

nethinden.JS library er en gratis open source JavaScript-kodebase, der automatisk registrerer retina-opløsninger og skærmstørrelser. Scriptet kontrollerer også, om der er et eksisterende højopløsningsbillede efter Apples designretningslinjer, og i så fald skifter det for at vise hi-res-versionen.

navngivningskonventioner følger et suffiks af @2 gange før filetypen. Så hvis du har my_image.jpg du vil også gerne have [email protected] i samme mappe.

dette er en af de enkleste scripts, fordi det virkelig er bare plug and play. Men det kræver også en vis viden om nethindeindhold for at få det til at fungere perfekt. Hvis du lige er kommet i gang, er dette virkelig et godt script, og du kan ikke gå galt med standardfunktionaliteten.

 JS retina plugin

en anden mulighed er Retina drevet af biblioteket. Dette fungerer lidt anderledes, fordi det kører på HTML5 dataattributter.

du sender simpelthen en billed-URL-værdi til data-retina-attributten i hvert billedtag, der kræver et retina-billedalternativ. Det kræver mere hård kodning, men det er også det nemmeste at rulle tilbage med brugerdefinerede indstillinger. GitHub-siden har mere info med grundlæggende trin til installation.

Retina 2

retina @ 2-plugin

hvis du er bruger, kan Retina 2 være et godt alternativ til at tilføje et JS-plugin fra GitHub. Retina plugin fungerer direkte med Retina plugin til at kontrollere for retina-størrelse billeder og erstatter dem automatisk.

det er en anden plug-and-play-løsning, hvor du bare aktiverer pluginet og lader det køre. Super nem at bruge og helt sikkert en ren løsning til ikke-tekniske brugere.

tæt.js

densejs plugin

hvad jeg kan lide mest om den tætte.JS bibliotek er støtte til varierende enhed nøgletal. Ikke alle retina-skærme er simpelthen 2 gange størrelsen. Andre forhold kan omfatte 1,5 eller 3 gange.

dette plugin registrerer automatisk, hvilken skærmtæthed der bruges, og justerer dine billeder i overensstemmelse hermed. Der er mange muligheder, så tilpasning er ikke noget problem. Tjek GitHub for at komme i gang og online docs for mere information.

hvis du leder efter flere retina-skærmressourcer, anbefaler jeg også disse plugins.

  • CSS medieforespørgsler til iPads & iPhones
  • Adaptive billeder i HTML
  • Strygeboks jforespørgsel lysboks
  • Grails Retina Images Plugin
  • valg af en lydhør billedløsning

forhåbentlig tilbyder dette materiale mere end nok for at hjælpe dig med at håndtere billeder og medier på Retina-skærme. Da CSS automatisk skalerer for alle opløsninger, behøver du virkelig ikke bekymre dig om ting som margener eller sidebredder.

men medier på siden som ikoner og fotos skal specialdesignes til retina-enheder.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.