Основные принципы создания иконок
Привет, Хабр! Я Маша, продуктовый дизайнер в ОТП Банке. Наш банк последнее время активно развивает дизайн, сегодня хочу поделиться опытом работы с иконками.
Сразу скажу, большинство перечисленных принципов вам скорее всего знакомы, но есть некоторые неочевидные нюансы, на которые стоит обратить внимание.
1. Метафора
Иконки должны быть понятными, с четкой ассоциацией. Используйте простые, общеизвестные метафоры для быстрого восприятия. Как правило, для решения одних и тех же задач в разных продуктах используются одинаковые образы, пользователи к ним уже привыкли и быстро их считывают, поэтому не стоит изобретать велосипед, будьте понятными.
2. Референсы
Куда же без них родненьких, советую время от времени подглядывать в разные паки для насмотренности и поиска метафор. Это не значит, что нужно повторять чужие иконки точь-в-точь, берите за основу метафору и преобразуйте ее под свой стиль. Примеры раз, два и три.
3. Стиль
Разделим этот пункт на две составляющие — эмоциональную и техническую.
Эмоциональная. Иконки в интерфейсе формируют настроение и отражают тон бренда. Поэтому определите, какие эмоции должен вызывать конкретно ваш продукт и сформируйте технические указания по построению иконки.
Техническая. Определите значения для перечисленных параметров и придерживайтесь их:
Единые скругления (иногда одно скругление не подходит для всех углов иконки, для маленьких объектов внутри нее вероятно придется задать скругления поменьше, чтобы не исказить форму)
Единая толщина линий (помните, что с увеличением размера иконки ее толщина так же будет увеличиваться)
Детализация (избыточная детализация усложняет восприятие, в то время как простую иконку считать гораздо быстрее)
4. Размеры и масштабирование
Определите, какие основные размеры иконок нужны в проекте, скорректируйте под них технические правила — чем больше иконка, тем большее скругление и толщина у нее должны быть. Для упрощения поддержки всего пака можно начать с основных размеров — например, 12, 16, 24. Увеличивайте размерный ряд иконок по необходимости, сохраняя консистентность.
5. Рамки
Используйте сетку для консистентности пака. Сетка поможет сохранить визуальную гармонию и единство размеров иконок. Пример можно посмотреть тут или тут. Если понимаете, что часть иконки выходит за границы сетки, но именно так она выглядит гармоничнее в общей массе всего пака — оставляйте так.
6. Выравнивание
Вектор должен быть по центру. Если иконка выровнена, и ваш внутренний перфекционист доволен, но все равно смотрится криво — используйте оптическую компенсацию для визуального баланса.
7. Нейминг иконок
Называйте иконки по изображенному объекту, а не по функционалу. Такой подход позволяет легко находить иконки в библиотеке, не привязываясь к специфическим сценариям использования.
8. Ключевые слова в описании
Если вы понимаете, что дать одно универсальное название иконки сложно — добавляйте ассоциации и альтернативные названия в описание компонента. Тогда поиск по библиотеке будет отображать результат по всем ключевым словам.
9. Нейминг векторов внутри иконки
Называйте вектор внутри всех компонентов одинаково, тогда в своем макете при замене иконки выбранный цвет сохранится.
Немного про поддержку пака:
Соберите все правила. Рекомендую создать отдельную страничку с гайдом по созданию иконок
Сохраняйте исходники. Они должны быть доступны всей команде, чтобы сохранять преемственность общего стиля
Документируйте изменения
Сортируйте иконки по смыслам
Будьте открыты к развитию своего пака
Иконки — это хоть и небольшие, но достаточно влиятельные элементы интерфейса, ведь именно из мелочей складывается общее впечатление от продукта. Делитесь в комментариях своими лайфхаками по созданию иконок:)
