Размер области нажатия: почему 24px слишком мало и правило 44pt и 48dp
Иконка 24px нормальна, а вот область нажатия 24px нет. Apple просит 44 pt, Android 48 dp, а 24 px из WCAG это лишь нижний порог. Четыре исправления бок о бок и код для разработчика.
Иконка 24 px это нормально. А вот область нажатия 24 px нет. Люди пользуются кончиком пальца, часто одной рукой и на ходу, и такая маленькая цель либо промахивается, либо попадает в соседа. Рисуйте иконку маленькой, а область нажатия большой, и держитесь чисел ниже.
Почему 24 px это число, которое рисуют все
Иконки рисуют в 24. Например, Material Symbols поставляются с 24 px как предпочтительным размером. Дизайнер передаёт иконку 24 px, разработчик делает кнопку размером с иконку, и зона нажатия получается размером с почтовую марку.
Второй источник этого числа это доступность. WCAG 2.2 на уровне AA требует, чтобы цели для указателя были не меньше 24 на 24 CSS-пикселей. Это минимум, причём с исключениями. Легко принять нижний порог за цель, а дизайн, стоящий ровно на пороге, проходит проверку и всё равно раздражает людей.
Четыре числа, которые нужно знать
| Источник | Размер | Что это |
|---|---|---|
| Apple, iOS и iPadOS | 44 на 44 pt | Размер элемента по умолчанию |
| Apple, iOS и iPadOS | 28 на 28 pt | Наименьший размер элемента |
| Android, Material | 48 на 48 dp | Рекомендуемая область касания |
| WCAG 2.2, 2.5.8 (AA) | 24 на 24 CSS px | Минимум, с исключениями |
| WCAG 2.2, 2.5.5 (AAA) | 44 на 44 CSS px | Расширенная цель |
Рекомендация Apple прямолинейна: кнопке нужна область нажатия не меньше 44 на 44 пункта. Пункты, dp и CSS-пиксели это независимые от плотности единицы, поэтому дизайнеры используют их рядом на одной сетке, как на картинке.
Одно из исключений WCAG стоит знать. Две слишком маленькие цели допускаются, если круг в 24 px с центром на каждой из них не касается другой цели. Это правило про расстояние, и поэтому ряд крошечных иконок, расставленных далеко друг от друга, может пройти проверку, а те же иконки вплотную провалятся.
Исправление 1: добавьте иконке отступы до 44
Зона нажатия 24 x 24
Зона нажатия 44 x 44
Зона нажатия это рамка кнопки, а не картинка внутри неё. Поэтому исправление в том, чтобы задавать размер кнопки, а не иконки: оставьте значок 24 и дайте кнопке не меньше 44 с каждой стороны. Это относится ко всем маленьким элементам, стоящим поодиночке: стрелке назад, кнопкам «поделиться» и «ещё» в тулбаре, кнопке информации в строке, звезде избранного, чекбоксу, плюсу и минусу в степпере.
Когда два таких элемента стоят рядом, их рамки могут соприкасаться. Это нормально: между касающимися рамками нет зазора, в который можно промахнуться.
Исправление 2: пусть нажимается вся строка
Только переключатель
Вся строка
Строка уже есть, она уже читается и она намного больше 44. Оберните подпись и элемент управления в один нажимаемый элемент, чтобы вся строка переключалась. Это помогает и тем, кто пользуется скринридером или switch access: получается один элемент с одним именем, а не подпись и одинокий переключатель.
Исправление 3: дайте кнопке закрытия настоящую зону нажатия
16 x 16
44 x 44
То же касается кнопки закрытия баннера, кнопки очистки внутри поля поиска и маленькой иконки удаления на теге. Рисуйте знак лёгким, а зону нажатия весомой.
Исправление 4: поставьте главное действие внизу
Верхний угол
Внизу, на всю ширину
Это дизайнерское правило, а не измеренная статистика: суть в том, что место элемента важно не меньше, чем его размер. Главное действие идёт вниз и на всю ширину. «Отмена» и другие второстепенные действия могут остаться в панели сверху.
Как это сверстать
В вебе задавайте размер кнопки, а не иконки:
.icon-button {
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 44px;
}
.icon-button svg { width: 24px; height: 24px; }
/* one tappable row: label and switch together */
.row { display: flex; align-items: center; min-height: 44px; }
На Android Google советует использовать android:minWidth и android:minHeight, чтобы задать нижнюю границу, когда элемент определяет размер по содержимому:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="48dp"
android:minHeight="48dp" />
На iOS в SwiftUI задайте элементу frame и сделайте так, чтобы реагировал весь frame:
Button(action: close) { Image(systemName: "xmark") }
.frame(minWidth: 44, minHeight: 44)
.contentShape(Rectangle())
Эти три фрагмента это наши примеры применения правила, а не код, скопированный с платформы.
Проверьте свои экраны за пять минут
- В файле дизайна нарисуйте каждый нажимаемый элемент как рамку 44 на 44 поверх иконки. Любая рамка, которая не помещается, это цель, которую нужно увеличить.
- Строки списков, табы, чипы и элементы пагинации: нажимается весь элемент или только часть со словом?
- Найдите все элементы закрытия, очистки и удаления. Каждому нужны свои 44.
- Найдите главное действие на каждом экране. Находится ли оно там, где палец?
- На настоящем телефоне, одной рукой, пройдите основной сценарий. Всё, в что вы промахнулись дважды, слишком маленькое.
FAQ
Какой минимальный размер области нажатия?
На iPhone по умолчанию у Apple 44 на 44 пункта, а наименьший размер элемента 28 на 28. На Android рекомендуется 48 на 48 dp. В вебе WCAG 2.2 задаёт минимум 24 на 24 CSS-пикселя на уровне AA, с исключениями.
Какой величины должна быть кнопка на мобильном?
Не меньше 44 на 44 пункта на iOS и 48 на 48 dp на Android, и по ширине, и по высоте. Главная кнопка на всю ширину внизу экрана уже заметно больше обоих значений.
Должна ли сама иконка быть 44 px?
Нет. Иконка может остаться 24 px или меньше. 44 должна быть область, которая реагирует на касание, то есть кнопка вокруг иконки. Добавьте кнопке padding или минимальные ширину и высоту.
Достаточно ли цели 24 на 24 px для WCAG?
Для уровня AA в большинстве случаев да: критерий требует не меньше 24 на 24 CSS-пикселей, с исключениями для расстояний, строчных ссылок и некоторых других случаев. Расширенный уровень AAA требует 44 на 44. Прохождение AA это минимум для соответствия, а не хороший размер для дизайна.
В чём разница между pt, dp и px?
Все они независимы от плотности. Пункт это единица iOS, dp единица Android, а CSS-пиксель единица веба. Физически они не идентичны, но дизайнеры раскладывают их на одной сетке, поэтому 44 pt и 48 dp считаются примерно одним и тем же размером.
Где на телефоне должна быть главная кнопка?
Внизу экрана, на всю ширину, там, где лежит большой палец. Второстепенные действия, например «Отмену», поместите в верхнюю панель. Это эмпирическое правило раскладки, а не измеренная величина.
Источники
- Apple Human Interface Guidelines, Accessibility: размер элемента по умолчанию в iOS и iPadOS 44 на 44 пункта, минимальный размер элемента 28 на 28 пунктов.
- Apple Human Interface Guidelines, Buttons: кнопке нужна область нажатия не меньше 44 на 44 пункта.
- Android Accessibility Help, Touch target size: не меньше 48dp по ширине и высоте, а
android:minWidthиandroid:minHeightкак нижняя граница для элементов, размер которых определяется содержимым. - W3C, WCAG 2.2, 2.5.8 Target Size (Minimum): не меньше 24 на 24 CSS-пикселей на уровне AA, включая исключение по расстоянию, и 2.5.5 Target Size (Enhanced): 44 на 44 на уровне AAA.
- Google Fonts, Material Symbols guide: 24 px как предпочтительный размер иконки.
- Экраны выше это наши собственные примеры. Совет о размещении внизу это дизайнерское правило, а не статистика.
- Больше постов из серии «одно правило» в UX Brainy.
Want every tap in your app to land the first time? Our team designs and builds mobile UI with the hit areas decided once, in the system.
Get Started
