Иконки помогают ориентироваться на странице, но только когда они однозначны и единообразны. Набор, собранный из разных источников по мере надобности, делает интерфейс шумным: линии разной толщины, разные пропорции, где-то контур, где-то заливка. Пользователь не сформулирует, что именно не так, но ощущение небрежности останется. Ниже — как мы подходим к иконкам на проектах.
Один набор на весь сайт
Главное правило простое: все иконки происходят из одного семейства. Это означает одинаковую толщину линий, одинаковые скругления концов, единую сетку построения и один размер холста. Смешение линейных и залитых иконок в одном ряду видно сразу даже неподготовленному глазу.
Если нужной иконки в наборе нет, её рисуют в том же стиле, а не берут из другого источника. Это дешевле, чем кажется: большинство недостающих значков собирается из тех же примитивов, что уже есть в наборе. Замена набора на середине проекта, наоборот, дорога — приходится проверять каждое место использования.
Полезно ограничить и количество. Иконка рядом с каждым пунктом меню, каждым заголовком и каждым абзацем перестаёт что-либо выделять: когда подсвечено всё, не подсвечено ничего.
Формат
| Формат | Плюсы | Минусы | Когда использовать |
|---|---|---|---|
| SVG | Масштабируется без потерь, красится стилями, малый вес | Требует подготовки файлов | Почти всегда |
| SVG-спрайт | Один запрос на весь набор, кэшируется | Нужна сборка | Когда иконок много и они повторяются |
| Иконочный шрифт | Простое подключение, одна строка кода | Грузится весь набор целиком, проблемы с доступностью и отображением при сбое загрузки | Устаревающий вариант, на новых проектах не выбираем |
| PNG | Подходит для сложной графики с градиентами | Не масштабируется, несколько файлов под разные экраны | Редко, для иллюстраций |
Отдельно про иконочные шрифты: их основная проблема не в качестве, а в том, что ради трёх значков загружается файл со всем набором, иногда в несколько сотен килобайт. На проектах, которые мы принимаем на поддержку, это регулярно оказывается одним из самых тяжёлых ресурсов страницы, причём подключённым дважды — из шаблона и из подвала.
Подготовка файлов
- Очистить экспорт. Редакторы оставляют в файле служебные данные, комментарии, пустые группы и идентификаторы слоёв. После очистки файл нередко становится в разы легче.
- Привести к единому холсту. Обычно квадрат 24 на 24 единицы, с одинаковыми полями, чтобы значки выглядели одного размера в ряду.
- Убрать фиксированный цвет. Заменить его на наследование от цвета текста, тогда иконка перекрашивается стилями и работает в тёмной теме без дублирования файлов.
- Перевести обводки в контуры, если иконка должна масштабироваться без изменения толщины линии.
- Собрать часто используемые в спрайт, чтобы не делать десяток отдельных запросов.
- Проверить на мелком размере. Иконка, которая читается на 48 пикселях, на 16 может превратиться в пятно.
Иконка без подписи обычно непонятна
Универсально считываются немногие значки: корзина, поиск, крестик закрытия, три полосы меню, стрелка назад. Всё остальное — шестерёнки, гаечные ключи, папки, стрелки в кружках, абстрактные фигуры — толкуется по-разному. Значок дискеты как символ сохранения понятен людям, которые дискет никогда не видели, только по привычке, а не по смыслу.
Отсюда практическое правило: в навигации и на кнопках подпись обязательна, иконка её усиливает, но не заменяет. Исключение — небольшой набор действий, повторяющихся на каждом экране, где место действительно дорого и значение подкреплено обучением: в панелях управления такое допустимо, на сайте почти никогда.
Проверить легко: закройте подписи и попросите человека со стороны сказать, что делает каждая кнопка. Расхождения появляются на второй-третьей иконке.
Доступность
- Декоративная иконка должна быть скрыта от программ чтения с экрана, иначе она озвучивается лишним шумом.
- Значимая иконка обязана иметь текстовое описание, передающее смысл, а не название файла.
- Кнопка только со значком должна содержать невидимое название действия, иначе она читается как «кнопка» без пояснений.
- Иконка не должна быть единственным носителем смысла: статус, обозначенный только цветным кружком, не различат люди с нарушением цветовосприятия.
- Область нажатия делается больше самого значка: попадать пальцем в шестнадцать пикселей неудобно.
Как иконки влияют на скорость страницы
Сами по себе значки весят немного, но способ подключения меняет картину. Десять отдельных файлов — это десять запросов; набор в виде шрифта — один тяжёлый файл, который блокирует отрисовку текста; встроенные прямо в разметку значки увеличивают размер каждой страницы, зато не требуют отдельных обращений к серверу.
Разумный компромисс, который мы применяем: часто повторяющиеся значки собираются в спрайт и кэшируются надолго, редкие вставляются в разметку по месту, а от подключения целого набора ради нескольких иконок отказываемся. Отдельно стоит проверить, не подключён ли один и тот же набор дважды из разных частей шаблона — на старых проектах это встречается регулярно и обнаруживается за минуту в списке загруженных ресурсов.
Лицензии
У бесплатных наборов условия различаются сильнее, чем принято думать. Часть требует указания автора, часть запрещает использование в коммерческих продуктах, часть разрешает всё, кроме перепродажи самого набора. Отдельно оговаривается право изменять значки: не все лицензии это допускают.
Практическая рекомендация: хранить текст лицензии рядом с файлами, в том же каталоге проекта, вместе со ссылкой на источник и датой загрузки. Через год вспомнить, откуда взялся набор и на каких условиях, обычно невозможно, а вопрос возникает в самый неподходящий момент — при продаже продукта или при претензии правообладателя.
Что проверить перед сдачей
Короткий список, по которому мы проходим перед запуском: все иконки из одного набора и одной толщины; каждая читается на своём реальном размере; цвет наследуется, и в тёмной теме ничего не пропадает; декоративные скрыты от программ чтения, значимые подписаны; на кнопках есть текст либо невидимое название действия; общий вес иконок не превышает разумного, а весь набор не загружается ради нескольких значков; при отключённых стилях и неудачной загрузке страница остаётся понятной.
Нужна помощь
Мы собираем интерфейсы с единым набором элементов, включая иконки, подписи и состояния, и следим за весом и доступностью. Если нужно привести в порядок существующий интерфейс или спроектировать новый, обсудим проектирование интерфейсов и объём работ.
