Знакомая ситуация: вы сверстали экран идеально по макету. Иконка «Закрыть» (крестик) - ровно 24x24, как нарисовал дизайнер.
Но пользователи бесятся, тыкая в нее по 5 раз, и не могут попасть.
Это классическая ошибка новичка: путать видимый размер и кликабельную область.
В гайдлайнах (HIG и Material Design) написано кровью:
🔴 Минимальная область нажатия:
🔵🍎 iOS: 44x44 pt
🔵🤖 Android: 48x48 dp
Если ваша иконка меньше (например, 24x24), вы обязаны искусственно увеличить область нажатия, не меняя визуал.
Как это сделать грамотно:
🤖 Android (Compose & XML):
🔵Compose: Используйте модификатор
.minimumInteractiveComponentSize(). Он сам добавит невидимые отступы, чтобы дотянуть размер до 48dp.🔵XML: Добавьте
padding="12dp" к самому ImageView или оберните его в прозрачный контейнер, на который повесьте клик. Не используйте TouchDelegate без крайней нужды, это больно.🍏 iOS (SwiftUI & UIKit):
🔵SwiftUI: Распространенная ошибка — вешать
.onTapGesture на маленькую иконку.🔵Плохо:
Image("close").onTapGesture { ... }🔵Хорошо:
Image("close").frame(width: 44, height: 44).contentShape(Rectangle()).onTapGesture { ... } (мы делаем прозрачную рамку вокруг).🔵UIKit: Переопределите метод
point(inside:with:) в кнопке, чтобы она ловила касания за своими пределами.💡 Лайфхак:
Включите в настройках разработчика на телефоне «Показывать границы элементов» (Show layout bounds). Если вы видите маленькие прямоугольники вокруг кнопок, это повод для рефакторинга.
Заботьтесь о пальцах своих пользователей! А вы спорите с дизайнерами, когда они рисуют слишком мелкие элементы? 👇
#ux #ui #android #ios #tips #mobile #design
👉 @developer_mobila