Как приручить иконки в дизайн системе и не только?
В этой статье: как быстро и понятно передавать смысл через иконки, как настроить оптическую компенсацию и как организовывать иконки в Figma.
Среднее время прочтения ≈ 8 мин
—————
Пару правил, для начала
Иконки помогают пользователю быстро считывать смысл — быстрее, чем через текст. Главная задача иконки — быть понятной.
Используйте одинаковые иконки, если для пользователя цель тождественна.
Нельзя допускать, чтобы у пользователя возникал диссонанс даже на долю секунды. Если действие одно и то же, иконки тоже должны быть одинаковыми — так пользователь поймет, чего ожидать. Разные иконки могут вызвать ощущение непрофессионализма и подорвать доверие к продукту.
Поддерживайте единообразие иконок.
На картинке гипертрофированный пример, но разница в скруглениях или толщине линий может повлиять на впечатление о компании. Если вы уже используете фирменные цвета и шрифты, не нарушайте общее ощущение визуального стиля неконсистентными иконками.
Выбирайте простые иконки.
Иконка — это в первую очередь помощник для пользователя, а не украшение. Если нужно выбрать между «сделать удобно» или «сделать красиво», лучше ориентироваться на удобство. Эстетику можно добавить другими элементами дизайна.
Все иконки помещайте в фрейм, а сам фрейм делайте одного размера.
Дальше поговорим об оптической компенсации, но уже при использовании фреймов одинакового размера у вас появится понятная система правил. Это ускорит работу и сделает дизайн более целостным.
В 90% случаев иконкам нужен один цвет.
Объедините все векторные части в одну и переименуйте ее в Vector. Это необходимо, чтобы при замене иконки у нее не ломался цвет.
—————
Визуальный вес иконок
Для того чтобы настроить правильную визуальную иерархию, используйте несколько простых советов.
1. Одинаковая толщина линий. Иконки должны иметь одинаковую толщину линий или хотя бы быть из одного пака. По опыту, легче найти подходящий пак или «скрестить» две иконки для получения желаемой, чем пытаться кастомизировать иконку из другого набора.
2. Проверяйте контраст. Проверьте контраст между цветами иконок и фоном (bg). Самый простой способ сделать это — здесь.
3. Контраст форм. Все видели картинку, где круг рядом с квадратом визуально кажется меньше.
Чтобы не заморачиваться с иконками, запомните отступы для разных типов фигур (для самых ленивых создал файлик, заберите отступы тут).
Если объект сложный, используйте круг — не страшно, если какие-то части будут выступать. Это всего лишь небольшая подсказка, а не жесткое правило.
—————
Стандартизация и организация иконок в Figma
Лучше вынести иконки на отдельную страницу или даже в отдельный файл, если их много. Кажется мелочью, но если потом всё переделывать — будет треш. Меня на эту статью и натолкнул подобный случай.
Определите для иконок единую сетку и размер. Если непонятно, что выбрать — берите 24×24 и учитывайте визуальную компенсацию из предыдущего пункта. В 95% случаев этого достаточно. Например, Material Icons используют похожий принцип.
—————
Способы добавления иконок
Много компонентов в фрейме
Плюсы: поиск по имени и превью при выборе.
Минусы: если у вас много разных файлов, то в поиске по названию можно запутаться.
Используйте в названии слэш «Icons / *name*», чтобы иконки группировались в одной папке. Можно положить в секцию, но нужно минимум две секции — тогда иконки разделятся по папкам/категориям.
В один компонент с выбором вариантов
Можно сделать «суперкомпонент» со всеми иконками — нажать “Combine as variants”. Подходит, если иконок мало: легко менять одну на другую. Но без превью будет сложно, когда иконок станет много. И правильный нейминг игнорировать не выйдет.
Иконки в виде шрифтов
Плюсы: есть готовые наборы (например, SF Symbols), которые четко соответствуют гайдлайнам. Можно перевести и собственные иконки в шрифт — это удобно для передачи разработчикам.
Минусы: сложно обновлять и поддерживать. Не быстренько поправил компонент — надо пересобирать весь шрифт
Треш вариант: Иконки в стилях как PNG изображение
Скачайте иконки, преобразуйте их в .png (Cmd+Shift+C, чтобы скопировать как .png) и добавьте их в стили. Теперь у вас есть иконки в стилях.
Плюсы: вариант подходит для очень кастомных иконок (с тенями, 3D).
Минусы: если использовать так обычные иконки, то с вами перестанут общаться.
Кстати, недавно писал пост о сравнении стилей и переменных в своем тг — заходите, там тоже полезно.
—————
Использование иконок в больших дизайн-системах: Примеры и лучшие практики
Под конец — сравнение иконки «папки» в нескольких крупных дизайн-системах:
Material
Стандартная иконка 24 px, оптическая компенсация, деление по стилю (заливка, скругления, цвета).
Fluent
Иконки от 16 до 48 px, два варианта — с заливкой и без.
Polaris (Shopify)
Иконки по 20 px; деление на Desktop и Mobile (для мобилок — иконка чуть больше).
Atlassian
сего две иконки папки по 24 px, также два варианта по заливке.
Ant:
аБазовый размер 24 px, существует разделение по заливке: Outlined, Filled и TwoToned.
Вывод: оптимально использовать 24 px, делить иконки на Outlined и Filled. А правила компенсации применяйте, но не зацикливайтесь.
—————
Чаще, чем на VC, я пишу в телеграме. Заходите в гости.
За время своей работы я достаточно изучил Figma, чтобы не только хорошо ей пользоваться и получать результат, но и начать делиться своими знаниями.
Как нарисовать иконку для сайта и приложений через нейросети для генерации изображений? Разбираем лучшие способы создания иконок для сайта, приложений и презентаций, рассказываем, где скачать плоские иконки для презентации, и делимся инструментами, которые помогут сделать уникальный дизайн. Узнайте, как быстро и легко создать иконку онлайн или найт…
Традиционный дайджест Юрия Ветрова, директора по дизайну и бренду Muse Group.
Цель этой статьи – поделиться своим опытом и в комментариях сообщества обсудить ваши лайфхаки. Не претендую на истину в последней инстанции, и понимаю, что профессионалы часто смеются над использованием Figma для предпечатки, как и некоторые иронизируют над использованием Corel Draw.
Корректно заданные области нажатия являются одним из ключевых аспектов удобства взаимодействия с интерфейсом. Если область слишком маленькая, пользователю будет сложно попасть в неё, что приведёт к негативному опыту. Использование сеток помогает стандартизировать процесс и исключить подобные ошибки на этапе проектирования интерфейса.
На этой неделе Litecoin (LTC) вырос почти на 30% и достиг капитализации $10 млрд; DeXe (DEXE) подешевел на 11%, продолжая откат от февральских максимумов, а ONDO готовится выйти из нисходящего тренда.
Статья для тех, кто думал, что дизайн — это просто рисовать картинки за деньги :)