Иконки есть почти на каждом сайте: в меню, в блоках преимуществ, в контактах, в форме поиска, в корзине. Они экономят место, ускоряют восприятие и дают странице визуальный ритм. При этом именно иконки чаще всего становятся источником разнобоя: в одном блоке тонкие линейные значки, в другом закрашенные, в третьем цветные картинки из бесплатного набора. Сайт при этом выглядит так, будто его собирали из разных источников, и доверие снижается.
Хорошая новость: добиться единообразия несложно, если понимать несколько правил. В этой статье разберём, какие бывают стили, как выбрать размер, как выровнять набор по сетке, когда иконке нужна подпись и как подготовить файлы, чтобы они не тормозили сайт.
Зачем сайту иконки и чего от них ожидать
У иконок три основные функции.
- Навигация и действия. Лупа — поиск, корзина — покупки, стрелка — переход, крестик — закрыть. Такие значки привычны и считываются мгновенно.
- Иллюстрация смысла. В блоках преимуществ, услуг и этапов значок помогает быстро отличить пункты друг от друга и задаёт структуру.
- Визуальный ритм и характер. Единый набор формирует стиль сайта, как шрифт и цвет. Он связан с общим фирменным стилем.
Важно понимать, чего от иконок ждать не стоит. Они не заменяют текст. Исследования юзабилити многократно показывали: значок без подписи понятен только в узком круге общепринятых случаев. Если сомневаетесь, что посетитель верно поймёт значок, добавьте слово.
Стили иконок и как выбрать подходящий
Линейные
Контур одинаковой толщины. Выглядят легко, современно, хорошо сочетаются с минималистичным оформлением и большим количеством текста. Подходят для большинства корпоративных сайтов, услуг, сервисов. Чем тоньше линия, тем элегантнее, но тем хуже читаемость при малых размерах.
Заливные (глифы)
Сплошные силуэты. Заметнее, лучше читаются на маленьком размере и на пёстком фоне. Хорошо подходят для панелей навигации в мобильных интерфейсах и для выделения активного состояния.
Двухцветные
Основной контур плюс акцентная заливка или деталь. Добавляют характер и подходят для блоков преимуществ, где значки крупные. Требуют аккуратной палитры, иначе превращаются в пёстрый набор.
Цветные и объёмные
Многоцветные изображения, иногда с тенями и градиентами. Уместны в детских, развлекательных и образовательных проектах. Для деловых сайтов чаще выглядят несерьёзно и быстро устаревают. О том, как обращаться с плавными переходами цвета, мы писали в статье про градиенты в интерфейсах.
Кастомные иллюстративные
Значки, нарисованные специально под бренд. Дороже, зато уникальны. Если в проекте важна узнаваемость, такой вариант оправдан: иконки превращаются в фирменный элемент.
Подбирая стиль, сопоставляйте его с тоном бренда. Юридической фирме подойдёт строгий тонкий контур, студии йоги — мягкие скруглённые формы, логистической компании — чёткие геометричные значки без излишеств.
Единообразие: пять параметров, которые должны совпадать
Набор считается цельным, когда все значки совпадают по ряду признаков. Если хотя бы один выбивается, глаз это чувствует.
- Толщина линии. Если одни значки нарисованы линией в полтора пикселя, а другие в два с половиной, набор развалится.
- Скругления. Острые углы у одних и мягкие у других смотрятся как чужеродные.
- Стиль заливки. Либо везде контур, либо везде заливка, либо чёткая логика сочетания: контур в покое, заливка в активном состоянии.
- Визуальный размер. Круг и квадрат одинаковой ширины выглядят по-разному: круг кажется меньше. Опытные дизайнеры корректируют размеры оптически.
- Уровень детализации. Простой значок рядом с проработанной картинкой создаёт дисбаланс.
Самая распространённая причина разнобоя — сборка набора из разных бесплатных источников. Один значок понравился здесь, другой там, и в итоге получилась «солянка». Лучше взять один целостный набор и дорисовать недостающие значки в том же стиле.
Размеры и сетка
Иконки проектируются на квадратной сетке, внутри которой остаются поля, чтобы значок не касался границ. Стандартные размеры для интерфейсных иконок — шестнадцать, двадцать, двадцать четыре, тридцать два пикселя. Для иллюстративных значков в блоках преимуществ используют сорок восемь, шестьдесят четыре или больше.
| Назначение | Размер | Комментарий |
|---|---|---|
| Значок в тексте и мелких подписях | 16 пикселей | Только простые формы, толстая линия не нужна |
| Меню, поля форм, кнопки | 20–24 пикселя | Основной рабочий размер |
| Области нажатия на смартфоне | от 44 пикселей вместе с отступами | Сам значок может быть меньше, но зона касания больше |
| Карточки преимуществ и услуг | 40–64 пикселя | Здесь можно добавлять детали и цвет |
| Крупные иллюстрации | от 96 пикселей | Уже ближе к иллюстрациям, чем к значкам |
Следите, чтобы иконка находилась в ритме с текстом. Рядом со строкой текста значок должен быть примерно высотой с заглавную букву или чуть больше, выровнен по центру строки и иметь одинаковый отступ от подписи. Об отступах и воздухе подробно рассказывает статья про пустое пространство, а о выравнивании — разбор сетки в веб-дизайне.
Когда иконке нужна подпись
Универсально понятных значков не так много: домик, лупа, корзина, почта, закрыть, меню-бургер. Всё остальное зависит от контекста и культуры. Конверт может означать письмо, сообщения или подписку. Сердце — избранное или благотворительность. Шестерёнка — настройки или технический раздел.
Простое правило: если действие важное или значок неочевиден, подписывайте. Особенно это касается:
- основной навигации на десктопе;
- кнопок, которые приводят к заказу, оплате, удалению;
- нестандартных символов, придуманных под бренд;
- аудиторий старшего возраста и посетителей, не привыкших к интерфейсам.
Без подписи можно оставить значки в компактных мобильных панелях, где действия стандартные и повторяются в большинстве приложений. И даже там рекомендуется добавлять скрытый текст для программ экранного чтения.
Иконки в разных блоках сайта
Блоки преимуществ и услуг
Значки здесь помогают отличать пункты и создают структуру. Но они не должны быть случайными. Если в блоке «Почему мы» значки не связаны с содержанием (звёздочка для сроков, облако для гарантий), они ничего не объясняют. Лучше выбрать значок, который отражает смысл: часы для сроков, щит для гарантий, штурвал для сопровождения. Либо отказаться от иконок и использовать цифры или короткие заголовки.
Контакты
Почта, карта, часы работы, мессенджер. Здесь значок должен быть небольшим и стоять рядом с данными. Адрес и электронная почта сопровождаются понятными символами, а кликабельные элементы выделяются цветом или подчёркиванием.
Формы
Значки внутри полей (почта, пользователь, замок) делают форму наглядной, но не должны заменять подписи. Подробнее о том, как проектировать поля, смотрите в статье про формы обратной связи.
Интернет-магазин
Корзина, избранное, сравнение, личный кабинет, значки доставки и оплаты. Здесь иконки работают как инструмент: покупатель должен находить их мгновенно, поэтому они стоят на привычных местах. Как оформлять карточки товаров, мы разбираем в статье про дизайн карточек.
Футер и социальные сети
Значки мессенджеров и социальных сетей — это уже фирменные логотипы, и их нужно использовать в соответствии с правилами владельцев. Обычно их приводят к единому цвету, чтобы они не тянули на себя внимание. Что ещё размещается внизу страницы, рассказано в материале про футер сайта.
Цвет и состояния
У интерактивной иконки есть несколько состояний: обычное, при наведении, нажатое, активное, отключённое. Все они должны быть заметно различимы, но не вычурны. Часто достаточно менять цвет или заливку. Для отключённого состояния используют сниженную контрастность, но не настолько, чтобы значок исчез.
Цвет иконки должен подчиняться общей палитре. Хороший приём: нейтральный цвет по умолчанию, акцентный для активного или важного. Если значки в блоке преимуществ окрашены в разные цвета без смысловой логики, получается пестрота. Выбор оттенков подробно разбирался в статье о цветовой палитре сайта.
Не забывайте о контрасте. Значок, который несёт смысл, должен быть достаточно контрастным по отношению к фону. Правила контрастности и читаемости описаны в материале о контрасте и читаемости.
Технические форматы: что выбрать для разработки
- SVG. Основной формат для значков. Векторный, лёгкий, масштабируется без потери качества, позволяет менять цвет через стили и анимировать. Подходит почти для всех случаев.
- Спрайт или встроенные SVG. Несколько значков можно собрать в один файл, чтобы сократить число запросов. Критичные значки встраивают прямо в разметку.
- Иконочные шрифты. Когда-то были популярны, но имеют недостатки: возможны проблемы с отображением, доступностью и вес всего набора ради нескольких знаков. Сейчас от них обычно отказываются.
- PNG и WebP. Применяются для многоцветных и сложных иллюстраций, когда векторное решение неудобно. Для них нужна оптимизация, подробнее — в материале про оптимизацию изображений.
Хорошо подготовленные SVG весят считаные сотни байт, а значит, не влияют на скорость. Лишние метаданные, оставленные редактором, стоит удалять. Общая картина того, как мелочи складываются в быстрый сайт, описана в статье про скорость загрузки.
Доступность иконок
Значки должны быть понятны не только зрячим пользователям. Три базовых требования:
- Текстовая альтернатива. Если значок несёт смысл (например, это кнопка без подписи), у него должно быть доступное название для программ экранного чтения. Декоративные значки, наоборот, скрываются от них.
- Достаточный контраст и размер. Особенно для кликабельных элементов.
- Не полагаться на цвет. Красная и зелёная иконки статуса неразличимы для людей с нарушениями цветового зрения, поэтому добавляйте форму или подпись.
Больше о построении интерфейсов для всех — в статье про доступность сайта.
Типичные ошибки
- Разные стили в одном интерфейсе. Линейные значки соседствуют с заливными, а цветные с монохромными.
- Нечёткие символы. Значок, который невозможно истолковать однозначно, без подписи.
- Слишком тонкая линия. На смартфоне с низким качеством экрана значок теряется.
- Декор ради декора. Значки, которые ничего не объясняют, а только занимают место.
- Нет единой сетки. Одни значки выше, другие ниже, края не совпадают, текст смещается.
- Пренебрежение зоной нажатия. Маленький значок без отступов, по которому трудно попасть пальцем.
- Тяжёлые файлы. Иконки в виде больших растровых картинок, которые замедляют загрузку.
- Неподходящая тематика. Чересчур игривые значки на сайте консалтинговой компании.
Как собрать набор иконок для проекта
- Составьте список нужных значков: навигация, действия, состояния, блоки преимуществ, контакты.
- Выберите стиль, который соответствует бренду и общей визуальной системе.
- Определите параметры: сетку, толщину линии, скругления, палитру, размеры.
- Отрисуйте или подберите единый набор и проверьте его на контрастных фонах.
- Проверьте узнаваемость на незнакомых людях.
- Подготовьте файлы в SVG, оптимизируйте и задокументируйте в дизайн-системе. Как это оформляется, разбираем в статье про дизайн-систему.
Итог
Иконки — маленькая деталь, но она показывает уровень подхода к дизайну. Единый стиль, понятные символы, правильные размеры и подписи там, где они нужны, делают интерфейс аккуратным и понятным. Случайные значки из разных наборов, наоборот, выдают спешку и разрушают доверие.
В Mevero иконки проектируются как часть системы: мы подбираем стиль под тон бренда, готовим набор в векторе и передаём разработчикам с правилами использования. Если хотите, чтобы ваш сайт выглядел цельно, ознакомьтесь с нашей услугой веб-дизайна или напишите нам через контакты.
