Kontrollierenden Yosemite Icons

Letzten Monat veröffentlichte Apple eine Vorschau ihres neuen Betriebssystems OS X Yosemite. Im Anschluss an die visuelle Aktualisierung iOS 7 verfügt über Yosemite eine deutliche optische Veränderung. Apple hat hinzugefügt der bekannten Unschärfe und transluzente Materialien, ein sauberer aussehende Benutzeroberfläche, eine neue Systemschriftart und Symbole aktualisiert.

Dieser Beitrag erschien ursprünglich auf dem MartianCraft Blog.

Ich möchte auf meine Lieblings-visual-Update im Yosemite konzentrieren – die Dock-Icons. Vor dem Yosemite gepflegt Apple ein System zur Icon-Design durch eine Checkliste von meist unausgesprochene und verständlichen Leitlinien gepaart mit ein paar konkreten Empfehlungen in Human Interface Guidelines (HIG). Mit Yosemite dieses System wird konsequenter und regelmäßiger, noch die HIG bleibt stumm auf die Besonderheiten.

Die erste Sache, die Menschen wollen in der Regel mit einem Update zu diskutieren wie dieses ist das Look And Feel. Aber es gibt viele Vergleiche zwischen den Mavericks und Yosemite Symbole. Sie sind sauberer, sie haben den Glanz, Dinge glücklicher und heller Blick, entfernt und einige Skeuomorphic Elemente beibehalten.

Die Symbole für Finder und Einstellungen sind schön; Safari Symbol sieht besser auf dem Mac als auf iOS; Das Taschenrechner-Symbol ist schrecklich; Spiel-Center ist umständlich; und FaceTime sieht aus wie ein Fehler.

Toll. Gehen wir weiter.

Es gibt die neuen Icons viel mehr als nur einen frischen Anstrich – die visuelle Sprache erstreckt sich weit über nur die Steigungen.

Wenn 10.10 diesen Herbst ausgeliefert wird, erwarten Ihre Benutzer Ihre Symbole, um in das neue System zu Hause fühlen. Anstatt die Symbole Kritik, I 'm gonna die Icon-System zu sezieren und Fokus auf die kleinen Details, die Ihnen hilft machen Symbole, die sehen toll aus in Yosemite.

In den letzten paar Wochen habe ich viel Zeit damit, die neue System und unter Kenntnis von der Bildsprache verstehen verbracht. Dies ist, was ich entdeckt habe.

Das Dock

Es ist schwer, über die Dock-Icons zu sprechen, ohne zu erwähnen, wenn das Dock. 2D Dock ist zurück, so lassen Sie uns einen Moment, sich zu freuen.

Die Formen und Größen der Icons wurden angepasst, um einen besseren visuellen Rhythmus auf dem Bildschirm zur Verfügung zu stellen. Ich habe nicht gesehen, es überall veröffentlicht, aber es scheint ein Rastersystem, die hilft, diese Konsistenz zu erreichen. Ich erhalten zurück, aber zuerst lassen Sie uns darüber reden, die Formen.

Wie Sie auf dem Dock auf Mavericks (und vor) scannen, stolpert Ihr Auge über die nicht übereinstimmende Größen, Formen und ästhetische Stile hinzugefügt, da das Betriebssystem verändert und neue apps, um das System hinzugefügt wurden. Es wird wirklich auf der Hand, wie eklektischen Stil geworden war, wenn Sie die Standard-Dock in Mavericks (oben) mit gleichmäßiger Dock im Yosemite (unten) vergleichen.

Symbol Formen & Raster

Die neue Form und Raster in iOS 7 war stark von Apple vermarktet und in Blogs veröffentlicht, aber es wurde wenig auf die neuen Formen in Yosemite. Andreas Wendker vertuscht lediglich es im Bundesstaat der Union.

Apples Designer schrieb wieder der Icon-System für Yosemite. Oder besser gesagt: sie führten die Anfänge eines Systems. (Hinweis: Dies basiert alles auf die Beta und erste "öffentliche" Iteration von neuen Icons. Ich erwarte von diesem System werden klarer, im Vorfeld der Einführung des Yosemite).

Es gibt drei Grundformen für Applikations-Icons im System genutzt. EinKreis, ein Quadratund ein gekippter Rechteck. Natürlich Apple ist konsequent inkonsequent und weicht von diesem System an einigen Stellen, aber sie sind eindeutig Ausreißer.

Um diese Formen zu verstehen, ich begann mit dem iOS 7 Raster, und überzog ihn auf die 1024 x 1024 Symbole von Yosemite zu sehen, wie sie Line-up. Ich habe nicht die Formen überhaupt verschieben, das ist genau das, wo sie passen.

Kein Wunder, richten Sie Dinge ziemlich nahe für den Kreis und Quadrat. Jetzt schauen wir dieses Raster mit der Ikonenkunst. Ich habe die Deckkraft der Symbole reduziert, damit Sie das Netz sehen können.

