Как проверять соответствие макета и UI на Android и iOS устройствах?

Что проверяют

Знаете ли вы платформенные единицы и особенности экранов или сверяете макет на глаз с одним телефоном. Следом обычно спрашивают, на каких устройствах вы проверяете и как выбираете этот набор.

Как отвечать

Начните с источника правды: макет в Figma, в режиме Dev Mode видны отступы, размеры, шрифты и цвета. Сверять надо в платформенных единицах: dp и sp на Android, pt на iOS. Пиксели на скриншоте зависят от плотности экрана (xxhdpi, @3x), и 16 dp на разных телефонах занимают разное число пикселей.

Инструменты:

• Android: пункт «Показывать границы элементов» в параметрах разработчика сразу выдаёт кривые отступы, Layout Inspector в Android Studio показывает иерархию и реальные размеры;
• iOS: View Debugger в Xcode разворачивает иерархию в объёме, Accessibility Inspector проверяет подписи и крупный шрифт;
• скриншотные тесты: Paparazzi или Roborazzi на Android, swift-snapshot-testing на iOS. Эталонный снимок сравнивается с новым на каждой сборке, так ловятся непреднамеренные сдвиги.

Затем назовите состояния, которые макет обычно не рисует, а баги живут именно там:

• размеры: маленький экран, планшет, альбомная ориентация, складные устройства;
• безопасные зоны: вырез, Dynamic Island, жестовая панель внизу, контент не должен под них заезжать;
• системные настройки: увеличенный шрифт (Dynamic Type на iOS, масштаб шрифта на Android), тёмная тема;
• данные: длинные строки, другая локализация, пустые списки, картинка не загрузилась.

Набор устройств берите из аналитики: популярные у ваших пользователей модели и версии ОС плюс крайние случаи по размеру. Чего нет в руках, закрывают облачные фермы устройств.

Где спотыкаются

Меряют пиксели на скриншоте и заводят баг «отступ 42 px вместо 16». Без пересчёта в dp или pt это ложный баг.

Проверяют на одном флагмане. На маленьком экране с увеличенным шрифтом кнопки наезжают друг на друга, а тестировщик этого ни разу не видел.

Думают, что Espresso или XCUITest проверяют соответствие макету. Они проверяют поведение: кнопка есть и нажимается. За цвета и отступы отвечают скриншотные тесты и ручная сверка.