Freigeben über

Designsymbole für die Agent-Beschaffung und -Verwaltung

Ein Copilot-Agent ist eine App für Microsoft 365, und sein App-Paket muss zwei Symboldateien enthalten, die den Agent auf der Benutzeroberfläche für App-Erwerb und -Verwaltung von Teams, Office, Copilot und anderen Microsoft 365-Anwendungen darstellen. In diesem Artikel werden die Anforderungen und bewährten Methoden zum Erstellen dieser Symbole beschrieben.

Apps für Microsoft 365-Symbole

Das App-Paket für jede App für Microsoft 365 muss zwei Symbole enthalten, die die Erweiterung an mehreren Stellen darstellen, einschließlich der folgenden:

  • Die App wird in den verschiedenen Microsoft 365-Anwendungen gespeichert, z. B. im Teams App Store.
  • Die Seite Apps verwalten , auf die von verschiedenen Microsoft 365-Anwendungen aus zugegriffen werden kann.
  • Die App-Leisten von Teams, Outlook und der Microsoft 365 Copilot Anwendung.

Eines davon muss ein Farbsymbol und das andere ein Kontursymbol sein, und beide müssen im PNG-Format vorliegen. Diese Symbole müssen bestimmte Größenanforderungen erfüllen. In diesem Artikel werden die Anforderungen und bewährten Methoden für das Entwerfen dieser Symbole beschrieben.

Ausgewogenes Layout

Die Symbole sollen ein einheitliches Layout erstellen. Diese Richtlinien helfen Ihnen beim Erstellen des App-Symbols.

Diagramm, das das einheitliche Layout für App-Symbole zeigt.

Erstellen Ihrer Ressourcen

Microsoft 365 benötigt zwei Ressourcen während der App-Übermittlung, um die Symbole zu generieren.

Diagramm, das die beiden Objekte zum Generieren von App-Symbolen zeigt.

Leistungsindikator Beschreibung
1 Ein png-Format mit vollem Beschnitt bei 192 x 192 Pixeln. Nutzen Sie den gesamten Ressourcenbereich als Hintergrund. Dies wird z. B. im Teams Store oder in Flyouts verwendet.
2 Ein Standard- oder Rest-PNG-Formatsymbol mit 32 x 32 Pixeln. Dieses Symbol wird als Ruhezustand/Standardzustand in der App-Leiste und an anderen Stellen im Produkt verwendet.

Farbsymbolarchitektur

Die Farb-App-Symbolabmessungen müssen 192 x 192 Pixel betragen. Wenn Sie über ein Logosymbol verfügen, muss das Logo in den 120 x 120 sicheren Bereich in der Mitte passen.

Das übermittelte Symbol muss ein vollständiges Quadrat sein. Teams wendet automatisch die Maskierung für konsistente Symbolformen in der app an.

Diagramm, das die Farb-App-Symbolabmessungen Ihres Logosymbols zeigt.

Symbolattribute

In Farbe

Diagramm, das die Symbolattribute für ein farbiges Symbol zeigt.

Weißer Hintergrund

Diagramm, das die Farbattribute für ein Symbol mit weißem Hintergrund zeigt.

App-Symbolnutzung

Ihre Symbole werden möglicherweise an anderen Stellen in Microsoft 365-Anwendungen angezeigt, je nachdem, welche Arten von Erweiterungen oder Funktionen in Ihrer App für Microsoft 365 enthalten sind. Nachstehend sind einige Beispiele aufgeführt.

Persönliche App

Diagramm, das das App-Symbol in einer persönlichen App zeigt.

App-Flyout

Diagramm, das das App-Symbol im App-Flyout zeigt.

Bot (Kanalansicht)

Diagramm, das ein App-Symbol in der Kanalansicht des Bots zeigt.

Nachrichtenerweiterungs-Flyout

Diagramm, das ein App-Symbol im Nachrichtenerweiterungs-Flyout zeigt.

Flyout für Besprechungs-Apps

Diagramm, das ein App-Symbol im Flyout der Besprechungs-App zeigt.

Besprechungs-U-Bar

Diagramm, das ein App-Symbol in der Besprechungs-U-Leiste zeigt.

Bewährte Methoden

Diagramm, das ein Logo im sicheren Bereich zeigt.

Ausführen: Befolgen Sie die Empfehlung für einen sicheren Bereich (120 x 120)

Wenn Sie über ein Logo verfügen, behalten Sie es im 120 x 120 sicheren Bereich im PNG-Formatsymbol 192 x 192 bei.

