Иконографика
Пиктограммы помогают сохранить узнаваемость продуктов. Мы используем общий набор иконок для продуктов VK. Это помогает сформировать у пользователя общее впечатление от работы с интерфейсами. Благодаря такому подходу мы можем легко интегрировать продукты друг в друга.
Иконки лежат в общем открытом репозиторий, и добавлять новые может любой дизайнер компании.
Иконки лежат в общем открытом репозиторий, и добавлять новые может любой дизайнер компании.
Иконки помогают восприятию информации, так как считываются быстрее текста. Они служат визуальными якорями на странице, их проще искать на экране, они помогают сориентироваться в интерфейсе. Если сомневаетесь в иконке, вероятно, её вообще не нужно использовать.
Размер иконок
Для продуктов в теме Paradigm основной размер иконок — 20, 24, 28. В редких случаях используются 12, 16, 32, 36 и 48, еще реже — 40. Под особые случаи допустимы и другие размеры.
Иконка под каждый размер рисуется отдельно. Иногда возникает соблазн взять готовую иконку и изменить её размеры вручную — растянуть или уменьшить, но тогда она будет плохо выглядеть на старых мониторах и сильно отличаться от других иконок на экране по уровню детализации, толщине, оптическому весу и т.д., поэтому такие манипуляции строго запрещены.
Иконка под каждый размер рисуется отдельно. Иногда возникает соблазн взять готовую иконку и изменить её размеры вручную — растянуть или уменьшить, но тогда она будет плохо выглядеть на старых мониторах и сильно отличаться от других иконок на экране по уровню детализации, толщине, оптическому весу и т.д., поэтому такие манипуляции строго запрещены.
Иконки под все размеры рисуются отдельно
Иконка 16 растянута на другие размеры
Стиль иконок
Варианты
В зависимости от специфики продукта мы используем Filled и Outline иконки. Outline основной вид который используется в большинстве случаев. Filled используются в тех случаях, когда outline не подходят, например в кнопках или когда важно показать активное состояние (поставили лайк, добавили в закладки и т.д.).
Цвет
Иконки Paradigm одноцветны. В иконках, как и в остальных местах интерфейса, мы используем цвета из дизайн-токенов, которые синхронизированы с библиотекой в Figma.
Рекомендации по использованию
Используйте текст
Существует несколько широко известных значков. Когда возможно, используйте метку или вспомогательный текст, чтобы облегчить понимание его значения.
Используйте иконки вместе с текстом
Иконка без подписи может быть непонятной
Не меняйте стиль иконки
Иконки в наборе имеют одинаковый вес, поэтому хорошо смотрятся вместе. Если изменить заливку на линии или изменить радиусы закруглений, это затруднит прочтение и отделит ее от набора.
Иконки смотрятся аккуратно и гармонично
Измененные иконки смотрятся неопрятно
Не смешивайте стили
Если иконки располагаются близко друг другу, в панели действий или в меню, не используйте пиктограмы разных стилей рядом.
Иконки находятся в одном контексте и консистентны
Иконки разных стилей вместе
Используйте целенаправленно
Старайтесь не использовать иконки для украшения — это отвлекает от основного действия. Учитывайте окружающий контекст: когда иконки слишком близко расположены, они создают визуальный шум и путают.