design de rezoluție a afișajului Retina: sfaturi și trucuri pentru designerii UI

Vandelay Design poate primi compensații din partea companiilor, produselor și serviciilor acoperite pe site-ul nostru. Pentru mai multe detalii, vă rugăm să consultați pagina noastră de dezvăluire.

odată cu apariția smartphone-urilor hi-res și a retina iMac, devine evident că designerii mobili web & trebuie să ia în considerare afișajele retina în procesul lor de proiectare. Mai multe dispozitive vin de pe raft cu o rezoluție a afișajului retina care grupează mai mulți pixeli în același spațiu fizic al ecranului.

aceasta înseamnă că conținutul va arăta mai clar dacă este proiectat corect. Deci, cum ar trebui să lucreze un designer UI pentru a gestiona ecranele retina? Ce tehnologie actuală este disponibilă și care este cel mai bun mod de a gestiona cea mai mare bază de utilizatori?

aș dori să acopere cele mai fiabile metode de manipulare ecrane retina/hi-dpi și crearea de interfețe care funcționează doar. Dacă urmați împreună cu acest ghid, veți fi sigur că veți pleca cu sfaturi aplicabile și soluții practice pentru Enigma Retina display.

13" și rezoluții Macbook de 15"

manipularea dispozitivelor Retina

primul pas este verificarea afișajelor pe ecran pe baza rezoluțiilor hi-DPI. Acum, că unele dispozitive au dimensiuni @3x, veți dori să verificați o serie de rezoluții ale ecranului înainte de a afișa imagini. Puteți fi întotdeauna în siguranță cu imagini @3x, dar sunt, de asemenea, mult mai mari și necesită mai multă lățime de bandă pentru descărcare.

această verificare se poate face cu srcset, dar există multe metode diferite folosind JavaScript prea. Consultați acest tutorial pentru mai multe informații.

un truc frumos pentru icoane retina-gata este de a utiliza un iconfont gratuit în loc de imagini bitmap. Font Awesome este o alegere foarte populară, care este complet gratuită, open source și oferă o bibliotecă de pictograme din care să alegeți.

font Awesome Icoane pagina de start

o altă alegere este de a utiliza imagini SVG în loc de bitmap-uri. Aceste SVG-uri sunt vectori complet scalabili care au câștigat încet suportul complet al browserului.

caniuse svg verifica

singura dificultate este proiectarea SVG-urilor de la zero și învățarea exportării lor în mod corespunzător, ceea ce poate fi mai complicat decât utilizarea PNG-urilor sau JPEG-urilor. Plus SVG nu este util pentru imagini detaliate, cum ar fi fotografii, deoarece este într-adevăr un tip de fișier vector.

dar SVG-urile au mai mult spațiu pentru animație personalizată, care afișează clare la toate rezoluțiile.

scopul este de a decide tipurile de fișiere și verificările browserului de la caz la caz. Unele imagini sunt mai bune ca JPG-uri și unele site-uri web sunt mai bune cu CSS vs JS controale retina. Eu personal prefer CSS, dar vă recomand să încercați atât pentru a vedea ce preferați.

imagini de fundal CSS

cel mai simplu mod de a gestiona fundaluri personalizate este cu imagini de fundal retina folosind proprietatea Dimensiune fundal.

acesta este adesea cel mai rapid mod de a verifica imaginile retina, deoarece acestea pot funcționa pe toate dispozitivele, chiar și pe dispozitive non-retina. Nu strică să ai o imagine supra-optimizată în CSS dacă nu te deranjează timpii de încărcare extinși.

metoda alternativă ar fi încărcarea diferitelor fișiere CSS pe baza verificărilor JavaScript sau a verificărilor serverului backend.

dar poate cel mai bun mod de a gestiona CSS este cu o interogare CSS retina media. Aceste interogări verifică densitatea pixelilor și încarcă diferite imagini de fundal pentru acele dispozitive(ajustând și dimensiunea fundalului).

CSS este, în general, cel mai simplu mod de a gestiona imagini, dar nu poate fi folosit pentru imagini in-post. Acestea sunt mult mai complicate și ar trebui fie încărcate la cea mai înaltă rezoluție posibilă, fie actualizate cu JavaScript.

dacă nu sunteți la fel de preocupat de timpii de încărcare, atunci mergeți cu cea mai mare rezoluție pentru toate imaginile. Dacă nu, atunci veți dori să încărcați @2x și @3x imagini manual cu o bibliotecă JavaScript gratuit, cum ar fi Retina.js.

JavaScript verifică

dacă doriți cel mai mult control asupra conținutului rezoluției retinei, atunci veți avea nevoie de JavaScript. Majoritatea vizitatorilor rulează codul JS și este cel mai simplu mod de a detecta rezoluțiile cu metode JavaScript încorporate.

