Иконка дизайн: Иконки графический дизайн — 42,907 бесплатных иконок

основные тенденции / Тренды / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

Автор: Елизавета Гуменюк

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

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

Давайте посмотрим, что нового и популярного в дизайне иконок нас ждет в 2021 году!

Рисованные значки

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

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

Иконки с глубиной

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

Такие стили довольно забавны и временами используют намеки на приходящие и уходящие тенденции, такие как удлиненные тени.

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

Иконки с состояниями наведения

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

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

И не пытайтесь что-то усложнять. Замысловатый значок может потеряться при наведении курсора. Данный тренд лучше всего подходит для простых пар иконок.

Упрощенные иконки

Даже веб-сайты и дизайны, которые ранее использовали сложные стили в иконках, переходят на более упрощенные варианты.

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

Линейные иконки с цветными фигурами

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

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

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

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

Абстрактные формы иконок

Не уверены, какой значок представляет ваш контент? Ответом может быть абстрактная форма.

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

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

Основные цвета

Основные цветовые палитры — это смелый, яркий и привлекательный выбор для небольших элементов дизайна.

Эта тенденция дизайна иконок использует красный, синий, зеленый и желтый цвета (наряду с фиолетовым и оранжевым) для создания базового набора цветовых правил. Что заставляет этот стиль работать, так это акцент на цвете, чтобы привлечь внимание к маленьким элементам на экране. Основные цвета также будут выделяться среди всех «материальных» ярких цветов, которые доминировали в палитрах в последнее время.

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

Иконки с фоновыми значками

Некоторые трендовые иконки имеют свои собственные иконки. Серьезно!

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

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

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

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

Двухцветные иконки

Еще одна тенденция дизайна иконок, основанная на популярных стилях линейных иконок — это создание двухцветных элементов.

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

Когда дело доходит до дизайна, выберите основной цвет для большей части иконки, а затем используйте дополнительный цвет, чтобы подчеркнуть элемент значка. Подумайте об использовании основного цвета для 70-80% дизайна и вторичного цвета для всего остального.

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

Иконка «Стенография»

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

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

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

Яркий цвет

Выбор ярких цветов имеет большое значение во всех аспектах дизайна. То же самое и с иконами. Яркий цвет — это заманчивый способ привлечь внимание к иконке.

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

• В качестве фона с белым или черным значком в линейном стиле
• Для полноцветных элементов иконок с более реалистичным внешним видом
• Для элементов иконок с более плоским, градиентным или супер ярким дизайном

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

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

Иконки в логотипах

Обратите внимание, сколько логотипов имеют иконки. Как только вы начнете думать об этом, не заметить всех этих маленьких значков в дизайне логотипов будет трудно.

Что хорошего в иконе в логотипе, так это то, что она хорошо работает с названием бренда. Подумайте о приведенном выше примере Spotify. Несмотря на то, что музыкальный провайдер существует не так уж долго (в рамках брендов), круг с тремя линиями весьма узнаваем.

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

Круги

Круги — одна из самых гармоничных форм. А когда дело доходит до дизайна иконок, они довольно популярны. От значков, содержащихся внутри сферы, до кругов внутри объектов, создание дизайна иконки с помощью кругов может вызвать у пользователей правильное впечатление.

Отчасти влияние круга на дизайн иконок может быть связано с некоторыми рекомендациями, изложенными Google в отношении Material Design. Все эти круглые кнопки идеально подходят для нажатия на мобильных телефонах. Та же философия применима и к дизайну иконок. (Подумайте, как часто значок является элементом, который можно коснуться или щелкнуть.)

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

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

Дизайн иконок в линейном стиле

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

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

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

Простые элементы и представления

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

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

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

Иконки с градиентами

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

Это может быть то, что так привлекательно в использовании градиентов в иконках (и в целом) – существует так много различных способов использования тренда. Вы можете добавить градиент и при этом не получить проект, который выглядел бы как что-то еще.

Фокус на простой раскраске

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

Использование ограниченной палитры — отличная идея. При таком маленьком дизайне слишком много цвета или деталей может быстро переполнить пространство и вызывать утомление глаз.

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

Иконки в стиле приложений

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

Иконки в стиле приложений имеют свой собственный стиль, который включает в себя:

1. Квадратная форма
2. Закругленные края
3. Цветной фон (обычно один цвет)
4. Простая форма внутри значка
5. Большой контраст между цветом значка и фона
6. Ни текста, ни надписей

Толстые, равномерные штрихи

Популярны не только линейные значки, но и значки с толстыми штрихами.

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

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

Плоские иконки остаются популярными

Хотя большая часть пристального внимания к плоскому дизайну испарилась, дизайн иконок все еще довольно плоский (или, по крайней мере, почти плоский).

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

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

