Wikipedia

Fluent-Designsystem

Software

Fluent Design System (Codename „Project Neon“),[1] offiziell als Microsoft Fluent Design System vorgestellt,[2] ist eine 2017 von Microsoft entwickelte Design-Sprache. Fluent Design ist eine Überarbeitung der Microsoft Design Language (allgemein bekannt als „Metro“), die Richtlinien für Designs und Interaktionen innerhalb von Software enthält, die für alle Windows 10- und Windows 11-Geräte und -Plattformen entwickelt wurde. Das System basiert auf fünf Schlüsselkomponenten: Licht, Tiefe, Bewegung, Material und Maßstab.[3] Die neue Design-Sprache beinhaltet einen stärkeren Einsatz von Bewegungs-, Tiefen- und Transparenzeffekten.[4]

Der Übergang zu Fluent ist ein langfristiges Projekt; Aspekte des Designs begannen mit dem „Fall Creators Update“, das im Oktober 2017 veröffentlicht wurde, in Windows 10 zu erscheinen, sowie mit einem Update der Xbox-One-Systemsoftware, das parallel dazu veröffentlicht wurde.[5][6][7][8] Es wurde später enthüllt, dass es in Verbindung mit Windows 10X[9] sowie Windows 11, das ein ähnliches Design aufweist, entwickelt wurde.[10]

Im Vergleich zu Metro und Aero

Bearbeiten

Fluents Schlüsselprinzipien oder „Blöcke“ (Licht, Tiefe, Bewegung, Material und Maßstab) wenden sich vom flachen Konzept ab, das Metro definiert hatte. Während das klare Aussehen und Gefühl von Metro beibehalten wird, erneuert Fluent die Optik von Aero, einem Design-Ansatz, der in Windows Vista und Windows 7 eingeführt wurde. Dazu gehören verwischte Transparenz, Parallax-animierte Muster, Schattenwürfe, Hervorhebungseffekte, die der Maus- oder Gestensteuerung folgen, und „Faux-Materialien“, die Metro einst verwarf.[11]

Designkomponenten

Bearbeiten

Licht

Bearbeiten

Der Zweck von Licht ist es, die Aufmerksamkeit zu lenken und Informationen zu beleuchten. Daher stellt Licht eine Beziehung zwischen der Benutzeroberfläche und dem Cursor oder Zeiger her.[12]

  • Hervorhebung bei Hover: Beim Hover beleuchtet die Reveal Highlight nahe gelegene, verborgene Ränder von Objekten wie Hamburger-Navigationsmenülisten und Schaltflächen. Bei der Auswahl, z. B. durch Klicken oder Tippen, erscheint schnell ein weißer kreisförmiger Beleuchtungseffekt.[12][13]
  • Fokushervorhebung: Fokussierbare Elemente mit einer Umrandung leuchten über das Fokus-Visual.[14]

Mit WinUI 2.6 hat Microsoft die Hervorhebung bei Hover eingestellt, um ihren Web- und Mobilangeboten zu entsprechen, bei denen kein Reveal Highlight vorhanden ist.[15] Darüber hinaus hat Microsoft mit der Veröffentlichung von Windows 11 langsam die Verwendung von Lichteffekten im Allgemeinen reduziert und stattdessen Interaktivität durch Animationen bereitgestellt.[15]

Tiefe

Bearbeiten

Tiefe wird dem Inhalt durch Schichtung in der Z-Achse hinzugefügt. Tiefe wird durch Schlagschatten und Z-Tiefenschichtung dargestellt.[16][17] Dies ist besonders beim Redesign der Office-App im Jahr 2019 zu sehen. In Windows 11 wird die Verwendung von Tiefe durch die Überlappung verschiedener Oberflächen mit unterschiedlichen Opazitäten des Mica-Materials erweitert.

  • Schichtung: Die Schichtung unterteilt eine App in die Basis, die die „Leinwand“ ist, und den Inhalt, der darüber schwebt. Der Inhalt kann als durchgängige Oberfläche oder als Karte dargestellt werden.[18]
  • Erhebung: Erhebung ist die Verwendung der Trennung von Elementen von der App-Oberfläche durch den Einsatz von Schatten. Beispiele sind Kontextmenüs, Pop-ups oder Tooltips.[18]

Motion

Bearbeiten

Bewegung stellt eine Beziehung zwischen UI-Elementen her und sorgt für Kontinuität in der Erfahrung[19]

  • Hinzufügen/Löschen-Animationen: Listenanimationen zum Einfügen und Entfernen von Elementen aus einer Sammlung.[19]
  • Verbundene Animationen: Verbundene Animationen sind Elementübergänge. Während einer Inhaltsänderung scheint ein Element durch die App zu fliegen.[20]
  • Inhaltsübergang: Wird verwendet, wenn sich nur ein Teil des Inhalts auf einer Seite ändert.[19]
  • Vertiefen: Vertiefen wird beim Navigieren tiefer in eine App verwendet. Zum Beispiel die Anzeige weiterer Informationen nach Auswahl eines Elements.[21]
  • Verblassen: Verblassen, um Elemente ein- und auszublenden.[19]
  • Parallaxe: Bei der Parallaxe bewegen sich Objekte mit unterschiedlichen Geschwindigkeiten. Der Hintergrund bewegt sich langsamer als der darüber liegende Inhalt. Zum Beispiel scrollt eine Liste schneller als das Hintergrundbild, wodurch zusätzlich zur Bewegung ein Tiefeneffekt entsteht.[22]
  • Druckrückmeldung: Wenn ein Element gedrückt wird, weicht es kurzzeitig in den Hintergrund zurück und kehrt dann in seine Ausgangsposition zurück. Beispiele für Druckrückmeldung sind die Live-Kacheln des Startmenüs, Schnellaktionen des Aktionscenters und Schaltflächen der Microsoft Edge-Adressleiste.[19]

