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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шрифт

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

SVG-файл

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

Объект Geometry

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

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

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

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

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

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

Вы также можете анимировать значок, чтобы привлечь внимание к компоненту пользовательского интерфейса, например кнопке "Далее" в учебнике, или отобразить действие, связанное со значком, в интересной и интересной форме. Дополнительные сведения см. в разделе 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 .

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

Похожие статьи

• Значки приложений и логотипы
• AnimatedIcon