Размер иконок в интерфейсах¶
Размер иконок — физические или пиксельные габариты графического элемента интерфейса, определяющие его визуальный вес, читаемость и удобство взаимодействия. Размер иконки измеряется в пикселях (для экранов), пунктах (для типографики) или миллиметрах (для печати) и подбирается с учётом плотности экрана, платформы и контекста использования.
¶Единицы измерения и плотность пикселей
На экранах размер задаётся в физических пикселях, но воспринимаемый размер зависит от плотности (DPI/PPI). Дисплей Retina (220–320 PPI) показывает ту же иконку вдвое мельче по физическим пикселям, чем стандартный экран 96 PPI. Поэтому в интерфейсах используют логические единицы:
- pt (пункт) — базовая единица в iOS и macOS (1 pt ≈ 1/72 дюйма);
- dp (density-independent pixel) — единица Android, 1 dp ≈ 1 физический пиксель на экране 160 PPI;
- px — в вебе, где размер часто задаётся через CSS.
Стандартные значения для системных иконок: 16, 20, 24, 32, 48, 64, 128 px.
¶Стандартные размеры по платформам
| Платформа | Основные размеры иконок | Примечание |
|---|---|---|
| iOS | 20, 29, 40, 60, 76, 83.5 pt | Размеры для иконок приложений и статус-бара |
| Android | 24, 36, 48, 72, 96, 144, 192 px | Материал-дизайн: 24 dp для UI, 48 dp для тач-таргетов |
| Windows | 16, 24, 32, 48, 256 px | Метро-дизайн: 16, 24, 32, 48, 256 |
| Веб (favicon) | 16, 32, 48, 64, 128 px | Форматы .ico, .png, .svg |
| macOS | 16, 32, 128, 512, 1024 px | Размеры для док-станции и Finder |
¶Тач-таргеты и минимальные размеры
Минимальный размер интерактивной иконки определяется не эстетикой, а эргономикой. Рекомендации:
- Apple (HIG): минимальный тач-таргет 44×44 pt;
- Google (Material Design): 48×48 dp для основных действий, 40×40 dp для вторичных;
- WCAG 2.5.5: рекомендуемый размер 44×44 CSS-пикселя.
Если визуальная иконка меньше минимального тач-таргета, зона нажатия расширяется прозрачной областью вокруг неё.
¶Масштабирование и сетка
Иконки рисуются на стандартной сетке: 24×24 px (Material Design), 16×16 px (классические UI), 20×20 px (macOS). Внутри сетки отступы от края — 1–2 px, чтобы иконка визуально не сливалась с соседними элементами.
Для разных размеров иконки не масштабируются пропорционально, а перерисовываются: мелкие версии упрощают детали, чтобы избежать «каши». Например, иконка 16 px не содержит мелких штрихов, которые есть в 48 px.
¶Векторные и растровые форматы
- SVG — масштабируется без потерь, используется в вебе и современных приложениях;
- PNG — растровый формат с прозрачностью, готовится под конкретные размеры (16, 32, 48, 128, 256, 512 px);
- ICO — контейнер для favicon, содержит несколько размеров;
- ICNS — macOS, содержит набор размеров от 16 до 1024 px;
- WebP/AVIF — современные форматы с поддержкой прозрачности и меньшим весом.
¶Типографические иконки и эмодзи
Иконки, набранные шрифтом (Font Awesome, Material Icons, IcoMoon), измеряются в пунктах и масштабируются как текст. Размер подбирается по кеглю основного текста: обычно иконка на 2–4 pt больше базового размера шрифта.
Эмодзи в Unicode имеют фиксированные размеры в зависимости от платформы: на iOS — 16×16 pt, на Android — 24×24 dp, в вебе — 16×16 px.
¶Практические рекомендации
- Использовать единую систему размеров внутри продукта (например, 16/20/24/32 px).
- Не уменьшать иконку ниже 16 px без перерисовки.
- Проверять читаемость на экранах с разной плотностью.
- Для тач-интерфейсов соблюдать минимальные тач-таргеты 44×44 pt / 48×48 dp.
- Предпочитать SVG там, где возможен произвольный масштаб.
¶Источники
- Apple Human Interface Guidelines
- Google Material Design Guidelines
- WCAG 2.1 (Web Content Accessibility Guidelines)
- Microsoft Fluent Design System Guidelines