Freigeben über


Teams-App-Symbol für Teams Store und App-Leiste

Dieser Artikel enthält richtlinien zum Erstellen von Symbolen in Ihrem App-Ökosystem, um Designern zu helfen und Sie das richtige Anwendungssymbol übermitteln zu können. Wenn Sie diese Richtlinien befolgen, schaffen Sie Einheitlichkeit und Ausgewogenheit in Ihrem App-Ökosystem und betonen die Grafik Ihres App-Symbols.

App-Symbol

Schließen Sie beim Übermitteln Ihres App-Pakets zwei PNG-Versionen des App-Symbols ein, ein Farbsymbol und ein Kontursymbol. Damit Ihre App die Überprüfung im Microsoft Teams Store bestehen kann, müssen diese Symbole bestimmte Größenanforderungen erfüllen. Führen Sie die Schritte aus, um sicherzustellen, dass Ihre App-Symbole den Teams Store-Standards entsprechen.

Ausgewogenes Layout

Die Symbole sollen ein einheitliches Layout erstellen. Diese Richtlinien helfen Ihnen beim Erstellen Des App-Symbols für die Übermittlung.

Beispiel zeigt das einheitliche Layout für App-Symbole.

Erstellen Ihrer Ressourcen

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

Beispiel zeigt die beiden Objekte zum Generieren von App-Symbolen.

Leistungsindikator Beschreibung
1 Ein png-Format mit vollem Beschnitt bei 192 x 192 Pixeln. Nutzen Sie den gesamten Ressourcenbereich als Hintergrund. Dies wird 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.

Beispiel zeigt die Farb-App-Symbolabmessungen Ihres Logosymbols.

Symbolattribute

In Farbe

Beispiel zeigt die Symbolattribute für ein farbiges Symbol.

Weißer Hintergrund

Beispiel zeigt die Farbattribute für ein Symbol mit weißem Hintergrund.

App-Symbolnutzung

In dieser Liste finden Sie Inhaltsbereiche, in denen Ihr Symbol je nach App-Typ oder Funktion im Produkt angezeigt wird.

Persönliche App

Beispiel zeigt das App-Symbol in einer persönlichen App.

App-Flyout

Beispiel: App-Symbol im App-Flyout

Bot (Kanalansicht)

Beispiel zeigt ein App-Symbol in der Kanalansicht des Bots.

Nachrichtenerweiterungs-Flyout

Beispiel zeigt ein App-Symbol im Nachrichtenerweiterungs-Flyout.

Flyout für Besprechungs-Apps

Beispiel für ein App-Symbol im Flyout der Besprechungs-App.

Besprechungs-U-Bar

Beispiel für ein App-Symbol in der Besprechungs-U-Leiste.

Bewährte Methoden

Das Beispiel zeigt ein Logo innerhalb des sicheren Bereichs.

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

Wenn Sie über ein Logo verfügen, sollten Sie es innerhalb des 120 x 120 sicheren Bereichs im PNG-Formatsymbol 192 x 192 aufbewahren.

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

Nicht: Vergrößern des Symbols als sicherer Bereich

Hier sehen 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.

Beispiel zeigt ein Symbol mit vollständiger Beschnittung.

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.

Beispiel zeigt ein Symbol mit abgerundeten Ecken.

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.

Beispiel: Hochladen des Symbols ohne Rahmen.

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.

Beispiel: Hochladen eines Symbols mit einem Rahmen.

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.

Beispiel zeigt ein App-Symbol mit ausreichendem Kontrast.

Do: Stellen Sie ausreichend Kontrast bereit.

Betrachten Sie Ihr Symbol, um genügend Kontrast vor dem Hintergrund zu haben. Es wird empfohlen, ein Verhältnis von 4,5:1 für eine optimale Barrierefreiheit zu verwenden.

Beispiel zeigt ein App-Symbol, das ausgeblendet ist.

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.

Beispiel zeigt ein App-Symbol mit erhöhten Markensymbolen.

Do: Steigern Sie Ihre Marke

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

Beispiel zeigt ein App-Symbol mit Ihrer Marke in einem Kreis.

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

Erhöhen Sie Ihre Marke, indem Sie das Markensymbol in einem 96 x 96 sicheren Bereich halten.

Beispiel: App-Symbol mit Abkürzung.

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.

Beispiel zeigt ein App-Symbol mit mehreren Wörtern.

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.

Beispiel für ein Symbol für eine ausgewogene App.

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.

Beispiel: Symbol für eine schiefe oder gestreckte App.

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.