Share
Wenn Sie Star Wars noch nicht gesehen haben, schauen Sie sich den Artikel an, sobald Sie diesen Artikel beendet haben. Alles davon. (Stellen Sie sicher, dass Sie wiederkommen und uns mitteilen, ob Sie IV-VI oder I-III bevorzugen.)
Wenn du haben Star Wars gesehen, vielleicht sind Sie ein wenig auf dem neuesten Stand der Filmreihe. J.J. Abrams (Produzent von Hat verloren und in jüngerer Zeit schreibt und produziert die neueste Star Trek - Serie die Nächster Star Wars, Episode VII, erscheint 2015. Darüber hinaus wurde Lucasfilm, das Heimatstudio von Star Wars, von Disney gekauft.
Neben den Neuigkeiten über die Star Wars-Saga erhielt StarWars.com ein Makeover von Bobby Solomon und dem Disney Interactive Team. Diese Seite enthält viele schöne Details, aber wir werden uns auf einige Besonderheiten konzentrieren, die uns besonders hervorheben.
Die Kopfzeile der Star Wars-Site ist ein Beispiel für eine sehr einfache Interaktion, die eine weitreichendere Bedeutung als die ästhetische Ausführung hat. Im Einzelnen spiegelt die Interaktion die Titelsequenz aller Star Wars-Filme wider. Beim Scrollen scheint sich das Logo von Ihnen zu entfernen und auf dem Weg auszublenden. Dieses einfache Detail ist ästhetisch ansprechend und bietet den Fans des Films einen unmittelbaren kulturellen Auslöser.
Gehen… 
Gehen… 
Weg.So haben sie es gemacht.
Zunächst werden die Kopfleiste und alle darin enthaltenen Elemente tatsächlich auf festgelegt Position: feststehend. Eine sehr einfache Technik wird verwendet, um sowohl den Parallaxeffekt im Hintergrund als auch die Logo-Dimensionierung zu erzielen. Wir werden es mit einem vereinfachten Beispiel demonstrieren.
<
In diesem Fall würden wir die folgende CSS verwenden.
Kopfzeile Position: fest; Breite: 100%; Höhe: Auto; Hintergrundfarbe: # 000; .nav-inner max-height: 300px; Höhe: 300px; Position: relativ; .nav-wrapper max-width: 1400px; Max-Höhe: 300px; Marge: 0 auto; Polsterung: 1,5%; -webkit-box-dimensionierung: border-box; -moz-box-dimensionierung: border-box; Box-Dimensionierung: Border-Box; Position: relativ; Höhe: erben; .nav-push margin-top: -65px; Position: relativ; .bg Anzeige: Block; Position: absolut; oben: 0; links: 50%; Breite: 1600px; Höhe: 100%; z-Index: -1; Hintergrundposition: Mitte; Hintergrundbild: URL (http://cdnvideo.dolimg.com/cdn_assets/82be7f552af3b9573427bcee1360b3c43d7fd5c8.jpg); Hintergrundgröße: Cover; transform: translate3d (0, 0, 0); transform: translateX (-50%); .logo display: block; Spitze: 50%; Breite: 100%; Max-Breite: 350px; Höhe: 100%; Max-Höhe: 130px; Marge: -65px auto 0; Box-Dimensionierung: Border-Box; Hintergrundbild: URL (// a.dilcdn.com/sw/navigation/sw_logo_stacked-92b3dc5967ed.png); Hintergrundgröße: enthalten; Hintergrundposition: Mitte; Hintergrundwiederholung: keine Wiederholung; Position: relativ; main position: relativ; oben: 300px; Höhe: 600px; Hintergrundfarbe: # 000;
Das Logo wird bei dieser Methode vertikal zentriert.
Nun kommt der Trick. Wenn der Benutzer einen Bildlauf durchführt, ändern wir die Höhe von .nav-inner, sowie die Deckkraft von .nav-inner. Dadurch schrumpft das Logo und die Höhe der Kopfzeile wird von der Höhe der enthaltenen Elemente bestimmt.
Wir können dies mit einem einfachen erreichen Scroll-Polling-Methode.
Hinweis: In diesem Beispiel wird jQuery verwendet.
Accentsconagua
var latestKnownScrollY = 0, Häkchen = falsch, $ w = $ (Fenster), $ 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, Deckkraft: (300 - currentScrollY) / 300); requestTick ();In Kombination mit dem obigen CSS bewirkt dieses JavaScript die Wirkung der Kopfzeilenscrollfunktion, ohne dass dazu eine umfangreiche DOM-Manipulation erforderlich ist, die die Performance etwas erhöht.
Schauen Sie sich die finale Demo an.
Die Desktop-Navigation ist relativ unkompliziert, sodass wir nicht über Implementierungsdetails sprechen. Aber werfen wir einen Blick darauf, was dieses Navi effektiv macht: die Icons.
Ein Abschnitt aus dem Spritesheet (Retina)Die Icons sind wieder eine weitere Funktion, die direkt mit Star Wars-Fans spricht. Beispielsweise hat der Designer für das Symbol "Filme" anstelle einer Kamera oder einer Bandspule ein Symbol ausgewählt, das den Bildlauftext darstellt, der am Anfang jedes Star Wars-Films angezeigt wird. Anstelle des Umrisses von zwei Personen wählten sie für das Community-Symbol den Helm eines Storm Trooper. Die Bedeutung jedes Navigationselements wird durch diese Entscheidungen für Star Wars-Fans verbessert, und die Erfahrung wird für Neulinge nicht verwässert.
Ein weiteres wichtiges Symbol ist die Schaltfläche "Suchen". Es mag wie eine Lupe wirken (ein allgemeines Suchsymbol), aber es ist auch eine übermäßig vereinfachte Version eines Todessterns, eines der wichtigsten Elemente in den Filmen.
Dies führt zu einem sehr wichtigen Punkt zu allen Symbolen in der gesamten Site: In der Regel entschied sich der Designer dafür, vertraute Anhaltspunkte und Grundformen wie eine Lupe oder die Kontur einer Person beizubehalten, diesen Grundformen jedoch Elemente hinzuzufügen das ist für diejenigen von Bedeutung, die sie verstehen. Dies vermittelt ein Gefühl von Verspieltheit und ein Gefühl für thematische Integrität auf der gesamten Site.
Wir werden ein wenig weiter in einen der am meisten besprochenen Teile dieser Site eintauchen: die Lichtschwertnavigation.
Bei niedrigeren Haltepunkten ist die Navigation über eine Schaltfläche zugänglich, die links oben im Browserfenster angebracht ist. Auf den ersten Blick mag es wie eine normale Menüschaltfläche aussehen, aber wenn Sie darauf klicken, werden die Linien in eine X-Form verschoben und ähneln zwei Lichtschwertern.
Jedes Stück davon wird mit einfachen CSS-Techniken und einem kleinen bisschen JavaScript erledigt. Hier ist das Markup des Menüs:
Das überspannt mit dem Bar Klasse werden die Lichtschwerter. Hier ist eine Neuerstellung des CSS, mit dem die Effekte erzielt werden:
# nav-drawer-toggle border-right: 1px-Vollbild # 333333; Breite: 60px; Höhe: 60px; Cursor: Zeiger; Position: feststehend; oben: 0; links: 50%; Rand links: -30px; .toggle-icon display: block; Position: relativ; Spitze: 50%; Breite: 100%; Marge: -22px auto 0 2px; -webkit-Übergang: Rand 600ms; -Moz-Übergang: Rand 600ms; Übergang: Rand 600ms; .bar display: block; Breite: 38px; Höhe: 2px; Marge: 9px; Rahmen rechts: 28px fest #fff; Rahmen links: 6px fest # d6d6d6; -webkit-box-dimensionierung: border-box; -moz-box-dimensionierung: border-box; Box-Dimensionierung: Border-Box; -webkit-transition-property: -webkit-transform, Rand, rechte Randfarbe, Box-Schatten; -moz-Übergangseigenschaft: -moz-transform, Rand, rechte Randfarbe, Box-Schatten; Übergangseigenschaft: Transformation, Rand, rechte Randfarbe, Box-Schatten; -webkit-Übergangszeit: 600ms; -Moz-Übergangsdauer: 600ms; Übergangszeit: 600ms; .bar: n-te des Typs (2n) -webkit-transform: Drehung (-180 Grad); -Moz-Transformation: drehen (-180 Grad); -ms-transform: drehen (-180deg); -o-transform: drehen (-180deg); transform: drehen (-180deg); / * Umschaltbare Zustände * / .toggled .toggle-icon margin: -32px 0 0 7px; .toggled .toggle-icon .bar: nth-of-type (3) Rand links: 5px; -webkit-transform: drehen (-42deg); -moz-transform: drehen (-42deg); -ms-transform: drehen (-42deg); -o-transform: drehen (-42deg); umwandeln: drehen (-42deg); .toggled .toggle-icon .bar: nth-of-type (2) Rand links: 14px; -webkit-transform: drehen (-137deg) translateY (-15px); -moz-transform: drehen (-137deg) translateY (-15px); -ms-transform: drehen (-137deg) translateY (-15px); -o-transform: drehen (-137deg) translateY (-15px); transform: drehen (-137deg) translateY (-15px); .toggled .toggle-icon .bar: nth-of-type (1) Deckkraft: 0; / * Lightsaber Glow * / # nav-drawer-toggle.toggled: hover .bar: nth-of-type (3) border-right-color: # ddf1da; Box-Schatten: 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-Schatten: 4px 0 6px 1px rgba (205,40,44,0,75);
Zum Schluss noch ein bisschen JavaScript, das den Nav-Status umschaltet:
(function () $ ("# nav-drawer-toggle"). ein ("klicken"), function () $ (this) .toggleClass ("toggled");); ());Hinweis: Einige der oben genannten Codes wurden direkt von StarWars.com übernommen, während andere Teile neu erstellt wurden, um den gleichen Effekt zu erzielen.
Schauen Sie sich die finale Demo an.
Obwohl dies eine scheinbar einfache Technik ist, spricht sie das Publikum viel differenzierter und reichhaltiger an als ein einfaches "X" oder ein Hamburger.
Die Designer von StarWars.com haben bei ihrem Designprozess an viele scheinbar unwichtige Details gedacht. Ich möchte in diesem Artikel auf die 404-Seite hinweisen.
404-Seiten werden von uns als Webentwickler oder Designer oft vergessen, da wir sie leicht als "Randfall" betrachten können. Wir scheinen sie zu vergessen, weil sie nicht das sind, was ist soll passieren, so entwerfen wir nicht schwer für sie. 404 Seiten verdienen jedoch viel mehr Aufmerksamkeit, als wir vielleicht denken. Benutzer erreichen 404 Seiten, wenn sie versuchen, auf Inhalte zuzugreifen, die nicht mehr verfügbar sind oder die möglicherweise nicht ordnungsgemäß verlinkt oder eingegeben wurden. Dieser Moment in der Benutzererfahrung sollte viel gezielter erforscht werden.
Wenn ein Benutzer nicht auf eine Seite gelangt, die er zu erreichen versucht, kann dies sehr frustrierend sein und dazu führen, dass der Benutzer sofort verlassen wird. Wenn die 404-Seite jedoch so gestaltet ist, dass sie dem Benutzer hilft und ihn in gewissem Maße erfreut, bleibt ihre Aufmerksamkeit erhalten. Wenn ein Benutzer bei StarWars.com eine falsche Adresse besucht (z. B. http://www.starwars.com/nowhere), wird ihm eine grafische "404" angezeigt, an deren Stelle ein unvollständiger Todesstern steht die Null und die Meldung "Diese Seite ist nicht vollständig aktiviert und kann nicht verwendet werden. Versuchen Sie etwas anderes?"
Diese Seite ist aus zwei Gründen wirksam. Erstens spricht es noch einmal direkt an die Star Wars-Fans. Für einen Großteil der Filmreihe sieht der Todesstern wie der auf der 404-Seite aus und befindet sich im Aufbau. Als es im Finale der sechs Filme endlich fertig ist, sagt der Kaiser zu Luke:
Zeig jetzt die Feuerkraft davon bewaffnet und betriebsbereit Kampfstation!
Dies ist ein zentraler Punkt in der Filmreihe. Die Designer von StarWars.com wussten, dass jeder Fan, der auf die Seite kam und die 404-Seite erreichte, sich wahrscheinlich an diesen Moment im Film erinnern würde, und anstatt sich auf die Frustration zu konzentrieren, nicht das zu erreichen, wonach er gesucht hatte, waren sie vielleicht begeistert oder abgelenkt durch die Erinnerung an den Film.
Es scheint, als wäre es eine verpasste Gelegenheit, das berüchtigte Zitat "Dies sind nicht die Droiden, nach denen Sie suchen" zu verwenden, doch die Allgegenwart von Star Wars hat zu vielen 404 Seiten geführt, die dieses Thema bereits verwenden, einschließlich beliebter Websites wie GitHub.
GitHub war zuerst daDamit ist unsere Untersuchung des neuen StarWars.com abgeschlossen. Gibt es interessante Stücke der Website, die Sie entdeckt haben? Vielleicht haben Sie Interesse, einen "How They Did It" -Post über eine andere Website zu lesen? Sagen Sie uns in den Kommentaren!
