Registerkarten auf mobilen GerätenTabs on mobile

Hinweis

Wenn die Registerkarte Kanal/Gruppe auf mobilen Teams-Clients angezeigt werden soll, setSettings() muss die Konfiguration über einen Wert für die websiteUrl Eigenschaft verfügen (siehe unten).If you choose to have your channel/group tab appear on Teams mobile clients, the setSettings() configuration must have a value for the websiteUrl property (see below).

Benutzerdefinierte Registerkarten können Teil eines Kanals, Gruppenchats oder einer persönlichen APP sein (apps, die statische Registerkarten und/oder einen 1:1-bot enthalten).Custom tabs can be part of a channel, group chat, or personal app (apps that contain static tabs and/or a one-to-one bot).

Persönliche apps sind auf mobilen Clients in der APP-Schublade verfügbar.Personal apps are available on mobile clients in the app drawer. Die APP kann nur von einem Desktop-oder WebClient installiert werden, und es kann bis zu 24 Stunden dauern, bis Sie auf mobilen Clients angezeigt wird.The app can only be installed from a desktop or web client, and can take up to 24 hours to appear on mobile clients.

Kanal Registerkarten sind auch auf mobilen Geräten verfügbar.Channel tabs are also available on mobile. Das Standardverhalten besteht derzeit darin, dass Sie Ihre websiteUrl Registerkarte in einem Browserfenster starten können.The default behavior is currently to use your websiteUrl to launch your tab in a browser window. Sie können jedoch auf einem mobilen Client geladen werden, indem Sie auf das ... Überlaufmenü neben der Registerkarte und dann auf Öffnenklicken, mit dem Sie contentUrl die Registerkarte in den mobilen Microsoft Teams-Client laden.However, they can be loaded on a mobile client by clicking the ... overflow menu next to the tab and choosing Open, which will use your contentUrl to load the tab inside the Teams mobile client.

Zugreifen auf persönliche RegisterkartenAccessing personal tabs

In der folgenden Abbildung wird gezeigt, wie Sie auf eine persönliche Registerkarte in Mobile zugreifen.The following illustration shows how you access a personal tab on mobile.

Abbildung mit den Teams Mobile App Schublade.

Zugreifen auf Kanal RegisterkartenAccessing channel tabs

In der folgenden Abbildung wird gezeigt, wie Sie auf eine Kanal Registerkarte in Mobile zugreifen.The following illustration shows how you access a channel tab on mobile.

Abbildung mit einer mobilen Teams-Registerkarte.

Überlegungen zum EntwurfDesign considerations

Mit unserer mobilen Plattform können apps eine immersive Erfahrung mit dem App-Inhalt sein, der den gesamten Bildschirm außer der Navigation in den Haupt Teams aufnimmt.Our mobile platform allows apps to be an immersive experience with the app content taking up all of the screen apart from main Teams navigation. Befolgen Sie diese Richtlinien, um eine immersive Umgebung zu erstellen, die in Microsoft Teams passt.To create an immersive experience that fits with Teams, follow these guidelines.

Dynamisches DesignsResponsive design

Da die Registerkarte auf Geräten mit einer großen Bandbreite von Bildschirmgrößen geöffnet werden kann, muss Sie den Grundsätzen für das reagieren auf Designs entsprechen.Because your tab can be opened on devices with a wide range of screen sizes, it needs to follow responsive design principles. Auf alle Schlüssel Konstrukte sollte auf mobilen Geräten zugegriffen werden können, und die Ansichten sollten nicht verzerrt werden.All of the key constructs should be accessible on mobile devices, and the views should not be distorted. Stellen Sie sicher, dass beim Laden der Registerkarte auf einem mobilen Gerät alle Schaltflächen und Links leicht über die Finger basierte Navigation zugänglich sind.Ensure that when your tab is loaded on a mobile device, all buttons and links are easily accessible using finger-based navigation.

LayoutsLayouts

Die Auswahl des richtigen Layouts für Ihre Registerkarte ist wichtig.Choosing the correct layout for your tab is important. Sie sollten die Art von Informationen berücksichtigen, die Sie präsentieren, und ein Layout auswählen, das es für einen einfachen Verbrauch organisiert.You should consider the kind of information you're presenting, and choose a layout that organizes it for easy consumption. Einige potenzielle Optionen werden unten erläutert.Some potential options are outlined below.

Einzelne LeinwandSingle canvas

Dies ist ein großer Bereich, in dem Arbeit erledigt wird.This is one large area where work gets done. Die wiki-app "Teams" folgt diesem Muster.The Teams Wiki app follows this pattern. Wenn Sie über eine APP verfügen, die Inhalte nicht in kleinere Komponenten unterteilt, wäre dies gut geeignet.If you have an app that doesn’t separate content into smaller components this would be a good fit.

Abbildung mit einer mobilen Teams-Registerkarte mit einer einzelnen Leinwand.

ListeList

Listen eignen sich hervorragend zum Sortieren und Filtern großer Datenmengen und bieten eine große Rolle, um die wichtigsten Dinge am besten zu halten.Lists are great for sorting and filtering large quantities of data and are great at keeping the most important things at the top. Es ist hilfreich, sortierbare Spalten zu verwenden.It is helpful to use sortable columns. Im Menü mit den Auslassungspunkten können jedem Listenelementaktionen hinzugefügt werden.Actions can be added to each list item under the ellipsis menu.

Abbildung mit einer mobilen Teams-Listen Registerkarte.

RasterGrid

Raster sind nützlich, um Elemente anzuzeigen, die sehr visuell sind.Grids are useful for showing elements which are highly visual. Es hilft, ein Filter-oder Suchsteuerelement am oberen Rand einzuschließen.It helps to include a filter or search control at the top.

Abbildung zeigt eine Mobile Teams-Registerkarte mit einem Rasterlayout.

Tabs mit Bots auf mobilen GerätenTabs with bots on mobile

Das folgende Beispiel ist eine persönliche APP, die über Registerkarten und einen bot verfügt.The following example is a personal app that has tabs and a bot.

Abbildung, die zeigt, wie Mobile Teams-App mit Registerkarten und bot.

BenutzeroberflächenkomponentenUI components

FarbpalettenColor palettes

Die Verwendung unserer genehmigten neutralen Palette für Hintergründe, Benachrichtigungen, Text und Schaltflächen hilft Ihrer APP, sich in Microsoft Teams zu Hause zu fühlen.Using our approved neutral palette for backgrounds, notifications, text, and buttons will help your app feel more at home in Teams. Da Teams Mobile zwei Farbdesigns (hell und dunkel) aufweist, sollten Sie sicherstellen, dass Ihre APP in beiden Farben gut aussieht.Since Teams mobile has two colour themes (light and dark), it’s a good idea to make sure your app looks great in both.

Helle FarbeLight color

helle Farbpalette

Dunkle FarbeDark color

dunkle Farbpalette

Schaltflächen und SteuerelementeButtons and controls

Die Art und Weise, wie Schaltflächen formatiert werden, hilft bei der Kommunikation, welche Art von Aktion ausgelöst wird.The way buttons are styled helps communicate what kind of action they trigger. Wir halten eine Vielzahl von Schaltflächen, die formatiert sind, um unterschiedliche Schwerpunkte anzuzeigen.We maintain a wide range of buttons that are formatted to show different levels of emphasis. Schaltflächen können Text, ein Symbol oder eine Kombination aus Text und Symbol aufweisen.Buttons can have text, an icon, or a combination of text and an icon. Um verschiedene Ebenen in einer Hierarchie zu kommunizieren, haben wir die primären und sekundären Schaltflächen innerhalb der einzelnen Kategorien entworfen.To communicate different levels in a hierarchy, we designed primary and secondary buttons within each category.

SchaltflächenButtons

Primäre und sekundäre Schaltflächen.Primary and secondary buttons.

Schaltflächenbild

AuswahlsteuerelementeSelection controls

Optionsfelder, Kontrollkästchen und Umschaltflächen.Radio buttons, checkboxes, and toggles.

Auswahlsteuerelemente

Chiclets und PillenChiclets and pills

Chiclets und Pillen

TypografieTypography

Typografie sollte eindeutig und zielgerichtet sein.Typography should be clear and purposeful. Betonen Sie wichtige Informationen, und vermeiden Sie die Verwendung mehrerer Schriftarten und Größen zur Verringerung von Verwirrung.Emphasize important information and avoid using multiple fonts and sizes to reduce confusion. Wir empfehlen die Verwendung von satzfall und vermeiden die Verwendung aller Caps für Lokalisierung und Lesbarkeit.We recommend using sentence case and avoiding the usage of all caps for localization and legibility.

Mobile Typograph

Felder und FlyoutsFields and flyouts

Felder sind Bereiche, in denen Benutzer Text eingeben können.Fields are areas where users can input text. Flyouts sind leichter als Dialogfelder und werden aus dem oberen Bereich angezeigt.Flyouts are more lightweight than dialogs and appear from the top pane.

Steuerelemente auflistenList controls

Mobile Listensteuerelemente

FeldsteuerelementeField controls

Mobile Feldsteuerelemente

Entwickler ÜberlegungenDeveloper considerations

Wenn Sie eine APP erstellen, die eine Registerkarte enthält, müssen Sie prüfen (und testen), wie Ihre Registerkarte sowohl auf den Android-als auch IOS-Microsoft Teams-Clients funktioniert.When you're building an app that includes a tab, you need to consider (and test) how your tab will function on both the Android and iOS Microsoft Teams clients. In den folgenden Abschnitten werden einige der wichtigsten Szenarien beschrieben, die Sie in diesem Punkt behandeln müssen.The sections below outline some of the key scenarios you need to consider.

Testen auf mobilen ClientsTesting on mobile clients

Sie müssen überprüfen, ob Ihre Registerkarte auf mobilen Geräten in verschiedenen Größen und Qualitäten ordnungsgemäß funktioniert.You need to validate that your tab functions properly on mobile devices of various sizes and qualities. Für Android-Geräte können Sie die devtools verwenden, um Ihre Registerkarte während der Ausführung zu debuggen.For Android devices, you can use the DevTools to debug your tab while it is running. Es wird empfohlen, sowohl auf High-als auch auf niedrig leistungsfähigen Geräten sowie auf einem Tablet zu testen.We recommend that you test on both high and low performing devices, as well as on a tablet.

AuthentifizierungAuthentication

Damit die Authentifizierung auf mobilen Clients funktioniert, müssen Sie Microsoft Teams JavaScript SDK auf mindestens Version 1.4.1 aktualisieren.For authentication to work on mobile clients, you must upgrade you Teams JavaScript SDK to at least version 1.4.1.

Niedrige Bandbreite und zeitweilige VerbindungenLow bandwidth and intermittent connections

Mobile Clients müssen regelmäßig mit niedriger Bandbreite und zeitweiligen Verbindungen arbeiten.Mobile clients regularly need to function with low bandwidth and intermittent connections. Ihre APP sollte alle Timeouts entsprechend behandeln, indem Sie dem Benutzer eine Kontext Meldung bereitstellt.Your app should handle any timeouts appropriately by providing a contextual message to the user. Sie sollten auch Benutzer Fortschrittsindikatoren angeben, um Ihren Benutzern Feedback für alle langwierigen Prozesse zur Verfügung zu stellen.You should also user progress indicators to provide feedback to your users for any long-running processes.