Содержание · 7
Как строить иконки на единой сетке, какую толщину линии выбрать, когда нужны подписи и почему универсальных иконок почти не бывает.
Единая сетка
Все иконки набора строятся в одном квадрате — обычно 24 × 24 пикселя с внутренним полем 2 пикселя. Это гарантирует, что иконки будут выглядеть одинаковыми по «весу» рядом друг с другом.
Внутри сетки задают ключевые формы: круг, квадрат, вертикальный и горизонтальный прямоугольник. Иконки строятся по ним, иначе круглая иконка визуально окажется меньше квадратной.
Толщина штриха
Толщина линии должна быть одинаковой во всём наборе и согласованной с толщиной шрифта интерфейса. Для 24-пиксельной сетки типичны 1,5 или 2 пикселя.
Важная деталь: при масштабировании иконки толщина не должна масштабироваться пропорционально — иначе на 16 пикселях линия станет размытой, а на 48 слишком тонкой. Нужны отдельные размеры набора.
Оптическая коррекция
Математически ровные фигуры выглядят неровно. Круг делают чуть крупнее квадрата, диагональные элементы — чуть толще горизонтальных, острые углы слегка скругляют, чтобы они не выглядели тяжелее остальных.
Именно эта работа отличает профессиональный набор от иконок, нарисованных по сетке буквально.
Понятность
Универсально понятных иконок очень мало: дом, лупа, корзина, крестик, стрелки. Всё остальное требует подписи или контекста — включая столь любимый «гамбургер» и три точки.
Правило простое: если иконка используется без подписи, она должна входить в короткий список общепонятных. В остальных случаях подпись обязательна.
- Без подписи: дом, поиск, корзина, закрыть, стрелки, плюс.
- С подписью: настройки, фильтр, поделиться, экспорт, профиль.
- Никогда в одиночку: абстрактные метафоры и брендовые символы.
Универсально понятных иконок почти не существует. Подпись стоит дешевле, чем цепочка догадок пользователя.
Почему иконки понимают хуже, чем кажется
Однозначно опознаются немногие знаки — дом, поиск, крестик, стрелка назад, корзина покупок. Всё остальное толкуется по опыту: дискета как «сохранить» понятна тем, кто застал дискеты; три полосы стали меню только после десятилетия привычки. Иконка без подписи экономит место и тратит понимание.
Отсюда практическое правило: подпись обязательна везде, где действие не отменяемо или редко. В панели с пятью постоянными разделами иконки без подписей допустимы — там работает мышечная память; в контекстном меню действий — нет.
Что делает набор иконок системой
- Одна сетка и одна толщина штриха: смешение линейных и заливных знаков рассыпает набор.
- Один уровень детализации: сложный знак рядом с простым выглядит чужим.
- Оптическое выравнивание по массе, а не по габариту рамки.
- Размер рисунка 20–24 пикселя при области нажатия не меньше 44.
- Поведение в отключённом и активном состоянии описано заранее.
Что в итоге
Иконки работают, когда построены на единой сетке, имеют согласованную толщину и оптически скорректированы.
И почти всегда нуждаются в подписи: интуитивно понятных символов гораздо меньше, чем принято думать.
Коротко
- Нужна ли подпись рядом с иконкой?
- Почти всегда да. Без подписи однозначно читаются пять-шесть иконок — дом, поиск, закрыть, назад, корзина. Всё остальное толкуется по-разному, и подпись дешевле недоразумения.
- Какого размера должна быть иконка?
- Сама иконка 20–24 пикселя, но область нажатия не меньше 44 пикселей по обеим сторонам — это требование к цели, а не к рисунку.
Микровзаимодействия
Длительность, кривые ускорения и обратная связь. Разбираем, почему одни интерфейсы кажутся отзывчивыми, а другие вялыми при одинаковой скорости работы.ДальшеЧитайте также
Посмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…