Änderungen am Apple.Com Design
Apple.com hat in der letzten Woche einige Änderungen an seinem Design vorgenommen, Änderungen, die Sie vielleicht nicht einmal bemerkt haben, wenn Sie nicht genau genug darauf geachtet haben.
Obwohl viele Berichte dies als "Redesign" bezeichnen, halte ich es für schwierig, es als solches zu klassifizieren. Es gibt sicherlich einige signifikante Änderungen, aber die Änderungen sind nicht gerade eine vollständige Überarbeitung wie es bei CNN.com der Fall war Ende 2009.
Nichtsdestotrotz sind die Änderungen für Webdesigner von Bedeutung, daher werde ich sie hier kurz betrachten. Wenn es etwas über die Änderungen gibt, die ich nicht erwähnt habe, kannst du mich gerne kommentieren.
Eine neu gestaltete Navigationsleiste
Die wichtigste Änderung (wenn auch immer noch etwas subtil) ist das Aussehen der Navigationsleiste. Apple hat eine dieser Navigationsleisten, die designtechnisch alle lieben und beneiden. Es scheint unmöglich, dass es verbessert werden könnte. Nun, sie waren irgendwie in der Lage, Wege zu finden, um es noch besser und intuitiver aussehen zu lassen.
Hier ist die alte Navigationsleiste:
Hier ist das Neue:
Die Änderungen umfassen:
- Es ist dunkler
- Der Farbverlauf wurde durch kräftigeres Hochglanz-Aussehen ersetzt
- Das Aussehen des Logos wird vereinfacht
- Das Suchfeld ist kleiner (mehr dazu unten)
Ich denke, es braucht wirklich ein großartiges Team von Designern, um wirklich signifikante Änderungen am Aussehen eines sehr wichtigen UI-Elements vorzunehmen, während man immer noch den Eindruck hat, dass sich nichts geändert hat. Es zeigt, dass visuelle Details oft nicht so wichtig sind wie das Gesamtbild des Designs.
Das flexible Suchfeld (nur WebKit)
Das Apple-Design-Team hat offensichtlich WebKit-voreingenommen und hat einige WebKit-Erweiterungen hinzugefügt, von denen eine mit dem Suchfeld verknüpft ist.
In den meisten Browsern wird durch Klicken in das Suchfeld der Hintergrund heller dargestellt. In Chrome oder Safari wird das Suchfeld mithilfe von CSS3-Übergängen animiert, um breiter und möglicherweise ein wenig nützlicher zu werden. Der folgende Screenshot zeigt das Suchfeld in Chrome, nachdem es animiert wurde, breiter zu werden:
Um die Größe des Suchfelds anzupassen, ändern sich die anderen Navigationselemente und das Logo selbst.
Ich mag diese Funktion; es fügt ein Gefühl der Intuitivität hinzu. Aber es ist meiner Meinung nach ein kleiner Fehler: Es geht nicht in den Ausgangszustand zurück, nachdem Sie den Fokus entfernt haben. Natürlich, wenn etwas in das Suchfeld eingegeben wurde, sollte die Größe nicht geändert werden, aber ich denke, es sollte in seinen normalen Zustand zurückkehren, wenn es den Fokus verliert und leer bleibt.
Da es äußerst unwahrscheinlich ist, dass jemand in das Suchfeld klickt und nichts eintippt, nehme ich an, dass dies eine unbedeutende Auslassung ist.
Animierter Eintrag in der Navigationsleiste (nur WebKit)
Ein weiteres kleines WebKit-Feature ist der animierte Eintrag der Navigationsleiste. Ich kann mich nicht erinnern, diesen Effekt schon vorher auf ihrer Seite gesehen zu haben, also nehme ich an, dass dies ein weiteres neues Feature ist. Der animierte Eintrag erfolgt nur auf der Startseite und nur einmal pro Browsersitzung. Dies ist eine gute Übung und eine gute Lektion für Entwickler, die ihren Interfaces animierte Effekte hinzufügen.
Wie in der obigen Abbildung gezeigt, wird die Navigationsleiste von außerhalb des Bildschirms eingeblendet, wahrscheinlich mithilfe der CSS3-Keyframe-Animation, zusammen mit JavaScript, um zu steuern, wann die Animation stattfinden soll oder nicht.
Die animierten Produktbrowser (nur WebKit)
Ein weiterer neuer Zusatz ist die Verwendung von Animationen auf einigen Produktseiten. CSS3-basierte Animationen werden auf der Mac und iPod Produktbrowser, von denen einer unten gezeigt wird:
Die Produkte animieren, wenn Sie zum ersten Mal auf der Seite erscheinen, und wenn Sie zwischen Unterkategorien wechseln, huschen die sichtbaren Produkte weg und neue springen an ihre Stelle. Dies geschieht über CSS3 Keyframe-basierten Code, manche, von denen ist unten gezeigt:
Bei Nicht-WebKit-Browsern wechselt die Animation des Produktbrowsers auf einfaches JavaScript-basiertes Fading. Obwohl diese Art von Ding nicht in jeder Situation ideal ist (da es im Wesentlichen "Code-Forking" bedeutet), ist es eine realistische Option für Entwickler und Designer heute, die für die bestmöglichen Browser kodieren und für den Rest weniger verbesserte Funktionalität bereitstellen möchten .
Suchfeld Automatisch vorschlagen
[UPDATE] Wie von einigen Personen in den Kommentaren hervorgehoben, ist der automatische Vorschlag kein neues Feature. Unsere Aufnahme als "neues Feature" basierte auf einem anderen Artikel, der berichtete, dass der automatische Vorschlag neu war. Nichtsdestoweniger behalten wir diesen Abschnitt, weil es ein gutes Feature ist, das das Potenzial hat, eine Website ein wenig brauchbarer zu machen, und ein gutes Beispiel für andere Entwickler und Designer bietet, wenn es zu ihrem Projekt passt.
Das Ajax-gesteuerte automatische Vorschlags-Dropdown wird angezeigt, während Sie eine Suchanfrage eingeben:
Wie in der Screenshot oben gezeigt, zeigt das Dropdown-Menü nicht nur die Suchergebnisse an, die den eingegebenen Zeichen entsprechen, sondern die Ergebnisse werden von Produktfotos und Beschreibungen begleitet. Ich denke, die Fotos sind an dieser Stelle wertvoller als die Beschreibungen, aber insgesamt hat dies das Potenzial, Produktsuche und -konversionen zu rationalisieren.
Noch etwas?
Dies scheint die wichtigsten Änderungen bei der jüngsten Neugestaltung des Apple.com-Designs zu umfassen. Gibt es noch andere wesentliche Änderungen am Design oder Code, die ich hier nicht erwähnt habe?
Dieser Beitrag wurde exklusiv für Webdesigner Depot von Louis Lazaris, einem freiberuflichen Autor und Webentwickler, geschrieben. Louis rennt Beeindruckende Webs wo er Artikel und Tutorials zum Thema Webdesign veröffentlicht. Sie können folge Louis auf Twitter oder über seine Website mit ihm in Kontakt treten.
Was denkst du über die Änderungen am Apple.com-Design? Gibt es Änderungen, die wir hier nicht erwähnt haben?