veți găsi o mulțime de tutoriale gratuite pentru detectarea afișajelor JavaScript retina, dar aceasta este doar jumătate din bătălie. Odată ce cunoașteți rezoluția ecranului, va trebui să actualizați imaginile în consecință.

vă recomandăm să utilizați o soluție pre-construită pentru a economisi timp și dureri de cap în timpul procesului.

dezvoltatorii nu vor niciodată să reinventeze roata. Deci, dacă altcineva a rezolvat deja această problemă, de ce ar trebui să vă deranjați să începeți de la zero?

singurul motiv pentru a rula propria soluție este dacă aveți nevoie de funcționalitate personalizată. În acest caz, consultați linkurile de mai jos pentru a vedea cum puteți implementa o verificare personalizată JS retina.

în caz contrar, continuați să derulați și apucați una dintre bibliotecile JS gratuite pe care le-am enumerat în secțiunea următoare.

  • 5 moduri de a sprijini ecrane Retina de înaltă densitate
  • Easy 2x imagini retina cu jQuery
  • servi grafica Retina site-ul dvs.

Open Source Retina Tools

există zeci de instrumente retina personalizate pentru detectarea și gestionarea imaginilor retina. Acestea nu sunt întotdeauna cele mai ușor de implementat, dar vă pot face publicul mult mai fericit pe termen lung.

deci, ce ar trebui să alegeți pentru a începe? Nu există într-adevăr nici un răspuns greșit.

aș dori să vă ofer unele dintre cele mai populare instrumente și să vă ofer șansa de a alege ceea ce funcționează cel mai bine pentru site-ul dvs.

retină.js

retinajs open source javascript

Retina.JS library este un open source JavaScript codebase gratuit care detectează automat rezoluțiile retinei și dimensiunile ecranului. Scriptul verifică, de asemenea, dacă există o imagine existentă de înaltă rezoluție, urmând liniile directoare de proiectare apple și, dacă da, va trece pentru a afișa versiunea hi-res.

convențiile de denumire urmează un sufix de @2x înainte de tipul de fișier. Deci, dacă aveți my_image.jpg veți dori, de asemenea, să aveți [email protected] în același dosar.

acesta este unul dintre cele mai simple scripturi, deoarece este într-adevăr doar plug and play. Dar este nevoie, de asemenea, unele cunoștințe de conținut retinei să-l de lucru perfect. Dacă abia începeți, acesta este într-adevăr un script excelent și nu puteți greși cu funcționalitatea implicită.

jQuery Retina

jQuery JS retina plugin

o altă opțiune este jQuery Retina alimentat de biblioteca jQuery. Acest lucru funcționează puțin diferit, deoarece rulează pe Atribute de date HTML5.

pur și simplu treceți o valoare URL de imagine atributului data-retina din fiecare etichetă de imagine care necesită o alternativă de imagine retina. Ea are nevoie de codificare mai greu, dar este, de asemenea, cel mai ușor să se rostogolească înapoi cu opțiuni personalizate. Pagina GitHub are mai multe informații cu pașii de bază pentru instalare.

WP Retina 2x

WP wordpress retina @2x plugin

dacă sunteți utilizator WordPress, atunci WP Retina 2x ar putea fi o alternativă excelentă la adăugarea unui plugin JS de la GitHub. Pluginul WP Retina funcționează direct cu WordPress pentru a verifica imaginile de dimensiuni retina și le înlocuiește automat.

este o altă soluție plug-and-play în care activați pluginul și lăsați-l să ruleze. Super ușor de utilizat și cu siguranță o soluție curată pentru utilizatorii WP non-tehnici.

dens.js

pluginul densejs jQuery

ceea ce îmi place cel mai mult la dens.biblioteca js este suportul pentru diferite rapoarte de dispozitiv. Nu toate ecranele retina sunt pur și simplu de 2 ori dimensiunea. Alte rapoarte pot include 1,5 x sau 3x.

acest plugin detectează automat ce densitate a ecranului este utilizată și ajustează imaginile în consecință. Există o mulțime de opțiuni, astfel încât personalizarea nu este o problemă. Consultați GitHub pentru a începe și documentele online pentru mai multe informații.

dacă sunteți în căutarea pentru mai multe resurse de afișare retina am recomanda, de asemenea, aceste plugin-uri.

  • CSS interogări media pentru iPad-uri & iPhone
  • imagini Adaptive în HTML
  • Swipebox jQuery Lightbox
  • Grails Retina imagini Plugin
  • alegerea unei soluții de imagine receptiv

sperăm că acest material oferă mai mult de suficient pentru a vă ajuta să se ocupe de imagini și mass-media pe ecrane Retina. Deoarece CSS va scala automat pentru toate rezoluțiile, nu trebuie să vă faceți griji cu privire la lucruri precum marjele sau lățimile paginii.

dar mediile de pe pagină, cum ar fi pictogramele și fotografiile, vor trebui să fie proiectate personalizat pentru dispozitivele retina.

Lasă un răspuns

Adresa ta de email nu va fi publicată.