Размер тач-зон и зона большого пальца в мобильном дизайне
Практика3 минРедакция Innovialabs
Коротко
Делайте область нажатия не меньше 44×44 pt на iOS и 48×48 dp на Android (минимум WCAG уровня AA — 24×24 CSS px), оставляйте между элементами зазор, а частые и главные действия размещайте в нижней части экрана, куда легко дотянуться большим пальцем.
Рекомендованные размеры
| Источник | Минимальная зона | Примечание |
|---|---|---|
| Apple Human Interface Guidelines | 44×44 pt | Для любого нажимаемого элемента |
| Material Design (Google) | 48×48 dp | Плюс зазор между элементами, около 8 dp |
| WCAG 2.2, критерий 2.5.8 (AA) | 24×24 CSS px | Или достаточный отступ вокруг меньшего элемента; ссылки внутри текста — исключение |
| WCAG 2.2, критерий 2.5.5 (AAA) | 44×44 CSS px | Расширенный уровень |
Пункты, dp и CSS-пиксели — логические единицы, а не физические пиксели экрана, поэтому значения примерно сопоставимы. Практическое правило: проектируйте под 44–48 единиц, а 24 считайте абсолютным минимумом, а не целью.
Видимый размер и область нажатия — разные вещи
Иконка может быть 24×24 и при этом иметь область нажатия 48×48. Пальцу важна именно hit area, а не рисунок. В вебе её расширяют отступами или псевдоэлементом:
.icon-button {
position: relative;
width: 24px;
height: 24px;
}
.icon-button::after {
content: "";
position: absolute;
inset: -12px; /* 24 + 12 + 12 = 48px области нажатия */
}
Следите, чтобы расширенные области соседних элементов не перекрывались, иначе нажатие попадёт не туда.
Зазоры важны не меньше размера
Две кнопки по 44 pt вплотную друг к другу всё равно дают промахи. Оставляйте промежуток, особенно для:
- рядов иконок в тулбарах;
- ссылок в списках и меню;
- «Отмены» и «Удаления», стоящих рядом.
Мелкие элементы обычно появляются в плотных макетах — таблицах и календарях. Если ячейки нельзя увеличить, сделайте строки выше или открывайте детали по нажатию, вместо того чтобы ставить несколько крошечных кнопок в одну строку.
Как работает зона большого пальца
Многие часто держат телефон одной рукой и нажимают большим пальцем. Палец движется по дуге от основания ладони, и экран делится на зоны:
- Удобная — нижняя и средняя часть экрана.
- Нужно тянуться — верхняя середина и края.
- Сложная — верхние углы, особенно противоположный держащей руке.
Чем больше телефон, тем больше сложная зона. При этом люди меняют хват, перекладывают телефон в другую руку, пользуются двумя пальцами, а кто-то левша. Поэтому самое надёжное место — центр и низ экрана, а не конкретный угол.
Где размещать ключевые действия
- Главное действие экрана («Оплатить», «Продолжить») — внизу, часто кнопкой на всю ширину.
- Основная навигация — нижний таббар вместо иконки меню в верхнем углу.
- Частые действия — в нижней половине: bottom sheet, плавающая кнопка действия, нижние панели инструментов.
- Информация — вверху: заголовок, статус, итоги. Чтобы читать, тянуться не нужно.
- Редкие и опасные действия — могут находиться вне удобной зоны. Удаление аккаунта не должно быть в одном лёгком касании; добавьте ещё и подтверждение.
Если важный элемент всё же должен быть вверху (например, поиск в шапке), дайте второй путь: открытие потягиванием вниз или дубль ближе к низу экрана.
Чек-лист перед передачей в разработку
- Все нажимаемые элементы не меньше 44 pt / 48 dp или их область нажатия расширена.
- Области соседей не перекрываются, между ними есть зазор.
- Главное действие и навигация находятся в нижней части экрана.
- Опасные действия не стоят вплотную к частым.
- Макет проверен на реальном большом телефоне одной рукой — и левой, и правой.
В Figma удобно сделать простой компонент-накладку 44×44 или 48×48 и класть его поверх иконок, чтобы быстро проверять размеры.