Designen im Metro-Style

Samuel Monreaux

Metro ist ein sehr modernes Design, das findet Anlehnung an den Bauhaus-Stil. Bauhaus ist eine deutsche Design-Bewegung und Design-Schule aus den 20ern. Bauhaus war eine Gegenbewegung auf Überfluss und Überdekoration. Die industrielle Revolution hatte die Welt geändert, aber die Künstler haben sich in gestrigen Designideen bewegt. Ebenso wie heute. Reduktion. Form follows Funktion.

International Typographic Design Style – Swiss Design
Die Swiss-Typografie ist geprägt von Lesbarkeit und Klarheit. Man sieht diese Designsprache besonders auf Flughäfen und Verkehrsstrukturen. Die Typografie-Ausdruck ist auch international.
Motion Design – Cinematografie. Weil wir in schneller Bewegung sind, brauchen wir schnell erfassbare klare Informationgrafie. Die Mittel des Swiss Design sind Typografie, Raster, flache Farbschemata.

Motion Design in Anlehnung an Cinematografie
Motion/Bewegung erzeugt Emotion. Bewegung erweckt Interface zum Leben. In Film-Intros wird Typografie in Bewegung bracht.

Metro Style Design Principles

Prinzip 1: Pride in craftmanship
Sweat the details: Das große und Ganze muss für den Benutzer stimmig sein. Daher muss viel Arbeit ins Detail gesteckt werden.
Make it safe and reliable: Design mussen Benutzerführung, Performancen, Informationsdarstellung fördern.
Balance, symmetry, hierarchy: Ausgewogenheit, Symetrien und Hierarchien führen das Auge.
Align to the grid: Raster helfen, Orientierung, Struktur und Raumnutzerung aufzubauen. In einem Raster findet man die Grundlage für Ordnung und Freiräume.

Prinzip 2: Be fast and fluid
– Life is mobile
– Delight with motion
– Design for touch
– Intuitive interaction
– Be responsive and ready
– Be immersive

Prinzip 3: Authenticlly digital
– Cloud connected
– Dynamic and alive
– Beautiyful use of typografie
– Bold virant colors
– Motion

Prinzip 4: Do more with less
– Be great at something
– Focused and direct
– Content before chrome: Es geht um den Inhalt und nicht den Rahmen – bei Browsern, Software und Apps.
– Inspire confidence

Prinzip 5: Win as one
– Fit into the UI model
– Reduce redundancy
– Work together to complete scenarios
– Tools and templates are design to scale: Es gibt viele Hilfestellung, das Metrodesign zu nutzen. Es ist enthalten.

Vorstellung des Windows Stores

Ted Dworkin
Es wird einen Store ähnlich zum WP7-Store geben. Die genauen Business-Spezifikationen werden kommuniziert, wenn die Partnerschaften geschlossen sind für den Bau die entsprechenden Applikation.
Auch der Faktor Partnerschaft ist neu erdacht worden. In mehreren Stufen wird man unterstützt von den Tools, über Marketing, Monetarisierung, Feedback. Microsoft möchte hier helfen, Geschäfte mit den Kunden entwickeln. Die App wird nicht über den Store alleine gehen müssen. Die Entwickler entscheiden es selber, ob der Store, der eigene Shop oder die internen Distributionswege genutzt werden sollen.

Curation and protection:
Der Microsoft-Store wird der einzige Platz sein, wo Metrostyle-Apps herausgeben werden. Microsoft checkt in einem 3 Stufen-Programm jede App. Technische Zertifizierung, Security und Inhaltliche Korrektheit.

Consistency and predictability:
Die Qualitätsanforderungen von Microsoft sollen erfüllt und sichergestellt werden, um damit künftig gute Geschäft zu

Commitment:
Es geht um gemeinsam Verträge und Commitments. Es geht um Vertrauen und ein Miteinander.

450 Millionen Windows 7 Licenzen sind verkauft worden in 2 Jahren.
Es werden also große System versorgt mit der Software, aber mit über 500 Millionen Windows 8 Kanditen ist man entsprechend großes Geschäftsfeld.

Windows 8: Reimagine user experience, new application model, form factor diversity
Store: Integration, Discovery, Telemetry

User Experience:
Das Benutzer-Erlebnis soll ganz stark von Metro-Style geprägt sein. Nur so kommt man in den Store.
Das ist die Story:
Der Benutzer ruft von seiner Startseite die Storeseite auf. Es wird entsprechende Kategoriebene geben, wo sich der Benutzer Apps aussuchen kann. Der Durchschnittspreis für eine App wird 8 $ sein. Nur Apps, die dem Nutzen einen Mehrwert geben, sind Apps mit Chancen. Jede App hat eine kleine Landingpage. Es wird ein App-Lizensierung-Modell geben. An dieser Stelle wird zurecht in Erinnerung geführt, dass es sich hier um moderne Software handelt, die hier vertrieben und publiziert wird.

Der Entwickler selber ist derjenige, der das Business anschiebt.

Discoverability:
Die Suchindizierung wird durch MS den Store erstellt werden, aber auch gleichermaßen durch IE10 als Browser. Desktop-Apps laufen ebenfalls über den Store. Erkannt werden die Apps durch entsprechende Meta-IDs. Der Zertifizierungs-KIT ist jetzt verfügbar und auf den Tablets die gestern ausgehändigt wurden. Die Qualität der Apps sollte und kann offline getestet werden, aber den Schlusstest wird Microsoft machen. Eine Vorzertifizierung kann man mit dem KIT machen und bekommt entsprechende Ergebnisse.

Als weiteres Tool für Entwickler wird es ein Dashboard geben unter dev.windows.com. Dort wird der gesamte Zertifizierungsprozess abgebildet. Ebenso wird über das Dashboard auch der Erfolg und die Statistik der App abgebildet. Das Dashboard ist auch ein Debugging-Tool hinsichtlich Exceptions.

Styling und Animation XAML innerhalb vom Metro-Style

John Papa
Vieles, von dem, was es hier zu hören gibt, dürfte sich auf Silverlight-TV wiederfinden. Hier geht es um XAML. Sehr sympathisch finde ich die explizite Ausladung an Leute, die kein Interesse an XAML haben. Er wird uns die Metro-Style-Dinge zeigen, die out-of-the-box mitkommen, ebenso aber auch den hohen Grad an Individualisierungsmöglichkeiten.

Control Styling

Out of the Box
Am Beispiel der Memories App wird er uns diverse Out-Of-the-Box-Beispiele zeigen. Eines der Controls ist die Grid-View-Control, die Layout-Strukturen und Animationen von Haus aus hat. Das ResourceDictionary mit den Impliziten Style ist ähnlich wie das des Windows Phone 7. Alle Controls sind als Styles optimal umgesetzt und als helle oder dunkle Variante vorgesehen. Die Source „light_generic.xaml“ muss nur integriert werden und ist damit implementiert. Sie können über den üblichen Weg drag and drop auf die Bühne gezogen werden im VisualStudio. Wenn der Hintergrund auf Hell geändert wird, ändern sich (wie auch immer) magisch die Controls in das dunkel Theme.

Style Controls
Er zeigt uns nun ControlStyling – also das umändern des Standards. Das beantwortet auch die Frage, ob man den Style ändern darf. Technisch ist es ein Switch von implizit zu explizit. Aus Designsicht ist dieser kleine Schritt eine große Aussage: Metro darf angepasst werden – auf Branding und auf eigene Designideen. Es darf also etwas erstellt werden, was zur eigene Sache paßt unter Beibehaltung der Prinzipien. Technisch gesehen ist das „Based on“.

Visual State Manager
Auch das beinhaltet wieder eine indirekt Aussage: Man hält sich in Windows 8 an die Strukturen von Silverlight und nicht an die Triggers von WPF. States einer Control werden über den VisualStateManager realisiert. Es gibt keinen Click-EventHandler.

Windows Animationen

Build in Animations for free: Die Default-Controls haben Animationen integriert. Ebenso auch Template-Pages.

Using the Animations Library:
Es gibt mit den neuen Tools eine Animationsbibliothek, die von Hause aus integriert sind. Sie müssen nur angewandt werden. Diese Animationen haben ein ansprechendes Motion Design sowie ein gute Performance.
In- und Out-Animationen: Wenn Seiten sich wechseln.
Content-Animationen: Wenn Content sich ändert.
Repositionierung: Wenn etwas drag and drop bewegt wird.
Add-Delelte: Wenn Dinge hinzugefügt werden.
Hinzugefügt werden sie durch ein paar kleine Zeilen XAML-Code und die Verfeinerung. (ähnlich wie bei Behaviours)
Und viele andere wie TapUp, PopIn, Reposition. CrossSlideBack, Drag, ….
Im Grunde immer das gleiche Prinzip: Auf ein Event wird eine optimale Animation des betreffende Elements ausgelöst.

