Share
Als je Star Wars nog niet hebt gezien, ga je het bekijken zodra je klaar bent met dit artikel. Alles. (Zorg ervoor dat je terugkomt en laat het ons weten als je IV-VI of I-III verkiest.)
als jij hebben Star Wars gezien, misschien ben je enigszins op de hoogte van het laatste nieuws over de filmserie. J.J. Abrams (producent van Verloren en, meer recent, de nieuwste Star Trek-serie) is momenteel bezig met het schrijven en produceren van de volgende Star Wars, Episode VII, wordt in 2015 uitgebracht. Bovendien is Lucasfilm, de thuisstudio van Star Wars, gekocht door Disney.
Samen met het nieuws over de Star Wars-saga ontving StarWars.com een make-over van Bobby Solomon en het Disney Interactive Team. Er zijn veel mooie details in deze site opgenomen, maar we gaan ons concentreren op een paar details die opvalt.
De kop van de Star Wars-site is een voorbeeld van een zeer eenvoudige interactie die een veel rijkere betekenis heeft dan de esthetische uitvoering. Concreet weerspiegelt de interactie de openingstitelreeks van alle Star Wars-films. Terwijl je scrolt, lijkt het logo van je weg te bewegen en verdwijnt het langs de weg. Dit eenvoudige detail is esthetisch aantrekkelijk en biedt een directe culturele trigger voor de fans van de film.
Going ... 
Going ... 
Weg.Hier is hoe ze het deden.
Ten eerste zijn de header-afbeeldingsbalk en alle bijbehorende elementen feitelijk ingesteld op positie: vast. Een zeer eenvoudige techniek wordt gebruikt om zowel het parallaxeffect op de achtergrond als de logo-dimensionering te bereiken. We zullen demonstreren met een vereenvoudigd voorbeeld.
<
In dit geval zouden we de volgende CSS gebruiken.
kop positie: vast; breedte: 100%; hoogte: auto; achtergrondkleur: # 000; .nav-inner max-height: 300px; hoogte: 300 px; positie: relatief; .nav-wrapper max-width: 1400px; maximale hoogte: 300 px; marge: 0 auto; opvulling: 1,5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; positie: relatief; hoogte: erven; .nav-push margin-top: -65px; positie: relatief; .bg display: block; positie: absoluut; boven: 0; links: 50%; breedte: 1600 px; hoogte: 100%; z-index: -1; achtergrond-positie: midden; background-image: url (http://cdnvideo.dolimg.com/cdn_assets/82be7f552af3b9573427bcee1360b3c43d7fd5c8.jpg); achtergrondformaat: omslag; transformatie: translate3d (0, 0, 0); transformatie: translateX (-50%); .logo display: block; top: 50%; breedte: 100%; maximale breedte: 350 px; hoogte: 100%; maximale hoogte: 130 px; marge: -65 px auto 0; box-sizing: border-box; background-image: url (// a.dilcdn.com/sw/navigation/sw_logo_stacked-92b3dc5967ed.png); achtergrondformaat: bevatten; achtergrond-positie: midden; achtergrondherhaling: geen herhaling; positie: relatief; hoofd positie: relatief; top: 300px; hoogte: 600 px; achtergrondkleur: # 000;
Het logo is verticaal gecentreerd met behulp van deze methode.
Nu komt hier de truc. Wanneer de gebruiker schuift, veranderen we de hoogte van .nav-binnen, evenals de dekking van .nav-binnen. Hierdoor krimpt het logo en wordt de hoogte van de kop bepaald door de hoogte van de ingesloten elementen.
We kunnen dit bereiken met een simpele scroll-polling methode.
Notitie: jQuery wordt gebruikt in dit voorbeeld.
Accentsconagua
var latestKnownScrollY = 0, ticking = false, $ w = $ (window), $ navInner = $ (". nav-inner"); function onScroll () latestKnownScrollY = $ w.scrollTop (); console.log (latestKnownScrollY); requestTick (); $ w.on ('scroll', onScroll); function requestTick () if (! ticking) requestAnimationFrame (update); ticking = true; functie update () ticking = false; var currentScrollY = latestKnownScrollY; $ navInner.css (height: 300 - currentScrollY, opacity: (300 - currentScrollY) / 300); requestTick ();Dit JavaScript, in combinatie met de bovenstaande CSS, bereikt het effect van de header-scroll en doet dit zonder te hoeven vertrouwen op zware DOM-manipulatie, waardoor het een beetje meer performant wordt.
Bekijk de definitieve demo.
De desktopnavigatie is relatief eenvoudig, dus we zullen niet praten over implementatiedetails. Maar laten we eens kijken naar wat deze nav effectief maakt: de pictogrammen.
Een gedeelte van het sprite-blad van het (retina) -pictogramDe pictogrammen zijn wederom een functie die is gebouwd om rechtstreeks met Star Wars-fans te spreken. Voor het pictogram 'Films' koos de ontwerper bijvoorbeeld in plaats van een camera of tape-reel te kiezen, een pictogram dat de scrolleertekst vertegenwoordigt die aan het begin van elke Star Wars-film wordt weergegeven. Voor het pictogram van de community hebben ze ervoor gekozen om een helm van Storm Trooper te laten zien in plaats van een overzicht van twee personen weer te geven. De betekenis van elk navigatie-item wordt verbeterd door deze beslissingen voor Star Wars-fans, en de ervaring is niet verwaterd voor nieuwkomers.
Een ander belangrijk pictogram om op te wijzen is de knop "Zoeken". Hoewel het lijkt op een vergrootglas (een gewoon zoekpictogram), is het ook een te eenvoudige versie van een Death Star, een van de belangrijkste elementen in de films..
Hiermee wordt een heel belangrijk punt weergegeven over alle pictogrammen op de site: in de regel heeft de ontwerper gekozen om bekende aanwijzingen en basisvormen te behouden, zoals een vergrootglas of de omtrek van een persoon, maar elementen aan die basisvormen toe te voegen die betekenis hebben voor degenen die ze begrijpen. Dit geeft een gevoel van speelsheid en een echt gevoel voor thematische integriteit op de hele site.
We gaan een beetje verder duiken in wat een van de meest besproken delen van deze site is geworden: de lichtzwaard-navigatie.
Bij lagere onderbrekingspunten is de navigatie toegankelijk via een knop die linksboven in het browservenster is bevestigd. In eerste instantie lijkt het op een gewone menuknop, maar zodra je erop klikt, verschuiven de lijnen naar een X-vorm en lijken ze op twee lichtzwaarden.
Elk deel hiervan wordt gedaan met behulp van eenvoudige CSS-technieken en een klein beetje JavaScript. Dit is de opmaak van het menu:
De overspanningen met de bar klasse wordt de lichtzwaarden. Hier is een recreatie van de CSS die wordt gebruikt om de effecten te bereiken:
# nav-lade-toggle border-right: 1px solid # 333333; breedte: 60px; hoogte: 60 px; cursor: pointer; positie: vast; boven: 0; links: 50%; marge links: -30 px; .toggle-icon display: block; positie: relatief; top: 50%; breedte: 100%; marge: -22px auto 0 2px; -webkit-overgang: marge 600ms; -moz-overgang: marge 600ms; overgang: marge 600ms; .bar weergave: blok; breedte: 38px; hoogte: 2px; marge: 9px; border-right: 28px solid #fff; border-left: 6px solid # d6d6d6; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition-eigenschap: -webkit-transform, marge, border-right-color, box-shadow; -moz-transition-property: -moz-transform, margin, border-right-colour, box-shadow; overgangseigenschap: transformatie, marge, border-right-color, box-shadow; -webkit-overgangsduur: 600ms; -moz-overgang-duur: 600ms; overgangsduur: 600ms; .bar: nth-of-type (2n) -webkit-transform: rotate (-180deg); -moz-transform: roteer (-180 graden); -ms-transformatie: roteren (-180 graden); -o-transform: roteer (-180 graden); transformeren: roteren (-180 graden); / * Toggled states * / .toggled .toggle-icon margin: -32px 0 0 7px; .toggled .toggle-icon .bar: nth-of-type (3) margin-left: 5px; -webkit-transform: roteren (-42deg); -moz-transform: roteer (-42deg); -ms-transformatie: roteren (-42deg); -o-transform: roteren (-42deg); transformeren: roteren (-42deg); .toggled .toggle-icon .bar: nth-of-type (2) margin-left: 14px; -webkit-transform: roteren (-137deg) translateY (-15px); -moz-transform: roteer (-137deg) translateY (-15px); -ms-transformatie: roteren (-137deg) translateY (-15px); -o-transform: roteer (-137deg) translateY (-15px); transformeren: roteren (-137deg) translateY (-15px); .toggled .toggle-icon .bar: nth-type (1) dekking: 0; / * Lightsaber glow * / # nav-drawer-toggle.toggled: hover .bar: nth-type (3) border-right-colour: # ddf1da; vakschaduw: 4px 0 6px 1px rgba (83,228,68,0,65); # nav-drawer-toggle.toggled: hover .bar: nth-type (2) border-right-colour: # e9b8b9; vakschaduw: 4px 0 6px 1px rgba (205,40,44,0.75);
Eindelijk een beetje JavaScript dat de nav-status omschakelt:
(function () $ ("# nav-drawer-toggle"). on ("klik", functie () $ (this) .toggleClass ("toggled");); ());Notitie: een deel van de bovenstaande code is rechtstreeks overgenomen van StarWars.com, terwijl andere stukken opnieuw zijn gemaakt om hetzelfde effect te bereiken.
Bekijk de definitieve demo.
Hoewel dit een ogenschijnlijk eenvoudige techniek is, spreekt deze op een veel genuanceerdere en rijkere manier tot het publiek dan een simpele "X" of een hamburger zou.
De ontwerpers van StarWars.com hebben tijdens het ontwerpproces aan veel ogenschijnlijk kleine details gedacht. Een die ik in dit artikel graag wil vermelden, is de 404-pagina.
404 pagina's worden vaak door ons als webontwikkelaars of ontwerpers vergeten, omdat we ze gemakkelijk als een 'edge-case' kunnen beschouwen. We lijken ze te vergeten omdat ze niet zijn wat is zou moeten gebeuren, dus we ontwerpen niet zwaar voor hen. 404 pagina's verdienen echter veel meer aandacht dan we misschien denken. Gebruikers bereiken 404 pagina's wanneer ze proberen toegang te krijgen tot inhoud die niet langer beschikbaar is, of misschien die is gekoppeld aan of verkeerd is getypt. Dit moment in de gebruikerservaring moet veel bewuster worden onderzocht.
Wanneer een gebruiker niet aankomt op een pagina die hij probeert te bereiken, kan het erg frustrerend zijn en ervoor zorgen dat de gebruiker onmiddellijk weggaat. Als het ontwerp van de 404-pagina echter zodanig is dat het de gebruiker helpt en deze tot op zekere hoogte behaagt, kan hun aandacht worden behouden. In het geval van StarWars.com, wanneer een gebruiker een verkeerd adres bezoekt (zoals http://www.starwars.com/nowhere), krijgen ze een grafische "404" te zien met een onvolledige Death Star in plaats van de nul en het bericht "Deze pagina is niet volledig ingeschakeld en operationeel. Probeer iets anders?"
Deze pagina is om twee redenen effectief. Ten eerste spreekt het opnieuw rechtstreeks tot Star Wars-fans; voor een groot deel van de filmseries lijkt de Death Star op de 404-pagina en wordt hij gebouwd. Wanneer het uiteindelijk klaar is in de finale van de zes films, zegt de keizer tegen Luke:
Zie nu de vuurkracht hiervan volledig gewapend en operationele gevechtsstation!
Dit is een cruciaal punt in de filmserie. De ontwerpers van StarWars.com wisten dat elke fan die naar de site komt en de 404-pagina bereikt, dit moment waarschijnlijk in de film zal onthouden, en in plaats van zich te concentreren op de frustratie dat ze niet bereiken waarnaar ze op zoek waren, zouden ze blij of afgeleid kunnen zijn door de herinnering aan de film.
Hoewel het lijkt alsof het een gemiste kans was om de beruchte quote te gebruiken "dit zijn niet de droids die je zoekt", heeft de alomtegenwoordigheid van Star Wars geleid tot veel 404 pagina's die dit thema al gebruiken, inclusief populaire sites zoals GitHub.
GitHub is het eerst gekomenDat omvat ons onderzoek naar de nieuwe StarWars.com. Zijn er interessante stukken van de site die je hebt ontdekt? Misschien ben je geïnteresseerd in het lezen van een "How They Did It" bericht over een andere site? Vertel ons in de reacties!