Иконки-эмодзи

Эмодзи почти стали новым языком — более визуальной формой общения, которая становится все более общепринятой.

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

Этот стиль может отлично работать для страницы контактов или для представления людей или персонажей в дизайне.

Как создать хорошую иконку

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

Простые правила все еще остаются верными для дизайна иконок в 2021 году. Соедините эти рекомендации с некоторыми из трендовых идей выше, чтобы создать что-то, что вам понравится:

• Начните с сетки
• Создавайте с геометрией
• Создайте уникальную форму
• Оставьте иконкам много места
• Придерживайтесь цветов своего бренда
• Будьте последовательны
• Создавайте из расчета на самый маленький размер, который вам нужен
• Не украшайте слишком

Вывод

Иконки — это полезный инструмент дизайна. От использования в качестве значков приложений до знаков веб-сайта и фавиконов, которые могут быть использованы в логотипе или во всем дизайн-проекте, иконки – это элемент, который останется надолго.

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

Всем успешной работы и творчества!

Источник

Дизайн система: Иконки / Хабр

Подготовка иконок к работе в дизайн системе

Кто я и почему об этом пишу?

Привет, меня зовут Андрей Насонов, я UI/UX дизайнер работаю руководителем дизайн отдела в компании которая создаёт веб-сервисы и помогает компаниям из разных отраслей масштабировать свой бизнес. Я занимаюсь дизайном с 2008 года, начинал как графический дизайнер, но с 2015 года работаю веб дизайнером. Мне интересна разработка сервисного дизайна, проектирование дизайн систем, и автоматизация дизайн и бизнес процессов.

В этой серии статей я хотел бы поделиться своим опытом построения дизайн-систем и предложить несколько идей по автоматизации. В первой статье мы поговорим на довольно простую, но важную тему — иконки. Поехали!

---

Помещайте иконки во фреймы

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

Допустим, у нас три иконки: 22x15px, 18x20px и 10x5px. Каждая из них должна быть во фрейме 24x24px.

Оставлять иконки без фрейма нельзяВсегда помещайте иконки во фрейм

Экспортировать иконки нужно также во фрейме.

Важно! Экспортировать нужно именно иконку во фрейме, а не слой иконки. После чего помещать ее уже в контейнер 24x24px.

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

Иконка выровнена по фактическому центру. Отступы: слева и справа по 10px. Но из-за особенностей формы иконки возникает ощущение, что она сдвинута влевоИконка выровнена по визуальному центру. Отступы: слева 12px, справа 8px. Иконка специально сдвинута вправо, чтобы визуально казалось, что иконка располагается по центру

---

Компонент из фрейма с иконкой

Создайте компонент из фрейма с иконкой.

Компонент из фрейма с иконкой

Это поможет вам быстро заменить одну иконку на другую, использовав функцию «Instance».

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

Замена иконок с помощью функции «Instance»

Иконки лучше всего именовать на английском. Если вы скачали иконку, а у нее уже есть название на английском — не переименовывайте ее.

Так вы быстрее запомните название иконок и будете легко находить на тех ресурсах, где их берете.

Заодно и новые слова на английском выучите если у вас с ним беда, как и у меня. 😄

---

Хранение иконок

Статья 224, лишение свободы…….. ладно 😄

Один проект может содержать иконки разных размеров. Например, стандартные 24x24px, 16x16px или 20x20px для элементов меньшего размера.

Основные иконки 24x24px мы храним в артборде “Icons 24”. Остальные иконки размер которых больше или меньше 24px храним в “Other Icons”. Обычно их не очень много.

Артборд “Trash Icons” нужен чтобы хранить в нем различные варианты иконок. Например, вы подобрали или нарисовали три иконки чата, выбрали из них одну и поместили ее в артборд “Icons 24”, а другие два варианта иконки перемещаете в артборд “Trash Icons”. На случай, если вы передумаете и захотите изменить свой выбор вам не придется искать их снова.

---

Фон и цвет

Чтобы при выделении компонентов с иконкой в настройках Fill не отображались лишние цвета — удалите у компонента белый фон, даже если он отключен.

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

Удаление фона и применение стиля цвета

Стиль цвета нужен чтобы при замене через инстанс вы не забывали перекрашивать иконку в нужный цвет.

Советую выбрать броский цвет, который вы очень редко используете на проекте. Оставляя иконку черной или серой есть вероятность что вы будете забывать ее перекрашивать. Я выбрал коричневый.

Яркий цвет иконки четко дает понять, что после замены ее нужно перекрасить в нужный стиль

---

Констрейнтс

