Вкладки на мобильных устройствахTabs on mobile

Примечание

Если вкладка канал и группа отображается в клиентах Teams для мобильных устройств, то setSettings() конфигурация должна иметь значение для websiteUrl Свойства (см. ниже).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).

Настраиваемые вкладки могут быть частью канала, группового чата или личного приложения (приложения, содержащие статические вкладки и/или односторонняя робот).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).

Персональные приложения доступны на мобильных клиентах в почтовом ящике приложения.Personal apps are available on mobile clients in the app drawer. Приложение можно установить только с настольного компьютера или из веб-клиента и может занимать до 24 часов на мобильных клиентах.The app can only be installed from a desktop or web client, and can take up to 24 hours to appear on mobile clients.

Вкладки каналов также доступны на мобильных устройствах.Channel tabs are also available on mobile. Поведение по умолчанию в настоящее время используется websiteUrl для запуска вкладки в окне браузера.The default behavior is currently to use your websiteUrl to launch your tab in a browser window. Тем не менее, они могут загружаться на мобильном клиенте, если щелкнуть ... меню переполнения рядом с вкладкой и выбрать команду Открыть, которая будет использовать contentUrl для загрузки вкладки в клиенте Teams Mobile.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.

Доступ к личным вкладкамAccessing personal tabs

На следующем рисунке показано, как получить доступ к вкладке личные сведения на мобильном устройстве.The following illustration shows how you access a personal tab on mobile.

Иллюстрация, на которой показан входной ящик приложений Teams.

Доступ к вкладкам каналовAccessing channel tabs

На следующем рисунке показано, как получить доступ к вкладке канала на мобильном устройстве.The following illustration shows how you access a channel tab on mobile.

Иллюстрация, на которой показан входной ящик приложений Teams.

Особенности дизайнаDesign considerations

Наша мобильная платформа позволяет приложениям работать с содержимым приложения, разнимая все экраны, разнимая основные возможности навигации в Teams.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. Чтобы создать иммерсивное взаимодействие с Teams, следуйте этим рекомендациям.To create an immersive experience that fits with Teams, follow these guidelines.

Адаптивный дизайнResponsive design

Так как вкладка может быть открыта на устройствах с широким размером экрана, она должна соответствовать принципам создания отклика .Because your tab can be opened on devices with a wide range of screen sizes, it needs to follow responsive design principles. Все основные конструкции должны быть доступны на мобильных устройствах, и представления не должны искажаться.All of the key constructs should be accessible on mobile devices, and the views should not be distorted. Убедитесь, что когда вкладка загружена на мобильном устройстве, все кнопки и ссылки легко доступны с помощью навигации на основе пальца.Ensure that when your tab is loaded on a mobile device, all buttons and links are easily accessible using finger-based navigation.

макеты;Layouts

Важно выбрать правильный макет для вкладки.Choosing the correct layout for your tab is important. Следует учитывать тип данных, которые вы предоставляете, и выбирать макет, который организует его для простоты использования.You should consider the kind of information you're presenting, and choose a layout that organizes it for easy consumption. Ниже приведены некоторые возможные параметры.Some potential options are outlined below.

Один холстSingle canvas

Это одна большая область, в которой выполняется работу.This is one large area where work gets done. Приложение Teams соответствует этому шаблону.The Teams Wiki app follows this pattern. Если у вас есть приложение, не разделяее контент на небольшие компоненты, это будет очень полезно.If you have an app that doesn’t separate content into smaller components this would be a good fit.

Иллюстрация, на которой показан входной ящик приложений Teams.

СписокList

Списки отлично подходят для сортировки и фильтрации больших объемов данных и прекрасно подходят для наиболее важных вещей в верхней части.Lists are great for sorting and filtering large quantities of data and are great at keeping the most important things at the top. Рекомендуется использовать сортируемый столбцы.It is helpful to use sortable columns. Действия можно добавлять к каждому элементу списка в меню с многоточием.Actions can be added to each list item under the ellipsis menu.

Иллюстрация, на которой показан входной ящик приложений Teams.

ТаблицеGrid

Сетки удобно использовать для отображения элементов, которые являются очень визуальными.Grids are useful for showing elements which are highly visual. В верхней части можно включить фильтр или элемент управления поиском.It helps to include a filter or search control at the top.

Иллюстрация, на которой показан входной ящик приложений Teams.

Вкладки с боты на мобильных устройствахTabs with bots on mobile

Ниже приведен пример личного приложения с вкладками и Bot.The following example is a personal app that has tabs and a bot.

Иллюстрация, на которой показан входной ящик приложений Teams.

Компоненты пользовательского интерфейсаUI components

Цветовые палитрыColor palettes

Использование нашей утвержденной нейтральной палитры для фоновых рисунков, уведомлений, текста и кнопок поможет вам в работе над приложением в Teams.Using our approved neutral palette for backgrounds, notifications, text, and buttons will help your app feel more at home in Teams. Так как в Teams есть две цветные темы (светло-и темная), рекомендуется убедиться в том, что ваше приложение отлично выглядит как.Since Teams mobile has two colour themes (light and dark), it’s a good idea to make sure your app looks great in both.

Светлый цветLight color

Палитра "светлый цвет"

Темный цветDark color

Темная цветовая палитра

Кнопки и элементы управленияButtons and controls

Способ оформления кнопок позволяет сообщить, какие действия они вызывают.The way buttons are styled helps communicate what kind of action they trigger. Мы поддерживаем широкий спектр кнопок, отформатированных для отображения различных уровней выделения.We maintain a wide range of buttons that are formatted to show different levels of emphasis. У кнопок может быть текст, значок или комбинация текста и значок.Buttons can have text, an icon, or a combination of text and an icon. Для связи разных уровней в иерархии мы разработали основные и дополнительные кнопки в каждой категории.To communicate different levels in a hierarchy, we designed primary and secondary buttons within each category.

КнопкиButtons

Основные и дополнительные кнопки.Primary and secondary buttons.

изображение кнопок

Элементы управления выборомSelection controls

Переключатели, флажки и переключатели.Radio buttons, checkboxes, and toggles.

элементы управления выбором

Чиклетс и пиллсChiclets and pills

чиклетс и пиллс

Шрифтовое оформлениеTypography

Оформление должно быть ясным и пурпосефулм.Typography should be clear and purposeful. Обратите внимание на важную информацию и Избегайте использования нескольких шрифтов и размеров для сокращения путаницы.Emphasize important information and avoid using multiple fonts and sizes to reduce confusion. Рекомендуется использовать регистр предложений и избегать использования всех политик для локализации и разборчивости.We recommend using sentence case and avoiding the usage of all caps for localization and legibility.

Мобильные типограф

Поля и всплывающие окнаFields and flyouts

Поля — это области, в которых пользователи могут вводить текст.Fields are areas where users can input text. Всплывающие окна являются более легковесными, чем диалоговые окна, и отображаются в верхней области.Flyouts are more lightweight than dialogs and appear from the top pane.

Список элементов управленияList controls

элементы управления списком для мобильных устройств

Элементы управления полямиField controls

Мобильные элементы управления поля

Рекомендации для разработчиковDeveloper considerations

При создании приложения, включающего вкладку, необходимо учесть (и протестировать), как эта вкладка будет работать как в клиентах Android, так и в Microsoft Teams для 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. В разделах ниже представлены некоторые ключевые сценарии, которые необходимо учитывать.The sections below outline some of the key scenarios you need to consider.

Тестирование мобильных клиентовTesting on mobile clients

Необходимо убедиться, что вкладка правильно функционирует на мобильных устройствах различных размеров и качеств.You need to validate that your tab functions properly on mobile devices of various sizes and qualities. Для устройств с Android можно использовать девтулс для отладки вкладки во время ее выполнения.For Android devices, you can use the DevTools to debug your tab while it is running. Рекомендуется протестировать как высококачественные, так и низкие устройства, а также на планшете.We recommend that you test on both high and low performing devices, as well as on a tablet.

Проверка подлинностиAuthentication

Для проверки подлинности на мобильных клиентах необходимо обновить пакет SDK для Teams JavaScript по крайней мере до версии 1.4.1.For authentication to work on mobile clients, you must upgrade you Teams JavaScript SDK to at least version 1.4.1.

Низкой пропускной способности и периодических подключенийLow bandwidth and intermittent connections

Мобильным клиентам часто приходится работать с низкой пропускной способностью и периодическими подключениями.Mobile clients regularly need to function with low bandwidth and intermittent connections. Ваше приложение должно соответствующим образом обрабатывать все времена ожидания, предоставляя пользователю контекстное сообщение.Your app should handle any timeouts appropriately by providing a contextual message to the user. Кроме того, вы можете сообщить пользователям о длительных процессах.You should also user progress indicators to provide feedback to your users for any long-running processes.