Layout und Skalierung für Ihre Microsoft Teams-App
Ein Rasterlayout ermöglicht es Ihrer App, konsistent zu sein und garantiert erkennbare Beziehungen zwischen Designkomponenten. Sie erfahren mehr über Ihr Rastersystem und Tipps zum Skalieren und Zoomen in Ihrer App, um Die Übermittlungskriterien zu erfüllen.
Skalierung und reaktionsfähiges Design sind für alle Teams-Apps unerlässlich, damit Benutzer sicher mit allen Schnittstellen interagieren können. Um die Teams Store-Überprüfung zu bestehen, muss der gesamte Text sichtbar und nicht abgeschnitten sein.
Layoutentwurf
Die 4-Pixel-Basiseinheit des Rasters ermöglicht die konsistente Skalierung von Komponenten über alle Anzeigegrößen in Teams hinweg. Im folgenden Beispiel beträgt der Eckradius jeder Schaltfläche 4 Pixel.
Immer dem Raster folgen
Reaktionsfähig machen
Leerzeichen verwenden
Skalierung und Reaktionsfähigkeit
Mobil
Mobile Designs müssen 320 Pixel groß sein.
Desktop
Die Mindestgröße für Den Desktop beträgt 550 Pixel.
Beispiel für 550 Pixel
Beispiel für 2560 Pixel
Seitenausrichtung
Mobil
Hinweis
Apps in Teams mobile unterstützen sowohl den Quer- als auch den Hochformatmodus.
Hochformatmodus
Querformatmodus
Bewährte Methoden
Do: Verwenden Sie einen Zeilenumbruch, damit Text auf allen Zoomstufen lesbar ist.
Vermeiden Sie Textüberlappungen und Kürzungen.
Nicht: Text und Schaltflächen bei Änderungen des Zoomfaktors verschieben und überlappen lassen
Überlappender Text und Schaltflächen entsprechen möglicherweise nicht unseren Standards für die Barrierefreiheit.
Do: Verwenden Sie einen Zeilenumbruch, damit Text in allen Breiten lesbar ist.
Vermeiden Sie Kürzungen durch Reflow, Priorisieren von Call to Actions (CTAs) und Aktionselementen.
Nicht: Text oder CTAs werden abgeschnitten oder unleserlich, wenn sich die Fensterbreite ändert
Ohne Wörterumbruch können text und CTAs nicht verwendet werden.
Tun: Stellen Sie sicher, dass Ihre App bei einer Skalierung von 200 % lesbar ist.
Verwenden Sie ein reaktionsfähiges Design, um Textüberlappungen und Kürzungen zu vermeiden.
Nicht: Inhalte bei jeder Zoomstufe abschneiden und abschneiden
Es wird empfohlen, bis zu 200 % Zoom zu testen.
Do: Text und Farben für Barrierefreiheit
Der gesamte Text muss sichtbar und für alle Benutzer verwendet werden, was bedeutet, dass er abhängig von seiner Verwendung bestimmte Farbverhältnisse überschreiten muss. Informationen zum Überprüfen der Kontrastwerte finden Sie in der WebAIM-Kontrastprüfung.
Nicht: Übermitteln Sie Ihre App mit Text, der keine Kontraststandards erfüllt.
Teams-Apps müssen für alle Benutzer mit einer sehbehinderten oder eingeschränkten Sehbehinderung zugänglich sein. Übermittlungen mit nicht zugänglichem Text werden nicht akzeptiert.
Do: Testen Sie Ihre App mit einer Auflösung von 1920 x 1080.
Vermeiden Sie Textüberlappungen und Kürzungen.
Nicht: Übermitteln Sie Ihre App zur Überprüfung, ohne die Teams-Standardauflösung zu testen.
Ihre App besteht den Übermittlungsprozess möglicherweise nicht, wenn Probleme mit einer Auflösung von 1920 x 1080 auftreten.
Do: Testen der mobilen App auf Reaktionsfähigkeit
Die mobile Ansicht Ihrer App muss reaktionsfähig sein, ähnlich wie beim engsten Reaktionshaltepunkt einer Web-App.
Nicht: Kürzung für Ihre mobile App zulassen
In Ihrer mobilen App darf nichts abgeschnitten oder unleserlich sein.
Do: Sicherstellen, dass Kopfzeilen auf allen Zoomstufen immer lesbar sind
Wenn die Header abgeschnitten werden, verwenden Sie eine QuickInfo, damit Benutzer Kopfzeilen lesen können, indem Sie darauf zeigen.
Nicht: Abschneiden von Headern ohne Hoverfunktion
Ihre App übergibt die Teams-Übermittlung nicht, wenn sie unleserliche Header ohne Hoverfunktion aufweist.
Häufig gestellte Fragen zur Seitenausrichtung
Muss ich Änderungen an der App vornehmen, um den Querformatmodus zu erhalten?
Nein Sie können Apps standardmäßig im Querformatmodus verwenden.
Was geschieht, wenn meine App keinen der Modi unterstützt oder das Szenario nur in einem der Modi funktionieren soll?
Teams unterstützt standardmäßig beide Modi. Die Apps in Teams werden nicht unterstützt, um nur in einem Modus zu funktionieren. Wenn Ihre App diese Anforderung erfordert, wenden Sie sich an das Supportteam.
Wie kann ich den fehlenden Bildlauf im leeren Zustand der App beheben?
Fügen Sie <FlexColumn scroll></FlexColumn>
dem leeren Zustand für die App hinzu.
Wie kann ich die Kompatibilität meiner App im Quer- und Hochformat testen?
Um die Kompatibilität Ihrer App in beiden Modi zu testen, führen Sie die App auf Teams Mobile in unterschiedlichen Geräteausrichtungen aus. Stellen Sie sicher, dass alle Elemente, einschließlich Schaltflächen, Text und Bilder, ordnungsgemäß ausgerichtet und ohne Verzerrungen oder Abschneidungen der Benutzeroberfläche angezeigt werden.
Gibt es bewährte Methoden für das Entwerfen von Apps, die sowohl im Quer- als auch im Hochformatmodus gut funktionieren?
Ja, beim Entwerfen von Apps für Teams ist es wichtig, reaktionsfähige Designprinzipien zu befolgen, um eine optimale Leistung und Benutzererfahrung sowohl im Querformat als auch im Hochformat zu gewährleisten. Verwenden Sie flexible Layouts und adaptive Komponenten, um verschiedene Bildschirmgrößen und -ausrichtungen zu berücksichtigen.Unterstützt der Querformatmodus sowohl Android- als auch iOS-Teams-Apps?
Ja, der Querformatmodus wird sowohl für Android- als auch für iOS-Teams-Apps unterstützt und bietet benutzern auf beiden Plattformen eine konsistente Erfahrung.
Kann ich das Verhalten der App im Quer- und Hochformat anders anpassen?
Das Verhalten der App bleibt in beiden Modi konsistent. Wenn Sie jedoch bestimmte Anwendungsfälle oder Anforderungen haben, die unterschiedliche Verhaltensweisen in jedem Modus erfordern, wenden Sie sich mit Ihrem Feedback und Ihren Vorschlägen an das Supportteam .
Hat dies Auswirkungen auf die Leistung von Apps im Querformatmodus?
Nein, die Unterstützung des Querformatmodus in Teams hat keine negativen Auswirkungen auf die App-Leistung. Teams sorgt für eine reibungslose und nahtlose Benutzerumgebung, unabhängig von der Geräteausrichtung.