Das Buch Symbol in der iBooks-Ikone richtet mit dem Gitter. Das Zentrum-Getriebe für Systemeinstellungen ist nahezu perfekt mit dem Raster ausgerichtet. Es könnte sein, eine Strecke, aber der Stift auf TextEdit steckt fast zwischen die inneren zwei Kreise.

Sie werden auch bemerken, dass das System Preferences-Symbol etwas kleiner als die Breite des Rasters hier ist. Apple nutzt zwei Größen für die "Square". Systemeinstellungen und Finder teilen die gleiche Breite, während Terminal und Activity Monitor breiter sind.

Mit dem App Store bricht das "A" aus dem Netz etwas offener als die feste Form des Buches ist das "A". Das Symbol ist dünner und hat ein anderes visuelles Gewicht als das iBooks-Symbol. Einfach gesagt, sieht es nur rechts. Abgesehen von Breite sitzt im Raster Finder glücklicher.

Das gekippte Rechteck verdient besondere Aufmerksamkeit, da es die häufigste Form des Symbols für apps von Drittanbietern werden.

Die alten gekippten Rechteck-Ikonen, wie das auf der linken Seite, sind vollständig platziert , im 3D-Raum mit natürliche Perspektive. Sie haben einen Fluchtpunkt auf allen Achsen. Anders ausgedrückt, wenn Sie ein Rechteck zeichnete, und es-11 ° gedreht, müssten Sie noch es perspektivisch die Form entsprechend verzerren.

Die Yosemite-Symbole angezeigt bei orthogonalen zuerst, aber mit der Tiefe. Sie sind ein geradeaus-Ansicht eines Objekts, ohne Perspektive auf der Achse "die Kamera". Wenn Sie ein Rechteck und-9 ° zu drehen, musst du etwas anderes als falsche 3D-Tiefe verzerren. (z. B. Fügen Sie die Seiten des Buches, einen Schlagschatten, eine Kante, etc..) Sie sind viel einfacher, in Optik und einfacher für Künstler zu zeichnen. Es ist schwer zu beschreiben, aber das obige Bild hilft den Unterschied zu verdeutlichen.

Es ist klar, es gibt eine Grundstruktur, die Icon-System – zumindest für den Kreis und Quadrat. Deshalb sitzen so schön Dinge, und fühlen sich geerdet im Dock. Sie brauchen keine 3D Regal dafür.

Das Raster ist eine Anleitung – Ihr Auge ist der beste Richter. Wenn es gut aussieht, ist es wahrscheinlich.

Es gab viele Spekulationen, dass Symbole in Yosemite wäre alles super-Ellipsen oder Kreise. Zum Glück ist das nicht der Fall. Ich denke Apple Designer haben einen tollen Job, bauen ein flexibles System, das für eine saubere Optik ermöglicht gemacht, aber die Flexibilität, die wir wünschen, erstellen Sie ein eindeutiges Symbol beibehalten.

Nutzen Sie die Yosemite-Symbole als Leitfaden, angepasst ich das iOS-Symbol-Raster, um eine aktualisierte Raster für Yosemite bilden:

Verwenden Sie das Raster oder nicht – beachten Sie einfach es vorhanden ist.

Die Form-Hierarchie

Bei der Einführung einer neuen visuellen Stil lässt sich hinreißen lassen und experimentieren Sie mit den Optionen.

Für eine Sekunde zu stoppen Sie und Fragen Sie sich, was Ihre Anwendung tut. Ein Shape kann besser als die andere Kategorie darstellen.

Nicht mir dies in der Regel gibt es Fehler in der Logik hier – an einigen Stellen setzt Apple auf ältere Formen mit Symbolen, aber ich werde versuchen, sie im System in Schubladen.

Der Kreis

Erscheint der Kreis für apps verwendet werden — leichte Stücke von Software; Unterhaltung, oder Konsumgüter konzentriert.

Sie sind gut aussehende, aber ich glaube nicht, dass eine Anwendung richtet sich an Profis sollte ein Kreis – aber vielleicht Ihre nächste to-do-Liste app sollte sein.

Sein sollte nicht Game Center und Kontakte auch Kreise? Wahrscheinlich, aber ich versuche, Kritik zu vermeiden, bis Yosemite veröffentlicht wird.

Das Quadrat

Der Platz scheint für systembezogene Dienstprogramme verwendet werden.

Finder, Terminal, Systemeinstellungen, Activity Monitor und Mission Control genau das richtige. Screen-Sharing passt auch, aber es ist geneigt-9 °, wahrscheinlich, weil es besser aussieht. Es erhält die gleichen styling wie die quadratischen Symbole aber. Aber es gibt eine weitere Form, bevor ich in meiner Diskussion auf Styling bekommen.

Das gekippte Rechteck

Ein Markenzeichen der Apple Symbol Designsprache seit die Einführung von OS X die Perspektive Neigung – oft mit einem überlagerten Werkzeug. Es ist noch heute in Yosemite, aber mit einem neuen – oder besser gesagt, der Mangel an – Perspektive.

Das gekippte Rechteck werden die am häufigsten verwendete Form aus diesen drei. Es wird für Anwendungen eingesetzt-Tools helfen Ihnen die Arbeit zu erledigen. Diese haben die höchsten Grad an Flexibilität und sind oft gepaart mit einer 3D-ähnliches Objekt besser repräsentieren den Anwendungszweck und geben ihm eine einzigartige Form.

Lichteffekte und Materialien

Graustufen ist out – kalte und warme Töne sind. Es wurde eine beliebte Blick in Hollywood-Blockbuster: gelb/Orange-highlights, blau/türkis Schatten. Die neue Yosemite-Symbole verwenden ähnliche tonale Verschiebungen mit ihrer metallischen Werkstoffen. Betrachten wir diese Symbole als Materialien, dieser Ton stellt eine Umgebung Reflexion – nicht bloß einen Farbeffekt.

Craig Federighi rief das durchscheinende Material des neuen Docks, wenn Apple Yosemite enthüllt. Auf den ersten ich lachte, als ich sah, dass die Keynote – "Es ist nur eine Unschärfe und ein weißes transparentes Overlay" sagte ich mir. Sie können es Rabatt, wie Marketing sprechen, aber die neuen Symbole als physische Objekte mit Materialien im realen Raum mehr als in allen vorherigen OS fungieren. Sie tun dies sogar unter Beibehaltung einflacher aussehen.

Es ist nicht auf jeden Kreis und Quadrat im Yosemite, aber es kann auf die Schlaganfall-Highlights auf der Außenseite des Kreis-Symbol am Rande metallic (iPad-Like) auf die quadratischen Symbole (z. B. Terminal, Activity Monitor, Systemeinstellungen), schrägen, gesehen und auf jedes Metall gepaart mit den gekippten Rechteck (z. B. den Stift in TextEdit) und die Lupe in der Vorschau.

Du musst diese Effekte in einer 3D-Anwendung erstellen, wie sie einfach, mit einfachen Steigungen neu zu erstellen sind. Jedoch hilft 3D-Kugeln besser zu veranschaulichen, was ich meine. In diesem Beispiel befinden sich Kugeln auf einer ebenen Fläche, innerhalb einer größeren Kugel hat ein nahtloses Bild von Bäumen darauf angewendet.

Bei 3D-Anwendungen nennt man globalen Illumination.

Die Kugel auf der linken Seite ist ein weißes Material. Obwohl es kein reflektierendes Material ist, sehen Sie Schattierungen von Grün, gelb und braun auf der Sphäre von der Szene rund um es reflektiert wird. Es gibt auch orange Schatten auf der Unterseite der Kugel durch die Oberfläche, wo es ruht, reflektiert wird. Dies ist wie Licht und Umwelt im realen Leben Verhalten und dies ist, wie "flach" Objekte in Yosemite gedacht werden können.

Die Kugel auf der rechten Seite ist ein Chrom-Material. Weil es Chrom, es spiegelt die Szene und die Umwelt um ihn herum und dient als Spiegel – die Art und Weise Chrom wirkt in einer physischen Umgebung. So sieht die metallischen 3D Objekte jetzt in Yosemite, aber da sind sie Aluminium — nicht Chrom – die Wirkung ist mehr diffuses und subtil.

Es ist als ob Apple die Yosemite-Tapete als Umgebungs-Map für die neuen Icons verwendet. Farbnuancen Details wie diese können im gesamten System gesehen werden. Diese Liebe zum Detail in Ihre eigenen Icons gehen einen langen Weg zu Ihrer Ikonen wie zu Hause fühlen.

Dein Zug

Die Form, Gitter, Beleuchtung und Details sind wichtig, aber es ist wichtig zu bedenken, dass dies nur Richtwerte sind. Ein guter Designer weiß, wann man aus dem System zu brechen und machen es funktioniert immer noch. Bist du neu bei Icon-Design, empfehle ich, mit dem System ab, bis Sie es verstehen.

Achten Sie auf die allgemeine Form und Ton des Symbols, betrachten Sie es als Objekt mit Materialien. Vereinfachen und Blick auf Ihr Symbol entlang Seite andere Symbole. Hat sich nicht viel verändert – nur ein visuelles Update mit konsequenter System.

Alle hier gezeigten Symbole waren ein logischer Schritt von den Mavericks-Versionen. Die Symbole mit einem Form-System zu vereinen, macht Sinn. Jedoch nicht alle apps werden, oder sollte das System passen. Kundenspezifische Formen abheben und lassen sich leichter auf der Anklagebank herausgreifen. Achten Sie in diesen Fällen genau auf den Winkel, die Beleuchtung und die Gesamtgröße des Symbols.

Jetzt gehen Sie auf Ihr Yosemite Symbol loslegen! Ich habe eine PSD-Datei mit den Formen und Raster als Ausgangspunkt erstellt.

Nick ist Lead Designer und Designmanager bei MartianCraft, wo er arbeitet mit einer Gruppe von wirklich intelligente Menschen entwerfen, Mac Software, iOS apps und allerlei andere coole Sachen. Sie folgen ihm auf Twitter und dribbeln, oder schauen Sie sich seine persönliche Seite.