SymboleIcons

Symbole sind die visuelle Darstellung eines Verhaltens oder Konzepts.Icons are the visual representation of a behavior or concept. Sie werden häufig verwendet, um Steuerelementen und Befehlen Bedeutung hinzuzufügen.They are often used to add meaning to controls and commands. Visuelle Elemente (realistische oder symbolische) ermöglichen es Benutzern, in der Benutzeroberfläche zu navigieren, auf die gleiche Weise, wie Hinweisschilder Benutzer bei der Orientierung in ihrer Umgebung helfen.Visuals, either realistic or symbolic, enable the user to navigate the UI the same way signs help users navigate their environment. Sie sollten einfach und klar sein und nur die notwendigen Details enthalten, damit Kunden schnell erkennen können, welche Aktion ausgeführt wird, wenn sie ein Steuerelement auswählen.They should be simple, clear, and contain only the necessary details to enable customers to quickly parse what action will occur when they choose a control.

Office-Menübandoberflächen haben einen standardmäßigen visuellen Stil.Office ribbon interfaces have a standard visual style. Dadurch wird Konsistenz und Vertrautheit in Office-Apps sichergestellt.This ensures consistency and familiarity across Office apps. Die Richtlinien helfen Ihnen dabei, einen Satz PNG-Objekte für Ihre Lösung zu entwerfen, die sich als natürlicher Bestandteil von Office einfügen.The guidelines will help you design a set of PNG assets for your solution that fit in as a natural part of Office.

Viele HTML-Container enthalten Steuerelemente mit Symboldarstellungen. Verwenden Sie die benutzerdefinierte Schriftart von Office UI Fabric, um Symbole im Office-Format in Ihrem Add-In zu rendern. Die Fabric-Symbolschriftart enthält viele Glyphen für allgemeine Office-Metaphern, die Sie entsprechend Ihren Anforderungen skalieren, kolorieren und formatieren können. Wenn Sie bereits über eine visuelle Sprache mit einem eigenen Satz Symbole verfügen, können Sie diese gerne in Ihren HTML-Zeichenbereichen verwenden. Die Herstellung von Kontinuität mit Ihrer eigenen Marke durch einen Standardsatz von Symbolen ist ein wichtiger Teil jeder Entwurfssprache. Achten Sie darauf, keine Verwirrung bei den Kunden zu erzeugen, indem Sie Konflikte mit Office-Metaphern verursachen.Many HTML containers contain controls with iconography. Use Office UI Fabric’s custom font to render Office styled icons in your add-in. Fabric’s icon font contains many glyphs for common Office metaphors that you can scale, color, and style to suit your needs. If you have an existing visual language with your own set of icons, feel free to use it in your HTML canvases. Building continuity with your own brand with a standard set of icons is an important part of any design language. Be careful to avoid creating confusion for customers by conflicting with Office metaphors.

Entwerfen von Symbolen für Add-In-BefehleDesign icons for add-in commands

Add-In-Befehle fügen der Office-Benutzeroberfläche Schaltflächen, Text und Symbole hinzu. Ihre Add-In-Befehlsschaltflächen sollten aussagekräftige Symbole und Beschriftungen enthalten, die die Aktion eindeutig angeben, die der Benutzer bei der Verwendung eines Befehls ausführt. Dieser Artikel bietet stilistische und Produktionsrichtlinien, die Sie beim Entwurf von Symbolen unterstützen, die sich nahtlos in Office integrieren lassen.Add-in commands add buttons, text, and icons to the Office UI. Your add-in command buttons should provide meaningful icons and labels that clearly identify the action the user is taking when they use a command. This article provides stylistic and production guidelines that help you design icons that integrate seamlessly with Office.

Entwurfsgrundsätze für Office-SymboleOffice icon design principles

Die Office 2013-Version der Office-Desktopclients umfasst eine aktualisierte Symboldarstellung. Die vorrangige stilistische Änderung besteht in der Reduktion. Die neuen Symbole enthalten nur die wesentlichen kommunikativen Elemente. Nicht wesentliche Elemente wie Perspektive, Farbverläufe und Lichtquelle wurden entfernt. Die vereinfachten Symbole unterstützen die schnellere Analyse von Befehlen und Steuerelementen. Halten Sie sich an diesen Stil, um eine optimale Integration in Office zu erzielen.The Office 2013 release of the Office desktop clients includes refreshed iconography. The overriding stylistic change is reduction. The new icons include only essential communicative elements. Non-essential elements including perspective, gradients, and light source are removed. The simplified icons support faster parsing of commands and controls. Follow this style to best fit with Office.

