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.