How-to: become fast and fluid

Herausforderungen und Möglichkeiten bei der Entwicklung von Windows 8 Apps (Teil 2)
Kommentare

Windows Developer

Der Artikel „How-to: become fast and fluid“ von Roman Schacherl ist erstmalig erschienen im Windows Developer 4.2012
Präsentieren
Achten Sie auch auf die Verwendung weniger, einheitlicher

Windows Developer

Der Artikel „How-to: become fast and fluid“ von Roman Schacherl ist erstmalig erschienen im Windows Developer 4.2012

Präsentieren

Achten Sie auch auf die Verwendung weniger, einheitlicher Schriftstile (Standard in Windows 8: Segoe Light UI), und betrachten Sie einmal bewusst das Design der mitgelieferten Apps. Sie werden erkennen, dass sich der Anwendungstitel immer an derselben Stelle befindet; der Inhalt an einer (gedachten) Linie mit der Überschrift ausgerichtet ist. Überlegen Sie, ob diese Vorgaben nicht auch gut für Ihre Anwendung geeignet wären. Die Vollbildansicht gibt uns zwar alle Freiheiten (keine fixen Designelemente wie Titelleisten, Symbolleisten etc.), es kristallisiert sich aber trotzdem ein Quasistandard heraus, wie wesentliche Bereiche der Anwendung gestaltet werden sollten.

Animationen sind ein wichtiges Mittel, um dem zweiten Teil von „fast and fluid“ gerecht zu werden: Elemente, die mit einem Effekt „von irgendwo“ erscheinen und „irgendwohin“ entschwinden sind für Anwender natürlicher, als Elemente, die einfach ein- und ausgeblendet werden. Viele Animationen bekommen Sie geschenkt, wenn Sie die Standardsteuerelemente verwenden. Fürchten Sie sich (vor allem zu Beginn) auch nicht vor der Verwendung von Projektvorlagen. Ihre Anwendung erhält damit vom ersten Moment an das angestrebte Windows 8-Design (Schriftart, -größe und -position, einen Zurück-Button etc.). Sie profitieren auch von einer Grundstruktur mit vorkonfigurierten Steuerelementen, die Ihnen das Erlernen der Technologie erleichtern wird.

Reduzieren

Die Steuerung mittels Gesten wird meist im selben Atemzug mit intuitiven Benutzeroberflächen genannt. Doch wie viele intuitive Gesten kennen Sie? Verschieben, scrollen, verkleinern, vergrößern … und? Welche Geste wenden Sie an, um die Hilfe aufzurufen? Wie möchten Sie in einem Browser zurück zur letzten Seite wechseln, wie zur Startseite? Das Problem an Gesten ist, dass man weder deren Funktion, noch deren Vorhandensein sieht. Haben Sie gerade ein Déjà-vu?

Zu den Anfängen des Internets waren Hyperlinks blau und unterstrichen. Dann kamen Imagemaps, und plötzlich konnte jeder Teil jedes Bildes mit einer Aktion hinterlegt werden. Plötzlich lag es in der Verantwortung des Designers, von diesen Möglichkeiten nur begrenzt Gebrauch zu machen. Genauso verhält es sich bei Multitouch-Anwendungen. Es gibt nur wenige, wesentliche Gesten, die tatsächlich intuitiv sind. Wenn Sie die Standardsteuerelemente für Windows 8-Apps verwenden, stehen diese bereits automatisch zur Verfügung. Zusätzliche „frei erdachte“ Gesten sind nur dann sinnvoll, wenn Sie mit sehr routinierten Benutzern rechnen, die viel Zeit mit Ihrer App verbringen werden. Im Zweifelsfall müssen diese Benutzer auch bereit sein, ein Hilfedokument zu lesen, um die Benutzung zu erlernen. Und um fast and fluid zu bleiben: Verzichten Sie auf Gesten, bei denen der Benutzer auf das Eintreten eines Ereignisses warten muss. Der Internet Explorer geht im Moment leider mit schlechtem Beispiel voran, denn um einen Link in einer neuen Registerkarte zu öffnen, müssen Sie tippen und warten.

Orientieren