Настройте у слоя с иконкой constraints по вертикальному и горизонтальному центру. Это нужно на случай, если вы захотите уменьшить или увеличить компонент иконки, но так чтобы сама иконка не меняла свой размер.

Важно! Сonstraints нужно настраивать именно у слоя с иконкой, а не у всего компонента.

Настройка constraints

---

Массовые действия с иконками

Все вышеописанные действия можно проделать с несколькими иконками сразу.

Для того, чтобы выбрать слои с иконкой сразу во всех компонентах иконок — выберите все компоненты иконок и нажмите Enter.

---

Мусор в иконках

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

Например, Material Design иконки имеют белый фоновый слой.

В итоге компонент иконки должен содержать только один слой (слой с иконкой). Но могут быть и исключения, например, двухцветные иконки.

В случае с одноцветной иконкой — все элементы должны быть объединены в один слой.

После того, как вы объединили слои, не забывайте применять “Outline Storke” к объединенной фигуре.

Объединение иконки в один слой

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

Так выглядит SVG код иконки когда компонент иконки имеет несколько слоев и они не объединены в один. Код получился очень длинным и имеет целых 7 параметров “Fill” для разных элементов иконки. Так делать нельзя.

Размер файла иконки 1318 байт

А так выглядит SVG код иконки когда все слои объединены. Код гораздо меньше и имеет всего 2 параметра “Fill”. Один для фона контейнера, другой для цвета иконки. Так делать можно.

Размер файла иконки 803 байта

После экспорта иконки вы можете ее дополнительно сжать используя этот сайт.

После сжатия код иконки стал еще меньше, но внешний вид иконки не изменился.

Размер файла иконки 588 байт

---

Ресурсы с иконками

Ну и напоследок несколько ресурсов откуда можно брать иконки.

Material Design Icons Community
Огромный набор иконок, который содержит официальные иконки Material Design, а также иконки созданные сообществом по гайдам Material Design. На мой взгляд, это лучший набор на данный момент. Он покрывает 90% моих потребностей.
В Figma есть специальный плагин.

Material Design Icons
Официальные иконки Material Design. К сожалению, на этом сайте иконки имеют довольно странные тэги. Из-за этого некоторые иконки нереально найти через поиск. Да и файл иконки содержит в себе лишний слой с белым фоном, который на мой взгляд, не нужен.
Плагин в Figma.

Boxicons
Есть хорошие альтернативы иконкам из предыдущих ресурсов. Но не все иконки pixel perfect. Так же имеется плагин в Figma.

Feathericon
Хороший набор качественных outline иконок. Иконки сделаны контуром с обводкой, что позволяет масштабировать и изменять толщину линий самих иконок.
Плагин в Figma

IBM icons
Иконки от IBM созданные самой компанией и сообществом.

Remixicon
Большое количество хороших Fill и Outline иконок

---

Спасибо

А если хотите узнать больше фишек — подписывайтесь, чтобы не пропустить новые статьи.

дизайнов, тем, шаблонов и графических элементов Icon Design, загружаемых на Dribbble

1. Посмотреть HeatWatch

   Тепловые часы

2. Посмотреть 🕊

3. Посмотреть HeatWatch

   Тепловые часы

4. Посмотреть ☕️

5. Посмотреть логотипы

6. Посмотреть жизнь⚡️

   Жизнь⚡️

7. Посмотреть БОКСИ

8. Посмотреть БОКСИ

9. Посмотреть брендинг nuutri

   брендинг nuutri

10. Посмотреть Lighttwist — дизайн бренда

    Lighttwist — фирменный дизайн

11. Посмотреть ⟁

12. Посмотреть BorderLeap 🐸

    BorderLeap 🐸

13. Посмотреть коллекцию иконок

    Коллекция иконок

14. Посмотреть ClickUp

    ClickUp

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

    Набор значков телефона

16. Просмотр значка погоды

    значок погоды

17. Посмотреть SevenPace

    СевенПейс

18. Посмотреть HeatWatch

    Тепловые часы

19. Просмотр GiB: Игровая аналитика

    ГиБ: игровая аналитика

20. Посмотреть RemNote

    RemNote

21. Посмотреть 🤭

22. Посмотреть галерею значков

    Иконки галереи

23. Просмотр значков дизайна и разработки

    Иконки дизайна и разработки

24. Посмотреть набор иконок

    Набор иконок

Зарегистрируйтесь, чтобы продолжить или войдите в систему

Загрузка еще…

Рекомендации по дизайну значков приложений для Windows — приложения для Windows

• Статья
• 15. 07.2022
• 7 минут на чтение

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

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

Представление

Ваша иконка должна иллюстрировать концепцию вашего приложения в единственном элементе с использованием простых форм.

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

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

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

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

Сетка и закругленные углы

