Layout und Skalierung für Ihre Microsoft Teams-App

  • Artikel

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.

Beispiel zeigt ein Beispiel für Pixel im Layout.

Immer dem Raster folgen

Beispiel zeigt die Pixel in jeder Dimension und jedem Raum.

Reaktionsfähig machen

Beispiel zeigt die Richtlinie für ein reaktionsfähiges Layout.

Leerzeichen verwenden

Beispiel zeigt die Verwendung von Leerzeichen.

Skalierung und Reaktionsfähigkeit

Mobil

Mobile Designs müssen 320 Pixel groß sein.

Beispiel zeigt ein reaktionsfähiges Layout auf Mobilgeräten.

Desktop

Die Mindestgröße für Den Desktop beträgt 550 Pixel.

Beispiel für 550 Pixel

Beispiel zeigt das minimal reaktionsfähige Layout auf dem Desktop.

Beispiel für 2560 Pixel

Das Beispiel zeigt ein reaktionsfähiges Layout auf dem Desktop.

Seitenausrichtung

Mobil

Hinweis

Apps in Teams mobile unterstützen sowohl den Quer- als auch den Hochformatmodus.

Hochformatmodus

Beispiel zeigt eine Seitenausrichtung im Hochformatmodus in Teams Mobile.

Querformatmodus

Beispiel für eine Seitenausrichtung im Querformatmodus in Teams Mobile.

Bewährte Methoden

Beispiel zeigt einen Zeilenumbruch, sodass der Text auf allen Zoomstufen lesbar ist.

Do: Verwenden Sie einen Zeilenumbruch, damit Text auf allen Zoomstufen lesbar ist.

Vermeiden Sie Textüberlappungen und Kürzungen.

Das Beispiel zeigt eine Überlappung von Text und Schaltflächen, die möglicherweise nicht den Standards für Barrierefreiheit entsprechen.

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.

Beispiel zeigt einen Zeilenumbruch, sodass der Text in jeder Breite lesbar ist.

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.

Das Beispiel zeigt, dass text und CTAs nicht ohne Zeilenumbruch verwendet werden können.

Nicht: Text oder CTAs werden abgeschnitten oder unleserlich, wenn sich die Fensterbreite ändert

Ohne Wörterumbruch können text und CTAs nicht verwendet werden.

Das Beispiel zeigt ein reaktionsfähiges Design, um Überschneidungen bei Zoomfaktor zu vermeiden.

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.

Das Beispiel zeigt einen abgeschnittenen Inhalt mit Zoomfaktor.

Nicht: Inhalte bei jeder Zoomstufe abschneiden und abschneiden

Es wird empfohlen, bis zu 200 % Zoom zu testen.

Das Beispiel zeigt, wie der Text für Benutzer sichtbar und zugänglich sein soll.

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.

Beispiel zeigt einen Text, der die Kontraststandards nicht erfüllt.

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.

Beispiel zeigt eine Auflösung, um Überschneidungen und Kürzungen zu vermeiden.

Do: Testen Sie Ihre App mit einer Auflösung von 1920 x 1080.

Vermeiden Sie Textüberlappungen und Kürzungen.

Das Beispiel zeigt eine schlechte Auflösung, die nicht den Standards entspricht.

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.

Beispiel zeigt die Reaktionsfähigkeit mobiler Apps.

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.

Beispiel für abgeschnittenen oder unleserbaren Text in einer mobilen App.

Nicht: Kürzung für Ihre mobile App zulassen

In Ihrer mobilen App darf nichts abgeschnitten oder unleserlich sein.

Beispiel zeigt die Kopfzeilen, die auf allen Zoomstufen lesbar sind.

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.

Das Beispiel zeigt einen abgeschnittenen Header ohne Hoverfunktion.

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.