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 überschreiten und dabei helfen, eine wertvolle Ressource zu sparen: Bildschirmfläche.

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

Symbole können in Apps und außerhalb der Symbole 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 auf dem Menü und auf der Taskleiste darzustellen. Wenn der Benutzer ihre App an die Menü anheftet, kann die App-Startkachel das Symbol der App 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. Informationen zu Symbolen außerhalb Ihrer App (App-Symbole) finden Sie im Artikel "Symbolographie" in Windows .

Wissen, wann Symbole verwendet werden sollen

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.) Hier ist eine Zusammenfassung der Möglichkeiten, wie 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. Möglicherweise ist es nicht intuitiv, ein Symbol aus einer Schriftart zu erhalten, aber die Anzeigetechnologie von Windows-Schriftarten bedeutet, dass diese Symbole auf jedem Display, in jeder Auflösung und in beliebiger Größe scharf aussehen. Anweisungen finden Sie unter Segoe MDL2 Assets icons.

Font

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

Skalierbare Vektorgrafikressourcen (SVG) eignen sich ideal für Symbole, da sie immer scharf auf jede Größe oder Auflösung 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. Dies ist nur dann eine gute Wahl, wenn Sie das Symbol ändern müssen, während die App ausgeführt wird (um es beispielsweise 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 verkleinert wird (verkleinert), kann es verschwommen angezeigt werden. Wenn sie skaliert wird, kann sie blockig und pixelig angezeigt werden. Wenn Sie ein Bitmapbild verwenden müssen, empfehlen wir die Verwendung eines PNG- oder GIF-Formats über ein JPEG.If you have to use a bitmap image, we recommend using a PNG or GIF over a JPEG.

Erstellen eines Symbols

Nachdem Sie über ein Symbol verfügen, besteht der nächste Schritt darin, eine Aktion auszuführen, 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 Lernprogramm, oder um die Aktion widerzuspiegeln, die dem Symbol auf unterhaltsame und interessante Weise zugeordnet ist. 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, bietet Ihnen die Verwendung eines Symbols auf diese Weise etwas mehr Flexibilität für die Position, an der Ihr Aktionssymbol angezeigt wird.

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

Schritt 1
Legen Sie die Schriftfamilie der Schaltfläche auf Segoe MDL2 Assets den Unicode-Wert der zu verwendenden Glyphe und deren Inhaltseigenschaft fest:

<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, aus der Sie auswählen können. Außerdem können Sie Symbole und andere Inhaltstypen kombinieren, z. B. Text, wenn Sie möchten.

<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 zusammengehen, z. B. Ausschneiden/Kopieren/Einfügen oder eine Reihe von Zeichenbefehlen 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 Symboleigenschaft , 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 "Stopp", 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>

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

Es gibt weitere Möglichkeiten zum Bereitstellen von Symbolen für eine Schaltfläche auf einer Befehlsleiste:

• 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 zur Befehlsleiste .

Verwandte Artikel

• App-Symbole und Logos
• AnimatedIcon