Symbolographie in Windows

Die Symbolographie ist eine Reihe visueller Bilder und Symbole, die Benutzern helfen, Ihre App zu verstehen und zu durchlaufen. Symbole werden auf der gesamten Benutzeroberfläche als visuelle Metaphern verwendet, die ein Konzept, eine Aktion oder einen Status darstellen.

Windows 11 verwendet drei Arten von Symbolen: Anwendung, System und Dateityp. In diesem Artikel werden hauptsächlich die ersten beiden behandelt.

Tipp

In diesem Artikel wird beschrieben, wie die Fluent Designsprache auf Windows Apps angewendet wird. Weitere Informationen finden Sie unter Fluent Design – Iconography.

Anwendungssymbole

Anwendungssymbole stellen Ihre App in der Windows Shell dar. Sie werden hauptsächlich verwendet, um Ihre Anwendung zu öffnen, stellen aber auch Ihre App überall dar, wo sie in der Windows Shell angezeigt wird.

App-Symbole sollten die Kernfunktionen Ihrer App über eine Metapher darstellen. Weitere Informationen zum Entwerfen und Erstellen des App-Symbols finden Sie unter App-Symbole.

Systemsymbole

Verwenden Sie Systemsymbole in der App-Benutzeroberfläche für Elemente wie Befehlsleisten, Navigation oder Statusanzeigen. Windows 11 führt eine neue Schriftart für Systemsymbole Segoe Fluent Icons ein. Diese neue Schriftart ergänzt geometry in Windows 11.

Alle Glyphen in Segoe Fluent Icons werden in einem einlinigen Stil gezeichnet. Das bedeutet, dass sie durch einen einzigen Strich mit 1 epx erstellt werden.

Glyphen in Segoe Fluent Icons folgen drei ästhetischen Prinzipien:

• Minimal: Glyphen enthalten nur die Details, die für die Kommunikation des Konzepts erforderlich sind.
• Harmonisch: Glyphen basieren auf einfachen und geometrischen Formen.
• Weiterentwickelt: Glyphen verwenden moderne Metaphern, die leicht verständlich sind.

Weitere Informationen zur Verwendung von Symbolen in der App-UI finden Sie unter Icons in Windows Apps.

Symbolgröße

Schriftartmetriken für Segoe Fluent Icons stimmen überein, wie Designer und Entwickler daran gewöhnt sind, mit SVG- und Bitmapsymbolen zu arbeiten.

Jede Glyphe ist so gestaltet, dass der Umriss des Symbolbereichs ein quadratisches 'em' ist. Ein Symbol mit einem Schriftgrad von 16 Epx entspricht einem Symbol von 16 x 16 Epx, um die Größe und Positionierung besser vorhersehbar zu gestalten.

Modifikatoren

Sie können Systemsymbolglyphen visuell konstruieren, indem Sie ein Basissymbol mit einem Modifizierersymbol kombinieren.

Basissymbole sind das Hauptelement einer visuellen Metapher. Basiselemente sollten den gesamten Symbolbereich ausfüllen.

Modifizierersymbole ändern die Bedeutung des Basissymbols. Modifikationselemente sollten in einem der unteren Quadranten der Symbolfläche platziert werden.

Nur Basissymbol
Allein kommuniziert das Papierblattsymbol das Konzept einer Datei.

Symbol "Basissymbol + Modifizierer"
Durch das Hinzufügen eines Pfeils zum Dateisymbol wird die Bedeutung des Symbols geändert, um eine hochgeladene Datei darzustellen.

Schichtverfahren

Symbolschichtung ist eine Technik, mit der Sie zwei Glyphen überlappen. Wir empfehlen die Verwendung von Symbolebenen, um einen anderen Zustand desselben Symbols zu erstellen (z. B. einen aktiven oder ausgewählten Zustand).

Lokalisierung

Verstehen sie die kulturellen Konnotationen von Symbolen. Obwohl die Symbolographie in den meisten Fällen keine Lokalisierung erfordert, können bestimmte Symbole in einer Kultur, aber nicht in einer anderen kultur akzeptabel sein. Überprüfen Sie Ihre Ikonographie-Auswahl im Kontext, in dem Sie sie verwenden.

Beispiele

Öffnen Sie die WinUI 3 Gallery-App, und sehen Sie sich die Symbolografieprinzipien in Aktion an.

Die WinUI 3 Gallery-App enthält interaktive Beispiele für WinUI-Steuerelemente und -Features. Rufen Sie die App aus dem Microsoft Store ab, oder durchsuchen Sie den Quellcode auf GitHub.