Material

Bearbeiten

Materialien sind visuelle Effekte, die auf UX-Oberflächen angewendet werden. Im Fluent Design gibt es zwei Hauptarten von Materialien: verdeckende und transparente. Verdeckende Materialien wie Acryl und Mica bilden die Basisschichten unter interaktiven UI-Elementen. Transparente Materialien wie Rauch werden verwendet, um immersive Oberflächen hervorzuheben:[23]

  • Acryl: Das Acrylmaterial erzeugt einen transluzenten, verwischten Effekt mit leichtem Rauschen. Während in Windows 10 Acryl auf großen Oberflächen (wie Seitenbereichen) verwendet wurde, haben in Windows 11 die primären Oberflächen Acryl zugunsten von Mica aufgegeben. Stattdessen wird Acryl auf temporären Oberflächen wie Kontextmenüs, Tooltips oder Suchvorschlägen verwendet.
  • Mica: Mica ist ein neues, opakes Material, das in Windows 11 eingeführt wurde und die Färbung des Benutzerhintergrundbilds annimmt.[23] Im Gegensatz zu Acryl, das für temporäre Oberflächen (z. B. Kontextmenüs) konzipiert war, ist Mica für den Einsatz auf langlebigen primären Oberflächen gedacht. Durch unterschiedliche Opazitäten können Apps eine visuelle Hierarchie schaffen.
  • Rauch: Rauch wurde mit Windows 11 eingeführt. Es ist ein transluzenter schwarzer Hintergrund, unabhängig vom Hellen oder Dunklen Modus, um eine Hierarchie zwischen dem Hauptfenster und einem Pop-up zu schaffen.[23]

Sowohl Acryl als auch Mica werden in einem bestimmten Fenster deaktiviert, wenn die App nicht mehr ausgewählt ist. Darüber hinaus sind beide systemweit deaktiviert, wenn die Transparenz deaktiviert ist, wenn der Energiesparmodus aktiviert ist oder auf leistungsschwacher Hardware. Hintergrund-Acryl wird deaktiviert, wenn ein Fenster nicht ausgewählt ist oder in Windows 10 Mobile, HoloLens oder dem Tablettmodus.[24]

Skalierung

Bearbeiten

Apps skalieren über verschiedene Formfaktoren, Displaygrößen und 0D bis 3D. Elemente passen sich der Bildschirmgröße an und sind in mehreren Dimensionen verfügbar.[25][26] Bewusste Steuerelemente werden ebenfalls in der Skalierung kategorisiert (z. B. Scroll-Leisten und Eingaben, die sich an verschiedene Aufrufmethoden anpassen).[27][28]

Implementierung

Bearbeiten

Die Fluent Design Richtlinien sind plattformübergreifend und können mit verschiedenen Frameworks implementiert werden.[29] Fluent UI React ist eine Reihe von React-Komponenten, die Microsofts Fluent Design System implementieren. Es bietet vorgefertigte Komponenten, die zum Erstellen von Anwendungen für Windows, iOS, Android, macOS und Webseiten verwendet werden können. Darüber hinaus ist WinUI ein natives Benutzeroberflächen-Framework zum Erstellen von Windows-Apps. Es baut auf dem Fluent Design System auf und bietet eine Reihe vorgefertigter Steuerelemente.[30]

Einzelnachweise

