Ghidul dvs. pentru derularea Parallax

Defilarea Parallax nu are nevoie de introducere atunci când vine vorba de discutarea celor mai atrăgătoare practici de design. În general, Parallax Scrolling este observată pe scară largă pe site-urile WordPress. Este un efect în care imaginea de fundal se mișcă cu o rată mai mică decât elementele din prim-plan. Acest lucru dă iluzia de a avea trei dimensiuni într-o suprafață plană cu două dimensiuni. Multe jocuri folosesc această tendință de mult timp. Cu toate acestea, și-a făcut loc în designul web relativ recent și a câștigat o popularitate masivă. Este atât de răspândită încât cel mai probabil l-ați văzut undeva când ați navigat pe web, chiar dacă nu știați ce este. Conceptul de defilare cu paralaxă funcționează pentru a crea o iluzie care pare atrăgătoare și unică. Acesta adaugă valoare estetică designului web și atrage atenția asupra conținutului de pe scroll-ul paralax, ceea ce ajută la evidențierea conținutului valoros din dezordine.

Această tendință de design a apărut atunci când tendința de design plat a început. Înainte de tendința designului plat, designul realism era în tendințe. Cu această tendință, accentul s-ar pune pe umbre, reflexii și alte astfel de trucuri pentru a crea un sentiment de profunzime și aspect tridimensional. Designul plat era prea bidimensional și astfel de trucuri nu ar funcționa cu ele pentru a crea un aspect tridimensional. Văzând acest decalaj, defilarea paralaxă a apărut ca un concept pentru a introduce trei dimensiuni într-un design plat.

Pentru a înțelege derularea paralaxă în mai multe detalii, ar trebui mai întâi să vedem de ce este o practică în care merită să investim.

1. Experiența utilizatorului se îmbunătățește semnificativ:

Pin

Unii oameni consideră că derularea paralaxă este o caracteristică suplimentară care adaugă complexitate interfeței de utilizare fără nicio contribuție. Cu toate acestea, nu este adevărat, deoarece micro-interacțiunile și animațiile fac o mare diferență pentru a crea interfețe de utilizator captivante în comparație cu fețele plate ale utilizatorului. Are o valoare excelentă pentru experiența utilizatorului (UX).

2. Ajută procesul de povestire:

Pin

Dacă ar fi să povestim o poveste unei alte persoane, am putea-o face fără efort. Cu toate acestea, a avea aceeași ușurință și flux de povestire în designul site-ului web poate fi foarte provocator. A conecta punctele și a ușura tranziția și a menține publicul cuplat este adesea dificil. Derularea Parallax ajută la această problemă, creând o experiență captivantă și captivantă pentru ca povestea să curgă. Deoarece există o diferență între viteza elementelor de fundal și din prim-plan, ritmul eficient al elementelor poate îmbunătăți în mod semnificativ experiența de povestire.

3. Reducere semnificativă a ratelor de respingere:

Pin

Rata de respingere se referă la numărul de persoane care dau clic pe site și fac clic pe butonul înapoi din filă înainte de a parcurge complet site-ul. Ratele de respingere frecvente și ridicate pot afecta în mod semnificativ clasarea SEO. Site-urile web de defilare Parallax au rate de respingere semnificativ mai mici, deoarece majoritatea sunt site-uri de defilare cu o singură pagină. Experiența dinamică pe care utilizatorii o obțin în urma derulării cu paralaxă îi menține implicați.

Acum că am acoperit avantajele utilizării derulării paralaxe, putem discuta despre diferitele tipuri de tehnici de defilare cu paralax disponibile pentru designerii web. Există două categorii mari de efecte de paralaxă. Efecte de paralaxă bazate pe defilare și efecte de paralaxă bazate pe mouse.

Efectele de paralaxă bazate pe defilare sunt efecte de paralaxă pe care le-ați experimenta atunci când derulați în jos printr-un site web. Fiecare tip de defilare cu paralaxă răspunde unei nevoi și scop diferit. Unele dintre efectele de defilare a paralaxei sunt:

1. Defilare de fundal Parallax:

Este una dintre cele mai vechi și totuși eficiente moduri de utilizare a scroll-ului paralax. Folosind aceasta, atunci când utilizatorul ar derula pe site, imaginea de fundal se schimba. Acest lucru vă ajută să spuneți povești convingătoare cu stil.

2. Defilare verticală Parallax:

Parallax Vertical Scroll este ideal pentru site-urile web în care doriți ca utilizatorii să simtă că site-ul web se mișcă odată cu ei, folosind elemente plutitoare care s-ar mișca cu viteze diferite. Acest lucru se poate face și în mai multe straturi.

3. Efect de transparență paralaxă:

Efectul de transparență Parallax este un efect neted în care textul sau imaginea se estompează lent atunci când utilizatorul derulează în jos. De asemenea, ar disparea înapoi când utilizatorul ar derula în sus.

