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 Design-Sprache 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 ein, Segoe Fluent Icons. Diese neue Schriftart ergänzt geometrie in Windows 11.

Alle Glyphen in Segoe Fluent Icons werden in einer monolineen Formatvorlage gezeichnet. Das bedeutet, dass sie über einen einzelnen Strich von 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 zum Verwenden von Symbolen in der App-Benutzeroberfläche finden Sie unter "Symbole 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 Schriftglyphe ist so konzipiert, dass der Fußabdruck des Symbolbereichs ein Quadrat 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.

Modifizierer

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 Symbolbedarf belegen.

Modifizierersymbole ändern die Bedeutung des Basissymbols. Modifiziererelemente sollten in einem der unteren Quadranten des Symbolbedarfs 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.

Layering

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 Die Auswahlmöglichkeiten ihrer Symbolographie mit dem 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-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab