Привет, Хабр! Я Маша, продуктовый дизайнер в ОТП Банке. Наш банк последнее время активно развивает дизайн, сегодня хочу поделиться опытом работы с иконками.
Сразу скажу, большинство перечисленных принципов вам скорее всего знакомы, но есть некоторые неочевидные нюансы, на которые стоит обратить внимание.

1. Метафора 

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

2. Референсы

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

3. Стиль

Разделим этот пункт на две составляющие — эмоциональную и техническую.

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

• Единые скругления (иногда одно скругление не подходит для всех углов иконки, для маленьких объектов внутри нее вероятно придется задать скругления поменьше, чтобы не исказить форму)

• Единая толщина линий (помните, что с увеличением размера иконки ее толщина так же будет увеличиваться)

• Детализация (избыточная детализация усложняет восприятие, в то время как простую иконку считать гораздо быстрее)

4. Размеры и масштабирование

 Определите, какие основные размеры иконок нужны в проекте, скорректируйте под них технические правила — чем больше иконка, тем большее скругление и толщина у нее должны быть. Для упрощения поддержки всего пака можно начать с основных размеров — например, 12, 16, 24. Увеличивайте размерный ряд иконок по необходимости, сохраняя консистентность.

5. Рамки 

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

6. Выравнивание

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

7. Нейминг иконок

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

8. Ключевые слова в описании

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

9. Нейминг векторов внутри иконки 

Называйте вектор внутри всех компонентов одинаково, тогда в своем макете при замене иконки выбранный цвет сохранится.

Немного про поддержку пака:

1. Соберите все правила. Рекомендую создать отдельную страничку с гайдом по созданию иконок

2. Сохраняйте исходники. Они должны быть доступны всей команде, чтобы сохранять преемственность общего стиля

3. Документируйте изменения

4. Сортируйте иконки по смыслам

5. Будьте открыты к развитию своего пака

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