13. Nov 2023
Lesedauer 14 Min.
Design mit WinUI 3
Design moderner Apps, Teil 4
Das Erscheinungsbild einer App wird wesentlich durch Farben, Materialien, Kontrast und Animationen bestimmt. WinUI 3 setzt dabei umfassend auf das Fluent Design.
dotnetpro
Farben, Schriftarten, Materialien und Animation spielen eine entscheidende Rolle bei der Gestaltung der Benutzeroberfläche einer Software. Sie sind Teil des Designs und sind unter anderem auch für eine hohe Wiedererkennungsrate entscheidend.Eine gut gemachte Benutzeroberfläche der Anwendung sollte konsistent sein und einen hohen Wiedererkennungswert aufweisen. Beispielsweise kann die Zugehörigkeit von mehreren Anwendungen zu einer Softwarefamilie auf diese Weise kenntlich gemacht werden. Ein Musterbeispiel hierfür ist die Gestaltung der Office-Apps und ähnlicher Büro-Applikationen von Microsoft. Microsoft Word und One Note zum Beispiel weisen eine nahezu identische Anordnung der Menüelemente auf (Bild 1). Auch das Styling der Apps mit Farben, Schriftarten und dergleichen ist identisch (siehe auch den Kasten Corporate Design).
Corporate Design der Office-Apps von Microsoft (Bild 1)
Autor
Auf diese Weise stellt man sicher, dass sich die Anwender mit der Bedienung der Apps stets vertraut fühlen und somit das Nutzererlebnis als positiv empfunden wird.Es stellen sich aus unserer Sicht mehrere Fragen:
- Wie kann man dieses Ziel bei der Gestaltung des User Interfaces einer Applikation erreichen?
- Wie stellt man sicher, dass ein Softwaresystem umfassende und durchgehende Wiedererkennungsmerkmale aufweist?
- Wie arbeiten wir mit Farben und Symbolen?
Design-System unter der Lupe
Ein Design-System besteht aus verschiedenen Elementen, die zusammenwirken, um eine konsistente Gestaltung und Benutzererfahrung zu gewährleisten. Die Designprinzipien beschreiben die grundlegenden Richtlinien, die den Designprozess leiten und die Werte und Ziele des Unternehmens oder der Organisation widerspiegeln. Sie dienen als Grundlage für alle gestalterischen Entscheidungen. Wichtige Bestandteile eines Design-Systems sind:- User-Interface-Komponenten: Das Design-System definiert eine Sammlung von wiederverwendbaren UI-Komponenten wie Buttons, Formularen, Navigationsleisten, Karten, Tabellen und anderen UI-Elementen. Diese Komponenten sind so gestaltet, dass sie einheitlich aussehen und sich konsistent verhalten.
- Layout-System: Ein Design-System legt auch Richtlinien für das Layout fest. Es definiert etwa die Rasterstruktur, das Seitenlayout und die Abstände zwischen den Elementen.
- Interaktionsmuster: Es enthält häufig Richtlinien für Interaktionsmuster und Animationen. Es definiert beispielsweise, auf welche Weise Benutzerinteraktionen wie
Klicks, Schieberegler oder Drop-down-Elemente gestaltet werden sollen, um eine konsistente Benutzererfahrung zu gewährleisten. - Branding-Elemente: Ein Design-System enthält oft Branding-Elemente wie Logo, Farbpalette, Schriftarten und visuelle Stile. Diese Elemente tragen zur Wiedererkennung und Konsistenz der Marke bei.
Typische Bestandteile eines Design-Systems (Bild 2)
Autor
- Governance: Es sind die Richtlinien und die Philosophie, die das Design bestimmen. Es wird erklärt, warum Komponenten auf eine bestimmte Weise verwendet werden.
- Style Guidelines: Sie legen die Standards für das Branding und Design des Produkts fest, beispielsweise Icons, Typografie und eine Farbpalette.
- Pattern Library: Hier wird jedes einzelne UI-Element des Produkts erfasst, sodass es schnell abgerufen und wiederverwendet werden kann. Verwandte Elemente werden oft kombiniert und als Layouts dargestellt.
- Material Design von Google
- Polaris von Shopify
- Fluent von Microsoft
- Human Design von Apple
- Primer von GitHub
- Carbon von IBM
- Monument von Cisco
- Sipgate
- Atlassian
Fluent Design 2
Das Betriebssystem Windows 11 und die daraus aufgeführten Apps sollen sich in Fragen der Gestaltung an der Designsprache Fluent Design orientieren. Das neueste Grafikframework WinUI 3 basiert auf Fluent Design. WinUI 3 wurde als eigenständige Bibliothek entwickelt und kann mit verschiedenen anderen User-Interface-Technologien wie Windows Forms und der Windows Presentation Foundation kombiniert werden. In WinUI 3 können Fluent-Design-Elemente und -Effekte realisiert werden.Im Jahr 2023 hat Microsoft das Fluent Design Version 2 vorgestellt. Das neue Design-System basiert auf dem Vorgänger Fluent Design 1 und zielt auf die Verbesserung der Zusammenarbeit und auf die Förderung der Kreativität während des gesamten Entwicklungsprozesses ab.Zu den wichtigen Aktualisierungen von Fluent Design in Version 2 gehören unter anderem ein kohärenteres Farbsystem, ein Token-System, standardisierte Ecken, eine bessere Anpassbarkeit, robustere Nutzungshinweise und eine Notation für Barrierefreiheit.Sehen wir uns das etwas genauer an: Das Token-System ist ein bemerkenswertes Merkmal des Fluent-2-Design-Systems. Design-Token sind gespeicherte Werte, die zum Zuweisen von Fluent-Stilen wie Farbe, Typografie, Abstand oder Höhe verwendet werden, ohne dass Pixel und Hexadezimalcodes fest codiert werden müssen. Das Token-System ermöglicht es, dass sich Entwickler und Designer besser austauschen können und auf diese Weise ein konsistentes Design über Plattformen möglich wird.Insgesamt umfasst die Design Language von Fluent Design 2 folgende Elemente: Farbe, Hervorhebung, Ikonografie, Layout, Material, Motion, Formen und Typografie.Sehen wir uns nun ausgewählte Aspekte aus diesem Bereich an. Wir wollen mit den Farben starten. Das Ziel: Alles soll knallbunt werden – na ja, lieber nicht, das war nur Spaß!Farben
Die Wahl der Farbe ist ein wichtiges Instrument bei der Gestaltung von Oberflächen. Eine gezielte Verwendung von Farben unterstützt bei der Übermittlung von Inhalten und hilft dabei, Emotionen zu kommunizieren. Passend ausgewählte Farben sorgen dafür, dass sich die Verwendung der Software für die Nutzer vertraut anfühlt. Das Fluent-System definiert drei Farbpaletten [1]:- Neutral Colors: Die neutrale Farbpalette besteht aus Schwarz, Weiß und Grautönen. Diese Farben werden für Oberflächen, Texte und Layout-Elemente verwendet. Hellere Neutraltöne werden verwendet, um Schwerpunktbereiche in der Oberfläche hervorzuheben und ein Gefühl der Hierarchie zu erzeugen. So versucht man, den Blick einer Person auf bestimmte Bereiche einer Benutzeroberfläche zu lenken (Bild 3).
Neutrale Farben und visuelle Hierarchie (Bild 3)
Autor
- Shared Colors: Diese Farben findet man in übergreifenden und wiederverwendbaren Komponenten wie Avataren und bei Kalenderdarstellungen. Shared-Farben ermöglichen eine schnelle Erkennung von Komponenten und Funktionen von bekannten Produkten (Bild 4).
Shared Colors im Überblick (Bild 4)
Autor
- Semantic Colors: Semantische Farben werden verwendet, um wichtige Informationen zu vermitteln, beispielsweise zur Kommunikation von Feedback, Status oder Dringlichkeit. Achtung: Man sollte diese Farben nicht zu dekorativen Designzwecken einsetzen (Bild 5).
Semantic Colors im Überblick (Bild 5)
Autor
- Brand Colors: Die Produkte in Microsoft 365 zeichnen sich beispielsweise durch den Einsatz spezieller Markenfarben aus (Bild 6). Ein ähnliches Konzept kann man auf die eigene App übertragen. Man sollte es meiden, Markenfarben übermäßig einzusetzen oder diese auf großen Flächen zu verwenden.
Brand Colors im Überblick (Bild 6)
Autor
Die Fluent-Farbpaletten werden auch häufig verwendet, um Interaktionszustände von Komponenten anzuzeigen. Eine Komponente wird dunkler, wenn jemand mit ihr interagiert. Man kann zwischen folgenden Zuständen unterscheiden: vom hellsten Ruhezustand über einen dunkleren Schwebezustand bis hin zum dunkelsten ausgewählten Zustand. Bei Erlangen des Fokus ändert sich die Farbe des Steuerelements nicht, aber der Container erhält einen dickeren Strich, um eine klare visuelle Unterscheidung zwischen Maus- und Tastaturinteraktionen zu schaffen (Bild 7). Mit dieser feingranularen Abstufung des Fluent-Design-Systems unterstützt man als Designer beziehungsweise Entwickler die Bedienung der App. Man gibt jederzeit Feedback über den Status eines Objekts. Die Nutzer lernen dieses visuelle Feedback zu deuten und werden eine Wiedererkennung in einer anderen App positiv werten.
Interaction State im Überblick (Bild 7)
Autor
Accessibility
Accessibility steht bei Fragen des Designs für Zugänglichkeit beziehungsweise Barrierefreiheit. Man sollte beispielsweise bei der Auswahl der Farben stets darauf achten, welche Kontrastwerte die Oberfläche aufweist. Personen mit Sehbehinderung oder Farbenblindheit können nicht alle Farbkombinationen vernünftig wahrnehmen. Außerdem sollten Farben nicht als einzige Kommunikationsmöglichkeit genutzt werden. Idealerweise bilden Texte, Grafiken (Symbole) und Farben ein abgestimmtes System und adressieren damit auf vielfältige Art und Weise die Nutzer einer Anwendung (siehe den Kasten Mehrfachcodierung).Listing 2: Experimente mit Akzentfarben
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Window</span> <span class="hljs-attr">x:Class</span>=<span class="hljs-string">"App1.MainWindow"</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://schemas.microsoft.com/winfx/2006/xaml/</span></span></span><br/><span class="xml"><span class="hljs-tag"><span class="hljs-string"> presentation"</span> <span class="hljs-attr">xmlns:x</span>=<span class="hljs-string">"http://schemas.microsoft.com/winfx/2006/</span></span></span><br/><span class="xml"><span class="hljs-tag"><span class="hljs-string"> xaml"</span> <span class="hljs-attr">xmlns:d</span>=<span class="hljs-string">"http://schemas.microsoft.com/expression/</span></span></span><br/><span class="xml"><span class="hljs-tag"><span class="hljs-string"> blend/2008"</span> <span class="hljs-attr">xmlns:local</span>=<span class="hljs-string">"using:App1"</span> <span class="hljs-attr">xmlns:mc</span>=<span class="hljs-string">"http://schemas.openxmlformats.org/</span></span></span><br/><span class="xml"><span class="hljs-tag"><span class="hljs-string"> markup-compatibility/2006"</span> <span class="hljs-attr">mc:Ignorable</span>=<span class="hljs-string">"d"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">StackPanel</span> <span class="hljs-attr">Margin</span>=<span class="hljs-string">"100"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">StackPanel.Resources</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Style</span> <span class="hljs-attr">x:Name</span>=<span class="hljs-string">"RectangleStyle"</span> </span></span><br/><span class="xml"><span class="hljs-tag"> <span class="hljs-attr">TargetType</span>=<span class="hljs-string">"Rectangle"</span>&gt;</span><span class="xml"> <span class="hljs-tag">&lt;<span class="hljs-name">Setter</span> <span class="hljs-attr">Property</span>=<span class="hljs-string">"Width"</span> <span class="hljs-attr">Value</span>=<span class="hljs-string">"200"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Setter</span> <span class="hljs-attr">Property</span>=<span class="hljs-string">"Height"</span> <span class="hljs-attr">Value</span>=<span class="hljs-string">"40"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Setter</span> <span class="hljs-attr">Property</span>=<span class="hljs-string">"Margin"</span> <span class="hljs-attr">Value</span>=<span class="hljs-string">"0,20"</span> /&gt;</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">Style</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">StackPanel.Resources</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Rectangle</span> <span class="hljs-attr">Fill</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{ThemeResource </span><br/><span class="hljs-template-variable"> SystemAccentColorLight3}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> </span></span><br/><span class="xml"><span class="hljs-tag"> <span class="hljs-attr">Style</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{StaticResource RectangleStyle}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Rectangle</span> <span class="hljs-attr">Fill</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{ThemeResource </span><br/><span class="hljs-template-variable"> SystemAccentColorLight2}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> </span></span><br/><span class="xml"><span class="hljs-tag"> <span class="hljs-attr">Style</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{StaticResource RectangleStyle}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Rectangle</span> <span class="hljs-attr">Fill</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{ThemeResource </span><br/><span class="hljs-template-variable"> SystemAccentColorLight1}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> </span></span><br/><span class="xml"><span class="hljs-tag"> <span class="hljs-attr">Style</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{StaticResource RectangleStyle}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Rectangle</span> <span class="hljs-attr">Fill</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{ThemeResource </span><br/><span class="hljs-template-variable"> SystemAccentColor}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> </span></span><br/><span class="xml"><span class="hljs-tag"> <span class="hljs-attr">Style</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{StaticResource RectangleStyle}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Rectangle</span> <span class="hljs-attr">Fill</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{ThemeResource </span><br/><span class="hljs-template-variable"> SystemAccentColorDark1}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> </span></span><br/><span class="xml"><span class="hljs-tag"> <span class="hljs-attr">Style</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{StaticResource RectangleStyle}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Rectangle</span> <span class="hljs-attr">Fill</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{ThemeResource </span><br/><span class="hljs-template-variable"> SystemAccentColorDark2}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> </span></span><br/><span class="xml"><span class="hljs-tag"> <span class="hljs-attr">Style</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{StaticResource RectangleStyle}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Rectangle</span> <span class="hljs-attr">Fill</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{ThemeResource </span><br/><span class="hljs-template-variable"> SystemAccentColorDark3}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> </span></span><br/><span class="xml"><span class="hljs-tag"> <span class="hljs-attr">Style</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{StaticResource RectangleStyle}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> /&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">StackPanel</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Window</span>&gt;</span></span> Visuelle Effekte
Auch Hervorhebungen sind ein wichtiges Instrument bei der Gestaltung von Oberflächen. Diese nutzen das Zusammenspiel von Schatten und Licht. Es geht dabei um die visuelle Gestaltung des Abstands zwischen einem Objekt und der Oberfläche dahinter, der durch den gezielten Einsatz von Schatten und Licht erzielt wird. Das Hervorheben von Elementen vermittelt die Bedeutung dieser Elemente auf der Benutzeroberfläche und verbessert die Übersichtlichkeit. Dadurch entstehen eine klare Hierarchie und ein Gefühl der Fokussierung. Die Benutzererfahrung wird verbessert. Die Schattenrichtung vermittelt die wahrgenommene Lichtquelle und die Schattengröße zeigt die Entfernung des Betrachters vom Objekt. Scharfe und klare Schatten weisen auf eine Nähe zur Oberfläche hin, während größere, weichere Schatten auf eine größere Entfernung hindeuten.Die Werte sind im Schatten-System festgelegt (Bild 8). Mehr über Hervorhebungen und die Verwendung von Schatten findet man unter [2]. Man sollte sogenannte Schatten-Token verwenden, um konsistente Schatten auf allen Oberflächen (Dialogfelder, Fenster) sicherzustellen.
Schatten-System in Fluent 2 (Bild 8)
Autor
Kommen wir zu den Symbolen als weitere wichtige Elemente der Gestaltung des User Interfaces. Symbole sollte man derart gestalten, dass diese stets erkennbar, funktional und leicht verständlich sind. Die Symbole des Fluent-2-Design-Systems sind in drei Kategorien unterteilt (Bild 9):
Überblick über die System-, Produkt- und Dateisymbole (Bild 9)
Autor
- Systemsymbole: Diese Symbole verwendet man für Elemente wie Befehlsleisten, Navigation oder Statusanzeigen. Systemsymbole werden unter einer Open-Source-Lizenz bereitgestellt und können in den eigenen Apps frei eingesetzt werden.
- Produktsymbole: Diese Symbole repräsentieren im Beispiel die Apps von Microsoft. Die App benötigt eigene Produktsymbole, die man sorgfältig entwerfen sollte.
- Dateisymbole: Sie weisen auf bestimmte Dateien oder Dateiformate hin.
Die Formen im Überblick (Bild 10)
Autor
- Rechteck
- Kreis
- Pill
- Beak
Praxis
Viele Leser werden sich nun fragen, wie man diese Erkenntnisse bei der App-Entwicklung konkret realisiert. Als WinUI-3-Entwickler ist man hier automatisch auf dem richtigen Pfad. Die Logik des Systems und die WinUI-3-Controls unterstützen von Haus aus vieles automatisch. Wir sehen uns jetzt einige ausgewählte Aspekte in der Umsetzung an.Erstellen Sie eine neue WinUI-3-App und experimentieren Sie mit uns. Beginnen wir mit der farblichen Gestaltung. Wird die App gestartet, dann übernimmt sie das Design des Betriebssystems, das heißt entweder ein helles oder ein dunkles Thema. Sie können das Thema auch initial für die App einstellen. Das erfolgt in der Datei App.xaml über das Setzen der Eigenschaft RequestedTheme, beispielsweise auf den Wert RequestedTheme=“Dark“ (Listing 1). Viele Apps bieten in den Einstellungen die Auswahl des Themas (Hell, Dunkel und System). Ein Beispiel für diese Systemeinstellungen zeigtBild 11. Auf jeden Fall sollten Sie Ihre App sowohl unter hellem als auch unter dunklem Design testen, um sicherzustellen, dass sie unter allen Bedingungen lesbar ist.
Wechsel des Themas in den App-Einstellungen (Bild 11)
Autor
Möchten Sie die Farbwerte von einzelnen Elementen anpassen, dann haben Sie grundsätzlich zwei Optionen:
- Hartcodierte Farbwerte: Hier geben Sie direkt einen Farbwert vor. Das Vorgehen ist beispielsweise dann angebracht, wenn Sie die Farbwerte an die Vorgaben eines Corporate Designs des Unternehmens anpassen möchten. Diese Definition der Farbwerte kann Schwierigkeiten bei bestimmten Themen (Hell, Dunkel, Angepasst) des Betriebssystems verursachen und auch Einschränkungen für Benutzer mit Sehschwächen bedeuten.
- Verwenden von Designpinseln: Das sind vordefinierte Farbwerte, die sich automatisch an das vom Betriebssystem vorgegebene Thema anpassen.
<TextBlock <span class="hljs-built_in">Text</span><span class="hljs-string">"..."</span> Foreground=<span class="hljs-string">"{</span>
<span class="hljs-string"> ThemeResource TextFillColorPrimaryBrush}"</span> />
Sehen wir uns an, wie der Farbwert für diesen Pinsel zur Laufzeit bestimmt wird. In den Ressourcenverzeichnissen Light und Dark wird dieser Pinsel wie folgt definiert:
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">SolidColorBrush</span> <span class="hljs-attr">x:Key</span>=<span class="hljs-string">"TextFillColorPrimaryBrush"</span> </span></span>
<span class="xml"><span class="hljs-tag"> <span class="hljs-attr">Color</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{StaticResource TextFillColorPrimary}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>/></span></span>
Im Ressourcenverzeichnis HighContrast wird dieser Pinsel hingegen so definiert:
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">SolidColorBrush</span> <span class="hljs-attr">x:Key</span>=<span class="hljs-string">"TextFillColorPrimaryBrush"</span> </span></span>
<span class="xml"><span class="hljs-tag"> <span class="hljs-attr">Color</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{ThemeResource SystemColorWindowTextColor}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>/></span></span>
Wenn dieser Pinsel auf ein XAML-Element angewendet wird, wird die Farbe zur Laufzeit durch das aktuelle Design bestimmt. Konkret sind es dann die folgenden Farbwerte:
- DesignHell: Farbressource: TextFillColorPrimary, Farbwert: #E4000000,
- Design Dunkel: Farbressource: TextFillColorPrimary, Farbwert: #FFFFFFFF,
- Design HighContrast: Farbressource: SystemColorWindowTextColor, Farbwert: die individuelle Farbe, die in den Einstellungen für Text angegeben ist.
Color-contrast-Tool in der App WinUI 3 Gallery (Bild 13)
Autor
Farbauswahl in den Windows-Einstellungen (Bild 12)
Autor
Schließen wir noch ein Experiment mit den Akzentfarben an. Ein Akzentfarbalgorithmus in der Windows-Shell generiert helle und dunkle Schattierungen der Akzentfarbe. Diese Schattierungen sind als Designressourcen verfügbar:
- SystemAccentColorLight3
- SystemAccentColorLight2
- SystemAccentColorLight1
- SystemAccentColorDark1
- SystemAccentColorDark2
- SystemAccentColorDark3
Listing 2: Experimente mit Akzentfarben
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Window</span> <span class="hljs-attr">x:Class</span>=<span class="hljs-string">"App1.MainWindow"</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://schemas.microsoft.com/winfx/2006/xaml/</span></span></span><br/><span class="xml"><span class="hljs-tag"><span class="hljs-string"> presentation"</span> <span class="hljs-attr">xmlns:x</span>=<span class="hljs-string">"http://schemas.microsoft.com/winfx/2006/</span></span></span><br/><span class="xml"><span class="hljs-tag"><span class="hljs-string"> xaml"</span> <span class="hljs-attr">xmlns:d</span>=<span class="hljs-string">"http://schemas.microsoft.com/expression/</span></span></span><br/><span class="xml"><span class="hljs-tag"><span class="hljs-string"> blend/2008"</span> <span class="hljs-attr">xmlns:local</span>=<span class="hljs-string">"using:App1"</span> <span class="hljs-attr">xmlns:mc</span>=<span class="hljs-string">"http://schemas.openxmlformats.org/</span></span></span><br/><span class="xml"><span class="hljs-tag"><span class="hljs-string"> markup-compatibility/2006"</span> <span class="hljs-attr">mc:Ignorable</span>=<span class="hljs-string">"d"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">StackPanel</span> <span class="hljs-attr">Margin</span>=<span class="hljs-string">"100"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">StackPanel.Resources</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Style</span> <span class="hljs-attr">x:Name</span>=<span class="hljs-string">"RectangleStyle"</span> </span></span><br/><span class="xml"><span class="hljs-tag"> <span class="hljs-attr">TargetType</span>=<span class="hljs-string">"Rectangle"</span>&gt;</span><span class="xml"> <span class="hljs-tag">&lt;<span class="hljs-name">Setter</span> <span class="hljs-attr">Property</span>=<span class="hljs-string">"Width"</span> <span class="hljs-attr">Value</span>=<span class="hljs-string">"200"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Setter</span> <span class="hljs-attr">Property</span>=<span class="hljs-string">"Height"</span> <span class="hljs-attr">Value</span>=<span class="hljs-string">"40"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Setter</span> <span class="hljs-attr">Property</span>=<span class="hljs-string">"Margin"</span> <span class="hljs-attr">Value</span>=<span class="hljs-string">"0,20"</span> /&gt;</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">Style</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">StackPanel.Resources</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Rectangle</span> <span class="hljs-attr">Fill</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{ThemeResource </span><br/><span class="hljs-template-variable"> SystemAccentColorLight3}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> </span></span><br/><span class="xml"><span class="hljs-tag"> <span class="hljs-attr">Style</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{StaticResource RectangleStyle}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Rectangle</span> <span class="hljs-attr">Fill</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{ThemeResource </span><br/><span class="hljs-template-variable"> SystemAccentColorLight2}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> </span></span><br/><span class="xml"><span class="hljs-tag"> <span class="hljs-attr">Style</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{StaticResource RectangleStyle}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Rectangle</span> <span class="hljs-attr">Fill</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{ThemeResource </span><br/><span class="hljs-template-variable"> SystemAccentColorLight1}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> </span></span><br/><span class="xml"><span class="hljs-tag"> <span class="hljs-attr">Style</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{StaticResource RectangleStyle}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Rectangle</span> <span class="hljs-attr">Fill</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{ThemeResource </span><br/><span class="hljs-template-variable"> SystemAccentColor}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> </span></span><br/><span class="xml"><span class="hljs-tag"> <span class="hljs-attr">Style</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{StaticResource RectangleStyle}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Rectangle</span> <span class="hljs-attr">Fill</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{ThemeResource </span><br/><span class="hljs-template-variable"> SystemAccentColorDark1}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> </span></span><br/><span class="xml"><span class="hljs-tag"> <span class="hljs-attr">Style</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{StaticResource RectangleStyle}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Rectangle</span> <span class="hljs-attr">Fill</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{ThemeResource </span><br/><span class="hljs-template-variable"> SystemAccentColorDark2}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> </span></span><br/><span class="xml"><span class="hljs-tag"> <span class="hljs-attr">Style</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{StaticResource RectangleStyle}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Rectangle</span> <span class="hljs-attr">Fill</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{ThemeResource </span><br/><span class="hljs-template-variable"> SystemAccentColorDark3}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> </span></span><br/><span class="xml"><span class="hljs-tag"> <span class="hljs-attr">Style</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{StaticResource RectangleStyle}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> /&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">StackPanel</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Window</span>&gt;</span></span> Listing 1: Thema (Farbdesign) der App anpassen
<span class="hljs-tag">&lt;<span class="hljs-name">Application</span> <span class="hljs-attr">x:Class</span>=<span class="hljs-string">"App9.App"</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://schemas.microsoft.com/winfx/2006/</span></span><br/><span class="hljs-tag"><span class="hljs-string"> xaml/presentation"</span> <span class="hljs-attr">xmlns:x</span>=<span class="hljs-string">"http://schemas.microsoft.com/winfx/2006/</span></span><br/><span class="hljs-tag"><span class="hljs-string"> xaml"</span> <span class="hljs-attr">xmlns:local</span>=<span class="hljs-string">"using:App9"</span> <span class="hljs-attr">RequestedTheme</span>=<span class="hljs-string">"Dark"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Application</span>&gt;</span> 
Verwendung der Akzentfarben (Farbabstufungen) (Bild 14)
Autor
Kommen wir zu Symbolen, die beispielsweise unterstützend in Navigationselementen verwendet werden. Ein Großteil der Symbole ist in der Schriftart Segoe Fluent Icons enthalten. Alle Glyphen in Segoe Fluent Icons haben die gleiche feste Breite mit einer konsistenten Höhe und einem linken Ursprungspunkt. Auf diese Weise können Ebenen- und Farbeffekte erreicht werden, indem Glyphen direkt übereinander gezeichnet werden. Die Liste mit den Symbolen (Bild 15) finden Sie unter [6]. Ein rotes WLAN-Symbol erhalten Sie daher beispielsweise wie folgt:
Liste der Symbole in Segoe Fluent Icons (Bild 15)
Autor
<FontIcon FontFamily="Segoe Fluent
Icons" Glyph="&#xE701;"
Foreground="#C72335" />
Auch zu den Symbolen gibt es eine gute Hilfe in der App WinUI 3 Gallery. Unter dem Bereich Icons können Sie nach einem solchen mit einem Stichwort suchen und erhalten dazu den Unicode-Wert und Quelltextvorlagen für XAML und C#, um das Icon in die eigene App zu übernehmen (Bild 16).
Auswahlhilfe zu den Symbolen in der App WinUI 3 Gallery (Bild 16)
Autor
Sie sehen es, mithilfe der WinUI 3 lassen sich die modernen Designansätze leicht realisieren. Nicht alle Ideen konnten wir im Konzept und der Praxis vorstellen. Dennoch sollte das Vorgehen hoffentlich deutlich geworden sein. Am besten geht man in der Form vor, dass man sich mit einem bestimmten Designaspekt, beispielsweise Farben, Symbole, Schriftarten et cetera, in der Theorie vertraut macht und dann in der Dokumentation schaut, wie dies technisch realisiert wird. Nach und nach dürfte dann das Design der App auf eine vollständig neue Basis gestellt werden. Ebenso werden Sie feststellen, dass es für ein gelungenes App-Design Zeit, Erfahrungen und Inspiration braucht. Entwickler, die auf die Expertise eines Designers zurückgreifen können, dürfen sich an dieser Stelle glücklich schätzen.
Fazit und Ausblick
Der Artikel hat die essenzielle Rolle des Designs bei der Entwicklung von Apps verdeutlicht und gezeigt, welche maßgeblichen Auswirkungen ein gelungenes Design auf den Erfolg und die Benutzerfreundlichkeit einer App haben kann. Dabei geht es stets um mehr als um Fragen der Gestaltung, denn Design und Benutzbarkeit von Software greifen ineinander. Ein ansprechendes und nutzerfreundliches Design hat das Potenzial, eine tiefere emotionale Bindung zu schaffen und eine positive Nutzererfahrung zu fördern. Schafft ein Design es, die Anforderungen und Erwartungen der Zielgruppe zu erfüllen und gleichzeitig Ästhetik und Benutzerfreundlichkeit in Einklang zu bringen, wird die App als intuitiv, effizient und angenehm wahrgenommen. Dadurch steigt die Wahrscheinlichkeit, dass Nutzer die App weiterempfehlen und gerne wiederkehren.Darüber hinaus darf die Barrierefreiheit im App-Design nicht vernachlässigt werden. Eine inklusive Gestaltung, welche die Bedürfnisse von Menschen mit unterschiedlichen Fähigkeiten berücksichtigt, erhöht die Reichweite und erleichtert es allen Nutzern, von den Funktionen der App zu profitieren. In einer zunehmend digitalen Welt ist dieses kein „Nice to have“, sondern ein „Muss“.Für Windows-Entwickler sind die Ideen des FluentDesigns richtungsweisend. Durch die Integration von Fluent Design in den Designprozess kann man die Apps mit einer einheitlichen Benutzeroberfläche ausstatten, die sich nahtlos in die Windows-Plattform und andere Microsoft-Produkte einfügt. Fluent Design ist mehr als nur eine Ästhetik. Es basiert auf zentralen Säulen wie Licht, Tiefe und Material.Diese Artikelserie hat bisher versucht, Ihnen einige Aspekte (Konzept, Layout, Controls, Design) der Gestaltung am Beispiel der WinUI 3 näherzubringen. In der kommenden Ausgabe werfen wir das alles zur Kombination „in einen Topf“ und zeigen die ganzheitliche Anwendung an einem Beispiel.Fussnoten
- Fluent 2, http://www.dotnetpro.de/SL2312WinUI3_1
- Microsoft Learn, Layering and elevation in Windows 11, http://www.dotnetpro.de/SL2312WinUI3_2
- Fluent System Icons bei GitHub, http://www.dotnetpro.de/SL2312WinUI3_3
- Microsoft Fluent system iconography, http://www.dotnetpro.de/SL2312WinUI3_4
- Techniques for WCAG 2.0: Resources, http://www.dotnetpro.de/SL2312WinUI3_5
- Microsoft Learn, Schriftart „Segoe Fluent Icons“, http://www.dotnetpro.de/SL2312WinUI3_6
