Metro Design Principles -...

Metro Design Principles Oliver Scheer

Evangelist

Microsoft Deutschland

oliver.scheer@microsoft.com

ETRO METRO DESIGN IST UNSERE

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

ETRO METRO DESIGN IST UNSERE

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.