Richtlinien für Das Symbol "Neues Format" für Office-Add-Ins

Artikel
08/18/2023

Unbefristetes Office 2016 und höher verwenden die Ikonographie des neuen Stils von Microsoft. Wenn Sie es vorziehen, dass Ihre Symbole mit dem Monoline-Stil von Microsoft 365 übereinstimmen, finden Sie weitere Informationen unter Richtlinien für Einlinienformatsymbole für Office-Add-Ins.

Visueller Stil von Office Fresh

Die Fresh-Symbole enthalten nur wesentliche kommunikative Elemente. Nicht wesentliche Elemente wie Perspektive, Farbverläufe und Lichtquelle wurden entfernt. Die vereinfachten Symbole unterstützen die schnellere Analyse von Befehlen und Steuerelementen. Befolgen Sie diesen Stil, um am besten für unbefristete Office-Clients geeignet zu sein.

Bewährte Methoden

Befolgen Sie diese Richtlinien, wenn Sie Ihre Symbole erstellen.

Dos	Don’ts
Halten Sie visuelle Elemente einfach und klar, und konzentrieren Sie sich auf die wichtigsten Elemente der Kommunikation.	Verwenden Sie keine Artefakte, die Ihr Symbol unübersichtlich machen.
Verwenden Sie die Office-Symbolsprache, um Verhaltensweisen oder Konzepte darzustellen.	Verwenden Sie Fabric Core-Glyphen nicht für Add-In-Befehle im Menüband der Office-App oder in Kontextmenüs um. Fabric Core-Symbole unterscheiden sich stilistisch und stimmen nicht überein.
Verwenden Sie allgemeine visuelle Office-Metaphern wie den Pinsel für Formatierung oder das Lupensymbol für die Suchfunktion wieder.	Verwenden Sie nicht dieselben visuellen Metaphern für unterschiedliche Befehle. Das Verwenden des gleichen Symbols für verschiedene Verhaltensweisen und Konzepte kann Verwirrung stiften.
Entwerfen Sie Ihre Symbole neu, um sie kleiner oder größer zu machen. Nehmen Sie sich Zeit, die Silhouetten, Ecken und abgerundeten Ecken neu zu zeichnen, um möglichst klare Linien zu erzielen.	Verändern Sie die Größe Ihrer Symbole nicht durch Verkleinern oder Vergrößern. Dies kann zu einer schlechten visuellen Qualität und unklaren Aktionen führen. Komplexe Symbole, die größer erstellt wurden, können an Klarheit verlieren, wenn die Größe ohne Neuzeichnen verändert wird.
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.	Verlassen Sie sich nicht darauf, dass Ihr Logo oder Ihre Marke die Bedeutung eines Add-In-Befehls ausreichend darstellen. Marken sind auf kleineren oder modifizierten Symbolen nicht immer erkennbar. Markenmarken stehen häufig in Konflikt mit Den Symbolstilen des Office-App-Menübands und können in einer ausgelasteten Umgebung um die Aufmerksamkeit des Benutzers konkurrieren.
Verwenden Sie das PNG-Format mit einem transparenten Hintergrund.	Keine
Vermeiden Sie lokalisierbare Inhalte in den Symbolen, z. B. typografische Zeichen, Anzeichen für Flatterrand in Absätzen und Fragezeichen.	Keine

Symbolgröße: Empfehlungen und Anforderungen

Office-Desktopsymbole sind Bitmapbilder. Unterschiedliche Größen werden entsprechend der DPI-Einstellung und dem Fingereingabemodus des Benutzers dargestellt. 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. Im Folgenden finden Sie die unterstützten Größen– drei sind erforderlich.

16 px (erforderlich)
20 px
24 px
32 px (erforderlich)
40 px
48 px
64 px (empfohlen; beste Größe für Macs)
80 px (erforderlich)

Wichtig

Ein Bild, das das repräsentative Symbol Ihres Add-Ins darstellt, finden Sie unter Erstellen effektiver Einträge in AppSource und in Office für Die Größe und andere Anforderungen.

Sie sollten unbedingt Ihre Symbole für jede Größe erneut zeichnen, anstatt sie zu verkleinern.

Aufbau und Layout von Symbolen

Office-Symbole bestehen in der Regel aus einem Basiselement mit überlagerten Aktions- 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.

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.

Die folgende Abbildung zeigt das Layout von Basiselementen und Modifizierern in einem Office-Symbol.

