Symbole für Windows-Apps

Symbole dienen zur visuellen Darstellung einer Aktion, eines Konzepts oder eines Produkts. Durch die Komprimierung der Bedeutung in ein symbolisches Bild können Symbole Sprachbarrieren überwinden und dabei helfen, eine wertvolle Ressource zu sparen: Den Bildschirmraum.

Gute Symbole harmonieren mit der Typografie und der übrigen Gestaltungssprache. Sie mischen keine Metaphern, und sie kommunizieren nur, was benötigt wird, so schnell und einfach wie möglich.

Symbole können innerhalb und außerhalb von Apps angezeigt werden:

Symbole in der App

In Ihrer App verwenden Sie Symbole, um eine Aktion darzustellen, z. B. das Kopieren von Text oder das Wechseln zur Einstellungsseite.

Symbole außerhalb der App

Außerhalb Ihrer App verwendet Windows ein Symbol, um die App im Startmenü und auf der Taskleiste darzustellen. Wenn der Benutzer Ihre App an das Startmenü anheftet, kann die Startkachel Ihrer App das App-Symbol enthalten. Das Symbol der App wird auf der Titelleiste angezeigt, und Sie können einen Begrüßungsbildschirm mit dem Logo Ihrer App erstellen.

In diesem Artikel werden Symbole innerhalb deiner App beschrieben. Weitere Informationen zu Symbolen außerhalb Ihrer App (App-Symbole) finden Sie im Artikel Symbolographie in Windows .

Wissen, wann Symbole verwendet werden sollten

Symbole können Platz sparen, aber wann ist eine Verwendung sinnvoll?

Verwenden Sie ein Symbol für Aktionen wie Ausschneiden, Kopieren, Einfügen und Speichern oder für Elemente in einem Navigationsmenü.

Verwenden Sie ein Symbol, wenn bereits ein Symbol für das Konzept vorhanden ist, das Sie darstellen möchten. (Ob bereits ein Symbol vorhanden ist, erfährst du in der Segoe-Symbolliste.)

Verwende ein Symbol, wenn dessen Bedeutung für den Benutzer leicht nachvollziehbar und es auch bei geringer Größe gut erkennbar ist.

Verwende kein Symbol, wenn dessen Bedeutung nicht eindeutig oder zur Verdeutlichung eine komplexe Form erforderlich ist.

Verwenden des richtigen Symboltyps

Symbole können auf unterschiedliche Weise erstellt werden. Du kannst eine Symbolschriftart wie Segoe MDL2 Assets verwenden. Sie können ein eigenes vektorbasiertes Bild erstellen. Du kannst sogar ein Bitmap-Bild verwenden. (Davon raten wir allerdings ab.) Im Folgenden finden Sie eine Zusammenfassung der Möglichkeiten, mit denen Sie Ihrer App ein Symbol hinzufügen können.

Vordefiniertes Symbol

Microsoft stellt mehr als 1.000 Symbole in Form der Schriftart Segoe MDL2 Assets bereit. Es ist möglicherweise nicht intuitiv, ein Symbol aus einer Schriftart zu erhalten, aber die Windows-Schriftanzeigetechnologie bedeutet, dass diese Symbole auf jedem Bildschirm, bei jeder Auflösung und in jeder Größe scharf und scharf aussehen. Anweisungen finden Sie unter Symbole für Segoe MDL2-Objekte.

Schriftart

Sie müssen die Schriftart Segoe MDL2 Assets nicht verwenden. Sie können jede Schriftart verwenden, die der Benutzer auf dem System installiert hat, z. B. Wingdings oder Webdings.

SVG-Datei

SVG-Ressourcen (Scalable Vector Graphics) eignen sich ideal für Symbole, da sie bei jeder Größe oder Auflösung immer scharf aussehen. Die meisten Zeichenanwendungen verfügen über eine SVG-Exportfunktion. Eine entsprechende Anleitung findest du unter SvgImageSource Class (Klasse „SvgImageSource“).

Geometry-Objekt

Bei geometrischen Objekten handelt es sich genau wie bei SVG-Dateien um vektorbasierte Ressourcen, die immer gestochen scharf dargestellt werden. Die Erstellung eines geometrischen Objekts ist allerdings kompliziert, da du jeden Punkt und jede Kurve einzeln angeben musst. Es ist nur eine gute Wahl, wenn Sie das Symbol ändern müssen, während Ihre App ausgeführt wird (z. B. um es zu animieren). Eine entsprechende Anleitung findest du unter Move and draw commands syntax (Syntax für Befehle zum Verschieben und Zeichnen).

