Share
Se non hai ancora guardato Star Wars, non appena finisci questo articolo, vai a guardarlo. Tutto. (Assicurati di tornare e facci sapere se preferisci IV-VI o I-III.)
Se tu avere visto Star Wars, forse sei un po 'coinvolto nelle ultime notizie sulla serie di film. J.J. Abrams (produttore di Perso e, più recentemente, la nuova serie di Star Trek) sta attualmente scrivendo e producendo il Il prossimo Star Wars, Episodio VII, uscirà nel 2015. Inoltre, Lucasfilm, lo studio di Star Wars, è stato acquistato da Disney.
Insieme alle notizie sulla saga di Star Wars, StarWars.com ha ricevuto un restyling da Bobby Solomon e dal Disney Interactive Team. Un sacco di bei dettagli sono entrati in questo sito, ma ci concentreremo su alcune specifiche che ci distinguono.
L'intestazione del sito di Star Wars è un esempio di un'interazione molto semplice che ha un significato molto più ricco rispetto all'esecuzione estetica. Nello specifico, l'interazione riflette la sequenza del titolo di apertura di tutti i film di Star Wars. Mentre scorri, il logo sembra allontanarsi da te, svanendo lungo il percorso. Questo semplice dettaglio è esteticamente attraente e fornisce un immediato stimolo culturale per i fan del film.
Andando… 
Andando… 
Andato.Ecco come l'hanno fatto.
Innanzitutto, la barra dell'immagine dell'intestazione e tutti gli elementi contenuti sono effettivamente impostati su posizione: fissa. Viene utilizzata una tecnica molto semplice per ottenere sia l'effetto parallasse sullo sfondo che il dimensionamento del logo. Dimostreremo con un esempio semplificato.
<
In questo caso, utilizzeremmo il seguente CSS.
header position: fixed; larghezza: 100%; altezza: auto; colore di sfondo: # 000; .nav-inner altezza massima: 300px; altezza: 300 px; posizione: relativa; .nav-wrapper larghezza massima: 1400 px; altezza massima: 300 px; margine: 0 auto; imbottitura: 1,5%; -webkit-box-dimensionamento: border-box; -moz-box-dimensionamento: border-box; dimensionamento della scatola: border-box; posizione: relativa; altezza: eredita; .nav-push margin-top: -65px; posizione: relativa; .bg display: block; posizione: assoluta; inizio: 0; a sinistra: 50%; larghezza: 1600 px; altezza: 100%; z-index: -1; posizione di sfondo: centro; background-image: url (http://cdnvideo.dolimg.com/cdn_assets/82be7f552af3b9573427bcee1360b3c43d7fd5c8.jpg); dimensione di sfondo: copertina; transform: translate3d (0, 0, 0); transform: translateX (-50%); .logo display: block; superiore: 50%; larghezza: 100%; larghezza massima: 350 px; altezza: 100%; altezza massima: 130 px; margine: -65px auto 0; dimensionamento della scatola: border-box; background-image: url (// a.dilcdn.com/sw/navigation/sw_logo_stacked-92b3dc5967ed.png); background-size: contenere; posizione di sfondo: centro; background-repeat: no-repeat; posizione: relativa; main position: relative; in alto: 300 px; altezza: 600 px; colore di sfondo: # 000;
Il logo è centrato verticalmente con questo metodo.
Ora ecco il trucco. Quando l'utente scorre, cambieremo l'altezza di .nav-inner, così come l'opacità di .nav-inner. Ciò causerà il restringimento del logo e l'altezza dell'intestazione sarà determinata dall'altezza dei suoi elementi contenuti.
Possiamo ottenere questo usando un semplice metodo di scorrimento a scorrimento.
Nota: jQuery viene utilizzato in questo esempio.
Accentsconagua
var latestKnownScrollY = 0, ticking = false, $ w = $ (finestra), $ navInner = $ (". nav-inner"); function onScroll () latestKnownScrollY = $ w.scrollTop (); console.log (latestKnownScrollY); requestTick (); $ w.on ('scroll', onScroll); function requestTick () if (! ticking) requestAnimationFrame (update); ticking = true; function update () ticking = false; var currentScrollY = latestKnownScrollY; $ navInner.css (height: 300 - currentScrollY, opacity: (300 - currentScrollY) / 300); requestTick ();Questo JavaScript, in combinazione con il CSS sopra, realizza l'effetto dello scroll di intestazione, e lo fa senza dover fare affidamento su una pesante manipolazione DOM, che lo rende un po 'più performante.
Dai un'occhiata alla demo finale.
Il desktop desktop è relativamente semplice, quindi non parleremo dei dettagli di implementazione. Ma diamo un'occhiata a ciò che rende questo nav efficace: le icone.
Una sezione dal foglio di sprite dell'icona (retina)Le icone sono ancora una volta una funzione creata per parlare direttamente ai fan di Star Wars. Ad esempio, per l'icona "Films", invece di scegliere una fotocamera o una bobina di nastro, il designer ha scelto un'icona che rappresenta il testo scorrevole che mostra all'inizio di ogni film di Star Wars. Per l'icona della community, invece di mostrare un profilo di due persone, hanno scelto di mostrare un casco Storm Trooper. La significatività di ciascun elemento di navigazione è migliorata da queste decisioni per i fan di Star Wars e l'esperienza non viene diluita per i nuovi arrivati.
Un'altra icona importante da sottolineare è il pulsante "Cerca". Anche se può sembrare una lente d'ingrandimento (un'icona di ricerca comune), è anche una versione semplificata di una Morte Nera, uno degli elementi più importanti in tutti i film.
Questo fa apparire un punto molto importante su tutte le icone di tutto il sito: di norma, il designer ha scelto di conservare spunti familiari e forme di base, come una lente di ingrandimento o il contorno di una persona, ma aggiungendo elementi a quelle forme di base che hanno un significato per coloro che li comprendono. Ciò fornisce un senso di giocosità e un vero senso di integrità tematica in tutto il sito.
Ci immergeremo un po 'più in quella che è diventata una delle parti più discusse di questo sito: la navigazione con la spada laser.
A punti di interruzione inferiori, la navigazione è accessibile tramite un pulsante fissato in alto a sinistra nella finestra del browser. All'inizio, potrebbe sembrare un normale pulsante di menu, ma una volta cliccato su di esso, le linee si trasformano in una forma a X e assomigliano a due spade laser..
Tutto questo viene fatto usando semplici tecniche CSS e un po 'di JavaScript. Ecco il markup del menu:
Le campate con il bar le classi diventano le spade laser. Ecco una ricostruzione del CSS utilizzato per realizzare gli effetti:
# nav-drawer-toggle border-right: 1px solid # 333333; larghezza: 60 px; altezza: 60px; cursore: puntatore; posizione: fissa; inizio: 0; a sinistra: 50%; margin-left: -30px; .toggle-icon display: block; posizione: relativa; superiore: 50%; larghezza: 100%; margine: -22px auto 0 2px; -webkit-transition: margine 600ms; -moz-transition: margine 600ms; transizione: margine 600ms; .bar display: block; larghezza: 38 px; altezza: 2px; margine: 9px; border-right: 28px solid #fff; border-left: 6px solid # d6d6d6; -webkit-box-dimensionamento: border-box; -moz-box-dimensionamento: border-box; dimensionamento della scatola: border-box; -webkit-transition-property: -webkit-transform, margin, border-right-color, box-shadow; -moz-transition-property: -moz-transform, margin, border-right-color, box-shadow; transition-property: transform, margin, border-right-color, box-shadow; -webkit-transition-duration: 600 ms; -moz-transition-duration: 600ms; durata della transizione: 600 ms; .bar: nth-of-type (2n) -webkit-transform: ruotare (-180 gradi); -moz-transform: ruota (-180 gradi); -ms-transform: ruota (-180 gradi); -o-trasforma: ruota (-180 gradi); transform: ruotare (-180 gradi); / * Stati commutati * / .toggled .toggle-icon margin: -32px 0 0 7px; .toggled .toggle-icon .bar: nth-of-type (3) margin-left: 5px; -webkit-transform: ruotare (-42deg); -moz-transform: ruotare (-42deg); -ms-transform: ruota (-42deg); -o-transform: ruotare (-42deg); transform: ruotare (-42deg); .toggled .toggle-icon .bar: nth-of-type (2) margin-left: 14px; -webkit-transform: ruota (-137deg) translateY (-15px); -moz-transform: ruota (-137deg) translateY (-15px); -ms-transform: ruota (-137deg) translateY (-15px); -o-transform: ruota (-137deg) translateY (-15px); transform: ruotare (-137deg) translateY (-15px); .toggled .toggle-icon .bar: nth-of-type (1) opacity: 0; / * Lightsaber glow * / # nav-drawer-toggle.toggled: hover .bar: nth-of-type (3) border-right-color: # ddf1da; box-shadow: 4px 0 6px 1px rgba (83,228,68,0,65); # nav-drawer-toggle.toggled: hover .bar: nth-of-type (2) border-right-color: # e9b8b9; box-shadow: 4px 0 6px 1px rgba (205,40,44,0,75);
Infine, un po 'di JavaScript che attiva lo stato di navigazione:
(function () $ ("# nav-drawer-toggle"). on ("click", function () $ (this) .toggleClass ("toggled");); ());Nota: alcuni dei codici precedenti sono stati presi direttamente da StarWars.com, mentre altri pezzi sono stati ricreati per ottenere lo stesso effetto.
Dai un'occhiata alla demo finale.
Mentre questa è una tecnica apparentemente semplice, parla al pubblico in un modo molto più sfumato e ricco di una semplice "X" o hamburger.
I designer di StarWars.com hanno pensato a molti dettagli apparentemente minori nel loro processo di progettazione. Uno che vorrei sottolineare in questo articolo è la pagina 404.
404 pagine sono spesso dimenticate da noi come sviluppatori web o designer, perché possiamo facilmente considerarli un "caso limite". Sembra che ci dimentichiamo di loro perché non sono ciò che sono dovrebbe succedere, quindi non progettiamo pesantemente per loro. Tuttavia, 404 pagine meritano molta più attenzione di quanto potremmo pensare. Gli utenti raggiungono 404 pagine quando cercano di accedere a contenuti che non sono più disponibili o che sono collegati o digitati in modo errato. Questo momento nell'esperienza dell'utente dovrebbe essere esplorato molto più intenzionalmente.
Quando un utente non arriva a una pagina che sta cercando di raggiungere, può essere molto frustrante e causare la partenza immediata dell'utente. Tuttavia, se il design della pagina 404 è tale da aiutare l'utente e deliziarlo in una certa misura, la sua attenzione può essere mantenuta. Nel caso di StarWars.com, quando un utente visita un indirizzo sbagliato (come http://www.starwars.com/nowhere), viene presentato con un grafico "404", con una Morte Nera incompleta al posto di lo zero e il messaggio "Questa pagina non è completamente armata e operativa. Prova qualcos'altro?"
Questa pagina è efficace per due ragioni. Innanzitutto, parla ancora una volta ai fan di Star Wars direttamente; per gran parte della serie di film, la Morte Nera assomiglia a quella sulla pagina 404 ed è in procinto di essere costruita. Quando finalmente sarà completo nella finale dei sei film, L'Imperatore dice a Luca:
Ora testimonia pienamente la potenza di fuoco di questo armato e operativo stazione di battaglia!
Questo è un punto cruciale nella serie di film. I progettisti di StarWars.com sapevano che qualsiasi fan venisse sul sito e che avrebbe raggiunto la pagina 404 avrebbe probabilmente ricordato questo momento del film, e invece di concentrarsi sulla frustrazione di non raggiungere ciò che stavano cercando, potrebbero essere lieti o distratti dal ricordo del film.
Anche se sembra un'occasione persa per usare la frase infame "questi non sono i droidi che stai cercando", l'onnipresenza di Star Wars ha portato a molte 404 pagine che già utilizzano questo tema, inclusi siti popolari come GitHub.
GitHub è arrivato per primoQuesto conclude la nostra indagine sul nuovo StarWars.com. Ci sono pezzi interessanti del sito che hai scoperto? Forse sei interessato a leggere un post di "How They Did It" su un altro sito? Diteci nei commenti!
