Share
Site-urile și site-urile de marketing unice sunt din ce în ce mai populare; în special, aceste "experiențe de interacțiune concentrate" au crescut în jurul industriei de divertisment, a raportării și a terenurilor de produse. Astăzi, ne vom concentra pe nuci și șuruburi care au intrat în construirea inception-explained.com și Mailchimp's 2012 Year in Review.
Ambele site-uri au unele similarități în ceea ce privește implementarea tehnică și diferențe semnificative în alte moduri. Am ales aceste două site-uri deoarece reprezintă o tendință majoră în designul interacțiunii web: modificarea comportamentului implicit al interacțiunii de derulare prin crearea de animații personalizate și / sau transformări de conținut care sunt declanșate în vreun fel de poziția de defilare. Deci, hai să ne aruncăm!
Pentru ambele site-uri, caracteristica cea mai evidentă este manipularea interacțiunii de defilare. Ambele site-uri au manipulat evenimentul de defilare cu JavaScript pentru a se comporta diferit decât un document static implicit.
Manipularea de către Mailchimp a evenimentului de derulare este relativ subtilă; În timp ce derularea declanșează modificările de fundal și unele intersecții de conținut, există un comportament implicit de defilare; secțiunea potrivită de conținut se derulează în mod normal, oferind o interfață accesibilă pentru a consuma raportul bazat pe date. Raportul este ușor de traversat într-un mod secundar prin legăturile din stânga, care declanșează o animație scroll. Raportul se bazează foarte mult pe jQuery Waypoints, un plugin jQuery care urmărește evenimentul de defilare pentru a vedea când a fost atins un anumit "punct de referință" prin defilare. În special, unele pseudo-coduri pot explica modul în care acestea vor fi utilizate pentru implementarea MailChimp.
Accentsconagua
// Definiți toate elementele secțiunii principale ca puncte de referință $ (". Principală-secțiune") pointpoint (funcție (direcție) // callback atunci când se atinge punctul de parcurs, cu direcția de defilare ca parametru var $ this = $ ); // cache a elementului pointpoint // elimina clasa curentă de la toți frații care nu sunt punctul curent de parcurs $ this.siblings () removeClass ("current"); // obține id-ul de fundal de exemplu html: // var bgid = $ this.addClass ("curent"). date ("bgid"); // obține elementul cu un id egal cu bgid și adăugați clasa curentă; eliminați clasa curentă de la toți frații $ ("#" + bgid) .addClass ("curent") siblings () removeClass ("curent"); ); Codul de mai sus este un exemplu de ceea ce ar fi putut face MailChimp pentru a realiza unele dintre aceste efecte. jQuery Waypoints ar fi, de asemenea, o modalitate adecvată de a crea elemente "lipicioase" nav, cu ceva de genul:
$ (acest lucru) .css (poziție: "fix");)
Inception Explained are o manipulare mult mai implicată a comportamentului scroll.
Construit de Matt Dempsey, infografia interactivă se bazează în mare măsură pe animațiile CSS3 și pe animațiile bazate pe JavaScript, alimentate de scrollorama lui John Polacek, un plugin jQuery construit practic pentru a face exact felul de manipulări pe care Matt le-a făcut.
Să vorbim despre conținut.
Pentru ambele site-uri, conținutul este una dintre cheile înțelegerii deciziilor de proiectare care au fost făcute (așa cum este cazul pentru orice proiect bine gândit). Explicarea prezentării de planuri la nivel înalt a Inception este o sarcină foarte diferită decât revizuirea publică a realizărilor și eșecurilor din ultimul an ale unei afaceri de servicii de marketing prin e-mail.
Pentru Inception Explained, autorul conținutului a luat o narațiune relativ complexă și a extras punctele primare de complot într-un mediu nou.
Această narațiune are un artifact "frate" (filmul Inception) pe care spectatorul trebuie să îl fi văzut anterior pentru a se identifica în mod adecvat cu deciziile de proiectare. Site-ul nu funcționează bine ca o formă de vehicul rezumat pentru divertisment (în care cineva care nu a văzut filmul poate obține un "gist" informativ și încă distractiv al povestirii). În schimb, servește pentru a ajuta la ștergerea păianjenilor de confuzie prin descompunerea punctelor primare de cotitură și prin afișarea unor indicatori care explică acele puncte de cotitură.
Dacă ați văzut Inception, înțelegeți că construirea primară a parcelei este împărțită în "nivele", care sunt reprezentative pentru "visele din interiorul viselor". Inception Explained vă duce prin aceste niveluri unul câte unul, folosind câțiva factori vizuali constanți pentru a ajuta la reducerea complexității. În special, cele șapte personaje principale și stările lor sunt reprezentate vizual de cercuri pe tot parcursul narațiunii spre partea de jos a paginii.
Dincolo de aceasta, un indicator de fond al locului actual al nivelului este, de asemenea, un indicator; Un avion este afișat pentru nivelul "realității", vagonul lui Yusuf pentru nivelul 1, visul lui Arthur într-un hotel din nivelul doi, munții care semnifică scena cu zăpadă din nivelul trei și, în final, baruri puțin vagi care probabil înseamnă clădirile orașului în "Limbo "nivel. Toate aceste imagini, după cum ar înțelege cineva care a văzut filmul, sunt iconice ale diferitelor niveluri reprezentate în film.
Un ceas de animație este afișat în partea dreaptă sus, care arată relația dintre timp și realitate în fiecare nivel; în timp ce personajele merg mai adânc în fiecare nivel, timpul încetinește (astfel încât minutele să pară, în cele din urmă, ca și decenii).
Parcela este explicată, iar pictogramele asociate cu animații simple reprezintă puncte de cotitură în plot. Paragrafele explicative sunt vehiculul principal pentru ca utilizatorii să înțeleagă contextul animațiilor și al schimbărilor de stare.
Strategia de conținut a lui MailChimp pentru "O privire înapoi" este foarte diferită, desigur, decât Inception Explained. "O privire înapoi" este raportul anual al MailChimp, care rezumă aspecte atât calitative cât și cantitative ale performanței lor în 2012.
Strategia de conținut urmează mai puțin dintr-o narațiune și este în schimb segmentată într-o asemănare cu "sub-narațiuni", determinată de marketing, mesagerie cantitativă și o voce puternică de brand. Aceste sub-narațiuni diferite sunt clar segmentate: "Aplicația", "Sprijinul", "Operațiile", "Social", "Geografia" și "Ideile bune" sunt secțiunile prezentate în navigație, corelând direct cu schimbările vizuale în design și segmentarea conținutului. Aceste secțiuni sunt redactate de cimpanzeul admirabil al purtătorului de cuvânt al lui MailChimp (Freddie), care privește la începutul orașului Atlanta și apoi se întoarce spre val la audiență la sfârșit.
MailChimp abordează o mulțime de teren în ceea ce privește strategia de conținut în acest raport; în special, scara de impact și creștere pe care a realizat-o MailChimp în ultimul an este mesajul primar. O mare măsură de dovadă este primul lucru din primul sub-narativ - "E-mailuri trimise: 34.796.235.769". Este un număr mare de persoane orice, și asta este ceea ce servește ca dovadă că MailChimp e-mail-ul cel mai bine.
Aceasta este o strategie "cel mai bun picior-înainte". Cu toate acestea, nu se termină acolo; MailChimp a făcut un punct clar pentru a păstra o voce prietenoasă care să se potrivească cu capriciile mascotei Freddie de la Chimp. În aceeași secțiune, vedem un signifiant "Party-Poopers" (cu 1,9% din baza de utilizator a MailChimp care se încadrează în această categorie).
Acest lucru realizează un sentiment de transparență, păstrând în același timp tonul pozitiv și jucăuș care a fost prestabilit de MailChimp. Se adresează în mod direct celor răi, încadrând metrica ca o experiență plăcută și distractivă pentru cititor. Putem vedea note similare în întreaga strategie de conținut pentru MailChimp.
Acum ne vom referi la detaliile implementării tehnologice.
Există o diferență semnificativă în performanța acestor două site-uri, în primul rând datorită unui singur factor major: bibliotecile vizionate în parcurgere funcționează pe două paradigme foarte diferite pentru declanșarea evenimentului scroll.
În Scrollorama, codul de animație este executat pe fiecare parcurgere; acest cod de animație animă toate obiectele "animate", provocând o cantitate mare de calcul și revopsirea browserului. Cu toate acestea, pentru Inception explicat, acesta este efectul cel mai dorit, deoarece fiecare pixel este relevant pentru animațiile proiectate. Acest tip de funcție intensivă de urmărire a parcurgerii și animație ulterioară poate provoca o revărsare a browserului la fiecare eveniment de derulare. Din păcate, pentru un site ca Inception Explained, această tehnică de urmărire a parcurgerii este necesară pentru a reține exact o stare de animație pentru fiecare poziție de defilare individuală.
Pe de altă parte, jQuery Waypoints permite reducerea evenimentelor de defilare prin setarea unui timeout și o variabilă "didScroll".
Dincolo de aceasta, funcția onScroll are un set redus de funcționalități; în special, verifică dacă a fost atins un anumit punct de referință (de aici și numele) și declanșează funcții definite de utilizator atunci când se ating acele puncte. Acest lucru permite o reparație mult mai puțin DOM, dar necesită, de asemenea, un sacrificiu de flexibilitate și poate să nu funcționeze la fel de bine pentru animații mai complexe bazate pe cadre cheie derivate din poziția de defilare.
În timp ce ambele proiecte și-au comprimat codul, putem să aruncăm o privire asupra unora dintre funcțiile principale folosite de cele două site-uri.
Ne vom uita mai întâi la punerea în aplicare a lui Mailchimp Waypoints. (Notă: acest cod a fost ușor modificat de la versiunea originală minifată pentru a fi lizibilă.)
set de funcții \ _activitate \ _secție (index) $ (". section.fixed") removeClass ("fix"); $ ( "Secțiune. ") Eq (index) .addClass (" fix".); $ ( "Site-ul link.selected. ") RemoveClass (" selectat").; $ ("site-nav li: nu (: has (#freddie))") eq (index) .find ("site-link") addClass ("selectat"); $ (("secțiune .content")) .punct de punct (funcție (eveniment, direcție) var current_section; current_section = $ (this) )> 0 && (current_section = current_section.prev ()); // poate \\animate \ setarea în fundal în afara acestui cod poate \\ anime \ _background && (set \ _active \ _section (current_section.index () utilizează Modernizr pentru a verifica dacă CSS poate fi folosit în locul animațiilor JS animate_background (current_section.index ())); actual_section.attr ("id") === "section-footer" && $ ("site-nav") .fadeOut (); dacă (direcția === "sus") returnează $ (".site-nav"). Deci, hai să trecem prin acest cod pentru a vedea ce se întâmplă.
Mai întâi, vedem o funcție care primește în mod esențial un index al secțiunii pentru a deveni activ. Ea face unele lucruri pentru secțiuni speciale (cum ar fi imaginile lui Freddie) și navs, de asemenea.
Apelul la punctul și apelul de apel invers set_active_section, și verificați direcția în care a fost atinsă ținta. Mailchimp a setat derularea derulării la 0, de asemenea.
Mailchimp utilizează, de asemenea, Google Analytics pentru a vedea ce secțiuni se uită la utilizatori și pentru a verifica cât timp le-a făcut să se uite la acele secțiuni probabil pentru a vedea cât de mult timp / angajați investesc în fiecare secțiune. Având aceste informații, va permite MailChimp să vadă cea mai obișnuită "cale" a utilizatorului - dacă oamenii au sărit pe pagină, s-au mutat direct într-o secțiune sau alta sau au trecut secvențial pagina, petrecând aceeași perioadă medie pe secțiune.
O notă rapidă:&& operatorul acționează ca o "dacă acest lucru înseamnă că" - ceva && somethingelse este oarecum echivalent cu dacă (ceva) somethingelse; ca && verifică dacă partea stângă este adevărată înainte de a vă deplasa pe partea dreaptă. Inception Explained utilizează un set foarte simplu de funcții repetate bazate pe Scrollorama.
var a = $ .scrollorama (blocuri: ".scrollblock"); a.onBlockChange (functie () var b = a.blockIndex; $ ("consola") css ("display", "block" "+ a.settings.blocks.eq (b) .attr (" id ")); a.animate ("# realitate .bg", întârziere: 300, durata: 35E3, proprietate: "stânga", start: 100, sfârșit: 1100); a.animate ("# realitate .bg", întârziere: 300, durata: 35E3, proprietate: "sus", start: 120, end: 340); // ... Acest cod este preluat direct de la începutul scriptului Inception Explained; aici, vedem un exemplu de utilizare simplă a funcției animate a lui Scrollorama (care este diferită de funcția animată a lui jQuery). Aceste apeluri sunt, în esență, înregistrarea cadrelor cheie pentru elementele pe care Scrollorama le poate urmări și a le îndeplini; de exemplu, primul apel animat are o întârziere de 300 de pixeli, o durată de 35e3 (sau 35k), o valoare de pornire de 100 și o valoare finală de 1100.
Aceasta înseamnă, în esență, următoarele:
Inception Explained are 300 de apeluri diferite de tip .animate () asemănătoare cu aceasta.
Putem vedea din ambele site-uri o manipulare similară a interacțiunii, cu scopuri foarte diferite și efecte semnificativ diferite.
MailChimp și Inception Explained ne-au arătat importanța strategiei de conținut și alegerea instrumentului potrivit pentru această lucrare; în plus, ne putem aștepta ca interacțiunea de derulare să se dezvolte și mai mult, deoarece dispozitivele tactile continuă să capteze cota de piață, iar gesturile de derulare / derulare sunt dezvoltate și mai mult ca model de interacțiune standard.