Bitmapbild

Sie können ein Bitmapbild (z. B. PNG, GIF oder JPEG) verwenden, obwohl wir es nicht empfehlen.

Bitmap-Bilder werden in einer bestimmten Größe erstellt und müssen daher je nach Bildschirmauflösung und gewünschter Symbolgröße vergrößert oder verkleinert werden. Wenn das Bild herunterskaliert (verkleinert) wird, kann es verschwommen erscheinen. Wenn es hochskaliert wird, kann es blockig und pixelig erscheinen. Wenn Sie ein Bitmapbild verwenden müssen, empfiehlt es sich, ein PNG- oder GIF-Format über ein JPEG zu verwenden.

Erstellen einer Aktion für ein Symbol

Nachdem Sie über ein Symbol verfügen, besteht der nächste Schritt darin, etwas zu tun, indem Sie es einem Befehl oder einer Navigationsaktion zuordnen. Die beste Möglichkeit besteht darin, das Symbol einer Schaltfläche oder einer Befehlsleiste hinzuzufügen.

Sie können ein Symbol auch animieren, um die Aufmerksamkeit auf eine UI-Komponente zu lenken, z. B. die nächste Schaltfläche in einem Tutorial, oder um die Aktion, die dem Symbol zugeordnet ist, auf unterhaltsame und interessante Weise darzustellen. Weitere Informationen finden Sie unter AnimatedIcon.

Erstellen einer Symbolschaltfläche

Sie können ein Symbol auf einer Standardschaltfläche platzieren. Da Sie Schaltflächen an einer Vielzahl von Stellen verwenden können, erhalten Sie durch die Verwendung eines Symbols auf diese Weise etwas mehr Flexibilität, wo Ihr Aktionssymbol angezeigt wird.

Hier sehen Sie eine Möglichkeit, einer Schaltfläche ein Symbol hinzuzufügen:

Schritt 1
Legen Sie die Schriftartenfamilie der Schaltfläche auf Segoe MDL2 Assets und ihre Inhaltseigenschaft auf den Unicode-Wert der Glyphe fest, die Sie verwenden möchten:

<Button FontFamily="Segoe MDL2 Assets" Content="&#xE102;" />

Schritt 2
Verwenden Sie eines der Symbolelementobjekte: BitmapIcon, FontIcon, PathIcon, ImageIcon oder SymbolIcon. Diese Technik bietet Ihnen mehr Arten von Symbolen zur Auswahl. Außerdem können Sie Symbole und andere Inhaltstypen, z. B. Text, bei Bedarf kombinieren.

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play" />
        <TextBlock>Play the movie</TextBlock>
    </StackPanel>
</Button>

Erstellen einer Reihe von Symbolen auf einer Befehlsleiste

Wenn Sie über eine Reihe von Befehlen verfügen, die zusammen verwendet werden, z. B. Ausschneiden/Kopieren/Einfügen oder eine Reihe von Zeichnungsbefehlen für ein Fotobearbeitungsprogramm, fügen Sie sie auf einer Befehlsleiste zusammen. Eine Befehlsleiste enthält einzelne oder mehrere Schaltflächen oder Umschaltflächen der App-Leiste, die jeweils eine Aktion darstellen. Jede Schaltfläche verfügt über eine Icon-Eigenschaft , die Sie verwenden, um zu steuern, welches Symbol angezeigt wird. Das Symbol kann auf unterschiedliche Weise angegeben werden.

Die einfachste Möglichkeit besteht darin, die Liste der vordefinierten Symbole zu verwenden. Geben Sie einfach den Symbolnamen an, z. B. "Zurück" oder "Beenden", und das System zeichnet ihn:

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>
</CommandBar>

Eine vollständige Liste der Symbolnamen finden Sie in der Referenz zur Symbolenumeration.

Es gibt andere Möglichkeiten, Symbole für eine Schaltfläche auf einer Befehlsleiste bereitzustellen:

• FontIcon: Das Symbol basiert auf einer Glyphe aus der angegebenen Schriftfamilie.
• BitmapIcon: Das Symbol basiert auf einer Bitmapbilddatei mit dem angegebenen URI.
• PathIcon: Das Symbol basiert auf Pfaddaten .
• ImageIcon: Das Symbol basiert auf einem Bilddateityp, den die Image-Klasse unterstützt.

Weitere Informationen zu Befehlsleisten finden Sie im Artikel Befehlsleiste .

Verwandte Artikel

• App-Symbole und Logos
• AnimatedIcon