Значки — Windows apps | Microsoft Learn
- Статья
- Чтение занимает 4 мин
Значки — это визуальный ярлык для действий, концепций или продуктов. Сжимая смысл в символьное изображение, значки могут преодолеть языковые барьеры и помочь сохранить ценный ресурс: пространство на экране.
Хорошие значки согласуются со шрифтовым оформлением и языком проектирования в целом. Они не смешивают метафоры, и они сообщают только то, что нужно, как можно быстрее и просто.
Значки могут отображаться в приложениях и за их пределами:
Значки в приложении
В приложении значки используются для представления действий, таких как копирование текста или переход на страницу параметров.
Значки за пределами приложения
За пределами приложения Windows использует значок для представления приложения в меню «Пуск» и на панели задач. Если пользователь закрепит приложение в меню «Пуск», на начальной плитке приложения может быть значок приложения. Значок приложения появится в строке заголовка, и вы можете создать экран-заставку с логотипом приложения.
В этой статье описываются значки в вашем приложении. Дополнительные сведения о значках за пределами приложения (значки приложений) см. в статье Iconography in Windows (Iconography in Windows ).
Узнайте, когда следует использовать значки
Значки позволяют сэкономить место, но когда их следует использовать?
Используйте значок для таких действий, как вырезать, скопировать, вставить и сохранить, а также для элементов в меню навигации.
Используйте значок, если он уже существует для концепции, которую вы хотите представить. (Чтобы узнать, существует ли значок, просмотрите список значков Segoe.
)
Используйте значок, если пользователю легко понять, что он означает, и это очевидно, даже если значок небольшого размера.
Не используйте значок, если его значение непонятно или его пояснение требует сложной формы.
Используйте правильный тип значка
Существует множество способов создания значка. Вы можете использовать символьный шрифт, например Segoe MDL2 Assets. Вы можете создать собственное изображение на основе вектора. Вы можете даже использовать растровое изображение, хотя это не рекомендуется. Ниже приведена сводка способов добавления значка в приложение.
Предопределенный значок
Корпорация Майкрософт предоставляет более 1000 значков в виде шрифта Segoe MDL2 Assets. Получение значка из шрифта может быть не интуитивно понятным, но технология отображения шрифтов Windows означает, что эти значки будут выглядеть четко и резко на любом дисплее, в любом разрешении и в любом размере. Инструкции см. в разделе Значки segoe MDL2 Assets.
Шрифт
Вам не нужно использовать шрифт Segoe MDL2 Assets. Вы можете использовать любой шрифт, установленный пользователем в своей системе, например Wingdings или Webdings.
SVG-файл
Объект Geometry
Подобно SVG-файлам геометрии являются векторными ресурсами, поэтому они всегда выглядят четко. Однако создать геометрию не так просто, так как вам необходимо отдельно указать все точки и кривые. Это хороший выбор, только если вам нужно изменить значок во время работы приложения (например, чтобы анимировать его). Инструкции см. в разделе Синтаксис команд перемещения и рисования.
Растровое изображение
Растровые изображения создаются в определенном размере, поэтому их необходимо масштабировать в зависимости от требуемого размера значка и разрешения экрана. При уменьшении (сжатии) изображения могут показаться размытыми. При вертикальном масштабировании может отображаться блочное и пиксельное. Если требуется использовать растровое изображение, рекомендуется использовать ФОРМАТ PNG или GIF поверх JPEG.
Заставить значок что-то сделать
После получения значка следующим шагом является его выполнение, связав его с командой или действием навигации. Лучший способ — добавить значок на кнопку или на панель команд.
Вы также можете анимировать значок, чтобы привлечь внимание к компоненту пользовательского интерфейса, например кнопке «Далее» в учебнике, или для отображения действия, связанного со значком, интересным и интересным образом. Дополнительные сведения см. в разделе AnimatedIcon.
Создание кнопки значка
Значок можно поместить на стандартную кнопку.
Так как вы можете использовать кнопки в самых разных местах, использование значка таким образом дает вам немного больше гибкости при отображении значка действия.
Вот один из способов добавления значка к кнопке:
Шаг 1
Задайте для семейства Segoe MDL2 Assets шрифтов кнопки значение , а для свойства содержимого — значение Юникода глифа, который вы хотите использовать:
<Button FontFamily="Segoe MDL2 Assets" Content="" />
Шаг 2
Используйте один из объектов элемента значка: BitmapIcon, FontIcon, PathIcon, ImageIcon или SymbolIcon. Этот метод предоставляет дополнительные типы значков на выбор. Он также позволяет объединять значки и другие типы содержимого, например текст, при необходимости.
<Button>
<StackPanel>
<SymbolIcon Symbol="Play" />
<TextBlock>Play the movie</TextBlock>
</StackPanel>
</Button>
Создание ряда значков на панели команд
Если у вас есть ряд команд, которые идут вместе, например вырезать, копировать и вставить, или набор команд рисования для программы редактирования фотографий, поместите их вместе на панели команд.
Самый простой способ — использовать список предопределенных значков. Просто укажите имя значка, например Назад или Остановка, и система нарисует его:
<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
Изменить значок Этот компьютер в Windows 10
В сегодняшней статье рассмотрим различные способы изменения значка “Этот компьютер” Windows 10.
Изменить значок “Этот компьютер” в параметрах системы
1. Откройте “Параметры значков рабочего стола”: в строке поиска или в меню выполнить (выполнить вызывается клавишами Win+R) напишите rundll32.
exe shell32.dll,Control_RunDLL desk.cpl,,0 и нажмите клавишу Enter (также вы можете зайти в меню “Пуск”=> Параметры => Персонализация => Темы => в правой колонке нужно открыть “Параметры значков рабочего стола”).
2. Выберите “Этот компьютер” и нажмите “Сменить значок”.
3. Нажмите на “Обзор” => откройте папку в которой расположен новый значок (значок должен быть ico формата, если у вас другой формат изображения – есть много онлайн конвертеров из одного формата в другой, к примеру image.online-convert.com/ru/convert-to-ico) => выберите значок и нажмите “Открыть” => выберите нужный значок и нажмите “ОК”.
4. В последнем окне нажмите “ОК”.
Изменить значок “Этот компьютер” в редакторе реестра
Перед редактированием реестра рекомендуется создать точку для восстановления системы.
1. Откройте редактор реестра: в строке поиска или в меню выполнить (выполнить вызывается клавишами Win+R) введите команду regedit и нажмите клавишу Enter.
2.Перейдите по пути HKEY_CURRENT_USER\ Software\ Microsoft\ Windows\ CurrentVersion\ Explorer\ CLSID\ {20D04FE0-3AEA-1069-A2D8-08002B30309D}\ DefaultIcon. В разделе DefaultIcon откройте параметр “По умолчанию” и в поле “Значение” пропишите полный путь к новому значку (значок должен быть ico формата, если у вас другой формат изображения – есть много онлайн конвертеров из одного формата в другой, к примеру image.online-convert.com/ru/convert-to-ico) и нажмите “ОК”. К примеру, файл с изображением нового значка pc.ico находится в C:\Users\Lili\Pictures\test\, путь в “Значение” нужно прописать следующий C:\Users\Lili\Pictures\test\pc.ico и нажать “ОК”.
Закройте редактор реестра, выйдите из системы и зайдите в нее снова, чтобы изменения вступили в силу.
Вернуть значок “Этот компьютер” по умолчанию
1. Откройте “Параметры значков рабочего стола”: в строке поиска или в меню выполнить (выполнить вызывается клавишами Win+R) напишите 
exe shell32.dll,Control_RunDLL desk.cpl,,0 и нажмите клавишу Enter (также вы можете зайти в меню “Пуск”=> Параметры => Персонализация => Темы => в правой колонке нужно открыть “Параметры значков рабочего стола”).
2.Выберите “Этот компьютер” и нажмите на “Обычный значок”, после чего нажмите на “ОК”.
На сегодня всё, если вы знаете другие способы или у вас есть дополнения – пишите комментарии! Удачи Вам 🙂
FacebookTwitterPinterest
Type to search or hit ESC to close
See all results
Рекомендации по дизайну значков приложений для Windows — приложения для Windows
- Статья
- 7 минут на чтение
Следуйте этим рекомендациям, чтобы создать отличный значок для своего приложения, который будет чувствовать себя как дома в Windows.
Значок должен быть метафорой своего приложения: визуальным представлением ценностного предложения, функций и возможностей продукта.
Представление
Ваша иконка должна иллюстрировать концепцию вашего приложения в единственном элементе с использованием простых форм.
При создании значка используйте четкие метафоры и концепции, которые в основном понятны, например конверт для почты или увеличительное стекло для поиска. Ключевая концепция должна быть фокусом вашей иконки; не разбавляйте свою иконку декоративными элементами, которые не поддерживают метафору. Чтобы повысить ясность коммуникации, используйте не более двух метафор в одном значке. Если можно использовать одну метафору, это еще лучше.
Буквальные метафоры лучше всего подходят для четкой формулировки цели и обещания. Хороший тест для эффективной иконки — это когда пользователи могут сказать, что она представляет, без метки.
Используйте абстрактную метафору только в тех случаях, когда невозможно найти буквальную, самоочевидную метафору для представления основной функциональности продукта.
Иконки не должны включать типографику как часть дизайна. Букв и слов на значке следует избегать и использовать только тогда, когда это необходимо. Имя приложения будет отображаться вместе со значком во всей операционной системе.
Сетка и закругленные углы
Microsoft изначально выравнивает свои значки по сетке 48×48, чтобы обеспечить сбалансированный значок, который использует доступное пространство, сохраняя при этом отличительную форму и силуэт. Выравнивание отличительных черт вашего значка по сетке будет хорошо сочетаться с другими значками вокруг него.
Доступность — это принцип личности Microsoft. Один из способов передать эту черту — использовать мягкие или закругленные углы. Формы, используемые в значках продуктов вашего приложения, должны быть построены так, чтобы соответствовать сетке значков. Углы этих фигур должны соответствовать закругленным углам в сетке значков. Когда к внешней кривой применяются закругленные углы, используйте радиус 2 пикселя при размере 48×48.
Когда к внутренней кривой применяются закругленные углы, вместо этого используйте радиус 1 пиксель.
Силуэт
Визуально сбалансированный силуэт обеспечивает хорошую масштабируемость значков, а также позволяет избежать крайностей толстых и тонких форм. Используйте сетку, чтобы создать силуэт, который будет четким, но разборчивым в небольших размерах. Используйте как можно меньше форм с наименьшим количеством углов, чтобы выделить свой продукт, и в то же время чувствовать себя как дома в Windows.
Деталь
При добавлении деталей следует соблюдать осторожность, чтобы сохранить разборчивость при небольших размерах. Рекомендуется добавлять дополнительные буквальные детали только к наиболее заметному слою значка.
Тщательно подбирайте цвета и не полагайтесь только на цвет для передачи смысла. Используйте форму и метафору с цветом для общения. Чтобы избежать сложностей при масштабировании значка в диапазоне размеров, обработка цветов должна быть сведена к минимуму.
Цветовые градиенты, наложения различной степени прозрачности и оттенки цвета должны быть сведены к минимуму.
Градиенты по большей части должны быть тонкими. Постарайтесь ограничить градиентные рампы только одним или двумя шагами как в горизонтальном, так и в вертикальном направлениях.
Угол градиента по умолчанию составляет 120 градусов. Начальная и конечная точки могут быть скорректированы соответствующим образом. Главное, чтобы переход был плавным. Избегайте очень резких переходов, которые могут показаться отражениями или размерами.
Монохромная палитра
Создайте монохромную палитру, выполнив следующие шаги:
- Создайте три цвета одного оттенка. В большинстве случаев вам придется сделать светлый цвет ярче, а темный — менее насыщенным, но, конечно, вы должны руководствоваться своим здравым смыслом.
- Создайте три шага между каждым базовым цветом. Это будет ваша основная полоса. Большая часть значка должна состоять из этих цветов.
- Для более широкой палитры создайте оттенки белого и оттенки черного, используя тот же метод, что и в шаге 2. Эти оттенки и оттенки следует использовать только тогда, когда вам нужно немного больше контраста.
- Оттенки темных цветов и оттенки светлых обычно бесполезны и тусклы. Их можно удалить.
Монохромные градиенты
Монохромные градиенты обычно используются, чтобы дать тонкий намек на угол окружающего света, исходящего из верхнего левого угла. Однако их не следует рассматривать как источник прямого света. Идея состоит в том, чтобы придать формам небольшое движение, не будучи слишком драматичным.
Аналоговая палитра
Создание аналогичной палитры аналогично созданию монохромной палитры, но с большим количеством цветов. Ключ к этому типу палитры — не переусердствовать. Будьте внимательны с переходами цветов.
- Создайте три набора цветов вместо одного.
- Сделайте вертикальные пандусы из всех трех наборов цветов.
- Вместо создания оттенков и теней с помощью белого и черного используйте второй и третий цвета.
Аналогичные градиенты
Аналогичные градиенты должны располагаться под тем же углом, что и монохромные, но не всегда. Как правило, более светлые тона должны быть в верхнем левом углу, чтобы не выглядеть слишком драматично, но также чтобы они максимально соответствовали монохрому.
Цветовой контраст
Доступность является приоритетом для Microsoft. Значки приложений в основном отображаются как на светлом, так и на темном фоне, но отображаются поверх фоновых изображений рабочего стола и оттенков или оттенков основного цвета системы. Трудно сделать иконку на 100% доступной на любом фоне, но есть несколько вещей, которые вы можете сделать, чтобы сделать вашу иконку максимально доступной.
- Используйте значения цвета во всех трех диапазонах: темный, средний, светлый.
- Убедитесь, что хотя бы половина вашего значка имеет коэффициент контрастности 3,0:1 на светлой и темной теме.
- Некоторые значения оттенков сложнее других. Желтый никогда не пройдет доступный коэффициент контрастности на светлой теме, пока не станет коричневым. Красные сложнее на темной теме.
- Хотя это и не обязательно, у вас есть возможность предоставить отдельные активы светлой и темной темы для панели задач, начального экрана и других областей Windows, зависящих от темы.
Высокая контрастность
Совет
Windows 11 больше не требует высококонтрастных ресурсов для значков приложений.
Высококонтрастные черно-белые значки должны быть прямым представлением значка вашего приложения. Часто высококонтрастную иконку можно создать из цветной версии, используя сплошную заливку и линию. Избегайте градиентов в высококонтрастных значках. Иногда для взаимодействия с приложением требуются однострочные значки, которые должны быть разработаны в соответствии с этими рекомендациями.
Наслоение и тень
Вид сверху/спереди.
Изометрический вид для иллюстрации z-глубины. Только для иллюстративных целей; не рекомендуемый вариант конструкции.
Иконки состоят из плоских объектов, расположенных поверх слоев под ним.
- Используйте как можно меньше слоев и сводите к минимуму крайние контрасты масштаба между фигурами.
- Используйте тени внутри значков, чтобы создать четкость между слоями объектов и визуально соединить компоненты друг с другом в дизайне значков.
- Как правило, тени, отбрасываемые светом на темные фигуры, дают наилучший результат.
- Внутренние тени должны отбрасывать тень только на графический символ, а не на окружающий фон.
- Существует два типа внутренней тени, каждый из которых имеет по две тени
Построение теней
Все эти значения должны быть отрисованы в размере 48×48 пикселей и увеличены или уменьшены оттуда. Если этого не соблюдать, тени в системе значков будут несовместимы.
Существует два типа теней объектов, каждый из которых имеет по две тени.
Объекты в рамках одной и той же метафоры имеют тень с немного меньшим размытием.
Та же метафора
Эта тень используется, когда у вас есть контент в рамках одной метафоры, которая нуждается в некоторой глубине. Это не всегда необходимо делать, но метафорам с одним объектом нужна определенная глубина, чтобы чувствовать себя частью системы. синий на тени 2 — единственное отличие.
Отдельная метафора
Эта тень используется, когда у вас есть два объекта, которые перекрывают друг друга, но не обязательно являются частью одной и той же метафоры. Тень должна быть замаскирована в форму под ней.
Перспектива
Значки слева довольно просты; точка зрения не рекомендуется, но здесь может быть уместно. Значок справа слишком сложен для перспективы, поэтому использовать его для этого значка не рекомендуется.
Иконки должны быть нарисованы с прямой перспективой, чтобы представить метафору простым и понятным способом.
Исключением являются случаи, когда метафора плохо читается без просмотра другой ее стороны. Например, если смотреть прямо на цилиндр, он представляет собой прямоугольник, поэтому можно добавить вершину, чтобы показать, что он имеет объем. Другое исключение — когда приложение связано с 3D, где имеет смысл показывать размерность. В обоих случаях применяются предыдущие рекомендации относительно плоских объектов. Слои всегда должны быть плоскими и перпендикулярными углу обзора.
значок Windows PNG и вектор SVG скачать бесплатно
значок Windows PNG и SVG вектор скачать бесплатноМы создаем новые иконки каждый день. Станьте покровителем UXWing для поддержки сайта всего за $1/месяц!
Поделиться этой страницей
Форматы: Оптимизированный файл SVG, уменьшенный файл PNG / PNG Размер: 512px x 512px / Категория: Бренды, социальные сети
Лицензия: Все иконки можно использовать в любых личных и коммерческих проектах без указания авторства или указания авторства.
