Runde Sache! App Design mal anders

RestaurantRoundTemplateDas Informationsangebot seitens Microsoft bzgl. der erwarteten Beschaffenheit einer Store App, ist enorm gewachsen. Auf der Website des MSDN finden sich viele Designinspirationen, Downloads von Templates, sowie Guidelines zu Ergonomie und Benutzerfreundlichkeit. Gerade bei letzterem Punkt gibt es unter dem Motto „Muster für Benutzerfreundlichkeit“ viel zu entdecken. Unter „Brandingmuster“ gibt Microsoft einige Anregungen wie man die eigene Marke in Apps gießen kann und warum das richtige Vorgehen hier so wichtig ist. Eine dieser Anregungen möchte ich heute näher betrachten.´

Begibt man sich auf die Seite für „Brandingmuster“ unter http://msdn.microsoft.com/de-de/library/windows/apps/hh465418, fällt einem als erstes Beispiel die „Contoso Bakery“ auf. In diesem Sample soll veranschaulicht werden, dass mit einer bestimmten Formgebung im Design eine Wiedererkennbarkeit der eigenen Marke gefestigt werden kann. Hier wird tatsächlich oft Potential beim Design auf der Straße liegen gelassen, da die landläufige Meinung existiert, Kacheln bzw. „Tiles“ müssen rechteckig bzw. quadratisch sein. Im Beispiel der Contoso Bakery ist der Gewinn durch eine andere Formgebung gut zu erkennen.

IC591338
Abbildung 1 Dienst nach Vorschrift. Standard DataTemplates

 

IC591339
Abbildung 2 DataTemplates in einer Form, die dem Branding sehr dienlich ist

 

 

Die gewählte Form mit den runden Kacheln und der „ausgefranzten“ Ränder verbindet sich im Kopf des Kunden sehr gut mit Backwaren wie Muffins oder Cupcakes. Mit der Wahl der Farben schlägt das Design genau in die gleiche Kerbe, da braun sehr gut mit der Vorstellung von Schokolade oder auch Teig harmoniert.

Doch wie genau erstellt man so ein Design? Muss ich wirklich alle externen Bilder anpassen und „rundschneiden“?  Die Antwort ist: nein, dies kann über die Gestaltung von DataTemplates erreicht werden, ohne an den Assets handanlegen zu müssen. Für den Nachbau bemühen wir allerdings ein kleines, gemütliches italienisches Lokal: das „Ristorante Conpletoso“. Hier gibt es die klassische italienische Küche in traditionellem Ambiente. Und weil das „Ristorante Conpletoso“ auf der Höhe der technologischen Zeit unterwegs ist, hat es eine App für den Windows Store erstellt, in dem die verfügbaren Gerichte angeboten werden sollen. Die Darstellung erfolgt bisher mit dem Template der „Standard Styles“.

RestaurantStandardTemplate
Abbildung 3 Ristorante Conpletoso im eher faden Standardgewand

 

Da hier nicht wirklich italienisches Feeling aufkommen mag, wird die Darstellung der Gerichte nun umgebaut. Dafür wird hauptsächlich Expression Blend und Expression Design (welches frei zum Download bereitstellt) bemüht.

Als Erstes braucht es einen einfachen Kreis. Dieser Kreis soll die Projektionsfläche der angebunden Bildinformation werden. Dieser wird allerdings nicht in Blend sondern in Expression Design erstellt. Zu den Gründen später mehr. Nach dem Start von Expression Design soll ein neues Dokument erstellt werden. Die Abmessung muss nicht genau der später tatsächlichen Template-Größe entsprechen und kann mit z.B. 800×600 Pixeln großzügig gewählt werden.

createNew
Abbildung 4 Erstellen eines neues Dokuments in Expression Design

 

 

Nachdem Expression Design das neue Dokument geöffnet hat findet sich der Workspace wieder, der dem von Blend in der Einteilung sehr ähnlich sieht. Auf der linken Seite findet sich eine Werkzeugleiste, in der mit einem längeren Klick auf das Rechteck-Symbol auch andere Formen ausgewählt werden können. Mit dem Ellipsen-Tool soll nun ein Kreis von 350×350 Pixeln gezeichnet werden.

ElipseTool
Abbildung 5 Das Elipsetool zum Zeichnen des Kreises in der Toolleiste

 

 

Nachdem der Kreis gezeichnet wurde, kann am unteren Rand die Höhe und die Breite noch genau angepasst werden. Dabei darauf achten, dass die Verlinkung von Höhe und Breite deaktiviert ist.

FineAdjustBig
Abbildung 6 die Feinjustierung – Klicken um das Bild und den unteren Rand zu vergrößern

 

 

Die Projektionsfläche ist nun erstellt. In diesem Zustand würde das Bildmaterial aber noch etwas langweilig aussehen. Der Grund ist der glatte und perfekte Rand des Kreises. Hier kommt nun der Grund ins Spiel, warum für die Kreiserstellung Expression Design besser geeignet ist, als es direkt in Blend zu erledigen. Im Eigenschaften-Fenster auf der rechten Seite des Workspaces findet sich unter „Darstellung“ nicht nur der Farbbereich, sondern auch alle Attribute die mit dem Rahmen des Kreises zu tun haben. Über Combobox für die Rahmenart und die daneben angegebene Breite wird nun ein Rahmen um den Kreis gezogen. Die Rahmenart ist hier von Haus aus Dank Expression Design vielfältig. Für dieses Beispiel wurde „Kontur 1“ in der Kategorie „<Allgemein>“ bei der Strichstärke 13,33px gewählt. Für die Rahmenfarbe ist das Grün aus der italienischen Landesflagge gesetzt.

