© 2012 Microsoft Corporation. Alle Rechte vorbehalten.   Microsoft Student Partners
Bei der Gestaltung vonBenutzeroberflächen geht es nichtin erster Linie um Ästhetik, sonderndarum, dass der Benutzer damits...
Welche Anwendungsszenarien sollenabgebildet werden?„Als Anwender möchte ich Tankstellen in meiner nähefinden, diese anhand...
Ein guter Startpunkt ist, denfolgenden Satz zu vervollständigen:„In ihrer Kategorie ist meine App die beste darin….“z.B.„I...
Wir erinnern uns:Gute Apps lösen genau ein Problemund das perfekt.
Meine App ist die beste darin, …Wenn man sich Anwendungsszenarien für die eigene App überlegt, sollten diese stets auf das...
Ausgehend von denAnwendungsszenarien, lässt sichmeistens ein geeignetesNavigationskonzept finden
Das hierarchische System
DEMO
Das flache System
DEMO
Natürlich gibt es auchKombinationen von hierarchischenund flachen Navigationsmodellen.
Mit Hilfe des gewähltenNavigationsansatzes lässt sich dieStruktur einer App definieren unddavon ausgehend die UI-Elemented...
Die Windows UI
Windows hat eine eigeneDesignsprache. Sie definiertPrinzipien, denen Windows Appsfolgen sollten.
Welche Design-Prinzipien könnt ihr hier erkennen?
Sei stolz auf deine ArbeitWeniger ist oft mehrSchnell und dynamischDigital authentischGemeinsam gewinnen
Sei stolz auf deine ArbeitWer stolz ist auf seine Arbeit hat oft auch einen hohen Anspruch daran.Bei der Gestaltung von Be...
Typographie gehört zum Handwerkszeug eines Designers und spielt beiWindows Apps eine große Rolle. Typographie gibt Struktu...
Windows 8 Apps nutzen ein einheitliches 20x20 Pixel Raster, an dem alleUI-Elemente ausgerichtet werden sollten.
Sie haben außerdem eine einheitliche Silhouette. Der Inhalt beginnt 120Pixel vom linken und 140 Pixel vom oberen Rand.
Weniger ist oft mehrDer 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. Hierdominieren Steuerelemente und Trennlinien („Chrome“) das Bild.
Schnell und dynamischZwischen einer Benutzerinteraktion und einer Reaktion auf dem Bildschirm dürfen höchstens100 Millisek...
DEMO
Digital authentischEinem Designer steht es frei, jeden Pixel des Bildschirms zu gestalten, wie es ihr/ihm beliebt.Dabei di...
Piktogramme in Windows 7 haben Schatten, Reflexionen und Verläufe.Piktogramme in Windows 8 sind meist einfarbig und flach,...
Gemeinsam gewinnenJede App ist ein Unikat und soll ein eigenes Aussehen haben. Die Windows UI Prinzipienhelfen dabei, das ...
Grundlagen des UI Designs
Grundlagen des UI Designs
Grundlagen des UI Designs
Nächste SlideShare
Wird geladen in …5
×

Grundlagen des UI Designs

