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

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

Макет

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

• Ознакомьтесь с полным текстом рекомендаций по макетам (Figma)
• Реализация макета (Fluent UI)

Аватары

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

Ознакомьтесь с полным текстом рекомендаций по аватарам (Figma)

Значки

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

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

• Получите последнюю версию набора значков Fluent (Figma)
• Реализация значков (Fluent UI)

Тип

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

• Ознакомьтесь с полным текстом рекомендаций по шрифтам (Figma)
• Реализация оформления (Fluent UI)

цвета;

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

• Ознакомьтесь с полным текстом рекомендаций по цветам и доступным цветовым маркерам (Figma)
• Реализация цветов (Fluent UI)

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

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

• Ознакомьтесь с полным текстом рекомендаций по форме и высоте (Figma)
• Реализация формы и высоты (Fluent UI)

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

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

Ознакомьтесь с полным текстом рекомендаций по текстам и контенту, включая написание текстов для ботов (Figma)