Система дизайна приложений Microsoft Teams

Быстрое изучение основ дизайна приложений Teams. Подробное руководство и примеры доступны в Комплекте пользовательского интерфейса Microsoft Teams (Figma).

Макет

В Teams используется макет в виде сетки, чтобы добиться согласованного и изящного взаимодействия между компонентами дизайна. Базовая единица измерения сетки равна 4 пикселям, благодаря чему обеспечивается согласованное масштабирование компонентов при любых размерах дисплея в Teams.

Схематическое изображение макета Teams.

Аватары

Аватар — это графическое представление человека, команды, бота или сущности в Teams. Группы аватаров часто используются, чтобы выразить проводящееся действие или показать состав участников, не занимая слишком много места по вертикали.

Схематическое изображение аватаров Teams.

Значки

Основной значок вашего приложения играет важнейшую роль в демонстрации вашего бренда пользователям Teams. Правильный дизайн значка также важен и для публикации вашего приложения в магазине Teams.

Также можно использовать во всем приложении значки Fluent UI:

Схематическое изображение значков Teams.

Тип

В Teams в качестве основного шрифта используется Segoe UI. Благодаря подбору различных размеров и начертаний шрифта образуется иерархия и обеспечивается удобочитаемость.

Схематическое изображение оформления Teams.

цвета;

Веб-приложение и классическое приложение Teams поддерживают тему по умолчанию (светлую), а также темную и высококонтрастную темы. Мобильное приложение Teams поддерживает светлую и темную темы. У каждой темы есть собственная цветовая схема.

Схематическое изображение цветов Teams.

Форма и высота

Для создания дополнительной иерархии в приложении можно использовать форму и высоту.

Схематическое изображение формы и высоты.

Тексты и контент

Чтобы ваше приложение органично вписывалось в Teams, в приложении следует соблюдать следующие стилистические принципы Майкрософт: доброжелательный и непринужденный стиль, четкое и ясное изложение материала, готовность прийти на помощь.

Схематическое изображение текстов и контента.