Share
Dacă nu ați urmărit încă Star Wars, de îndată ce ați terminat acest articol, vizionați-l. Totul. (Asigurați-vă că vă întoarceți și spuneți-ne dacă preferați IV-VI sau I-III.)
daca tu avea văzut Star Wars, probabil că sunteți într-o buclă pe cele mai recente știri despre seria de filme. J.J. Abrams (producător de Pierdut și, mai recent, cea mai nouă serie Star Trek) scrie și produce în prezent Următor → Star Wars, Episode VII, care urmează să fie lansat în 2015. Mai mult, Lucasfilm, studioul de acasă al Star Wars, a fost cumpărat de Disney.
Împreună cu știrile despre saga Star Wars, StarWars.com a primit un makeover de la Bobby Solomon și Disney Interactive Team. O mulțime de detalii frumoase au intrat pe acest site, dar ne vom concentra pe câteva specificități care ne aparțin.
Antetul site-ului Star Wars este un exemplu de interacțiune foarte simplă, care are un sens mult mai bogat decât execuția estetică. În mod specific, interacțiunea reflectă secvența de titlu a tuturor filmelor Star Wars. Pe măsură ce parcurgi, logo-ul pare să se îndepărteze de la tine, fading pe drum. Acest detaliu simplu este atractiv din punct de vedere estetic și oferă un declin cultural imediat pentru fanii filmului.
Mergând ... 
Mergând ... 
Plecat.Iată cum au făcut-o.
Mai întâi, bara de imagine antet și toate elementele sale conținute sunt de fapt setate pozitie: fixa. O tehnică foarte simplă este folosită pentru a realiza atât efectul de parallax în fundal, cât și dimensiunea logo-ului. Vom demonstra cu un exemplu simplificat.
<
În acest caz, vom folosi următorul CSS.
header position: fixed; lățime: 100%; înălțime: auto; fundal-culoare: # 000; .nav-interior max-height: 300px; înălțime: 300px; poziție: relativă; .nav-wrapper max-width: 1400px; max-height: 300px; marja: 0 auto; umplutură: 1,5%; -webkit-box-size: caseta de frontieră; -moz-box-size: caseta de margine; box-size: caseta de margine; poziție: relativă; înălțime: moștenire; . -push margin-top: -65px; poziție: relativă; .bg display: block; poziția: absolută; top: 0; stânga: 50%; lățime: 1600px; înălțime: 100%; indicele z: -1; fundal-poziție: centru; fundal-imagine: url (http://cdnvideo.dolimg.com/cdn_assets/82be7f552af3b9573427bcee1360b3c43d7fd5c8.jpg); dimensiunea fundalului: capac; transform: translate3d (0, 0, 0); transformare: translateX (-50%); .logo display: block; top: 50%; lățime: 100%; max-lățime: 350px; înălțime: 100%; max-height: 130px; margine: -65px auto 0; box-size: caseta de margine; fundal-imagine: url (// a.dilcdn.com/sw/navigation/sw_logo_stacked-92b3dc5967ed.png); dimensiune de fond: conține; fundal-poziție: centru; background-repeat: nu-repeta; poziție: relativă; principală poziție: relativă; top: 300px; înălțime: 600px; fundal-culoare: # 000;
Logo-ul este centrat pe verticală folosind această metodă.
Acum vine trucul. Când utilizatorul scroll, vom schimba înălțimea .nav-interior, precum și opacitatea lui .nav-interior. Aceasta va face ca sigla să se micșoreze, iar înălțimea antetului va fi determinată de înălțimea elementelor sale conținute.
Putem realiza acest lucru folosind o simplă metoda de votare a votării.
Notă: jQuery este folosit în acest exemplu.
Accentsconagua
var latestKnownScrollY = 0, bifarea = falsă, $ w = $ (fereastra), $ navInner = $ (". nav-inner"); funcția onScroll () latestKnownScrollY = $ w.scrollTop (); console.log (latestKnownScrollY); requestTick (); $ w.on ("derulați", onScroll); funcția requestTick () if (! ticking) requestAnimationFrame (actualizare); ticking = true; funcția de actualizare () ticking = false; var currentScrollY = latestKnownScrollY; $ navInner.css (height: 300 - currentScrollY, opacitate: (300 - curentScrollY) / 300); requestTick ();Acest JavaScript, în combinație cu CSS de mai sus, realizează efectul derulării antetului, fără a trebui să se bazeze pe manipularea DOM intensă, ceea ce o face puțin mai performantă.
Uitați-vă la demonstrația finală.
Desktop nav este relativ simplă, deci nu vom vorbi despre detaliile implementării. Dar să aruncăm o privire asupra a ceea ce face acest navigabil eficient: icoanele.
O secțiune de la pictograma (retina) pictograma spritesheetIcoanele sunt încă o dată o altă caracteristică construită pentru a vorbi direct fanilor Star Wars. De exemplu, pentru pictograma "Filme", în loc să alegi un aparat de fotografiat sau un tambur, designerul a ales o pictogramă care reprezintă textul derulat care apare la începutul fiecărui film Star Wars. Pentru pictograma comunității, în loc să prezinte o schiță a doi oameni, au ales să arate o casca de luptă pentru Storm Trooper. Semnificația fiecărui element de navigare este îmbunătățită de aceste decizii pentru fanii Star Wars, iar experiența nu este diluată pentru noii veniți.
O altă pictogramă importantă pentru a sublinia este butonul "Căutare". Deși poate părea o lupă (o pictogramă obișnuită de căutare), este și o versiune oversimplificată a Star Death, unul dintre cele mai importante elemente din film.
Acest lucru aduce un aspect foarte important despre toate icoanele de pe site: De regulă, designerul a ales să păstreze indicații familiare și forme de bază, cum ar fi o lupă sau o schiță a unei persoane, dar adăugând elemente la aceste forme de bază care au semnificație pentru cei care le înțeleg. Acest lucru oferă un sentiment de jucăuș și un adevărat sentiment de integritate tematică pe întreg site-ul.
Vom merge mai departe în ceea ce a devenit una dintre cele mai discutate despre părți ale acestui site: navigația cu lumini.
La niveluri mai mici, navigația este accesibilă printr-un buton fixat în partea stângă sus a ferestrei browserului. La început, poate arăta ca un buton de meniu obișnuit, dar odată ce faceți clic pe acesta, liniile se schimbă într-o formă X și seamănă cu două lămpi de lumină.
Fiecare bit al acestui lucru se face folosind tehnici simple CSS și un mic pic de JavaScript. Iată marcajul meniului:
Spanurile cu bar clasa deveni lumina. Aici este o recreere a CSS folosită pentru a realiza efectele:
# nav-drawer-toggle frontieră-dreapta: 1px solid # 333333; lățime: 60px; înălțime: 60px; cursor: pointer; poziție: fixă; top: 0; stânga: 50%; margin-stânga: -30px; .toggle-icon display: bloc; poziție: relativă; top: 50%; lățime: 100%; margine: -22px auto 0 2px; -webkit-tranziție: marja de 600ms; -moz-tranziție: marja de 600ms; tranziție: marja de 600ms; .bar display: bloc; lățime: 38px; înălțime: 2px; margine: 9px; frontieră-dreapta: 28px solid #fff; frontieră-stânga: 6px solid # d6d6d6; -webkit-box-size: caseta de frontieră; -moz-box-size: caseta de margine; box-size: caseta de margine; -webkit-transition-property: -webkit-transform, margine, border-right-color, box-shadow; -moz-transition-property: -moz-transform, margine, border-right-color, box-shadow; proprietate de tranziție: transformare, margine, graniță-dreapta-culoare, cutie-umbră; -webkit-durată de tranziție: 600ms; -moz-tranziție-durată: 600ms; durată de tranziție: 600ms; .bar: nth-of-type (2n) -webkit-transform: rotire (-180deg); -moz-transform: roti (-180deg); -ms-transform: rotire (-180deg); -o-transform: roti (-180deg); transforma: roti (-180deg); / * Stări comutate * / .toggled .toggle-icon margin: -32px 0 0 7px; .toggle .toggle-icon .bar: nth-of-type (3) marginea-stânga: 5px; -webkit-transform: rotire (-42deg); -moz-transform: roti (-42deg); -ms-transform: rotire (-42deg); -o-transform: rotire (-42deg); transforma: roti (-42deg); .toggle .toggle-icon .bar: nth-of-type (2) marginea-stânga: 14px; -webkit-transform: rotire (-137deg) translateY (-15px); -moz-transform: rotire (-137deg) translateY (-15px); -ms-transform: rotire (-137deg) translateY (-15px); -o-transform: rotire (-137deg) translateY (-15px); transformă: roti (-137deg) translateY (-15px); .toggle .toggle-icon .bar: nth-of-type (1) opacitate: 0; / * Lumina luminoasă * / # nav-drawer-toggle.toggled: hover .bar: nth-of-type (3) frontieră-dreapta-culoare: # ddf1da; box-shadow: 4px 0 6px 1px rgba (83,228,68,0.65); # nav-drawer-toggle.toggled: hover .bar: n-a-tip (2) marginea-dreapta-culoare: # e9b8b9; box-shadow: 4px 0 6px 1px rgba (205,40,44,0,75);
În cele din urmă, un pic de JavaScript care comută starea Nav:
(funcția () $ ("# nav-drawer-toggle")) ("click", funcția () $ (this).Notă: unele din codul de mai sus au fost preluate direct de la StarWars.com, în timp ce alte piese au fost recreate pentru a obține același efect.
Uitați-vă la demonstrația finală.
În timp ce aceasta este o tehnică aparent simplă, ea vorbește publicului într-un mod mult mai nuanțat și mai bogat decât un simplu "X" sau un hamburger.
Designerii StarWars.com s-au gândit la multe detalii aparent minore în procesul de proiectare. Unul pe care aș vrea să-l subliniez în acest articol este pagina 404.
404 de pagini sunt adesea uitate de noi ca dezvoltatori web sau designeri, pentru că le putem considera cu ușurință un "caz de margine". Se pare că le uităm pentru că nu sunt ceea ce este se presupune că se va întâmpla, așa că nu le proiectăm greu pentru ei. Totuși, 404 de pagini merită mult mai mult decât ne-am putea gândi. Utilizatorii ajung la 404 de pagini atunci când încearcă să acceseze conținut care nu mai este disponibil sau poate este legat sau scris necorespunzător. Acest moment din experiența utilizatorului ar trebui să fie explorat mult mai intenționat.
Atunci când un utilizator nu ajunge la o pagină pe care încearcă să o atingă, poate fi foarte frustrant și poate determina imediat plecarea utilizatorului. Cu toate acestea, dacă designul paginii 404 este de așa natură încât îi ajută pe utilizator și îi încântă într-o anumită măsură, atenția poate fi menținută. În cazul StarWars.com, atunci când un utilizator vizitează o adresă greșită (cum ar fi http://www.starwars.com/nowhere), acestea sunt prezentate cu un grafic "404", cu o stea de deces incompletă, în locul zero și mesajul "Această pagină nu este complet înarmată și funcțională. Încercați altceva?"
Această pagină este eficientă din două motive. În primul rând, vorbește încă o dată fanilor Star Wars direct; pentru o mare parte din seria de film, Steaua Morții arată ca cea de pe pagina 404 și este în curs de construire. Când este în cele din urmă finalizată în finala celor șase filme, Împăratul îi spune lui Luca:
Acum martor puterea de foc a acestui lucru pe deplin armat și operațional stație de luptă!
Acesta este un punct central în seria de filme. Designerii StarWars.com știau că orice fan venind pe site și ajungând la pagina 404 ar aminti probabil acest moment din film și, în loc să se concentreze asupra frustrării de a nu ajunge la ceea ce căutau, ar putea fi încântat sau distras de memoria filmului.
În timp ce se pare că a fost o oportunitate ratată de a folosi citatul infam, "nu sunt droizii pe care îi căutați", omniprezența Star Wars a dus la multe 404 de pagini care utilizează deja această temă, inclusiv site-uri populare cum ar fi GitHub.
GitHub a ajuns acolo mai întâiAsta îmi împiedică investigarea noului StarWars.com. Există părți interesante ale site-ului pe care l-ați descoperit? Poate că sunteți interesat să citiți un mesaj "Cum au făcut-o" despre un alt site? Spune-ne în comentarii!
