Иконография в Windows

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

Windows 11 использует три типа значков: приложение, система и тип файла. В этой статье рассматриваются первые два.

Подсказка

В этой статье описывается, как Fluent Design language применяется к приложениям Windows. Дополнительные сведения см. в разделе Fluent Design — Iconography.

Значки приложения

Абстрактный значок для гипотетического картографического приложения.

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

Значки приложений должны представлять основные функциональные возможности приложения через метафору. Дополнительные сведения о проектировании и создании значка приложения см. в разделе "Значки приложений".

Системные значки

Значок тележки для покупок из набора Segoe Fluent Icons.

Используйте системные значки внутри пользовательского интерфейса приложения для таких элементов, как панели команд, индикаторы навигации или состояния. Windows 11 представлен новый шрифт значка системы, Segoe Fluent Icon. Этот новый шрифт дополняет geometry в Windows 11.

Все глифы в Segoe Fluent Icons выполнены в монолинейном стиле. Это означает, что они создаются одним штрихом толщиной 1 epx.

Глифы в Segoe Fluent Icons следуют трем эстетическим принципам.

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

Дополнительные сведения об использовании значков в пользовательском интерфейсе приложения см. в разделе Icons в приложениях Windows.

Размер значка

Значок принтера правильного размера.

Метрики шрифта для Значков Segoe Fluent соответствуют тому, как конструкторы и разработчики привыкли работать с SVG и значками растрового изображения.

Каждый глиф шрифта разработан таким образом, чтобы пространство области значка было квадратным em. Значок с размером шрифта 16 epx эквивалентен значку 16x16-epx, чтобы сделать размер и размещение более предсказуемым.

Модификаторы

Вы можете визуально создать глифы системных значков, объединив базовый значок с значком модификатора.

Базовые значки являются основным элементом визуальной метафоры . Базовые элементы должны занимать весь объем значка.

Значки модификатора изменяют значение базового значка. Элементы модификатора должны размещаться в одном из нижних квадрантов области значка.

Значок файла.

Только базовый значок
Изначально значок листа бумаги передает концепцию файла.

Значок файла, поверх которого изображена стрелка вверх.

Значок базы + значок модификатора
Добавление стрелки вверх к значку файла изменяет значение значка для представления отправленного файла.

Наслоение

Метод наложения иконок — это техника, используемая для перекрытия двух символов. Мы рекомендуем использовать слой значков для создания другого состояния одного значка (например, активного или выбранного состояния).

Значок черно-белой папки и значок бежевой папки без контуров равен значку бежевой папки с черным контуром.

Локализация

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

Примеры

Откройте приложение WinUI 3 Gallery и ознакомьтесь с принципами иконографии

Значок коллекции WinUI 3 Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.
  • Last updated on