Office-Symbole basieren auf folgenden Entwurfsgrundsätzen:Office icons are based on the following design principles:

  • Moderne Interpretation der Sammlung der Office-SymboleModern interpretation of Office icon collection
  • Neu und dennoch vertrautFresh yet familiar
  • Einfach, klar und direktSimple, clear, and direct

Die folgende Abbildung zeigt Symbole, die den modernen Entwurfsgrundsätzen entsprechen.The following image shows icons that apply the modern design principles.

Abbildung mit alten Office-Symbolen und der aktualisierten, modernen Interpretation der Symbole

Bewährte MethodenBest practices

Befolgen Sie beim Erstellen von Symbolen die folgenden Richtlinien:Follow these guidelines when you create your icons:

DosDo Don’tsDon't
Halten Sie visuelle Elemente einfach und klar und konzentrieren Sie sich auf die wichtigsten Elemente der Kommunikation.Keep visuals simple and clear, focusing on the key element(s) of the communication. Verwenden Sie keine Artefakte, die Ihr Symbol unübersichtlich machen.Don't use artifacts that make your icon look messy.
Verwenden Sie die Office-Symbolsprache, um Verhaltensweisen oder Konzepte darzustellen.Use the Office icon language to represent behaviors or concepts. Ändern Sie nicht den Zweck von Office UI Fabric-Glyphen für Add-In-Befehle im Menüband oder in Kontextmenüs von Office. Fabric-Symbole unterscheiden sich stilistisch und passen nicht.Don’t repurpose Office UI Fabric glyphs for add-in commands in the Office ribbon or contextual menus. Fabric icons are stylistically different and will not match.
Verwenden Sie allgemeine visuelle Office-Metaphern wie den Pinsel für Formatierung oder das Lupensymbol für die Suchfunktion wieder.Reuse common Office visual metaphors such as paintbrush for format or magnifying glass for find. Verwenden Sie nicht dieselben visuellen Metaphern für unterschiedliche Befehle.Don't reuse visual metaphors for different commands. Das Verwenden des gleichen Symbols für verschiedene Verhaltensweisen und Konzepte kann Verwirrung stiften.Using the same icon for different behaviors and concepts can cause confusion.
Entwerfen Sie Ihre Symbole neu, um sie kleiner oder größer zu machen.Redraw your icons to make them small or larger. Nehmen Sie sich Zeit, die Silhouetten, Ecken und abgerundeten Ecken neu zu zeichnen, um möglichst klare Linien zu erzielen.Take the time to redraw cutouts, corners, and rounded edges to maximize line clarity. Verändern Sie die Größe Ihrer Symbole nicht durch Verkleinern oder Vergrößern.Don't resize your icons by shrinking or enlarging in size. Dies kann zu einer schlechten visuellen Qualität und unklaren Aktionen führen.This can lead to poor visual quality and unclear actions. Komplexe Symbole, die größer erstellt wurden, können an Klarheit verlieren, wenn die Größe ohne Neuzeichnen verändert wird.Complex icons created at a larger size may lose clarity if resized to be smaller without redraw.
Verwenden Sie für Barrierefreiheit eine weiße Füllung. Die meisten Objekte in Ihren Symbolen erfordern einen weißen Hintergrund, um in allen Designs der Office-Benutzeroberfläche und im Modus mit hohem Kontrast lesbar zu sein.Use a white fill for accessibility. Most objects in your icons will require a white background to be legible across Office UI themes and in high-contrast modes.
Verwenden Sie das PNG-Format mit einem transparenten Hintergrund.Use the PNG format with a transparent background.
Vermeiden Sie lokalisierbare Inhalte in den Symbolen, z. B. typografische Zeichen, Anzeichen für Flatterrand in Absätzen und Fragezeichen.Avoid localizable content in your icons, including typographic characters, indications of paragraph rags, and question marks.

Symbolgröße: Empfehlungen und AnforderungenIcon size recommendations and requirements

Office-Desktopsymbole sind Bitmapbilder.Office desktop icons are bitmap images. Unterschiedliche Größen werden entsprechend der DPI-Einstellung und dem Fingereingabemodus des Benutzers dargestellt.Different sizes will render depending on the user's DPI setting and touch mode. Schließen Sie alle acht unterstützten Größen mit ein. Dadurch kann die beste Lösung für alle unterstützten Auflösungen und Kontexte erstellt werden.Include all eight supported sizes to create the best experience in all supported resolutions and contexts. Im Folgenden finden Sie die unterstützten Größen. Drei davon sind erforderlich:The following are the supported sizes - three are required:

  • 16 px (erforderlich)16 px (Required)
  • 20 px20 px
  • 24 px24 px
  • 32 px (erforderlich)32 px (Required)
  • 40 px40 px
  • 48 px48 px
  • 64 px (empfohlen; beste Größe für Macs)64 px (Recommended, best for Mac)
  • 80 px (erforderlich)80 px (Required)

Sie sollten unbedingt Ihre Symbole für jede Größe erneut zeichnen, anstatt sie zu verkleinern.Make sure to redraw your icons for each size rather than shrink them to fit.

Abbildung, in der die Empfehlung zum Ändern der Größe der Symbole anstatt des Verkleinerns der Symbole dargestellt ist

Aufbau und Layout von SymbolenIcon anatomy and layout

Office-Symbole bestehen normalerweise aus einem Basiselement mit überlagerten Aktionsmodifizierern und konzeptionellen Modifizierern. Aktionsmodifizierer stellen Konzepte wie Hinzufügen, Öffnen, Neu oder Schließen dar. Konzeptionelle Modifizierer stellen den Status, eine Änderung oder eine Beschreibung des Symbols dar.Office icons are typically comprised of a base element with action and conceptual modifiers overlayed. Action modifiers represent concepts such as add, open, new, or close. Conceptual modifiers represent status, alteration, or a description of the icon.

Befolgen Sie die Layoutrichtlinien für das Basiselement und die Modifizierer, um Befehle zu erstellen, die in die Office-Benutzeroberfläche passen. Dadurch wirken die Befehle professionell, und Ihr Add-In wird von den Kunden als vertrauenswürdig eingestuft. Wenn Sie Ausnahmen von diesen Richtlinien machen, tun Sie dies bewusst.To create commands that align with the Office UI, follow layout guidelines for the base element and modifiers. This ensures that your commands look professional and that your customers will trust your add-in. If you make exceptions to these guidelines, do so intentionally.

Die folgende Abbildung zeigt das Layout von Basiselementen und Modifizierern in einem Office-Symbol.The following image shows the layout of base elements and modifiers in an Office icon.

Abbildung eines Symbolbasiselements in der Mitte mit einem Modifizierer in der rechten unteren Ecke und einem Aktionsmodifizierer in der linken oberen Ecke

  • Zentrieren Sie Basiselemente im Pixelrahmen mit umgebendem leerem Abstand.Center base elements in the pixel frame with empty padding all around.
  • Setzen Sie Aktionsmodifizierer in die obere linke Ecke.Place action modifiers on the top left.
  • Platzieren Sie konzeptionelle Modifizierer unten rechts.Place conceptual modifiers on the bottom right.
  • Begrenzen Sie die Anzahl von Elementen in Ihren Symbolen. Bei 32 px beschränken Sie die Anzahl von Modifizierern auf maximal zwei. Bei 16 px beschränken Sie die Anzahl von Modifizierern auf einen.Limit the number of elements in your icons. At 32px, limit the number of modifiers to a maximum of two. At 16px, limit the number of modifiers to one.

Basiselement TextabstandBase element padding

Platzieren Sie die Basiselemente in allen Größen gleich. Wenn Basiselemente nicht im Rahmen zentriert werden können, richten Sie sie an der linken oberen Ecke aus und lassen die zusätzlichen Pixel unten rechts leer. Optimale Ergebnisse erzielen Sie, wenn Sie die Abstandsrichtlinien in der folgenden Tabelle befolgen.Place base elements consistently across sizes. If base elements can't be centered in the frame, align them to the top left, leaving the extra pixels on the bottom right. For best results, apply the padding guidelines listed in the following table.

ModifiziererModifiers

