Иконки — это визуальные символы, которые при грамотном использовании способны передавать информацию гораздо быстрее текста. Они служат для того, чтобы помочь пользователю быстрее ориентироваться по сайту, экономить место, а также делать интерфейс более удобным для людей, не знающих язык сайта или имеющих трудности с чтением.
Базовая анатомия
Графический символ центрируется в области отрисовки. Толщина линий и размер деталей определяются общим размером иконки — чем меньше иконка, тем проще должен быть символ. Защитное поле по периметру обеспечивает чистоту восприятия.
Размеры и масштабирование
Стандартные размеры иконок (16, 24, 32 пикселей) выбраны для оптимальной читаемости. При масштабировании очень важно сохранять чёткость мелких деталей. Кроме того, при создании элемента стоит закладывать область касания.
Области взаимодействия
Чаще всего, для удобного использования иконке требуется область касания не менее 44×44 пикселей. При этом сам символ может быть меньше, но важно оставлять невидимую область для комфортного попадания пальцем. Если иконок несколько, и они отвечают за разные действия, расстояние между областями должно быть не менее 8 пикселей.
Точно также, как ссылкам и кнопкам, иконкам необходимо реагировать на действия пользователя, обеспечивая обратную связь. Всем состояниям следует быть хорошо различимыми, но не нарушать гармонию интерфейса.
Default
В обычном состоянии иконка должна быть контрастной и легко считываться, сохраняя визуальное единство с окружающими элементами.
Hover
При наведении иконка сигнализирует о своей интерактивности — меняет цвет или, например, добавляет легкую подсветку.
Active
Нажатие подтверждается мгновенным визуальным откликом, чаще всего изменением цвета или небольшой трансформацией.
Disabled
Неактивное состояние можно передать через снижение контрастности и насыщенности, делая иконку визуально приглушённой.
