grundlagen des ui designs
TRANSCRIPT
![Page 1: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/1.jpg)
Microsoft Student Partners© 2012 Microsoft Corporation. Alle Rechte vorbehalten.
![Page 2: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/2.jpg)
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.
![Page 3: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/3.jpg)
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.
![Page 4: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/4.jpg)
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.“
![Page 5: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/5.jpg)
Wir erinnern uns:Gute Apps lösen genau ein Problem und das perfekt.
![Page 6: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/6.jpg)
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“
![Page 7: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/7.jpg)
Ausgehend von den Anwendungsszenarien, lässt sich meistens ein geeignetes Navigationskonzept finden
![Page 8: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/8.jpg)
Das hierarchische System
![Page 9: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/9.jpg)
DEMO
![Page 10: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/10.jpg)
Das flache System
![Page 11: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/11.jpg)
DEMO
![Page 12: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/12.jpg)
Natürlich gibt es auch Kombinationen von hierarchischen und flachen Navigationsmodellen.
![Page 13: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/13.jpg)
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.
![Page 14: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/14.jpg)
Die Windows UI
![Page 15: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/15.jpg)
![Page 16: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/16.jpg)
Windows hat eine eigene Designsprache. Sie definiert Prinzipien, denen Windows Apps folgen sollten.
![Page 17: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/17.jpg)
Welche Design-Prinzipien könnt ihr hier erkennen?
![Page 18: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/18.jpg)
Sei stolz auf deine Arbeit
Weniger ist oft mehr
Schnell und dynamisch
Digital authentisch
Gemeinsam gewinnen
![Page 19: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/19.jpg)
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.
![Page 20: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/20.jpg)
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.
![Page 21: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/21.jpg)
Windows 8 Apps nutzen ein einheitliches 20x20 Pixel Raster, an dem alle UI-Elemente ausgerichtet werden sollten.
![Page 22: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/22.jpg)
Sie haben außerdem eine einheitliche Silhouette. Der Inhalt beginnt 120 Pixel vom linken und 140 Pixel vom oberen Rand.
![Page 23: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/23.jpg)
Weniger ist oft mehr
Der Focus einer App sollte ihr Inhalt sein. Eine gut gestaltete App vermeidet Ablenkungen.
![Page 24: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/24.jpg)
Ein RSS-Reader, wie es ihn unter Windows 7 geben könnte. Hier dominieren Steuerelemente und Trennlinien („Chrome“) das Bild.
![Page 25: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/25.jpg)
![Page 26: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/26.jpg)
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.
![Page 27: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/27.jpg)
DEMO
![Page 28: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/28.jpg)
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.
![Page 29: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/29.jpg)
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.
![Page 30: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/30.jpg)
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.
![Page 31: Grundlagen des UI Designs](https://reader035.vdocuments.mx/reader035/viewer/2022062406/5592b84b1a28ab47658b45d4/html5/thumbnails/31.jpg)