Alle Modifizierer sollten eine 1px starke transparente Silhouette zwischen den einzelnen Elementen aufweisen, einschließlich des Hintergrunds. Elemente sollten nicht direkt überlappen. Erstellen Sie Leerraum zwischen Linien und Kanten. Modifizierer können geringfügig in der Größe variieren. Verwenden Sie diese Dimensionen als Ausgangspunkt.All modifiers should have a 1px transparent cutout between each element, including the background. Elements should not directly overlap. Create whitespace between rules and edges. Modifiers can vary slightly in size, but use these dimensions as a starting point.

SymbolgrößeIcon size Abstand um das BasiselementPadding around base element Größe von ModifizierernModifier size
16px16px 00 9px9px
20px20px 1px1px 10px10px
24px24px 1px1px 12px12px
32px32px 2px2px 14px14px
40px40px 2px2px 20px20px
48px48px 3px3px 22px22px
64px64px 5px5px 29px29px
80px80px 5px5px 38px38px

SymbolfarbenIcon colors

Hinweis

Diese Farbrichtlinien gelten für Menübandsymbole, die in Add-in-Befehlen verwendet werden.These color guidelines are for ribbon icons used in Add-in commands. Diese Symbole werden nicht mit Microsoft UI Fabric gerendert, und die Farbpalette unterscheidet sich von der unter Microsoft UI Fabric | Colors | Shared beschriebenen Palette.These icons are not rendered with Microsoft UI Fabric and the color palette is different from the palette described at Microsoft UI Fabric | Colors | Shared.

Office-Symbole verfügen über eine begrenzte Farbpalette. Verwenden Sie die Farben in der folgenden Tabelle, um die nahtlose Integration in die Office-Benutzeroberfläche sicherzustellen. Für die Verwendung von Farbe gelten die folgenden Richtlinien:Office icons have a limited color palette. Use the colors listed in the following table to guarantee seamless integration with the Office UI. Apply the following guidelines to the use of color:

  • Verwenden Sie Farbe zur Kommunikation von Bedeutung und nicht zur Verschönerung. Sie sollte eine Aktion, einen Status oder ein Element hervorheben, das die Marke explizit von anderen unterscheidet.Use color to communicate meaning rather than for embellishment. It should highlight or emphasize an action, status, or an element that explicitly differentiates the mark.
  • Verwenden Sie möglichst nur eine zusätzliche Farbe außer grau. Begrenzen Sie weitere Farben auf höchstens zwei.If possible, use only one additional color beyond gray. Limit additional colors to two at the most.
  • Farben sollte ein einheitliches Erscheinungsbild in allen Symbolgrößen haben. Office-Symbole verfügen über leicht unterschiedliche Farbpaletten für unterschiedliche Symbolgrößen. Symbole mit maximal 16 px sind etwas dunkler und leuchtender als solche mit mindestens 32 px. Ohne diese feinen Korrekturen scheinen die Farben in verschiedenen Größen zu variieren.Colors should have a consistent appearance in all icon sizes. Office icons have slightly different color palettes for different icon sizes. 16px and smaller icons are slightly darker and more vibrant than 32px and larger icons. Without these subtle adjustments, colors appear to vary across sizes.
