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

Пример значка облака в сетке.

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

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

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

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

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

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

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

В этой статье описываются значки в вашем приложении. Дополнительные сведения о значках за пределами приложения (значки приложений) см. в статье Iconography in Windows (Iconography in Windows ).

Узнайте, когда следует использовать значки

Значки позволяют сэкономить место, но когда их следует использовать?

Снимок экрана: зеленая панель с зеленой галочкой и словом Do.Снимок экрана: значки

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

Снимок экрана: красная полоса с красным знаком X и словом Снимок экрана: значки

Используйте значок, если он уже существует для концепции, которую вы хотите представить. (Чтобы узнать, существует ли значок, просмотрите список значков Segoe.)

Снимок экрана: зеленая панель с зеленой галочкой и словом Do.Снимок экрана: простой и знакомый значок корзины.

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

Снимок экрана: красная полоса с красным знаком X и словом Снимок экрана: сложный и незнакомый значок корзины.

Не используйте значок, если его значение непонятно или его пояснение требует сложной формы.

Используйте правильный тип значка

Существует множество способов создания значка. Вы можете использовать символьный шрифт, например Segoe MDL2 Assets. Вы можете создать собственное изображение на основе вектора. Вы можете даже использовать растровое изображение, хотя это не рекомендуется. Ниже приведена сводка способов добавления значка в приложение.

Предопределенный значок

Корпорация Майкрософт предоставляет более 1000 значков в виде шрифта Segoe MDL2 Assets. Получение значка из шрифта может быть не интуитивно понятным, но технология отображения шрифтов Windows означает, что эти значки будут выглядеть четко и резко на любом дисплее, в любом разрешении и в любом размере. Инструкции см. в разделе Значки segoe MDL2 Assets.

Снимок экрана: большая группа стандартных значков Segoe.

Шрифт

Вам не нужно использовать шрифт Segoe MDL2 Assets. Вы можете использовать любой шрифт, установленный пользователем в своей системе, например Wingdings или Webdings.

Снимок экрана: большая группа значков Wingdings.

SVG-файл

Ресурсы масштабируемой векторной графики (SVG) идеально подходят для значков, так как они всегда выглядят резко при любом размере или разрешении. Большинство приложений для рисования поддерживает экспорт в SVG-файлы. Инструкции см. в разделе SVGImageSource.

Анимация развертывания и сжатия значка корзины SVG.

Объект Geometry

Подобно SVG-файлам геометрии являются векторными ресурсами, поэтому они всегда выглядят четко. Однако создать геометрию не так просто, так как вам необходимо отдельно указать все точки и кривые. Это хороший выбор, только если вам нужно изменить значок во время работы приложения (например, чтобы анимировать его). Инструкции см. в разделе Синтаксис команд перемещения и рисования.

Снимок экрана: создание объекта geometry.

Растровое изображение

Вы можете использовать растровое изображение (например, PNG, GIF или JPEG), хотя мы не рекомендуем его использовать.

Растровые изображения создаются в определенном размере, поэтому их необходимо масштабировать в зависимости от требуемого размера значка и разрешения экрана. При уменьшении (сжатии) изображения могут показаться размытыми. При вертикальном масштабировании может отображаться блочное и пиксельное. Если требуется использовать растровое изображение, рекомендуется использовать ФОРМАТ PNG или GIF поверх JPEG.

Снимок экрана: красная полоса с X и словом Снимок экрана: пиксельный точечный значок корзины.

Заставить значок что-то сделать

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

Снимок экрана: панель команд со значками

Вы также можете анимировать значок, чтобы привлечь внимание к компоненту пользовательского интерфейса, например кнопке "Далее" в учебнике, или для отображения действия, связанного со значком, интересным и интересным образом. Дополнительные сведения см. в разделе AnimatedIcon.

Создание кнопки значка

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

Вот один из способов добавления значка к кнопке:

Шаг 1
Задайте для семейства Segoe MDL2 Assets шрифтов кнопки значение , а для свойства содержимого — значение Юникода глифа, который вы хотите использовать:

Снимок экрана: значок для кнопки воспроизведения.

<Button FontFamily="Segoe MDL2 Assets" Content="&#xE102;" />

Шаг 2
Используйте один из объектов элемента значка: BitmapIcon, FontIcon, PathIcon, ImageIcon или SymbolIcon. Этот метод предоставляет дополнительные типы значков на выбор. Он также позволяет объединять значки и другие типы содержимого, например текст, при необходимости.

Снимок экрана: значок кнопки воспроизведения с текстом

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play" />
        <TextBlock>Play the movie</TextBlock>
    </StackPanel>
</Button>

Создание ряда значков на панели команд

Если у вас есть ряд команд, которые идут вместе, например вырезать, копировать и вставить, или набор команд рисования для программы редактирования фотографий, поместите их вместе на панели команд. На панели команд размещается одна или несколько кнопок панели приложения или кнопок-переключателей панели приложения, каждая из которых представляет действие. Каждая кнопка имеет свойство Icon , которое используется для управления отображаемым значком. Существует множество способов указать значок.

Пример панели команд со значками.

Самый простой способ — использовать список предопределенных значков. Просто укажите имя значка, например Назад или Остановка, и система нарисует его:

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>
</CommandBar>

Полный список имен значков см. в справочнике по перечислению символов.

Есть и другие способы предоставления значков для кнопки на панели команд:

  • FontIcon: значок основан на глифе из указанного семейства шрифтов.
  • BitmapIcon. Значок основан на файле растрового изображения с указанным универсальным кодом ресурса (URI).
  • PathIcon: значок основан на данных Path .
  • ImageIcon: значок основан на типе файла изображения, который поддерживает класс Image .

Дополнительные сведения о панели команд см. в статье Панель команд .