Metro Design Principles Oliver Scheer Evangelist Microsoft Deutschland oliver.scheer@microsoft.com
METRO DESIGN IST UNSERE ETRO DESIGNSPRACHE. WIR NENNEN SIE METRO DESIGN, WEIL SIE MODERN UND KLAR IST. SIE IST SCHNELL UND LEBENDIG. ES GEHT UM INHALT UND TYPOGRAPHIE. UND SIE IST VOLLKOMMEN AUTHENTISCH.
Content Before Chrome
Typografie
Layout
Informationen vs. Metapher
Bewegung
Windows Developer Preview
METRO DESIGN IST UNSERE ETRO DESIGNSPRACHE. WIR NENNEN SIE METRO DESIGN, WEIL SIE MODERN UND KLAR IST. SIE IST SCHNELL UND LEBENDIG. ES GEHT UM INHALT UND TYPOGRAPHIE. UND SIE IST VOLLKOMMEN AUTHENTISCH.
Metro-Stil Prinzipien Seien Sie stolz auf Ihre gute Arbeit Schnell und dynamisch Digital authentisch Weniger ist mehr Gemeinsam gewinnen
Seien Sie stolz auf Ihre gute Arbeit Arbeiten Sie sorgfältig an den Details. Machen Sie die Nutzung von Apps sicher und zuverlässig. Setzen Sie auf Balance, Symmetrie und Hierarchie, um das Vertrauen zu fördern und das Gefühl von Integrität zu vermitteln. Passen Sie das Layout Ihrer App an das Raster an, dem klassischen Metro-Stil-Layout für Apps.
Schnell und dynamisch Reagieren Sie schnell auf Benutzerinteraktionen, und seien Sie für die nächste Interaktion bereit. Designen Sie für den Touchscreen und die intuitive Interaktion. Begeistern Sie Ihre Benutzer durch Animationen. Schaffen Sie eine attraktive und überwältigende UI.
Digital authentisch Stellen Sie eine Verbindung mit der Cloud her, damit Ihre Benutzer stets miteinander verbunden sein können. Seien Sie dynamisch und lebendig durch Kommunikation. Achten Sie auf eine schöne Typografie. Verwenden Sie kräftige, lebendige Farben. Setzen Sie Animationen sinnvoll ein.
Weniger ist oft mehr Seien Sie in einer Sache richtig gut, anstatt in vielen Dingen mittelmäßig. Inhalt ist wichtiger ist als Spielereien. Seien Sie visuell fokussiert und direkt. Lassen Sie die Benutzer in die Dinge eintauchen, die sie mögen, dann werden sie den Rest von selbst finden. Wecken Sie Vertrauen bei den Benutzern.
Gemeinsam gewinnen Passen Sie sich an das UI-Modell an. Vermeiden Sie Redundanz in Ihrer UI. Arbeiten Sie mit anderen Apps, um Szenarien zu erstellen, indem Sie an App-Verträgen teilnehmen. Verwenden Sie unsere Tools und Vorlagen, um die Konsistenz zu fördern.
Navigationsdesign
Hierarchisches System
Flaches System
Navigieren durch Streifen vom Rand
Semantischer Zoom
Fingereingabe- Interaktionsentwürfe
Windows 8 - Fingereingaben
Finger nutzen, wie es sinnvoll ist
Inhalte mit Fingereingaben durchsuchen
Rückmeldungen geben
Der Inhalt folgt dem Finger
Interaktionen sollten umkehrbar sein
Verwendung beliebig vieler Finger zulassen
Interaktion dürfen zeitlich nicht festgelegt sein
Windows 8-Sprache für die Fingereingabe
Gedrückt halten: lernen
Tippen: Hauptaktion
Ziehen: Verschieben
Zusammendrücken/Aufziehen
Drehen
Vom Rand aus streifen: App-Befehle
Vom Rand aus streifen: Systembefehle
Haltung bei Fingereingabe in Windows 8
Interaktionsbereich:
Lesebereich
Die vier am häufigsten verwendeten Haltungen
Fingereingabeziele in Windows 8
Zu dicke Finger?
Meine erste Metro-Style App
http://design.microsoft.com
Der Weg in den Windows 8 Beta Store... http://www.msdn-online.de/win8events
2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.