Контур или заливка: что выбрать
Контурные иконки и залитые иконки могут передавать одну и ту же идею, но в интерфейсе они ведут себя по-разному. Разница не сводится только к визуальному вкусу. Толщина штриха, негативное пространство, контраст и условия фона влияют на то, насколько быстро люди распознают иконку и насколько хорошо она работает в разных состояниях, на разных размерах экрана и в плотных макетах. Выбор между ними на самом деле сводится к ясности и тону.
Если говорить просто, контурные иконки используют обводку и открытые формы, а залитые иконки опираются на сплошные формы и более сильную визуальную массу. Контурные стили обычно кажутся легче и точнее. Залитые стили обычно выглядят смелее и считываются быстрее. Ни один вариант не лучше сам по себе. Правильный выбор зависит от того, где появляется иконка, насколько маленькой она становится и что интерфейс хочет, чтобы пользователь заметил в первую очередь.
Контурные иконки лучше всего работают, когда UI нужны пространство и сдержанность
Иконки с обводкой часто оказываются лучшим выбором, когда продукту нужен более легкий визуальный акцент. Они спокойнее смотрятся в тулбарах, панелях настроек, вторичных действиях и десктопных интерфейсах с большим количеством свободного пространства. Поэтому контурные иконки так часто встречаются в продуктах для продуктивности, административных инструментах и редакционных интерфейсах, которые хотят выглядеть чисто, а не шумно.
Они также хорошо сочетаются с брендами, которые тяготеют к минималистичным, техническим или премиальным визуальным системам. Если у вас тонкая типографика и просторные макеты, контурные иконки обычно вписываются естественнее. Библиотека вроде посмотреть бесплатные наборы контурных иконок полезна, когда нужен более легкий вид без потери цельности.
Компромисс здесь в читаемости. На маленьких размерах контурные иконки могут быстро терять детали, если штрихи слишком тонкие или внутренние просветы слишком открытые. Иконка, которая выглядит элегантно при 32 пикселях, может стать расплывчатой при 16 пикселях. Если ваш интерфейс опирается на крошечные иконки для быстрого сканирования, тестировать нужно особенно внимательно.
Залитые иконки сильнее на маленьких размерах и в моментах повышенного внимания
Залитые иконки обычно легче читать в маленьком размере, потому что их силуэты остаются заметными даже тогда, когда детали исчезают. Это делает их особенно эффективными в мобильных навигационных панелях, компактных кнопках действий, статусных маркерах и поверхностях уведомлений, где скорость распознавания важнее тонкости. Если человеку нужно за полсекунды найти на телефоне Домой, Поиск или Профиль, залитая иконка часто выдерживает это лучше, чем тонкий контур.
Залитые иконки также обычно лучше работают на темном фоне. Выразительные формы держат контраст надежнее, чем тонкие штрихи, особенно когда интерфейс использует слои поверхностей или эффекты свечения. Контурные иконки могут выглядеть изящно в темном режиме, но требуют более продуманной цветовой системы.
По той же причине залитые стили часто безопаснее для основных действий и индикаторов текущего состояния. Во многих приложениях дизайнеры используют контурную версию для неактивных пунктов навигации и переключают ее на залитую, когда элемент становится активным. Этот паттерн работает, потому что смена состояния заметна сразу, еще до того как пользователь обратит внимание на цвет. Если вам нужна более сильная обратная связь по состоянию, посмотрите залитые иконки для UI-проектов и сравните силу силуэта на тех размерах, которые реально использует ваш продукт.
Смена состояний и смешение стилей работают только при ясном правиле
Дизайнеры действительно смешивают контурные и залитые иконки в одном продукте, но такое смешение выглядит осознанно только тогда, когда оно подчинено системе. Самое частое правило связано с состоянием: контур для неактивного, заливка для активного. Еще одно хорошее правило связано с иерархией: контурные иконки для вторичных инструментов, залитые для основной навигации или предупреждений. Проблемы начинаются, когда смешение становится случайным.
Здесь важно мышление в духе Gestalt. Пользователи объединяют похожие формы, веса и поведение в паттерны. Если у одного семейства иконок согласованные пропорции и логика штриха, интерфейс ощущается цельным. Если половина набора воздушная и геометричная, а другая половина плотная и массивная, продукт начинает выглядеть как собранный из разных кусков.
Двухтоновые иконки подчиняются тому же правилу. Их лучше оставлять для мест, где дополнительная глубина действительно помогает, например для онбординга, акцентов на возможностях, маркетинговых панелей или более выразительных пустых состояний. В плотном продуктовым UI одноцветные иконки обычно лучше, потому что их проще быстро считывать и проще удерживать согласованными между состояниями.
Дашбордам, продуктам с большим объемом данных и мобильному UI нужны разные приоритеты
Для дашбордов и интерфейсов с большим объемом данных контурные иконки часто хорошо работают там, где они поддерживают таблицы, фильтры и вторичные действия вокруг плотного контента. Они могут сделать оболочку легче, чтобы графики, числа и подписи оставались главными. Но это верно только тогда, когда иконки не слишком маленькие. Как только элементы управления становятся компактными, залитые иконки часто проще распознать.
Это значит, что универсального правила для дашбордов не существует. Используйте контурные иконки, когда иконка поддерживает информацию. Используйте залитые иконки, когда иконка несет на себе интерактивную нагрузку. Иконка фильтра в просторном тулбаре может оставаться контурной. Маленькое предупреждение, колокольчик уведомлений или выбранный пункт навигации в тесной панели часто выигрывают от заливки.
Мобильные интерфейсы обычно еще сильнее смещают решение в сторону залитых иконок, потому что доступный размер меньше, а среда менее терпима. Люди пользуются телефонами в движении и с разделенным вниманием. Более смелые силуэты помогают. Это не значит, что каждая мобильная иконка должна быть сплошной. Это значит, что иконки, связанные с основной навигацией, статусом или активными состояниями, обычно требуют более сильного распознавания.
Выбирайте стиль, который подходит вашему бренду и базовому уровню доступности
Лучший стиль иконок это тот, который соответствует и визуальному тону бренда, и вашему порогу удобства использования. Если ваш бренд ощущается точным, спокойным, редакционным или техническим, контурные иконки могут поддержать этот голос. Если он кажется уверенным, дружелюбным, прямым или похожим на приложение, залитые иконки могут подойти лучше. Выбор должен перекликаться с типографикой, радиусом скругления, стилем иллюстраций и поведением цвета.
Доступность должна быть частью этого решения. Иконки SVG масштабируются чисто и могут быть правильно размечены, когда используются как значимая интерфейсная графика. Когда SVG работает как изображение или сгруппированный символ, MDN рекомендует рассматривать его как единую значимую графику с подходящей маркировкой. Сам по себе стиль не создает ясности. Иконке все равно нужны достаточный контраст, достаточный размер и узнаваемая форма.
Практическое правило простое. Используйте контурные иконки, когда нужна визуальная сдержанность и есть достаточно размера, чтобы сохранить детали. Используйте залитые иконки, когда важнее скорость, акцент и читаемость на маленьком размере. Смешивайте их только тогда, когда система объясняет зачем. Для большинства команд такой подход полезнее, чем абстрактный вопрос о том, какой стиль выглядит лучше.