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.

Erstellen Ihrer Ressourcen

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

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.

Symbolattribute

In Farbe

Weißer 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

App-Flyout

Bot (Kanalansicht)

Nachrichtenerweiterungs-Flyout

Flyout für Besprechungs-Apps

Besprechungs-U-Bar

Bewährte Methoden

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.

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.

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.

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.

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.

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.

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.

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.

Do: Steigern Sie Ihre Marke

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

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.

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.

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.

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.

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.