1.353 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.353
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Die meisten Windows 8 Apps haben eine hierarchisches Navigation.
  • Windows Store zeigen
  • Flache Navigationen finden sich in Spielen, Browsern, Apps zum Erstellen von Dokumenten, …
  • Internet Explorer Tabs zeigen
  • Die Windows Design Sprache hat nichts mit Kacheln zu tun, Kacheln genügen lediglich den Prinzipien, die die Windows Design Sprache festlegt.
  • Die Grund-Schriftart von Windows 8 heißt „Segoe“
  • Ein RSS-Reader unter Windows 8. Hier dominiert der Inhalt, der gleichzeitig zur Navigation verwendet wird. Symbolleisten erscheinen nur bei Bedarf und sind Kontextsensitiv.
  • Animationen in der Windows UI zeigen
  • Grundlagen des UI Designs

    1. 1. © 2012 Microsoft Corporation. Alle Rechte vorbehalten. Microsoft Student Partners
    2. 2. Bei der Gestaltung vonBenutzeroberflächen geht es nichtin erster Linie um Ästhetik, sonderndarum, dass der Benutzer damitseine Aufgaben so effizient undeinfach wie möglich erledigen kann.
    3. 3. Welche Anwendungsszenarien sollenabgebildet werden?„Als Anwender möchte ich Tankstellen in meiner nähefinden, diese anhand ihrer Preise vergleichen undschließlich zur günstigsten oder nächstgelegenenTankstelle navigieren können“Anwendungs-Szenarien können also mehrere Schritte umfassen und sich auch über mehrereBildschirme erstrecken.
    4. 4. Ein guter Startpunkt ist, denfolgenden Satz zu vervollständigen:„In ihrer Kategorie ist meine App die beste darin….“z.B.„In ihrer Kategorie ist meine App die beste darin, Anwenderschnell zur nächstgelegensten und günstigen Tankstelle zunavigieren.“
    5. 5. Wir erinnern uns:Gute Apps lösen genau ein Problemund das perfekt.
    6. 6. 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 Tankstellenvergleichen können“Schlecht:„Als Anwender möchte ich die Freundlichkeit desTankstellenpersonals bewerten können“
    7. 7. Ausgehend von denAnwendungsszenarien, lässt sichmeistens ein geeignetesNavigationskonzept finden
    8. 8. Das hierarchische System
    9. 9. DEMO
    10. 10. Das flache System
    11. 11. DEMO
    12. 12. Natürlich gibt es auchKombinationen von hierarchischenund flachen Navigationsmodellen.
    13. 13. Mit Hilfe des gewähltenNavigationsansatzes lässt sich dieStruktur einer App definieren unddavon ausgehend die UI-Elementedie notwendig sind, um von einerSeite der App zur nächsten zunavigieren.
    14. 14. Die Windows UI
    15. 15. Windows hat eine eigeneDesignsprache. Sie definiertPrinzipien, denen Windows Appsfolgen sollten.
    16. 16. Welche Design-Prinzipien könnt ihr hier erkennen?
    17. 17. Sei stolz auf deine ArbeitWeniger ist oft mehrSchnell und dynamischDigital authentischGemeinsam gewinnen
    18. 18. Sei stolz auf deine ArbeitWer 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 undfeingeschliffen zu haben.
    19. 19. Typographie gehört zum Handwerkszeug eines Designers und spielt beiWindows Apps eine große Rolle. Typographie gibt Struktur und verdeutlichtdie Hierarchiebeziehungen der Inhaltselemente einer Seite.
    20. 20. Windows 8 Apps nutzen ein einheitliches 20x20 Pixel Raster, an dem alleUI-Elemente ausgerichtet werden sollten.
    21. 21. Sie haben außerdem eine einheitliche Silhouette. Der Inhalt beginnt 120Pixel vom linken und 140 Pixel vom oberen Rand.
    22. 22. Weniger ist oft mehrDer Focus einer App sollte ihr Inhalt sein. Eine gut gestaltete App vermeidet Ablenkungen.
    23. 23. Ein RSS-Reader, wie es ihn unter Windows 7 geben könnte. Hierdominieren Steuerelemente und Trennlinien („Chrome“) das Bild.
    24. 24. Schnell und dynamischZwischen einer Benutzerinteraktion und einer Reaktion auf dem Bildschirm dürfen höchstens100 Millisekunden vergehen, sonst wirkt die Anwendung träge. Insbesondere bei der Touch-Bedienung ist das wichtig.
    25. 25. DEMO
    26. 26. Digital authentischEinem 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 diephysikalische Welt.
    27. 27. Piktogramme in Windows 7 haben Schatten, Reflexionen und Verläufe.Piktogramme in Windows 8 sind meist einfarbig und flach, tragen deshalbaber nicht weniger Information.
    28. 28. Gemeinsam gewinnenJede App ist ein Unikat und soll ein eigenes Aussehen haben. Die Windows UI Prinzipienhelfen dabei, das sich die Apps trotzdem in ein „großes Ganzen“ einfügen.Durch die Einhaltung dieser Prinzipien können Apps enger Zusammenarbeiten, ohne dassdabei optische Brüche entstehen.

    ×