Microsoft изначально выравнивает свои значки по сетке 48×48, чтобы обеспечить сбалансированный значок, который использует доступное пространство, сохраняя при этом характерную форму и силуэт. Выравнивание отличительных черт вашего значка по сетке будет хорошо сочетаться с другими значками вокруг него.

Доступность — это принцип личности Microsoft. Один из способов передать эту черту — использовать мягкие или закругленные углы. Формы, используемые в значках продуктов вашего приложения, должны быть построены так, чтобы соответствовать сетке значков. Углы этих фигур должны соответствовать закругленным углам в сетке значков. Когда к внешней кривой применяются закругленные углы, используйте радиус 2 пикселя при размере 48×48. Когда к внутренней кривой применяются закругленные углы, вместо этого используйте радиус 1 пиксель.

Силуэт

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

Деталь

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

Тщательно подбирайте цвета и не полагайтесь только на цвет для передачи значения. Используйте форму и метафору с цветом для общения. Чтобы избежать сложностей при масштабировании значка в диапазоне размеров, обработка цветов должна быть сведена к минимуму. Цветовые градиенты, наложения различной степени прозрачности и оттенки цвета должны быть сведены к минимуму.

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

Угол градиента по умолчанию составляет 120 градусов. Начальная и конечная точки могут быть скорректированы соответствующим образом. Главное, чтобы переход был плавным. Избегайте очень резких переходов, которые могут показаться отражениями или размерами.

Монохромная палитра

Создайте монохромную палитру, выполнив следующие шаги:

1. Создайте три цвета одного оттенка. В большинстве случаев вам придется сделать светлый цвет ярче, а темный — менее насыщенным, но, конечно, вы должны руководствоваться своим здравым смыслом.
2. Создайте три шага между каждым базовым цветом. Это будет ваша основная полоса. Большая часть значка должна состоять из этих цветов.
3. Для более широкой палитры создайте оттенки белого и оттенки черного, используя тот же метод, что и в шаге 2. Эти оттенки и оттенки следует использовать только тогда, когда вам нужно немного больше контраста.
4. Оттенки темных цветов и оттенки светлых обычно бесполезны и тусклы. Их можно удалить.

Монохромные градиенты

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

Аналоговая палитра

Создание аналогичной палитры аналогично созданию монохромной палитры, но с большим количеством цветов. Ключ к этому типу палитры — не переусердствовать. Будьте внимательны с переходами цветов.

1. Создайте три набора цветов вместо одного.
2. Сделайте вертикальные пандусы из всех трех наборов цветов.
3. Вместо создания оттенков и теней с помощью белого и черного используйте второй и третий цвета.

Аналогичные градиенты

Аналогичные градиенты должны располагаться под тем же углом, что и монохромные, но не всегда. Как правило, более светлые тона должны быть в верхнем левом углу, чтобы не выглядеть слишком драматично, но также чтобы они максимально соответствовали монохрому.

Цветовой контраст

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

• Используйте значения цвета во всех трех диапазонах: темный, средний, светлый.
• Убедитесь, что хотя бы половина значка имеет коэффициент контрастности 3,0:1 на светлой и темной теме.
• Некоторые значения оттенков сложнее других. Желтый никогда не пройдет доступный коэффициент контрастности на светлой теме, пока не станет коричневым. Красные сложнее на темной теме.
• Хотя это и не обязательно, у вас есть возможность предоставить отдельные активы светлой и темной темы для панели задач, начального экрана и других областей Windows, зависящих от темы.

Высокая контрастность

Совет

Windows 11 больше не требует высококонтрастных ресурсов для значков приложений.

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

Наслоение и тень

Вид сверху/спереди.

Изометрический вид для иллюстрации z-глубины. Только для иллюстративных целей; не рекомендуемый вариант конструкции.

Иконки состоят из плоских объектов, расположенных поверх слоев под ним.

• Используйте как можно меньше слоев и сводите к минимуму крайние контрасты масштаба между формами.
• Используйте тени внутри значков, чтобы создать четкость между слоями объектов и визуально соединить компоненты друг с другом в дизайне значков.
• Как правило, тени, отбрасываемые светом на темные формы, дают наилучший результат.
• Внутренние тени должны отбрасывать тень только на графический символ, а не на окружающий фон.
• Существует два типа внутренней тени, каждый из которых имеет по две тени

Теневая конструкция

Все эти значения должны быть отрисованы в размере 48×48 пикселей и увеличены или уменьшены оттуда. Если этого не соблюдать, тени в системе значков будут несовместимы. Существует два типа теней объектов, каждый из которых имеет по две тени. Объекты в рамках одной и той же метафоры имеют тень с немного меньшим размытием.

Та же метафора

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

Отдельная метафора

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

Перспектива

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