Определение значков и цвета темы

Статья
04/04/2023

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

Определение значков

В Windows приложения узнаваемы для пользователей по значкам. Значки отображаются на панели задач, в меню "Пуск" и в других местах, например в параметрах системы.

PWA может настроить файлы образов, которые операционная система должна использовать для отображения значка в различных местах. В зависимости от контекста ос можно предоставить несколько образов.

В файле манифеста веб-приложения значки приложений определяются с помощью icons элемента:

{
    "icons": [
        {
            "src": "/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

Каждый значок в массиве icons должен иметь по крайней src мере свойства и sizes . Значок также может иметь type свойства и purpose .

Свойство	Описание
`src`	Путь к файлу изображения, который может быть относительным путем из корневой папки приложения или абсолютным URL-адресом.
`sizes`	Разделенный пробелами список размеров, для чего можно использовать соответствующее изображение.
`type`	Необязательная подсказка для операционной системы для быстрого определения типа образа.
`purpose`	Необязательное указание, чтобы помочь ОС выбрать правильное изображение значка в зависимости от контекста. Значение может быть `monochrome`, `maskable`или `any`.

Дополнительные сведения об элементе значков.

Размеры изображений значков

PWA можно улучшить в Windows, предоставив изображения с определенными измерениями в манифесте веб-приложения. Рекомендуется выбрать один из следующих вариантов:

Уровень 1: (поддержка базовых образов: 512x512). Это базовый образ, из которого создаются отсутствующие образы.
Уровень 2: (плитки). На этом уровне манифест веб-приложения содержит изображения плиток для шкалы отображения по умолчанию (1x). Каждое из изображений должно быть в формате PNG и иметь any назначение. Ниже приведен список рекомендуемых изображений и размеров.
- 44x44 — значок приложения
- 71x71 — небольшая плитка
- 150x150 — средняя плитка
- 310x150 — широкая плитка
- 310x310 — большая плитка
- 50x50 — логотип store
- 620x300 — экран-заставка
Уровень 3. (плитки с масштабами отображения). На этом уровне манифест веб-приложения должен содержать изображения плиток для всех размеров шкалы экрана Windows. Масштаб отображения — это конфигурация пользователя в Windows (пользователи могут изменить ее, перейдя в раздел Параметры>Масштаб дисплея>). Значки манифеста веб-приложения должны содержать изображения со следующими измерениями:
- 44x44 — значок приложения
- 55x55 — значок приложения, масштаб отображения 1,25x
- 66x66 — значок приложения 1.5x для отображения шкалы
- 88x88 — значок приложения, 2x шкала отображения
- 176x176 — значок приложения, 4x шкала отображения
- 71x71 — небольшая плитка
- 89x89 — небольшая плитка 1,25x шкала отображения
- 107x107 — небольшая плитка 1,5x шкала отображения
- 142 x 142 — небольшая плитка, 2x шкала дисплея
- 284x284 — небольшая плитка, 4x шкала дисплея
- 150x150 — средняя плитка
- 188 x 188 — средняя плитка 1,25x шкала отображения
- 225x225 — средняя плитка 1,5x шкала отображения
- 300x300 — средняя плитка, 2x шкала отображения
- 600x600 — средняя плитка, 4x шкала отображения
- 310x150 — широкая плитка
- 388 x 188 — широкая плитка 1,25x
- 465x225 — широкая плитка 1,5x шкала дисплея
- 620x300 — широкая плитка, 2x шкала отображения
- 1240x600 — широкая плитка, 4x шкала отображения
- 310x310 — большая плитка
- 388x388 — масштаб отображения большой плитки 1,25x
- 465x465 — масштаб отображения большой плитки 1,5x
- 620x620 — большая плитка, 2x шкала отображения
- 1240x1240 — масштаб отображения большой плитки 4x
- 50x50 — плитка хранилища
- 63 x 63 — хранение плитки 1,25x
- 75x75 — хранение плитки 1,5x масштаба отображения
- 100x100 — храните плитку в 2x шкале отображения
- 200x200 — хранить плитку в 4-х масштабах
- 620x300 — экран-заставка
- 775x375 — масштаб экрана-заставки 1,25x
- 930 x 450 — экран-заставка 1,5x шкала дисплея
- 1240x600 — экран-заставка, 2x шкала дисплея
- 2480x1200 — экран-заставка, 4x шкала дисплея
Уровень 4 (плитки, масштабы дисплея и целевые размеры). На этом уровне вы предоставляете изображения для плиток с масштабами отображения и изображениями целевого размера для отображения на различных поверхностях Windows, включая панель задач, меню "Пуск", диспетчер задач, переключатель задач ALT+TAB и многое другое. Это обеспечивает наилучший интерфейс для пользователей, но также требует наибольших усилий разработчика. Значки манифеста веб-приложения должны содержать изображения со следующими измерениями:
- 44x44 — значок приложения
- 55x55 — значок приложения, масштаб отображения 1,25x
- 66x66 — значок приложения 1.5x для отображения шкалы
- 88x88 — значок приложения, 2x шкала отображения
- 176x176 — значок приложения, 4x шкала отображения
- 71x71 — небольшая плитка
- 89x89 — небольшая плитка 1,25x шкала отображения
- 107x107 — небольшая плитка 1,5x шкала отображения
- 142 x 142 — небольшая плитка, 2x шкала дисплея
- 284x284 — небольшая плитка, 4x шкала дисплея
- 150x150 — средняя плитка
- 188 x 188 — средняя плитка 1,25x шкала отображения
- 225x225 — средняя плитка 1,5x шкала отображения
- 300x300 — средняя плитка, 2x шкала отображения
- 600x600 — средняя плитка, 4x шкала отображения
- 310x150 — широкая плитка
- 388 x 188 — широкая плитка 1,25x
- 465x225 — широкая плитка 1,5x шкала дисплея
- 620x300 — широкая плитка, 2x шкала отображения
- 1240x600 — широкая плитка, 4x шкала отображения
- 310x310 — большая плитка
- 388x388 — масштаб отображения большой плитки 1,25x
- 465x465 — масштаб отображения большой плитки 1,5x
- 620x620 — большая плитка, 2x шкала отображения
- 1240x1240 — масштаб отображения большой плитки 4x
- 50x50 — плитка хранилища
- 63 x 63 — хранение плитки 1,25x
- 75x75 — хранение плитки 1,5x масштаба отображения
- 100x100 — храните плитку в 2x шкале отображения
- 200x200 — хранить плитку в 4-х масштабах
- 620x300 — экран-заставка
- 775x375 — масштаб экрана-заставки 1,25x
- 930 x 450 — экран-заставка 1,5x шкала дисплея
- 1240x600 — экран-заставка, 2x шкала дисплея
- 2480x1200 — экран-заставка, 4x шкала дисплея
- 16x16 — целевой размер для панели задач, меню "Пуск", диспетчера задач
- 20x20 — целевой размер для панели задач, меню "Пуск", диспетчера задач
- 24x24 — целевой размер для панели задач, меню "Пуск", диспетчера задач
- 30x30 — целевой размер для панели задач, меню "Пуск", диспетчера задач
- 32x32 — целевой размер панели задач, меню "Пуск", диспетчера задач
- 36x36 — целевой размер для панели задач, меню "Пуск", диспетчера задач
- 40x40 — целевой размер для панели задач, меню "Пуск", диспетчера задач
- 44x44 — целевой размер для панели задач, меню "Пуск", диспетчера задач
- 48x48 — целевой размер для панели задач, меню "Пуск", диспетчера задач
- 60x60 — целевой размер для панели задач, меню "Пуск", диспетчера задач
- 64x64 — целевой размер для панели задач, меню "Пуск", диспетчера задач
- 72x72 — целевой размер для панели задач, меню "Пуск", диспетчера задач
- 80x80 — целевой размер для панели задач, меню "Пуск", диспетчера задач
- 96x96 — целевой размер для панели задач, меню "Пуск", диспетчера задач
- 256x256 — целевой размер для панели задач, меню "Пуск", диспетчера задач

Сводка на уровне изображения

Рассмотрим, например, как значок приложения может отображать разное содержимое в зависимости от доступной поверхности:

Небольшая поверхность: значок приложения (44x44) на панели задач с небольшим сокращенным логотипом:

Большая поверхность: средняя плитка (150x150) в меню "Пуск" с полным логотипом приложения:

Широкая поверхность: широкая плитка в меню "Пуск", где отображается более сочлененный значок приложения:

Обратите внимание на изменение содержимого значка. Это возможно только благодаря использованию более высоких уровней поддержки значков. Мы рекомендуем разработчикам выбирать более высокие уровни, чтобы обеспечить оптимальное взаимодействие с пользователями Windows.

Описания значков

Ниже вы найдете описание каждого значка приложения и их отображение в Windows.

Значок обычного приложения, отображаемый в меню "Пуск", на панели задач или в диспетчере задач.

44x44
55x55 (масштаб 1,25x)
66 x 66 (масштаб 1,5x)
88x88 (2x scale)
176x176 (4x scale)

Небольшая плитка отображается в меню "Пуск", когда пользователь устанавливает для плитки приложения небольшой размер.

71x71
89x89 (масштаб 1,25x)
107x107 (масштаб 1,5x)
142x142 (2x scale)
284x284 (4x scale)

Значок средней плитки отображается в меню "Пуск", когда пользователь задает плитку приложения на средний размер.

150x150
188x188 (масштаб 1,25x)
225x225 (масштаб 1,5x)
300x300 (2x scale)
600x600 (4x scale)

Значок широкой плитки отображается в меню "Пуск", когда пользователь задает широкий размер плитки приложения.

310x150
388x188 (масштаб 1,25x)
465x225 (масштаб 1,5x)
620x300 (2x scale)
1240x600 (4x scale)

Значок большой плитки отображается в меню "Пуск", когда пользователь задает плитку приложения в большой размер.

310x310
388x388 (масштаб 1,25x)
465x465 (масштаб 1,5x)
620x620 (2x scale)
1240x1240 (4x scale)

Значок логотипа магазина отображается в установщике приложений, Центре партнеров Windows, параметре "Сообщить о приложении" в Магазине и параметре "Написать отзыв" в Магазине.

50x50
63 x 63 (масштаб 1,25x)
75x75 (масштаб 1,5x)
100x100 (2x scale)
200x200 (4x scale)

Ресурс экрана-заставки отображается в качестве экрана-заставки для приложения. Сейчас поддерживается только в классическом пакете. В будущем мы также можем добавить поддержку современного пакета размещенных приложений.

620x300
775x375 (масштаб 1,25x)
930x450 (масштаб 1,5x)
1240x600 (2x scale)
2480x1200 (4x scale)

Изображения целевого размера

Помимо стандартных размеров коэффициентов масштабирования, описанных выше, рекомендуется также создавать ресурсы целевого размера. Мы называем эти ресурсы целевым размером, так как они предназначены для определенных размеров, например 16 пикселей, а не для конкретных коэффициентов масштабирования, таких как 400. Ресурсы целевого размера предназначены для поверхностей Windows, которые не используют систему масштабирования плато.

Например, в параметре Приложения & функции Windows используются значки приложений с определенными размерами.

16x16 (рекомендуется)
20x20
24x24 (рекомендуется)
30x30
32x32 (рекомендуется)
36x36
40x40
48x48 (рекомендуется)
60x60
64x64
72x72
80x80
96x96
256x256 (рекомендуется)

Выбор цвета темы

В Windows PWA имеют собственное окно приложения, в строке заголовка, содержащей имя приложения и систему значков закрытия, развертки и свертывания .

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

На следующем рисунке показано, как выглядит строка заголовка PWA, если не используется цвет темы, а цвет темы соответствует main цвету приложения:

Чтобы определить цвет темы, используйте элемент манифеста theme_color веб-приложения:

{
    "theme_color": "#0d4c73"
}

Отдельные веб-страницы также могут определять цвет темы с помощью мета-тегаtheme-color. Если этот мета-тег присутствует на странице, его определенный цвет переопределяет цвет, найденный в манифесте веб-приложения.

Отображение содержимого приложения в области заголовка

Содержимое приложения можно отобразить в области заголовка строки с помощью функции наложение элементов управления окнами. См . раздел Отображение содержимого в области заголовка с помощью наложения элементов управления окнами.

Поделиться через

Определение значков и цвета темы