FarbnameColor name RGBRGB HexHex FarbeColor KategorieCategory
Text grau (80)Text Gray (80) 80, 80, 8080, 80, 80 #505050#505050 Text grau 80 Farbbild TextText
Text grau (95)Text Gray (95) 95, 95, 9595, 95, 95 #5F5F5F#5F5F5F Text grau 95 Farbbild TextText
Text grau (105)Text Gray (105) 105, 105, 105105, 105, 105 #696969#696969 Text grau 105 Farbbild TextText
Dunkelgrau 32Dark Gray 32 128, 128, 128128, 128, 128 #808080#808080 Text grau 32 Farbbild 32 und höher32 and above
Mittelgrau 32Medium Gray 32 158, 158, 158158, 158, 158 #9E9E9E#9E9E9E Mittelgrau 32 Farbbild 32 und höher32 and above
Hellgrau ALLELight Gray ALL 179, 179, 179179, 179, 179 #B3B3B3#B3B3B3 Hellgrau Farbbild für alle Größen Alle GrößenAll sizes
Dunkelgrau 16Dark Gray 16 114, 114, 114114, 114, 114 #727272#727272 Dunkelgrau 16 Farbbild 16 und darunter16 and below
Mittelgrau 16Medium Gray 16 144, 144, 144144, 144, 144 #909090#909090 Mittelgrau 16 Farbbild 16 und darunter16 and below
Blau 32Blue 32 77, 130, 18477, 130, 184 #4d82B8#4d82B8 Blau 32 Farbbild 32 und höher32 and above
Blau 16Blue 16 74, 125, 17774, 125, 177 #4A7DB1#4A7DB1 Blau 16 Farbbild 16 und darunter16 and below
Gelb ALLEYellow ALL 234, 194, 130234, 194, 130 #EAC282#EAC282 Gelb Farbbild für alle Größen Alle GrößenAll sizes
Orange 32Orange 32 231, 142, 70231, 142, 70 #E78E46#E78E46 Orange 32 Farbbild 32 und höher32 and above
Orange 16Orange 16 227, 142, 70227, 142, 70 #E3751C#E3751C Orange 16 Farbbild 16 und darunter16 and below
Rosa ALLEPink ALL 230, 132, 151230, 132, 151 #E68497#E68497 Rosa Farbbild für alle Größen Alle GrößenAll sizes
Grün 32Green 32 118, 167, 151118, 167, 151 #76A797#76A797 Grün 32 Farbbild 32 und höher32 and above
Grün 16Green 16 104, 164, 144104, 164, 144 #68A490#68A490 Grün 16 Farbbild 16 und darunter16 and below
Rot 32Red 32 216, 99, 68216, 99, 68 #D86344#D86344 Rot 32 Farbbild 32 und höher32 and above
Rot 16Red 16 214, 85, 50214, 85, 50 #D65532#D65532 Rot 16 Farbbild 16 und darunter16 and below
Lila 32Purple 32 152, 104, 185152, 104, 185 #9868B9#9868B9 Lila 32 Farbbild 32 und höher32 and above
Lila 16Purple 16 137, 89, 171137, 89, 171 #8959AB#8959AB Lila 16 Farbbild 16 und darunter16 and below

Symbole in Modi mit hohem KontrastIcons in high contrast modes

Office-Symbole eignen sich gut für die Darstellung in Modi mit hohem Kontrast. Vordergrundelemente heben sich gut vom Hintergrund ab, um die Lesbarkeit zu maximieren und das Neueinfärben zu ermöglichen. In Modi mit hohem Kontrast ändert Office die Farbe jedes Pixels Ihres Symbols mit einem Rot-, Grün- oder Blauwert kleiner als 190 in Vollschwarz (färbt sie neu ein). Alle anderen Pixel sind weiß. Anders ausgedrückt, jeder RGB-Kanal wird ausgewertet, wobei die Werte 0-189 Schwarz und die Werte 190-255 Weiß darstellen. Andere Designs mit hohem Kontrast werden unter Verwendung des gleichen Schwellenwerts von 190 neu eingefärbt, jedoch mit anderen Regeln. Beispielsweise ändert das weiße Design mit hohem Kontrast alle Pixel größer als 190 in undurchsichtig, aber alle anderen Pixel in transparent. Wenden Sie die folgenden Richtlinien an, um die Lesbarkeit in Einstellungen mit hohem Kontrast zu maximieren:Office icons are designed to render well in high contrast modes. Foreground elements are well differentiated from backgrounds to maximize legibility and enable recoloring. In high contrast modes, Office will recolor any pixel of your icon with a red, green, or blue value less than 190 to full black. All other pixels will be white. In other words, each RGB channel is assessed where 0-189 values are black and 190-255 values are white. Other high-contrast themes recolor using the same 190 value threshold but with different rules. For example, the high-contrast white theme will recolor all pixels greater than 190 opaque but all other pixels as transparent. Apply the following guidelines to maximize legibility in high-contrast settings:

  • Versuchen Sie, Vorder- und Hintergrundelemente entlang des Schwellenwerts von 190 voneinander zu unterscheiden.Aim to differentiate foreground and background elements along the 190 value threshold.
  • Halten Sie sich an die visuellen Stile für Office-Symbole.Follow Office icon visual styles.
  • Verwenden Sie Farben aus unserer Symbolpalette.Use colors from our icon palette.
  • Vermeiden Sie die Verwendung von Farbverläufen.Avoid the use of gradients.
  • Vermeiden Sie große Blöcke von Farbe mit ähnlichen Werten.Avoid large blocks of color with similar values.

Weitere ArtikelSee also