Share
In den letzten Jahren hat Microsoft die etablierte Designsprache in erheblichem Umfang übernommen. Metro ist die ästhetische Basis von Windows 8; Das nächste Betriebssystem von Microsoft wird im Oktober ausgeliefert. Lassen Sie uns einen Blick darauf werfen, was Metro ist, wie wir einige der wünschenswerten Prinzipien nachahmen können und einen Blick darauf werfen können, wo sie bereits verwendet wird.
Metro ist die Bezeichnung für die Designsprache, die in den aktuellen und zukünftigen Betriebssystemen von Microsoft verwendet wird, darunter das kommende Windows 8, das aktuelle Xbox 360-Dashboard und einige Websites. Einige Aspekte der früheren Arbeit des Unternehmens waren bereits in Windows XP und Zune zu beobachten.
Das Designteam von Microsoft hat gezeigt, dass die Sprache zum Teil von Schildern des öffentlichen Verkehrs beeinflusst wird, wobei der Typografie und einer visuellen Hierarchie, die aus Text mit unterschiedlichen Eigenschaften besteht, ein hoher Stellenwert eingeräumt wird. In der Softwaredesign beschrieb Microsoft Metro als "Aktualisierung" von den Schnittstellen von Windows (vor 8), Android und iOS, die hauptsächlich ikonbasierte Schnittstellen aufweisen.
Obwohl der scharfe Übergang in Windows 8 für Kontroversen offen war, war der Empfang von Metro überwiegend positiv und es ist nicht schwer zu verstehen, warum.
Für Microsoft ist die Ästhetik von [der Metro-Benutzeroberfläche] etwas kühner und informeller als die engen, sterilen Symbolgitter und Rolodex-Menüs des iPhone und des iPod Touch. - CNET
Microsoft hebt vier Prinzipien für die Metro-Benutzeroberfläche hervor. Typografie, Bewegung, "Inhalt nicht Chrom" und Ehrlichkeit. Lassen Sie uns einen Blick darauf werfen, wie diese ins Internet übertragen werden.
Typografie ist ein sehr wichtiges Prinzip in Metro. Als Benutzeroberfläche tauscht Metro traditionelles, ikonbasiertes Design für die Navigation aus, die ausschließlich aus Text besteht. Wenn der Text einem definierten Raster entsprechen muss, wird er auf einfarbige Vierecke gesetzt.
Metro wird als modern beschrieben, und dies wird durch die Verwendung des serifenlosen Typs deutlich, insbesondere im Fall von Windows der Segoe-Schriftfamilie. Beim Metro-beeinflussten Design unterscheidet sich der Text weitgehend nur durch die Größe, wobei Schriftart, Schriftgewicht und andere Eigenschaften gleich oder ähnlich sind, und unterscheidet sich in anderen Eigenschaften nur, wenn sie als Link oder als alternative Hintergrundfarbe dienen.
Mit der Reduktion der Grafik zugunsten von Text beeinflusst Metro die Verwendung von Text auf allen Ebenen. Daher entsteht eine Hierarchie, und bei einem minimalistischen Website-Design kann die Schriftgröße als einzige Unterscheidung zwischen Abschnitten dienen (z. B. Titel eines Blog-Posts und Begleittext). Wenige Unterschiede zwischen den Textstilen mit einer guten und konsequenten Verwendung von Leerzeichen in Einklang zu bringen, ist ein Kernbestandteil der typografischen Prinzipien in Metro.
Microsoft selbst hat einen Artikel über die Typografierichtlinien von Metro. Es ist offensichtlich, dass Sie sich nicht daran halten müssen (dies ist in erster Linie eine Richtlinie für Softwareentwickler), aber der Leitfaden zeigt eine Möglichkeit, die typografischen Ethos von Metro auf verschiedenen Ebenen zu verwenden.
In Verbindung mit den typografischen Merkmalen von Metro spielt "Inhalt statt Chrom" eine große Rolle bei der visuellen Unterscheidung von Metro von anderen Gestaltungsmöglichkeiten.
Die sichtbaren grafischen Oberflächenmerkmale einer Anwendung werden manchmal als "Chrome" bezeichnet - Wikipedia
Der minimalistische Ansatz von Metro wird letztendlich durch die Vermeidung von Schnittstellen mit Chrome erreicht. Stattdessen werden Sie auf inhaltsorientierte Designs stoßen, die hauptsächlich aus Text bestehen, der die oben genannten typografischen Qualitäten berücksichtigt. Durch das Entfernen des Chroms wird das Hauptaugenmerk auf Designs gelegt, was besonders bei Blogs und anderen textbasierten Websites von Vorteil ist.
Durch die Vermeidung von Chrom im Design kann eine Site von einer nahtloseren Skalierung profitieren und bei kleineren Bildschirmgrößen als Teil eines responsiven Designs effektiv arbeiten. Ein Beispiel hierfür ist ein Blick auf Metro-Apps in Windows 8, die mit vergleichbaren Apps unter Windows Phone 7 verglichen werden. Die Philosophie "Inhalt statt Chrom" spielt mit einem responsiven Design zusammen, das offensichtlich wichtig ist, wenn es darum geht, in mehreren Größen konsumiert zu werden.
In Google Chrome haben wir uns bemüht, [Chrome] zu eliminieren - nicht nur, weil dies zu einem einfacheren und saubereren Design führt, sondern auch, weil wir der Meinung waren, dass Ihre Webanwendungen nicht in der sperrigen Kiste eines Browsers eingeschränkt zu sein scheinen - sie sollten sich anfühlen erstklassige Anwendungen auf Ihrem Desktop. - Google.
Die Hauptaufgabe von Microsoft in Bezug auf "Inhalt, nicht Chrom" besteht darin, sich mit dem Inhalt zu erfreuen, nicht mit der Dekoration. Dies wird erreicht, wenn auf der Seite alles reduziert wird, was nicht der Inhalt ist. Auf diese Weise können Sie eine erfreulich einfache Benutzererfahrung erzielen, eine Philosophie, die bereits im Internet für viele Designs nachgewiesen wurde, auch wenn sie nicht ganz wie Microsofts Metro aussehen. Sogar Browser implementieren Software, um Benutzern eine Anzeigeoption zu ermöglichen, die dem Prinzip entspricht.
Der Bewegungsaspekt von Metro als Entwurfssprache ist für Anwendungen fokussiert. Ihr Einfluss auf Ihr Design hängt davon ab, wie viel Interaktion ein Benutzer hat und wie viel Übergang die Interaktion auslöst.
Microsoft glaubt durch Metro, dass die Ästhetik eines Designs durch die Fließfähigkeit und Leistung des Designs in seiner Wichtigkeit übereinstimmt und dass die Bewegungsprinzipien Tiefe und Reaktionsfreudigkeit für einen Standort bieten.
Windows 8 und Windows Phone 7 haben auch eine Vorliebe für horizontales Scrollen. Der Inhalt ist in einer Richtung angeordnet, die in einem traditionelleren Design-Paradigma praktisch nicht vorhanden ist. Es wurde nicht wirklich in das Desktop-Web übersetzt, selbst auf den eigenen Websites von Microsoft, aber es ist im mobilen Design sehr beliebt. Daher können responsive oder berührungszentrierte Designs dies sehr effektiv nutzen. (Auch wenn dies in Metro-basierten Benutzeroberflächen verwendet wird, ist dies kein offizielles Prinzip und ist bei Betriebssystemen bereits offensichtlich.)
Metro ist "authentisch digital", im Gegensatz zu einigen skeuomorphischen Gestaltungsprinzipien von Unternehmen wie Apple. Beispielsweise hat Apple seine Apps "Kontakte", "Kalender", "Notizen" und "Erinnerungen" so gestaltet, dass sie den eher körperlichen Gegenstücken ähneln, was sich als ziemlich kontrovers herausgestellt hat.
Microsoft glaubt an etwas ganz anderes. Die Metro-Sprache ist so konzipiert, dass ihre Prinzipien nicht versuchen, etwas zu ähneln, das sie nicht ist, und stattdessen ihre digitale Natur durch Design zu umarmen. Anstatt eine Liste von Kontakten wie das Adressbuch aussehen zu lassen, das Sie möglicherweise in einem Geschäft kaufen, sollte es wie eine Liste von Kontakten auf einem Telefon oder Computer aussehen, um die Prinzipien von Metro einzuhalten.
Das Logo für Windows 8 wurde von sich aus kontrovers diskutiert, entspricht aber den Prinzipien von Microsoft, authentisch digital zu sein. Sicher, es sieht immer noch aus wie ein Fenster, aber nicht wie das Fenster, das Teil eines Gebäudes ist - stattdessen einfach das Fenster im Namen - also gibt es kein Kunstglas oder Holz. Selbst das Design eines Buttons sollte keinen Einfluss auf das Design eines Buttons haben, auf den Sie im realen Leben stoßen.
Die Entscheidung, keine traditionelle To-do-Liste zu emulieren, hat es den Designern [von Clear für iPhone] ermöglicht, anders zu denken und die ihnen zur Verfügung stehende Technologie voll zu nutzen. Die App wurde aus Multi-Touch-Gesten aufgebaut und sorgt zusammen mit der sanften Animation für ein sehr einzigartiges und elegantes Erlebnis. - Shaun Cronin
Dieses Konzept trägt seinen Teil zur Idee "Inhalt statt Chrom" bei, indem überflüssige Details entfernt werden, die den Inhalt nicht unterstützen.
Wichtig ist, dass Metro kein Design ist. Zwar gibt es definitiv Websites, die direkt an Windows 8 oder Windows Phone 7 erinnern, aber das ist nur eine Interpretation der Sprache. Ihr Design muss nicht identisch mit einer Metro Windows-App aussehen, um der Sprache zu entsprechen.
Entwürfe können sich auf verschiedenen Ebenen von Metro inspirieren lassen, müssen aber offensichtlich nicht unbedingt so aussehen, als würden sie von Microsoft hergestellt. Sie können die typografischen Prinzipien von Metro implementieren, ohne Segoe als Ihre bevorzugte Schriftfamilie verwenden zu müssen, ähnlich wie Sie "Inhalt statt Chrom" implementieren können..
Mit der Typografie, die so ein wesentlicher Bestandteil von Metro ist, kann Ihr Design tatsächlich nicht wie Microsoft aussehen, während es gleichzeitig von seinen Praktiken profitiert.
Metro wurde in erster Linie für Softwaredesign entwickelt, aber seine Funktionen beeinflussen inzwischen auch das Web, angefangen mit den eigenen Eigenschaften von Microsoft.
Die Vorschau von Microsoft.com ist eine sehr schöne Aktualisierung der Homepage des Unternehmens, um sich wirklich mit Metro auszurichten und ein ansprechendes Update zu geben.
My Kind of Phone ist der britische Blog von Windows Phone. Es ist also ganz natürlich, dass es der Designsprache der Plattform folgt, die es abdeckt. Sie können hier auch die "Motion" -Prinzipien von Metro im Spiel sehen, wobei sich einige Inhalte ändern, wenn Sie mit der Maus über Gegenstände fahren.
Microsofts Zune-Site ist sehr stark von Metro beeinflusst. Dies ist besonders bemerkenswert, da Zune das erste Gerät war, das eine voll entwickelte Metro-Schnittstelle nutzte. Sie sehen im Design eine perfekte Verkörperung von Metro im Web.
Die aktuelle Homepage der BBC hält sich stark an die Metro-Prinzipien und verwendet mutig Typografie und Raster.
Sogar die Websites von Google haben einen Funken Metro-Effekt. Die jüngste Neugestaltung der App-Suite zeichnet sich durch eine großzügige Nutzung von Leerzeichen und die Verwendung von Typografie aus. Ähnlich wie in den Microsoft-Richtlinien für Typografie verwendet Google eine einzige Akzentfarbe inmitten der einfachen Typografie.
Accentsconagua