Diagramm, das ein Logo zeigt, das sich nicht innerhalb des sicheren Bereichs befindet.

Nicht: Vergrößern des Symbols als sicherer Bereich

Im Folgenden finden Sie ein Beispiel für ein Logo innerhalb des PNG-Formatsymbols, das sich nicht innerhalb des sicheren Bereichs befindet. Dadurch wird ein ungleichmäßiger Abstand (negativer Abstand) um das Symbol erzeugt.

Diagramm, das ein Symbol mit vollständiger Beschnittung zeigt.

Do: Bereitstellen einer vollständigen Beschnittung für abgerundete Ecken

Wenn Sie ein vollständiges Beschnittbild haben, laden Sie einfach ein quadratisches PNG-Format mit 192 x 192 hoch. Die Ecken werden dynamisch gerundet.

Diagramm, das ein Symbol mit abgerundeten Ecken zeigt.

Nicht: Runden Sie die Ecken des Symbols ab.

Runden Sie die Ecken nicht ab. Reichen Sie am perfekten Quadrat bei 192 x 192 ein, die Ecken werden dynamisch gerundet.

Diagramm, das einen Upload des Symbols ohne Rahmen zeigt.

Do: Hochladen eines Symbols ohne Rahmen

Rahmen wird automatisch hinzugefügt. Laden Sie in diesem Fall einfach ihr PNG-Format ohne Rahmen hoch, auch wenn es sich auf einem weißen Hintergrund befindet.

Diagramm, das einen Upload des Symbols mit einem Rahmen zeigt.

Nicht: Hinzufügen eines Rahmens

Rahmen werden dynamisch hinzugefügt. Wenn Sie einen Rahmen in Ihr PNG-Format einschließen, führt dies zu unerwünschter Duplizierung auf weißem Hintergrund.

Diagramm, das ein App-Symbol mit genügend Kontrast zeigt.

Do: Stellen Sie ausreichend Kontrast bereit.

Stellen Sie sicher, dass ihr Symbol ausreichend Kontrast im Hintergrund aufweist. Wir empfehlen ein Verhältnis von 4,5:1, um eine optimale Barrierefreiheit zu erzielen.

Diagramm, das ein ausgeblendetes App-Symbol zeigt.

Nicht: Ausblenden des Symbols

Vermeiden Sie einen niedrigen Kontrast für Ihre Symbole. Stellen Sie sicher, dass der Hintergrund und das Symbol, die Sie im PNG-Format verwenden, ausreichend Kontrast aufweisen.

Diagramm, das ein App-Symbol mit erhöhten Markensymbolen zeigt.

Do: Steigern Sie Ihre Marke

Konzentrieren Sie sich auf Ihre Marke, indem Sie eine vollständige flache Farbe als Hintergrund verwenden.

Diagramm, das ein App-Symbol mit Ihrer Marke in einem Kreis zeigt.

Nicht: Vermeiden Sie es, Ihr Markensymbol in einem Kreis zu platzieren.

Erhöhen Sie Ihre Marke, indem Sie das Markensymbol im 96 x 96 sicheren Bereich belassen.

Diagramm, das ein App-Symbol mit abkürzung zeigt.

Do: Kürzen langer Wörter im App-Symbol

Wenn Sie einen langen App-Namen haben, versuchen Sie, abzukürten, damit es einfacher zu lesen ist, wenn die Größe Ihres Symbols auf 32 x 32 geändert wird.

Diagramm, das ein App-Symbol mit mehreren Wörtern zeigt.

Nicht: Symbol "Mehrere Wörter in App einschließen"

Vermeiden Sie die Verwendung mehrerer Wörter auf dem Symbol. Es ist unmöglich, den Text zu lesen, wenn das Symbol kleinere Größen aufweist, z. B. 32 x 32 oder 36 x 36.

Diagramm, das ein Symbol für eine ausgewogene App zeigt.

Do: Create balance (96 x 96)

Steigern Sie Ihre Marke, indem Sie das Gleichgewicht behalten. Halten Sie sich an den 96 x 96 sicheren Bereich für ein Gleichgewichtsgefühl.

Diagramm, das ein Symbol für eine schiefe oder gestreckte App zeigt.

Nicht: Das Symbol wird verzerrt oder gestreckt.

Behalten Sie das Symbol im sicheren Bereich bei. Ziehen Sie das Symbol nicht in die eine oder andere Richtung.

  • Last updated on