Selbst wenn es manche Monitore seit einiger Zeit können: Wie oft haben Sie jemanden gesehen, der seinen Bildschirm im Hochformat aufgestellt hat? Das Problem unterschiedlicher Auflösungen war uns als Entwickler schon längst bekannt, sobald unsere Anwendungen auf mobilen, leicht drehbaren Geräten laufen, müssen wir aber mit neuen Szenarien umgehen lernen. Windows 8 soll ein Betriebssystem für verschiedenste Geräte und verschiedenste Größen werden. Um Ihren Benutzern eine ansprechende, hochauflösende Visualisierung zu bieten, können Sie entweder auf vektorbasierte Bilder (SVG für JavaScript oder XAML für C#/VB/C++) setzen oder ihre Bitmaps in drei verschiedenen Größen zur Verfügung stellen: 100 Prozent für die kleinsten Auflösungen (1024 x 768 Pixel ist die Mindestauflösung für Windows 8 Apps), 140 Prozent für Full-HD-Auflösungen oder 180 Prozent für Auflösungen bis 2560 x 1440 Pixel (nähere Informationen dazu siehe [2]). Mit diesen drei Größen kommen Sie für einige Zeit aus – Fernseher mit der letztgenannten Auflösung sind eher noch Zukunftsmusik.

Darüber hinaus können Sie entweder eine eigene Porträtansicht (Hochformat) anbieten oder auf das Standardverhalten der Steuerelemente setzen (das in vielen Fällen auch recht passabel funktioniert). Eine Pflicht für jede Windows 8-App ist aber die Implementierung einer so genannten Snap View. Auf diese schmälere Ansicht wird vom Betriebssystem umgeschaltet, sobald die App am linken oder rechten Rand des Bildschirms angedockt wird [3] und das bedeutet, Sie können die Snap View leer lassen, aber Sie können sie nicht ignorieren. Sorgen Sie für eine ansprechende Visualisierung, wie sie beispielhaft in Abbildung 1 zu sehen ist.

Abb. 1: Die Stocks App in der Vollbildansicht (Hintergrund) und als Snap View neben der Reise-App (Vordergrund)
Abb. 1: Die Stocks App in der Vollbildansicht (Hintergrund) und als Snap View neben der Reise-App (Vordergrund)
Navigieren

Um .NET-Entwicklern das Leben zu erleichtern, ist XAML als Sprache zur Definition der Benutzeroberfläche auch in der WinRT ein fester Bestandteil, nativ in das Betriebssystem integriert und somit auch für C++-Entwickler zugänglich. Wenn Sie mit der WPF oder Silverlight vertraut sind, können Sie Ihr Wissen weiterhin nutzen: Die Klassen und deren Eigenschaften sind größtenteils gleich benannt. Die Steuerelemente wurden jedoch für Touch-Eingaben optimiert (so bekommt beispielsweise eine Textbox bei Fokuserhalt automatisch ein Icon zum Löschen des gesamten Inhalts) und teilweise mit neuer Funktionalität versehen (beispielsweise automatische Rechtschreibprüfung in allen Textfeldern). Darüber hinaus gibt es auch komplett neu entwickelte Steuerelemente, die Sie unbedingt ausprobieren sollten. Die GridView (indirekt abgeleitet von ItemsControl) stellt Elemente im Windows 8-typischen Design dar (meist quadratische Felder, teilweise mehrere Felder miteinander verbunden), bietet Möglichkeiten zur Gruppierung von Elementen und eignet sich auch hervorragend im Zusammenspiel mit einem der spannendsten Steuerelemente: dem SemanticZoom: Bei einer großen Anzahl von Elementen werden Listen naturgemäß unübersichtlich. Im gewohnten Maus-und-Tastatur-Umfeld haben wir verschiedene Möglichkeiten, um uns innerhalb einer Liste zu bewegen: Tastenkürzel zum Springen an den Anfang und das Ende, seitenweises Blättern, Verschieben des Scroll-Balkens mit der Maus. In Touch-Umgebungen führen lange Listen meist zu hektischen Wischbewegungen, aber selten zum Erfolg. Das neue Steuerelement bietet die Möglichkeit eines so genannten „semantischen Zooms“. Das Zueinanderbewegen zweier Finger (Geste zum Verkleinern) führt zur Anzeige einer eigenen Ansicht, die als „Vogelperspektive“ dient und das Navigieren zu bestimmten Punkten der Liste erleichtert. Beispiel gefällig? Sie haben eine Liste mit allen Ländern der Erde und möchten Italien auswählen. Statt die Liste abzutasten, verkleinern Sie sie mittels Geste, es erscheint eine Ansicht aller Anfangsbuchstaben, Sie klicken auf „I“, und Italien ist im Blickfeld (vergleichbar auch mit dem Kontakte-Hub aus Windows Phone 7).

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -