Guias em dispositivos móveisTabs on mobile

Observação

Se você optar por ter a guia canal/grupo exibida em clientes móveis do Microsoft Teams, a setSettings() configuração deverá ter um valor para a websiteUrl Propriedade (veja abaixo).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).

As guias personalizadas podem fazer parte de um canal, de um chat de grupo ou de um aplicativo pessoal (aplicativos que contêm guias estáticas e/ou um bot de um para um).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).

Os aplicativos pessoais estão disponíveis em clientes móveis na gaveta de aplicativos.Personal apps are available on mobile clients in the App Drawer. O aplicativo só pode ser instalado a partir de um cliente da Web ou da área de trabalho, e pode levar até 24 horas para aparecer em clientes móveis.The app can only be installed from a desktop or web client, and can take up to 24 hours to appear on mobile clients.

As guias de grupo e canal também estão disponíveis em clientes móveis.Group and channel tabs are available on mobile clients as well. O comportamento padrão é atualmente usar o websiteUrl para iniciar sua guia em uma janela do navegador.The default behavior is currently to use your websiteUrl to launch your tab in a browser window. No entanto, eles podem ser carregados em um cliente móvel clicando no ... menu de excedentes ao lado da guia e escolhendo abrir, que usará o contentUrl para carregar a guia dentro do cliente móvel do Microsoft Teams.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.

gaveta de aplicativos móveis

Considerações de desenvolvedor para suporte móvelDeveloper considerations for mobile support

Ao criar um aplicativo que inclua uma guia, você precisa considerar (e testar) como sua guia funcionará nos clientes do Microsoft Teams Android e iOS.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. As seções a seguir descrevem alguns dos principais cenários que você precisa considerar.The sections below outline some of the key scenarios you need to consider.

Testando clientes móveisTesting on mobile clients

Você precisa validar que sua guia funciona corretamente em dispositivos móveis de vários tamanhos e qualidades.You need to validate that your tab functions properly on mobile devices of various sizes and qualities. Para dispositivos Android, você pode usar o devtools para depurar sua guia enquanto estiver sendo executado.For Android devices you can use the DevTools to debug your tab while it is running. Recomendamos que você teste em dispositivos de desempenho alto e baixo, bem como em um Tablet.We recommend that you test on both high and low performing devices, as well as on a tablet.

Design responsivoResponsive design

Como sua guia pode ser aberta em dispositivos com uma ampla variedade de tamanhos de tela, é necessário seguir princípios de design responsivos .Because your tab can be opened on devices with a wide range of screen sizes, it needs to follow responsive design principles. Todas as construções de chave devem estar acessíveis em dispositivos móveis, e os modos de exibição não devem ser distorcidos.All of the key constructs should be accessible on mobile devices, and the views should not be distorted. Verifique se a guia é carregada em um dispositivo móvel, se todos os botões e links estão facilmente acessíveis usando a navegação baseada em Finger.Ensure that when your tab is loaded on a mobile device, all buttons and links are easily accessible using finger-based navigation.

AutenticaçãoAuthentication

Para que a autenticação funcione em clientes móveis, você deve atualizar o SDK do teams JS para pelo menos a versão 1.4.1.For authentication to work on mobile clients, you must upgrade you Teams JS SDK to at least version 1.4.1.

Baixa largura de banda & conexões intermitentesLow bandwidth & intermittent connections

Os clientes móveis precisam funcionar regularmente com baixa largura de banda e conexões intermitentes.Mobile clients regularly need to function with low bandwidth and intermittent connections. Seu aplicativo deve lidar com os tempos limite de forma adequada fornecendo uma mensagem contextual para o usuário.Your app should handle any timeouts appropriately by providing a contextual message to the user. Você também deve fazer os indicadores de progresso do usuário para fornecer comentários aos seus usuários para todos os processos de execução demorada.You should also user progress indicators to provide feedback to your users for any long-running processes.

Considerações de design para dispositivos móveisDesign considerations for mobile

Nossa plataforma móvel permite que os aplicativos sejam uma experiência de imersão com o conteúdo do aplicativo tirando toda a tela da navegação do teams principal.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. Para criar uma experiência de imersão que se ajuste perfeitamente no cliente Microsoft Teams, siga as diretrizes abaixo.To create an immersive experience that fits seamlessly within the Microsoft Teams client, follow the guidelines below.

LayoutsLayouts

Escolher o layout correto para sua guia é importante.Choosing the correct layout for your tab is important. Considere o tipo de informação que você está apresentando e escolha um layout que a organize para facilitar o consumo.You should consider the kind of information you're presenting, and choose a layout that organizes it for easy consumption. Algumas opções potenciais estão descritas abaixo.Some potential options are outlined below.

Tela únicaSingle canvas

Esta é uma grande área onde o trabalho é concluído.This is one large area where work gets done. O aplicativo wiki segue esse padrão.The Wiki app follows this pattern. Se você tiver um aplicativo que não separa o conteúdo em componentes menores, isso seria um bom ajuste.If you have an app that doesn’t separate content into smaller components this would be a good fit.

layout de tela única

ListarList

As listas são ótimas para classificar e filtrar grandes quantidades de dados e são excelentes para manter as coisas mais importantes na parte superior.Lists are great for sorting and filtering large quantities of data and are great at keeping the most important things at the top. É útil usar colunas classificável.It is helpful to use sortable columns. As ações podem ser adicionadas a cada item de lista no menu de reticências.Actions can be added to each list item under the ellipsis menu.

layout de lista

EncaixeGrid

As grades são úteis para mostrar elementos que são altamente visuais.Grids are useful for showing elements which are highly visual. Ele ajuda a incluir um filtro ou controle de pesquisa na parte superior.It helps to include a filter or search control at the top.

layout de grade

Guias com bots em dispositivos móveisTabs with bots on mobile

Veja a seguir um exemplo de aplicativo pessoal que contém duas guias estáticas e um bot.The below is an example personal app that contains two static tabs and a bot.

guias e bots em dispositivos móveis

Componentes da interface de usuárioUI Components

Paletas de coresColor palettes

Usar nossa paleta neutra aprovada para planos de fundo, notificações, texto e botões ajudará seu aplicativo a se sentir mais em casa no Microsoft Teams.Using our approved neutral palette for backgrounds, notifications, text, and buttons will help your app feel more at home in Teams. Como o Microsoft Teams Mobile tem dois temas de cor (claro e escuro), é uma boa ideia garantir que seu aplicativo fique ótimo em ambos.Since Teams mobile has two colour themes (light and dark), it’s a good idea to make sure your app looks great in both.

Cor claraLight color

paleta de cores claras

Cor escuraDark color

paleta de cores escuras

Botões e controlesButtons and controls

A maneira como os botões são estilizados ajuda a comunicar o tipo de ação que eles disparam.The way buttons are styled helps communicate what kind of action they trigger. Mantemos uma ampla variedade de botões formatados para mostrar diferentes níveis de ênfase.We maintain a wide range of buttons that are formatted to show different levels of emphasis. Os botões podem ter texto, um ícone ou uma combinação de texto e um ícone.Buttons can have text, an icon, or a combination of text and an icon. Para comunicar diferentes níveis em uma hierarquia, projetamos os botões principal e secundário dentro de cada categoria.To communicate different levels in a hierarchy, we designed primary and secondary buttons within each category.

imagem de botões

controles de seleção

Chiclets e pills

TipografiaTypography

A tipografia deve ser clara e proposital.Typography should be clear and purposeful. Enfatize informações importantes e evite usar várias fontes e tamanhos para reduzir a confusão.Emphasize important information and avoid using multiple fonts and sizes to reduce confusion. Recomendamos o uso de maiúsculas e minúsculas e evitar o uso de todos os Caps para a localização e a legibilidade.We recommend using sentence case and avoiding the usage of all caps for localization and legibility.

Typograph móvel

Campos e submenusFields and Flyouts

Os campos são áreas onde os usuários podem inserir texto.Fields are areas where users can input text. Os submenus são mais leves do que os diálogos e aparecem no painel superior.Flyouts are more lightweight than dialogs, and appear from the top pane.

Controles de listaList controls

controles de lista móvel

Controles de campoField controls

controles de campo móvel