Upload
jan-hentschel
View
752
Download
2
Embed Size (px)
Citation preview
Microsoft Student Partners© 2012 Microsoft Corporation. Alle Rechte vorbehalten.
Bei der Gestaltung von Benutzeroberflächen geht es nicht in erster Linie um Ästhetik, sondern darum, dass der Benutzer damit seine Aufgaben so effizient und einfach wie möglich erledigen kann.
Welche Anwendungsszenarien sollen abgebildet werden?
„Als Anwender möchte ich Tankstellen in meiner nähe finden, diese anhand ihrer Preise vergleichen und schließlich zur günstigsten oder nächstgelegenen Tankstelle navigieren können“
Anwendungs-Szenarien können also mehrere Schritte umfassen und sich auch über mehrere Bildschirme erstrecken.
Ein guter Startpunkt ist, den folgenden Satz zu vervollständigen:„In ihrer Kategorie ist meine App die beste darin….“
z.B.
„In ihrer Kategorie ist meine App die beste darin, Anwender schnell zur nächstgelegensten und günstigen Tankstelle zu navigieren.“
Wir erinnern uns:Gute Apps lösen genau ein Problem und das perfekt.
Meine App ist die beste darin, …
Wenn man sich Anwendungsszenarien für die eigene App überlegt, sollten diese stets auf das „Meine App ist die am besten darin,…“ Statement einzahlen.
Gut:
„Als Anwender möchte ich die Preise mehrerer Tankstellen vergleichen können“
Schlecht:
„Als Anwender möchte ich die Freundlichkeit des Tankstellenpersonals bewerten können“
Ausgehend von den Anwendungsszenarien, lässt sich meistens ein geeignetes Navigationskonzept finden
Das hierarchische System
DEMO
Das flache System
DEMO
Natürlich gibt es auch Kombinationen von hierarchischen und flachen Navigationsmodellen.
Mit Hilfe des gewählten Navigationsansatzes lässt sich die Struktur einer App definieren und davon ausgehend die UI-Elemente die notwendig sind, um von einer Seite der App zur nächsten zu navigieren.
Die Windows UI
Windows hat eine eigene Designsprache. Sie definiert Prinzipien, denen Windows Apps folgen sollten.
Welche Design-Prinzipien könnt ihr hier erkennen?
Sei stolz auf deine Arbeit
Weniger ist oft mehr
Schnell und dynamisch
Digital authentisch
Gemeinsam gewinnen
Sei stolz auf deine Arbeit
Wer stolz ist auf seine Arbeit hat oft auch einen hohen Anspruch daran.
Bei der Gestaltung von Benutzeroberflächen geht es um die Liebe zum Detail und darum, jeden einzelnen Schritt, den der Benutzer innerhalb der eigenen App macht durchdacht und feingeschliffen zu haben.
Typographie gehört zum Handwerkszeug eines Designers und spielt bei Windows Apps eine große Rolle. Typographie gibt Struktur und verdeutlicht die Hierarchiebeziehungen der Inhaltselemente einer Seite.
Windows 8 Apps nutzen ein einheitliches 20x20 Pixel Raster, an dem alle UI-Elemente ausgerichtet werden sollten.
Sie haben außerdem eine einheitliche Silhouette. Der Inhalt beginnt 120 Pixel vom linken und 140 Pixel vom oberen Rand.
Weniger ist oft mehr
Der Focus einer App sollte ihr Inhalt sein. Eine gut gestaltete App vermeidet Ablenkungen.
Ein RSS-Reader, wie es ihn unter Windows 7 geben könnte. Hier dominieren Steuerelemente und Trennlinien („Chrome“) das Bild.
Schnell und dynamisch
Zwischen einer Benutzerinteraktion und einer Reaktion auf dem Bildschirm dürfen höchstens 100 Millisekunden vergehen, sonst wirkt die Anwendung träge. Insbesondere bei der Touch-Bedienung ist das wichtig.
DEMO
Digital authentisch
Einem Designer steht es frei, jeden Pixel des Bildschirms zu gestalten, wie es ihr/ihm beliebt. Dabei die physikalische Welt zu imitieren wird dem Medium nicht gerecht.
Windows 8 ist bunt, flach und nutzt starke Kontraste weil es nicht versucht so zu sein, wie die physikalische Welt.
Piktogramme in Windows 7 haben Schatten, Reflexionen und Verläufe. Piktogramme in Windows 8 sind meist einfarbig und flach, tragen deshalb aber nicht weniger Information.
Gemeinsam gewinnen
Jede App ist ein Unikat und soll ein eigenes Aussehen haben. Die Windows UI Prinzipien helfen dabei, das sich die Apps trotzdem in ein „großes Ganzen“ einfügen.
Durch die Einhaltung dieser Prinzipien können Apps enger Zusammenarbeiten, ohne dass dabei optische Brüche entstehen.