Custom Animations
Animationen können selbstverständlich auch selbergemacht werden wie vormals in Silverlight. Man kann sich die Quälerei im Coding antun oder man kann es in Blend machen wie gewohnt.

Tips
1. Animations innerhalb der impliziten Controls nutzen
2. Für die Konsistenz sollte man die Library nutzen und spielerisch mit der Anwendung der Animationsverhaltens umgehen.
3. Eigene Animationen sollen zum Metro-Style passen und ein ähnliches Motion-Design haben.
4. Des Weiteren gibt es SDK-Sample, die man nutzen und aus denen man lernen kann. In einem Beispiel werden zum Beispiel über den VisualStateManager gemischte Animationen realisiert: FadeIn der gesamten Seite, der Elemente und der Einzelelemente des Grids.

Nine-Grid
Der Trick ist mir schon aus HTML bekannt, aber er ist auch auf XAML übertragbar. Wer hätte gedacht, dass in Zeiten von der hochheiligen runden Ecken des HTML5 man im XAML zu den guten alten Tricks des 9-Grids für runde Ecken übergeht … Warum wir allerdings nun wieder Pixel-Ecken nutzen bleibt mir unerschlossen.

Alle theoretischen Behauptungen werden natürlich mit praktischen Demos unterlegt, was das Ganze sympathisch und handfest macht. John Papa hat sich mal wieder sehr gelohnt.

Metro-Style Games
Chas Boyd
Der Gamemarkt ist groß und finanziell interessant. 50% der Apps sind Games.

Das Game ist Marble Maze, das über die Position des Tablet den Ball steuert.

Für ein Game braucht man:
Grafik: 3D, 2D, UI-Controls
Game Input: Touchm Sensors, Game Controls
Audio: Sound FX, Musik
Cut Scenes: Streaming, Effects
Local Services: Activation, Storage, Search
Connected Service: User ID, Roaming, Distribustion
Tools: Compilers, Debuggers, Assets

Graphics:
DirectX ist direkter Zugriff auf die Hardware. Spiele brauche flüssige Interaktion und schnelle Grafik. 3D-Rendering:
DirectX gibt beste Kontrolle über die Hardware-Nutzung. Direct3D ist komplett unterstützt in Metro-Style-Apps. Alle Windows 8 Systeme unterstützen Direct3D.
2D-Rendering: Auch 3D-Games nutzen 2D-Elemente im UI. Direct2D ermöglicht rendering auf der Hardware und arbeit mit Direct3D zusamen. Man kann Vektoren, Bitmaps, Shape, Texte verarbeiten.

Input:
Touch: Die PointerPointAPI unterstützt Touch, Mouse und Stylus und es wird von selbst erkannt.
Sensor: Die APIs agieren mit Gyro, Accelelometer und Compass. Also die Position des Computer und die Orientierung.

Audio / Video:
XAudio2 ist optimiert für niedrig-latenz-Playback. Die Performance von gemischten Sound-Effekten.
Die Media Foundation vereinfacht hintergrund-Streaming.

Die Real-Time-Game-Architektur ….
Ich glaub, ich bin hier falsch.

Styling HTML mit Blend
Mal sehen, was Blend auf HTML-Seite so kann.
Einfaches CSS-Editing mit Live-Umsetzung? Das UI kommt sehr stark rüber wie Blend für XAML: Projekt, Styles, Attributes, CSS-Properties sind die entsprechenden Panels. Das Ändern von entsprechenden CSS-Eigenschaften verhält sich wie in XAML: Anklicken auf der Stage und Ändern der Eigenschaften. OK, ein guter CSS-Editor anscheinend.

Aber man verspricht noch mehr. Wirkliches Customizen von Controls am Beispiel einer Checkbox. Sprich neue visuelle Elemente hinzufügen. Das Konzept ist hier das Integrieren von SVG-Bildern. Die Advanced Fassung ist das Einfügen von unterschiedlichen Media-Elementen abhängig vom Monitor-Modus. Auch das wird in einem CSS geregelt. Hier wird Transparenzfüllungen als Trick gespielt im Default-Modus, damit je nach Monitor-Modus das entsprechend andere Media-Element eingesetzt wird.

Mit CSS können SVGs auch umgefärbt werden, weil es Pfade sind. Der Pfad eine ID erhalten und entsprechen angesprochen werden. Das stellt eine andere interessante Alternative dar.

Die mitgelieferten Standard-Metro-Controls können frei umgestaltet werden mittels CSS. So bleibt die Funktion erhalten, aber der Style wird dem Szenario entsprechend geändert.