Примечание.
Для доступа к этой странице требуется авторизация. Вы можете попробовать войти или изменить каталоги.
Для доступа к этой странице требуется авторизация. Вы можете попробовать изменить каталоги.
В этой статье приведены рекомендации по созданию значков в экосистеме приложений, которые помогут дизайнерам и отправить правильный значок приложения. Соблюдение этих рекомендаций обеспечивает единообразие и баланс в экосистеме приложений и подчеркивает изображение значка приложения.
При отправке пакета приложения включите две версии значка приложения в формате PNG, значок цвета и значок структуры. Чтобы приложение прошло проверку в Microsoft Teams Store, эти значки должны соответствовать определенным требованиям к размеру. Следуйте приведенным ниже рекомендациям, чтобы убедиться, что значки приложений соответствуют стандартам Магазина Teams.
Значки приложений для Microsoft 365
Пакет приложения для любого приложения для Microsoft 365 должен содержать два значка, которые представляют расширение в нескольких местах, включая следующие:
- Приложение хранится в различных приложениях Microsoft 365, таких как магазин приложений Teams.
- Страница Управление приложениями , доступ к которому можно получить из различных приложений Microsoft 365.
- Панели приложений Teams, Outlook и приложения Microsoft 365 Copilot.
Один из них должен быть цветным значком, а другой — значком контура, и оба должны иметь формат PNG. Эти значки должны соответствовать определенным требованиям к размеру. В этой статье описаны требования и рекомендации по проектированию этих значков.
Сбалансированный макет
Значки предназначены для создания единообразного макета. Эти рекомендации помогут вам создать значок приложения.
Создание ресурсов
Microsoft 365 требуется три ресурса во время отправки приложения для создания значков.
| Счетчик | Описание |
|---|---|
| 1 | Полный формат PNG в формате 192 x 192 пикселей. Используйте полное пространство ресурсов в качестве фона. Он используется, например, в Магазине Teams или во всплывающих элементах. |
| 2 | Значок формата PNG по умолчанию или в формате rest в 32 x 32 пикселей. Этот значок используется в качестве состояния отдыха или по умолчанию на панели приложения и в других расположениях продукта. |
| 3 | Значок формата PNG с фокусом или нажатием на 32 x 32 пикселей. Этот значок используется в качестве состояния фокуса или нажатия на панели приложения и в других расположениях в продукте. |
Архитектура значка цвета
Размер значка цветового приложения должен составлять 192 x 192 пикселя. Если у вас есть значок логотипа, логотип должен поместиться в безопасной области 120 x 120 в центре.
Отправленный значок должен быть полным квадратом. Teams автоматически применяет маскирование для согласованных фигур значков в приложении.
Атрибуты значка
Цветные
Белый фон
Использование значка приложения
Ваши значки могут отображаться в других местах в приложениях Microsoft 365 в зависимости от типов расширений или возможностей, включенных в приложение для Microsoft 365. Ниже приведены некоторые примеры.
Личное приложение
Всплывающее меню приложения
Бот (представление канала)
Всплывающее окно расширения сообщений
Всплывающее меню приложений для собраний
U-bar собрания
Лучшие методики
При разработке значков приложения используйте следующие рекомендации. Изображения представляют, как значки отображаются в Teams.
Сделать. Следуйте рекомендациям для безопасной области (120 x 120)
Если у вас есть логотип, оставьте его в безопасной области 120 x 120 внутри значка формата PNG 192 x 192.
Не делать: значок больше, чем безопасная область
Ниже приведен пример логотипа внутри значка формата PNG, который не находится в безопасной области. Он создает неравномерное заполнение (отрицательное пространство) вокруг значка.
Сделать: укажите полный кровоточие для скругленными углами
Если у вас есть полное изображение с истеканием, просто отправьте квадратный формат PNG с разрешением 192 x 192. Углы скругляются динамически.
Не скругляйте углы значка
Не скругляйте углы. Отправить на идеальном квадрате в 192 x 192, углы скругляются динамически.
Сделать: отправить значок без границы
Граница добавляется автоматически. В этом случае просто отправьте формат PNG без границы, даже если он находится на белом фоне.
Не: добавление границы
Границы добавляются динамически. Если включить границу в формат PNG, это приведет к нежелательному дублированию на белом фоне.
Сделать: обеспечить достаточную контрастность
Убедитесь, что значок имеет достаточную контрастность по отношению к фону. Для обеспечения оптимальной доступности рекомендуется соотношение 4,5:1.
Не: увядать значок
Избегайте низкой контрастности значков. Убедитесь, что фон и значок, используемые в формате PNG, имеют достаточную контрастность.
Сделайте: повышение уровня бренда
Сосредоточьтесь на бренде, используя в качестве фона полный плоский цвет.
Не следует: избегайте размещения значка торговой марки в круге
Поднимите свой бренд, сохраняя значок бренда в безопасной области 96 x 96.
Do: сокращение длинных слов в значке приложения
Если у вас есть длинное имя приложения, попробуйте сократить его, чтобы его было проще читать при изменении размера значка до размера 32 x 32.
Не: добавление нескольких слов в значок приложения
Избегайте использования нескольких слов на значке. Невозможно прочитать текст, если значок имеет меньшие размеры, например 32 x 32 или 36 x 36.
Do: Create balance (96 x 96)
Повышайте свой бренд, сохраняя баланс. Придерживайтесь безопасной области 96 x 96 для чувства равновесия.
Не: Наклонять или растянуть значок
Держите значок в безопасной области. Не растягивайте значок в том или ином направлении.
Совместная работа с нами на GitHub
Источник этого содержимого можно найти на GitHub, где также можно создавать и просматривать проблемы и запросы на вытягивание. Дополнительные сведения см. в нашем руководстве для участников.
Platform Docs