SetBorder
Abbildung 7 Setzen des dekorativen Rahmens

 

 

Nachdem der Projektor-Kreis inkl. dem dazu passenden Rahmen erstellt ist, wird über „Bearbeiten – XAML kopieren“ der selektierte Kreis in die Zwischenablage gelegt. Das Besondere: Der Kreis wird nicht als ein einziges geschlossenes Objekt dupliziert, sondern so wie er in Expression Design unter „Ebenen“ angelegt ist. Um nun den Kreis in Blend zu verwenden muss als erstes ein neues DataTemplate erstellt werden, dass die GridView der App-Page verwendet, um die Daten in „rund“ anzuzeigen. Um dieses leere Template nun zu erstellen, muss in der Objekt-Verwaltung von Blend das betroffene GridView gewählt werden. Danach wird im Contextmenü  über „Edit Additional Templates -> Edit Generated Items (ItemTemplate) -> Create Empty” ein leeres DataTemplate angelegt

CreateNewTemplate
Abbildung 8 Anlegen eines neuen DataTemplates für die runde Tile-Darstellung

 

 

Das neue Item-Template wird per Default mit einem Grid gefüllt. Nachdem das Grid ausgewählt wurde, kommt nun über Bearbeiten-Einfügen oder STRG+V der Kreis aus der Zwischenablage in das Grid. Was als Erstes auffällt: Blend legt Kreis und Rahmen in einer Viewbox ab. In dieser Viewbox wird dann auch noch einmal unterteilt in die eigentliche Ellipse und einer weiteren Viewbox die alle Path-Informationen zum gesetzten Rahmen beinhaltet. Dass die Objekte in einer Viewbox liegen kommt uns sehr entgegen. So ist das Datatemplate auch direkt in der Lage sich an die Größe der GridView anzupassen, egal welche Bildschirmauflösung anliegt. Ein weiterer sehr angenehmer Umstand ist die Möglichkeit, im Design oder auch programmatisch die Parameter wie Farben oder auch Größe ändern zu können. Dies ermöglicht die Anbindung an Projektressourcen (Corporate Design) und Animationen (drehender Rahmen beim Laden der Bilder etc.). Die Viewbox die das gesamte Konstrukt enthält sollte noch einen Margin von 25,25,50,0 bekommen.

 

ObjectHirarchy
Abbildung 9 die Objektstruktur nach dem Einfügen. Unten sind die XAML-Path-Informationen zu sehen, welche auch händisch noch angepasst werden können

 

 

Nun ist es Zeit die ersten Daten anzubinden. Die Ellipse stellt die gewünschte Ausgangsform des gebundenen Bildes dar. Um diese nun als Maske zu verwenden, wird die Füllung des Ellipse-Objekts mit einem „Tile-Brush“  an das „Image Property“ in DataSource gebunden, aus der die Daten kommen. Unter „Stretch“ sollte „Fill“ gesetzt bleiben. So wird das Bild nur auf dem Kreisobjekt angezeigt, und vom Vektorenrahmen umrandet.

setImageData
Abbildung 10 An den Tilebrush Projektionsellipse wird nun mittels Databinding das Themenbild gebunden. Die Ellipse dient als runde Maske für das eckige Bild

 

 

Die Beschriftung des Templates sollte allerdings außerhalb der Viewbox erfolgen, da sich die Textgröße auf Grund der Bildschirmauflösung nicht so verhalten könnte, wie man das möchte. Ferner ist die Ausrichtung an der runden Kachel außerhalb der ViewBox leichter. Dafür sollten im „Master Grid“ des Templates 3 Zeilen definiert werden, welche sich automatisch an die Contentgröße anpassen. So kann in der ersten Zeile des Grids die runde Kachel, in der zweiten Zeile die Titelbeschriftung und in der dritten Zeile die Untertitelbeschriftung eingefügt werden. Nachdem die horizontale Ausrichtung der Textblöcke auf „Center“ gestellt und die richtigen Data-Members gebunden wurden, werden diese mittig unter den runden Bildern angezeigt.

RestaurantRoundTemplate
Abbildung 11 das fertige Template in Aktion

 

 

Fazit: Es ist mit den richtigen Werkzeugen möglich, mit relativ geringen Aufwand markendienliche Designs zu erstellen, ohne komplexe Code-Behind-Handstände machen zu müssen. Der Vorher-Nachher-Vergleich zeigt: Der Aufwand lohnt sich, da der Anwender schnell ein bleibendes Bild zur Marke im Kopf hat und sich leicht erinnern kann.

Der Code zu diesem Beispiel, steht als ZIP-Datei zum Download bereit.

Ich danke Günter Beer für die Bereitstellung der tollen Fotos aus seinem Portfolio.
Mehr von Günters Arbeit gibt’s auf seiner Website. Unbedingt mal vorbei schauen!

Viel Spaß beim selber bauen!

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>