‍Принципы дизайна для идеального набора иконок

Привет! Меня зовут Дима, я дизайнер и создатель универсального набора иконок. Не так давно я выпустил версию 2.0 этого набора. Работая над версией 1.0, я четко не определил правила построения единой системы иконок. В результате возникли некоторые несоответствия.

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

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

За основу я взял принципы Material Design и руководства IBM Design Language. В версии 2.0 я изменил дизайн всех значков и добавил новые. Теперь здесь 1671 иконка (557 для каждого стиля).

В общей сложности у меня получилось 12 правил. Продолжайте читать, в этой статье я делюсь своим опытом.

Ясность

Каково основное назначение иконки? Быстрое понимание ее смысла. Человеческий глаз обрабатывает визуальные образы гораздо быстрее, чем текст. Кроме того, это универсальный способ понимания информации на любом языке. Поэтому, чем точнее метафора вашей иконки, тем быстрее она будет "прочитана". И это первое, на что следует обратить внимание при создании иконок.

✅ “Используйте четкие образы”

❌ “Избегайте сложных для понимания образов”

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

Простота

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

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

✅ “Сделайте свои иконки как можно более простыми”

❌ “Не используйте в своих иконках много деталей”

Стиль набора иконок

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

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

✅ “Придерживайтесь единого стиля в рамках одного набора иконок”

❌ “Не используйте разные стили в рамках одного набора”

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

Базовая сетка

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

Сетки различаются в зависимости от задачи. Наиболее распространенные размеры — 16x16, 24x24, 32x32, 48x48, 64x64, 96x96;

Размер сетки зависит от причины использования иконок, рекомендаций и особенностей операционной системы. Например, для Android размер сетки составляет 24 x 24 dp (dp — density independent pixels — плотность независимых пикселей).

✅ “Расположите иконку внутри пиксельной сетки”

❌ “Не помещайте иконку на десятичные значения координат x- и y-”

Область обрезки

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

✅ “Иконка должна размещаться внутри области обрезки”

❌ “Избегайте размещения частей иконки на область обрезки”

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

Основные формы

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

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

Начнем с площади круга:

В нашем случае диаметр "d" равен 20 пикселям, а радиус "r" — 10 пикселям, площадь круга приблизительно равна 314 пикселей².

Далее найдем стороны квадрата и его площадь:

Сторона 'a' будет равна приблизительно 17,7 пикселя. Округлите до ближайшего четного числа. В нашем случае — 18 пикселей. Площадь квадрата составит 324 пикселей².

Теперь давайте найдем стороны прямоугольника:

В нашем случае сторона «b» составляет 20 пикселей, а сторона «c» — 16 пикселей.

Это дает нам размеры наших основных фигур:

Ширина линии

После того как мы настроили основные параметры нашей сетки, мы можем приступить к созданию значков. Нам нужно выбрать ширину линии для иконок. Чтобы ваши иконки выглядели пиксельно идеально на любом устройстве, я рекомендую придерживаться целочисленного значения. Например, 1 px или 2 px.

Также важно не забывать о минимальном расстоянии между элементами. Оно также должно быть равно ширине линии или быть чуть больше нее.

✅ “Будьте последовательны в использовании ширины линии и минимального свободного пространства”

❌ “Не используйте разные веса начертания и минимальный пробел меньше ширины линии”

Углы

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

Например, у меня для основных объектов установлено закругление от 2 до 4 px в зависимости от размера.

Угол наклона

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

Оптический баланс

Часто то, что аккуратно с геометрической точки зрения, не является таковым с визуальной. При создании иконок необходимо выравнивать объекты по их визуальному весу. В первую очередь это относится к асимметричным объектам. Например, мы часто сталкиваемся с такой проблемой при рисовании иконки "воспроизведения".

✅ "Используйте оптический баланс"

❌ "Не полагайтесь только на цифровые значения"

Перспектива (2D / 3D)

В дополнение ко всем принципам, для единообразия иконок важно придерживаться одной перспективы. В большинстве случаев подойдет двухмерный вид значка. Это может быть вид сверху или спереди. Можно использовать 3D-вид, но тогда необходимо использовать одну и ту же перспективу для всех иконок в наборе.

Здравый смысл

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

“В этом примере я использовал различные углы наклона, чтобы получить идеальную иконку с точностью до пикселя”

“В этом примере часть элемента “замка” расположена на области обрезки, таким образом его отображение на всех иконках останется единым”

Заключение

Вместо скучного вывода я хочу показать вам видео, которое я сделал для Universal Icon Set v2.0.

Спасибо, что дочитали до конца. Надеюсь, эта статья была для вас полезной.