4. Defilare orizontală Parallax:

Parallax Horizontal scroll creează o senzație de mișcare orizontală atunci când utilizatorul defilează în jos pe site. Elementele din stânga se apropie mai mult de centru. Acest lucru creează un sentiment de mișcare.

5. Efect de scară de paralaxă:

Efectul de scară Parallax permite utilizatorului să creeze un efect de mărire și micșorare a efectului de tunel. Zoom-ul este proporțional cu raportul de aspect, așa că creează o iluzie unică care arată cool. Se simte ca un efect de deformare care duce utilizatorul într-o altă dimensiune.

Acum că am discutat despre diferitele variații ale efectelor de defilare cu paralaxă, putem trece la discutarea practicilor esențiale de design pe care să le ținem cont atunci când proiectăm un efect de defilare paralaxă pentru site-ul dvs.:

1. Amintiți-vă întotdeauna obiectivul principal al site-ului dvs.:

Pin

Defilarea Parallax este distractivă și poate deveni captivantă. Nu numai pentru telespectatori, ci și pentru designer. Acest lucru nu ar trebui să se traducă prin a avea un site web care are un efect impresionant de defilare paralaxă și nu se concentrează pe conținut. Derularea paralaxă, ca și alte elemente de design, ar trebui să funcționeze ca indicii vizuale care ar trebui să ghideze vizitatorul către locurile în care intenționați să se afle. Ar trebui să ajute la atingerea obiectivelor de afaceri, cum ar fi vânzarea unui produs, diseminarea conținutului sau generarea de clienți potențiali.

Dacă folosiți excesiv derularea paralaxă fără vreun context sau scop în minte, este posibil să obțineți spectatori impresionați pe site-ul dvs., dar aceștia nu s-ar traduce în clienți potențiali sau conversii eficace. Folosiți derularea paralaxă pentru a crește șansele de ceea ce doriți ca utilizatorul să facă. Un truc excelent pentru aceasta este fixarea unui CTA convingător, dar subtil, la subsolul paginii. În acest fel, atunci când utilizatorii ar naviga prin site, ar vedea paralaxa derulând în acțiune. Ar avea, de asemenea, unul sau două butoane constante care sunt statice și omniprezente. Acest lucru l-ar atrage pe vizitator să facă clic pe butonul pentru a vedea ce se întâmplă.

2. Nu abuzați de efectul de defilare a paralaxei:

Pin

Efectul de defilare Parallax are atașat un anumit factor wow. Se sparge pentru natura mondenă și stagnantă a oricărui site web care creează interes brusc în ochiul vizitatorului. Deoarece utilizarea defilării cu paralax face ca elementele site-ului să se miște la viteze diferite, găsirea echilibrului potrivit între distracție și haos este esențială atunci când utilizați derularea paralaxă. Dacă site-ul web are multe elemente care se mișcă rapid sau prea multe elemente în mișcare, de asemenea, ar putea deveni copleșitor pentru vizitator să țină pasul. Ar arunca ghidul lor vizual pe tot site-ul web și ar crea confuzie.

3. Faceți prototipuri de efecte de defilare a paralaxei și testați-le:
Pin

Este întotdeauna o idee bună să construiți un prototip interactiv înainte de a-l finaliza în etapa de dezvoltare. Acest lucru îi ajută pe designeri să-și testeze efectul de defilare a paralaxei înainte de a-l pune live. Designerii ar trebui să testeze efectul asupra utilizării și experienței utilizatorului. Deoarece paralaxa este atât de versatilă și diferită în abordarea sa, poate afecta diferiți oameni în moduri diferite. Este ușor să devii de la paralaxa utilă la crearea de efecte de defilare a paralaxei care provoacă distragere a atenției. Prin urmare, testați-l cu atenție cu utilizatori reali care sunt obiectivi și au simțul designului web. De asemenea, testați-l cu un public larg, deoarece ei sunt cei pentru care faceți efectul.

4. Planificați conținutul pentru utilizare mobilă:

Pin

Navigarea pe net nu mai este limitată la computere. În schimb, mai mult de jumătate dintre utilizatori preferă să navigheze pe smartphone-urile și tabletele lor. De asemenea, Google și-a schimbat rezultatele motorului de căutare în funcție de care reglementează și clasifică site-urile web în mod diferit pentru dispozitive mobile în comparație cu desktop. Aceasta înseamnă că, dacă site-ul dvs. se clasează bine în navigarea pe desktop, dar are un design mobil neprietenos, nu s-ar clasa pe Google atunci când îl căutați prin telefon. Derularea Parallax nu este compatibilă cu dispozitivele mobile. Tabletele îl acceptă într-o oarecare măsură, dar nu și telefoanele mobile. Soluția practică pentru aceasta este să nu utilizați efecte de paralaxă pentru site-ul dvs. mobil.

