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]
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]
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 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]
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]
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]
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]
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]
↑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)