Bearbeiten
  1. ↑ Fluent Design is Microsoft's new modern UI for Windows and more. In: The Verge. 11. Mai 2017, abgerufen am 16. Mai 2024 (englisch).
  2. ↑ Windows Developer on Twitter. (X) Abgerufen am 16. Mai 2024 (englisch).
  3. ↑ Fluent Design Language. In: Microsoft. Abgerufen am 12. Mai 2017 (englisch).
    Fluent 2. In: Microsoft. Abgerufen am 16. Mai 2024 (englisch).
  4. ↑ New Windows look and feel, Neon, is officially the "Microsoft Fluent Design System". In: Ars Technica. 11. Mai 2017, abgerufen am 11. Mai 2017 (englisch).
  5. ↑ Microsoft shows off its Fluent Design changes to Windows 10 In: The Verge. Abgerufen am 29. Oktober 2017 (englisch). 
  6. ↑ Microsoft's Fluent Design System threatens to make Windows look good In: Ars Technica. Abgerufen am 29. Oktober 2017 (amerikanisches Englisch). 
  7. ↑ A major new Xbox One update overhauls the dashboard with Fluent Design In: The Verge. Abgerufen am 29. Oktober 2017 (englisch). 
  8. ↑ The Xbox One is getting a major update today, including a faster dashboard In: The Verge. Abgerufen am 29. Oktober 2017 (englisch). 
  9. ↑ A first look at Microsoft's new Windows 10X operating system for dual screens In: The Verge, 11. Februar 2020. Abgerufen am 19. April 2020 (englisch). 
  10. ↑ Panos Panay on Instagram: "The team made this video to celebrate making it to 1 billion MAD on Windows 10 and I wanted to share it with all of you. Now at a time when…" (Instagram) 19. März 2020, ehemals im Original (nicht mehr online verfügbar); abgerufen am 19. April 2020 (englisch).@1@2Vorlage:Toter Link/www.instagram.com (Seite nicht mehr abrufbar. Suche in Webarchiven)
  11. ↑ Mayank Parmar: Microsoft teases Windows 7 Aero-like design for Windows 11. In: Windows Latest. 13. Februar 2022, abgerufen am 5. April 2023 (amerikanisches Englisch).
  12. ↑ a b mijacobs: Reveal highlight - UWP applications | Microsoft Docs. In: docs.microsoft.com. Abgerufen am 22. Dezember 2017 (amerikanisches Englisch).
  13. ↑ Windows Developer Blog: Creating Materials and Lights in the Visual Layer. In: Windows Developer Blog. 4. August 2017, abgerufen am 4. April 2023 (amerikanisches Englisch).
  14. ↑ cphilippona: Reveal focus - UWP applications | Microsoft Docs. In: docs.microsoft.com. 24. September 2020, abgerufen am 30. März 2018 (amerikanisches Englisch).
  15. ↑ a b Question: Is reveal possible to return? · Issue #4011 · microsoft/microsoft-ui-xaml. In: GitHub. Abgerufen am 15. Juli 2021 (englisch).
  16. ↑ Zac Bowden: Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System In: Windows Central, 19. Mai 2017. Abgerufen am 22. Dezember 2017 (englisch). 
  17. ↑ Kevin Joyce: Microsoft Reveal Z-Depth Layering for Windows 10 Mixed Reality Devices (Memento des Originals vom 13. August 2020 im Internet Archive) In: VRFocus, 20. Mai 2017. Abgerufen am 22. Dezember 2017 (amerikanisches Englisch). 
  18. ↑ a b hickeys: Layering and elevation in Windows 11 - Windows apps. In: learn.microsoft.com. Abgerufen am 4. April 2023 (amerikanisches Englisch).
  19. ↑ a b c d e mijacobs: Motion and animation in UWP apps - UWP applications | Microsoft Docs. In: docs.microsoft.com. 24. September 2020, abgerufen am 22. Dezember 2017 (amerikanisches Englisch).
  20. ↑ mijacobs: Connected animation - UWP applications | Microsoft Docs. In: docs.microsoft.com. 24. September 2020, abgerufen am 31. Dezember 2017 (amerikanisches Englisch).
  21. ↑ davidvkimball: Page transitions in WUP apps - UWP apps. In: docs.microsoft.com. 24. September 2020, abgerufen am 27. November 2019 (amerikanisches Englisch).
  22. ↑ mijacobs: How to use the ParallaxView control to add depth and movement to your app. - UWP applications | Microsoft Docs. In: docs.microsoft.com. 24. September 2020, abgerufen am 22. Dezember 2017 (amerikanisches Englisch).
  23. ↑ a b c hickeys: Materials used in Windows 11 apps - Windows apps. In: learn.microsoft.com. Abgerufen am 4. April 2023 (amerikanisches Englisch).
  24. ↑ mijacobs: Acrylic material - UWP applications | Microsoft Docs. In: docs.microsoft.com. Abgerufen am 22. Dezember 2017 (amerikanisches Englisch).
  25. ↑ Fluent Design System. In: fluent.microsoft.com. Archiviert vom Original am 1. März 2018; abgerufen am 18. Februar 2018 (englisch).
  26. ↑ Adarsh Verma: What Is Fluent Design System? How Is Microsoft Building The Most Beautiful Operating System? In: Fossbytes, 12. Mai 2017. Abgerufen am 18. Februar 2018 (amerikanisches Englisch). 
  27. ↑ muhsinking: Scroll viewer controls - UWP applications | Microsoft Docs. In: docs.microsoft.com. Abgerufen am 22. Dezember 2017 (amerikanisches Englisch).
  28. ↑ What's new with Microsoft Fluent Design System 'wave one' for Windows 10 In: Windows Central, 29. Juni 2017. Abgerufen am 22. Dezember 2017 (englisch). 
  29. ↑ Home - Fluent UI. In: Microsoft. Abgerufen am 5. April 2023 (amerikanisches Englisch).
  30. ↑ Karl Bridge: Windows UI Library (WinUI) 3 - Windows apps. In: Microsoft. Abgerufen am 5. April 2023 (amerikanisches Englisch).
Abgerufen von „https://de.wikipedia.org/w/index.php?title=Fluent-Designsystem&oldid=245851740“