Aspectul de bază al site-ului dvs. ar trebui să fie proiectat în așa fel încât să fie ușor de transpus pe mobil. Orice secțiune care se suprapune și se revarsă ar trebui să fie atentă. Fundalul nu trebuie să intre în conflict cu lizibilitatea conținutului. Pentru site-ul mobil, păstrați doar elementele de design strict necesare. Acest lucru v-ar ajuta în două moduri - utilizatorii care folosesc browserul pe mobil ar putea folosi date mobile. Având un site mai ușor, i-ar ajuta să încarce site-ul mai rapid și să cheltuiască mai puține date navigând prin site-ul dvs. De asemenea, nu ți-ar afecta clasarea SEO în acest fel.

5. Receptivitatea site-ului dvs.:

Pin

Nu mai avem conexiuni de rețea care să dureze minute sau ore pentru a încărca un site web. Toată lumea are acces la internet la viteza în care utilizatorii pot fi pe un site pentru o secundă și pot trece la altul într-o altă secundă care trece. Cu această ușurință a vitezei vine și ușurința opțiunilor. Oamenii navighează prin mai multe site-uri web în fiecare zi. Dacă site-ul dvs. nu se încarcă relativ repede, nu vor rămâne să aștepte ca site-ul dvs. să se încarce și să-și arate efectul de paralaxă uimitor. Paralaxul este un truc greu și chiar și atunci când îl optimizezi; ar fi nevoie de o lovitură în timpul de încărcare a paginii. Devine datoria ta să-l optimizezi cât mai mult posibil dacă simți că menținerea derulării paralaxei contribuie semnificativ la site-ul tău.

Acum că înțelegem toate aspectele derulării cu paralax și cum să profităm la maximum de aceasta, să ne uităm la unele dintre site-urile web care au implementat cu succes derularea paralaxă în designul site-ului lor web în mod eficient:

1. Povestea The Goonies:

Pin

Acest site web a folosit un efect dedicat de defilare paralaxă pentru a evidenția filmul clasic The Goonies. Folosește derularea captivantă în paralaxă pentru a vorbi despre intriga filmului și despre alte detalii, cum ar fi numele regizorului, data lansării, profilurile personajelor și multe altele. Este creat folosind WebFlow și funcționează ca un tribut adus filmului clasic. Când vizitați site-ul web, prima interacțiune folosește Efectul Parallax Scale care îl ajută pe utilizator să se simtă ca și cum ar călători în interiorul poveștii cu site-ul web. Fiecare efect de paralaxă este folosit pentru a direcționa semnalul vizual pentru vizitator și se realizează fără efort. De asemenea, folosește audio pentru o experiență captivantă de povestire.

2. Studio pentru câini:

Pin

Dogstudio este un studio de creație care îmbină arta, tehnologia și designul. Pentru a prezenta acest lucru, ei și-au proiectat inteligent site-ul web. Centrul site-ului web are un câine care s-ar scala și se rotește pe măsură ce utilizatorul continuă să deruleze prin site. De asemenea, lumina de pe câine continuă să se schimbe atunci când treceți mouse-ul peste proiectele lor recente. Există și efecte de paralaxă bazate pe șoarece. La începutul paginii web, dacă treceți mouse-ul spre stânga, câinele se înclină spre dreapta și invers. Este o utilizare eficientă a derulării paralaxei.

3. Firewatch:

Pin

Firewatch este un joc creat de Campo Santo. Există un site web pentru promovarea acestui joc care folosește subtil, dar cel mai impresionant, derularea paralaxă. Când vizitați site-ul, sunteți tratat cu o imagine banner care pare captivantă așa cum este. Când derulați site-ul în jos, imaginea și conținutul se mută în sus, creând un efect de defilare a paralaxei simplu, dar eficient. Site-ul folosește 6 straturi pentru a-l face la fel de neted. Restul site-ului este static, unde se află tot conținutul. Acest lucru vă ajută să citiți conținutul și să cunoașteți despre joc fără să vă simțiți rău de mare cu efecte de paralaxă exagerat. Ei folosesc un efect de paralaxă pentru a capta atenția, apoi oferă informații relevante pentru a capta interesul vizitatorului.

Acum știți de ce paralax scrolling este o tendință de design atât de populară în zilele noastre. Are multe avantaje pe care designerii web le pot exploata. Nu există caracter de repetitivitate cu un alt site web din cauza numeroaselor variante de defilare paralaxă disponibile. Site-urile web menționate în această listă acoperă, de asemenea, modul în care efectul poate fi utilizat în întregime în scopul de a povesti sau ca un element suplimentar pentru a îmbunătăți simțul site-ului. Înțelegeți de ce și unde ar trebui să utilizați derularea paralaxă pe site-ul dvs. și să o utilizați. Nu-l forțați doar pentru valoare estetică.