Zentrieren Sie Basiselemente im Pixelrahmen mit umgebendem leerem Abstand.
Setzen Sie Aktionsmodifizierer in die obere linke Ecke.
Platzieren Sie konzeptionelle Modifizierer unten rechts.
Begrenzen Sie die Anzahl von Elementen in Ihren Symbolen. Begrenzen Sie bei 32 px die Anzahl der Modifizierer auf maximal zwei. Begrenzen Sie bei 16 px die Anzahl der Modifizierer auf 1.

Basiselement Textabstand

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. Wenden Sie die in der Tabelle im folgenden Abschnitt aufgeführten Auffüllungsrichtlinien an, um optimale Ergebnisse zu erzielen.

Modifizierer

Alle Modifizierer sollten einen transparenten 1 px-Cutout zwischen jedem Element einschließlich des Hintergrunds aufweisen. Elemente sollten sich nicht direkt überlappen. Erstellen Sie Leerzeichen zwischen Regeln und Kanten. Modifizierer können geringfügig in der Größe variieren, verwenden aber diese Dimensionen als Ausgangspunkt.

Symbolgröße	Abstand um das Basiselement	Größe von Modifizierern
16 px	0	9 px
20 px	1px	10 px
24 px	1px	12 px
32 px	2px	14 px
40 px	2px	20 px
48 px	3px	22 px
64 px	5px	29 px
80 px	5px	38 px

Symbolfarben

Hinweis

Diese Farbrichtlinien gelten für Menübandsymbole, die in Add-in-Befehlen verwendet werden. Diese Symbole werden nicht mit fluent UI gerendert, und die Farbpalette unterscheidet sich von der unter Microsoft UI Fabric | Farben | Freigegeben.

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. Wenden Sie die folgenden Richtlinien auf die Verwendung von Farbe an.

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.
Verwenden Sie möglichst nur eine zusätzliche Farbe außer grau. Begrenzen Sie weitere Farben auf höchstens zwei.
Farben sollte ein einheitliches Erscheinungsbild in allen Symbolgrößen haben. Office-Symbole verfügen über leicht unterschiedliche Farbpaletten für unterschiedliche Symbolgrößen. 16 px und kleinere Symbole sind etwas dunkler und lebendiger als 32 px und größere Symbole. Ohne diese feinen Korrekturen scheinen die Farben in verschiedenen Größen zu variieren.

Farbname	RGB	Hex	Kategorie
Text grau (80)	80, 80, 80	#505050	Text
Text grau (95)	95, 95, 95	#5F5F5F	Text
Text grau (105)	105, 105, 105	#696969	Text
Dunkelgrau 32	128, 128, 128	#808080	32 px und höher
Mittelgrau 32	158, 158, 158	#9E9E9E	32 px und höher
Hellgrau ALLE	179, 179, 179	#B3B3B3	Alle Größen
Dunkelgrau 16	114, 114, 114	#727272	16 px und niedriger
Mittelgrau 16	144, 144, 144	#909090	16 und darunter
Blau 32	77, 130, 184	#4d82B8	32 px und höher
Blau 16	74, 125, 177	#4A7DB1	16 px und niedriger
Gelb ALLE	234, 194, 130	#EAC282	Alle Größen
Orange 32	231, 142, 70	#E78E46	32 px und höher
Orange 16	227, 142, 70	#E3751C	16 px und niedriger
Rosa ALLE	230, 132, 151	#E68497	Alle Größen
Grün 32	118, 167, 151	#76A797	32 px und höher
Grün 16	104, 164, 144	#68A490	16 px und niedriger
Rot 32	216, 99, 68	#D86344	32 px und höher
Rot 16	214, 85, 50	#D65532	16 px und niedriger
Lila 32	152, 104, 185	#9868B9	32 px und höher
Lila 16	137, 89, 171	#8959AB	16 px und niedriger

Symbole in Modi mit hohem Kontrast

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.

Versuchen Sie, Vorder- und Hintergrundelemente entlang des Schwellenwerts von 190 voneinander zu unterscheiden.
Halten Sie sich an die visuellen Stile für Office-Symbole.
Verwenden Sie Farben aus unserer Symbolpalette.
Vermeiden Sie die Verwendung von Farbverläufen.
Vermeiden Sie große Blöcke von Farbe mit ähnlichen Werten.

Freigeben über