21. Apr 2022
Lesedauer 9 Min.
Symbole als Wegweiser
Symbole für moderne Windows-Anwendungen
Applikationen für die aktuellen Windows-Versionen legen viel Wert auf Design.
Bilder, Icons und Symbole sind schon immer ein wichtiges Element zur Gestaltung von grafischen Benutzeroberflächen. Der Einsatz von kleineren grafischen Repräsentationen bietet einige Vorteile gegenüber anderen Steuerelementen, zum Beispiel ein beschriftetes Label. Die Bedeutung von Icons sind von Nutzern gelernt und im Idealfall international anerkannt. Beispielsweise kennt man im Allgemeinen das X als Symbol für das Schließen einer Anwendung. Einige allgemeine Regeln lassen sich aufstellen:Symbole können sowohl innerhalb als auch außerhalb einer App angewendet werden. In einer App stellt man mithilfe von Symbolen eine Aktion dar, beispielsweise das Kopieren von Text oder das Navigieren zur Einstellungsseite. Außerhalb der App werden Symbole für das Startmenü, die Titelleiste etc. verwendet. Die Designrichtlinien zeigen dem Entwickler und dem Designer die passende Verwendung dieser kleinen grafischen Objekte.Im Artikel sehen wir uns das Konzept und die technische Umsetzung an. Es betrifft alle Arten von Apps unter Windows 10 und Windows 11. Wir werden es gleich feststellen: Ein Großteil der Symbole sind keine Bitmap- oder Vektorgrafiken, sondern sind Bestandteile von eigens dafür definierten Schriftarten. Das bringt einige Vorteile bei der technischen Umsetzung mit sich. Aber der Reihe nach, zunächst sehen wir uns das aktuelle Konzept und die Verwendung von Symbolen in modernen Windows Anwendungen an.
Symbole in Windows Apps
Die optische Gestaltung der Software für Windows 10 und Windows 11 ist ein wichtiges Thema. Ein ansprechendes Design ist nicht nur ein Nice-To-Have, sondern eine wichtige Voraussetzung für eine gute User Experience. Neben der Auswahl von Bildern, Farben und Schriftarten beschäftigt man sich auch mit dem Einsatz von Symbolen. Die Herausforderung besteht darin, die Benutzerfreundlichkeit und Ästhetik so zu vereinen, dass die Software den Benutzervorstellungen entspricht und ohne Vorkenntnisse intuitiv bedient werden kann. Es gilt: Nur ein einfaches Design macht die Technologie zugänglich.In Windows 11 gibt es auch Neuigkeiten im Bereich der Symbolographie. Es wird zwischen Symbolen innerhalb der Anwendung und Symbolen außerhalb der Anwendung unterschieden. Anwendungssymbole beziehungsweise App-Symbole werden außerhalb der App verwendet und man benutzt diese zur Darstellung in der Windows Shell. Jede Anwendung wird in der Windows Shell an mehreren Orten angezeigt, beispielsweise im Startmenü in der App-Liste, im Taskmanager, im Microsoft Store etc. Symbole innerhalb der App, dienen dazu, bestimmte Funktionen zu aktivieren, Vorgänge auszulösen oder einen Status darzustellen.Anwendungssymbole sind eine Art Metapher, welche die Kernfunktion der Anwendung darstellen sollen. Diese erscheinen zum Beispiel in der Taskleiste. In Windows Apps für die Universelle Windows Plattform oder für die WinUI 3 werden die Symbole in einem Unterverzeichnis für Ressourcen gespeichert. Diese Bilddateien werden in einem App-Projekt innerhalb von Visual Studio eingebunden. Das erfolgt in der Manifest-Datei. Sehen wir uns das an einem konkreten Beispiel an. Öffnen Sie für eine App der UWP oder eine WinUI 3-Anwendung über den Projektmappen-Explorer die Datei package.appxmanifest und dort die Registerkarte Visuelle Assets (Bild 1).
Visuelle Assetsin der Manifest-Datei einer Windows Anwendung(Bild 1)
Bochkor
Sie sehen die unterschiedlichen Sektionen und die Möglichkeit dort entsprechende Bilddateien zuzuweisen. Windows Anwendungen können auf unterschiedlichen Geräten mit diversen Bildschirmgrößen und -auflösungen ausgeführt werden. Um sicherzustellen, dass diese Symbole auf allen Bildschirmen gut aussehen, müssen Sie von jeder relevanten Bildressource mehrere Dateien in unterschiedlichen Größen erstellen und zur Verfügung stellen. In jedem Bereich sehen Sie die notwendigen und die empfohlen Bildgrößen. Diese werden durch eine Ergänzung im Dateinamen in Bezug auf die Auflösung unterschieden.
Bilddateienim Projekt in unterschiedlichen Auflösungen(Bild 2)
Bochkor
Insgesamt sind dazu eine größere Anzahl von Bildressourcen zu erstellen. Die qualitativ beste Lösung ist es, dass man die Bilddateien mit unterschiedlichen Größen manuell mit Hilfe eines Grafikprogramms erstellt und diese dann einzeln über die Manifest-Datei zuweist. Alternativ kann man auch Visual Studio dazu verwenden, die Ressourcen automatisch zu generieren. Dazu ist eine Bildquelle notwendig. Vernünftig funktioniert das nur, wenn die Bildquelle eine vektorbasierte Datei ist, so dass die Skalierung verlustfrei erfolgen kann. Verwenden Sie hier eine Bitmap-Datei, dann werden Sie wahrscheinlich mit dem Ergebnis der Dateikonvertierung nicht komplett zufrieden sein. Geben wir eine Quelldatei an und klicken wir im Asset-Generator auf den Button Generieren, dann werden alle Bilddateien erstellt und dem Projekt hinzugefügt (Bild 2).
Qualität der Bilddateien
Haben Sie die Bilddateien erzeugt, dann prüfen Sie diese auf deren Qualität, in dem Sie sie zum Beispiel in einem Zeichen- oder Fotoprogramm öffnen. Dann können Sie diese noch nachbearbeiten oder im Zweifelsfall auch umgestalten. Das kann notwendig sein, da Bildgrößen unterschiedlicher Größe benötigt werden und nicht auf allen Bildgrößen alle Inhalte passen. Konkret: Auf eine kleine Kachel mit den Abmessungen 71 px x71 px können nur schwerlich die gleichen Inhalte untergebracht werden, wie auf dem Begrüßungslogo mit einer Größe von 2.480 px x 2.480 px. Mit anderen Worten: Das Tool zur Konvertierung der Bildgrößen ist hilfreich, aber wird nicht in allen Fällen eine fertige Lösung für die App-Symbole liefern. Einen weiteren Vorteil hat die Anwendung dieses Tools: Wir bekommen für alle notwendigen Bilder eine Datei mit den richtigen Dateinamen und der passenden Bildgröße, welche wir dann gegebenenfalls anpassen oder ersetzen können. Das erleichtert die Arbeit erheblich. Kommen wir jetzt dazu, wie Symbole innerhalb einer App genutzt werden. Diese dienen meist dazu, Aktionen auszulösen oder den Nutzer über einen bestimmten Zustand zu informieren. Symbole werden daher sehr oft in einem Button eingesetzt. Sehen wir uns jetzt die Möglichkeiten an, wie man einen Button oder ein beliebig anderes Steuerelement mit einem Textlabel, ein Symbol oder einer Kombination aus beiden versehen kann (Bild 3). Bei einem Label ohne Symbol wird lediglich eine Beschriftung für den Button festgelegt. Auf eine Visualisierung mittels eines Symbols wird verzichtet. Das ist immer dann angebracht, wenn es kein passendes Symbol gibt, welches bei den Nutzern bereits bekannt ist. Bei einer Lokalisierung der Anwendung muss der Text übersetzt werden.
Symbole und Beschriftungenfür ein Button(Bild 3)
Bochkor
Individuelle Symbole können als Bitmap in Form eines Images angegeben werden. Hier haben wir alle Optionen, welche bei der Bildgestaltung möglich sind. Handelt es sich um eine Rastergrafik (Pixelgrafik), dann muss man darauf achten, dass das Bild trotzt Skalierung noch scharf aussieht. Mit Blick auf die wahrscheinliche Größe auf dem Zielsystem sollte es bereits in der passenden Größe gestaltet werden. Dennoch kann in der laufenden Anwendung eine Skalierung nicht vermieden werden, wenn man diese auf unterschiedlichen Bildschirmgrößen und -auflösungen verwendet.Das Symbol dient bei einem Icon als einziges Element für den Content des Buttons. Wir verwenden als Element ein Symbol-Icon und definieren das Symbol über die Auswahl eines Bezeichners. Das ist die einfachste Variante, wenn man ein Symbol aus den Schriftarten Segoe MDL2 oder Segoe Fluent Icon verwendet und dort auf die Bezeichner zurückgreift.
Eigener Layout-Container
Bei einer Überlagerung verwenden wir zwei Symbole, welche wir übereinanderlegen. Das geschieht durch Einbettung in einem eigenen Layout Container, in diesem Fall in ein Grid-Element. Das erste Symbol ist ein Herz (#xEB52). Dieses wird gefüllt dargestellt. Wir färben es rot ein. Das zweite Symbol ist ebenso ein Herz (#xEB51). Es wird ungefüllt gezeichnet. Wir legen es über das erste Symbol.Durch die Möglichkeit die Content-Eigenschaft mit einem beliebigen Layout Container zu füllen, können wir ein Symbol mit einem Text kombinieren. Im Beispiel handelt es sich um das überlagerte Symbol und ein TextBlock, welche in ein StackPanel eingebettet werden. Die Ausrichtung des StackPanels wird auf horizontal geändert. Wie Sie sehen, gibt es unterschiedliche Varianten, um Symbole in einer App zu verwenden. Die Nutzung innerhalb eines Buttons ist typisch, aber nicht der einzige Fall. Beispielsweise können wir Symbole auch in einer CommandBar (App-Leiste) verwenden. Ein Beispiel sehen Sie in Bild 4. Wir definieren eine CommandBar und ordnen diese am oberen Bildschirmrand an. Die einzelnen Steuerelemente der Typen AppBarToggleButton und AppBarButton werden mit Symbolen ausgestattet.
Verwendung von Symbolenin einer CommandBar(Bild 4)
Bochkor
Mit der Veröffentlichung von Windows 11 wurde die Schriftart Segoe MDL2 durch die Schriftart Segoe Fluent Icons ersetzt. Die Schriftart ist auf Windows 11 bereits enthalten. Für Windows 10 muss diese noch heruntergeladen werden. Das gilt auch für macOS oder andere Betriebssysteme. Entwickelt man eine App in C#, VB. NET oder C++ und erstellt man das User Interface mit XAML, so kann man aus dem Schriftsatz das betreffende Symbol mittels Enumeration, das heißt durch Angabe eines numerischen Wertes oder durch Angabe eines Bezeichners verwenden. Die Verwendung eines Bezeichners für die Auswahl eines konkreten Symbols sieht dann wie folgt aus:
<span class="hljs-tag"><<span class="hljs-name">SymbolIcon</span> <span class="hljs-attr">Symbol</span>=<span class="hljs-string">"GlobalNavigationButton"</span>/></span>
Wir haben das Vorgehen bei dem oben gezeigten Beispiel mit dem Button bereits angewendet. Diese Variante ist leicht verständlich, da der Bezeichner das Symbol bereits beschreibt. Für Symbole ohne Bezeichner kann man einen numerischen Wert verwenden. Auch dazu ein Beispiel:
<span class="hljs-tag"><<span class="hljs-name">FontIcon</span> <span class="hljs-attr">FontFamily</span>=<span class="hljs-string">"Segoe Fluent Icons"</span> <span class="hljs-attr">Glyph</span>=<span class="hljs-string">"&#xE700;"</span>/></span>
Welche Symbole verfügbar sind, dass finden Sie über die Listen unter https://docs.microsoft.com/de-de/windows/apps/design/style/segoe-fluent-icons-font heraus. Einen Ausschnitt sehen Sie in Bild 5.
Symboleder Schriftart Segoe Fluent Symbole (Auschnitt)(Bild 5)
Bochkor
Beide Quellcodebeispiele sind XAML-Code, zu verwenden in Apps der UWP (WinUI 2) und Anwendungen für das WinUI 3 (UWP, Desktop). Die Symbole in Segoe Fluent Icons zielen darauf, die Hauptbotschaft möglichst minimalistisch, eindeutig, verständlich und klar zu kommunizieren. Sie werden in Monolinienstil, basierend auf einfachen und geometrischen Formen gezeichnet. Die Symbolgröße ist so ausgerichtet, dass dessen Umrandung einer Einheit der entsprechenden Schriftgröße entspricht. Ein Symbol im Schriftgrad 16 epx entspricht einem 16 x 16 epx-Symbol, so dass Sie die Größe und Positionierung besser planen können. Basissymbole können durch Modifizierungssymbole erweitert werden (Bild 6).
Basissymbolund Modifizierersymbol(Bild 6)
Bochkor
Im Beispiel wird ein Basissymbol für eine Datei verwendet. Dieses wird durch einen Pfeil ergänzt, welcher anzeigen soll, das mit dieser Funktion eine Datei geöffnet wird.
Das Symbol OpenFilemit SymbolIcon und FontIcon(Bild 7)
Bochkor
Ein solches Symbol erreichen wir mit den folgenden wenigen Zeilen XAML-Code (Bild 7):
<<span class="hljs-keyword">Button</span> <span class="hljs-keyword">Background</span>=
<span class="hljs-string">"White"</span> HorizontalAlignment=<span class="hljs-string">"Center"</span>
VerticalAlignment=<span class="hljs-string">"Center"</span>>
<SymbolIcon <span class="hljs-keyword">Symbol</span> = <span class="hljs-string">"OpenFile"</span>/>
</<span class="hljs-keyword">Button</span>>
Die deklarative Vorgehensweise von XAML bietet auch bei der Gestaltung, Modifikation und Verwendung der Symbole eine große Palette an Möglichkeiten. Ein simples Beispiel aus der Praxis: Nehmen wir eine App, welche von unterschiedlichen Nutzern bedient wird. Jedem Nutzer wird eine Farbe zugeordnet. Die Farbe findet sich dann bei den Symbolen zum Öffnen und Speichern wieder (Bild 8).
Definitionvon Hintergrundfarben in Symbolen(Bild 8)
Bochkor
Symbole sind kleine grafische Elemente, welche sowohl in der App, als auch außerhalb dieser verwendet werden. Sie müssen mit Bedacht eingesetzt und sorgfältig ausgewählt werden. Für Windows 10 und Windows 11 nutzt man dazu am besten die Schriftarten Segoe MDL2 und Segoe Fluent Icons. Hier hat man fertige Symbole, welche zum größten Teil die Nutzerinnen und Nutzer kennen und welche nach Belieben ohne Qualitätsverlust skaliert werden können.
Skalierung von Grafiken
Bei der Skalierung einer Vektorgrafik werden grafische Primitive wie Linien, Vielecke, Kreise, Kurven, aus denen sich die Vektorgrafik zusammensetzt, durch geometrische Transformation gestreckt oder gestaucht. Das führt zu keinem Verlust in der Darstellungsqualität. Bei der Skalierung von Rastergrafiken wird deren Bildauflösung geändert. Es wird ein neues Bild mit einer höheren beziehungsweise niedrigeren Anzahl von Bildpunkten (Pixeln) erzeugt. Das ist im Fall der Erhöhung der Pixelzahl (Hochskalierung) in der Regel mit einem sichtbaren Qualitätsverlust verbunden. Bei der Verringerung der Bildpunkte (Runterskalierung) gehen Informationen verloren.
