Embed Size (px)
Citation 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.
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.
