logo

Иконографика

Размер иконок
Стиль иконок
Рекомендации по использованию
Пиктограммы помогают сохранить узнаваемость продуктов. Мы используем общий набор иконок для продуктов VK. Это помогает сформировать у пользователя общее впечатление от работы с интерфейсами. Благодаря такому подходу мы можем легко интегрировать продукты друг в друга.
Иконки лежат в общем открытом репозиторий, и добавлять новые может любой дизайнер компании.
VK Icons
vkcom.github.io
Иконки помогают восприятию информации, так как считываются быстрее текста. Они служат визуальными якорями на странице, их проще искать на экране, они помогают сориентироваться в интерфейсе. Если сомневаетесь в иконке, вероятно, её вообще не нужно использовать.

Размер иконок

Для продуктов в теме Paradigm основной размер иконок — 20, 24, 28. В редких случаях используются 12, 16, 32, 36 и 48, еще реже — 40. Под особые случаи допустимы и другие размеры.
Иконка под каждый размер рисуется отдельно. Иногда возникает соблазн взять готовую иконку и изменить её размеры вручную — растянуть или уменьшить, но тогда она будет плохо выглядеть на старых мониторах и сильно отличаться от других иконок на экране по уровню детализации, толщине, оптическому весу и т.д., поэтому такие манипуляции строго запрещены.
Иконки под все размеры рисуются отдельно
Иконка 16 растянута на другие размеры

Стиль иконок

Варианты

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

Цвет

Иконки Paradigm одноцветны. В иконках, как и в остальных местах интерфейса, мы используем цвета из дизайн-токенов, которые синхронизированы с библиотекой в Figma.

Рекомендации по использованию

Используйте текст

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

Не меняйте стиль иконки

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

Не смешивайте стили

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

Используйте целенаправленно

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