Отрисовка экранов мобильного приложения под iOS (Human Interface Guidelines)
Apple отклоняет приложения не только за код. Экраны, которые игнорируют HIG — некорректные отступы, нестандартные жесты, кастомные кнопки «Назад» поверх системной навигации — получают замечания на этапе review по Guidelines 10.3 или напрямую от пользователей через низкий рейтинг.
Дизайн для iOS — это не «сделать красиво», а понять, где система сама обеспечивает поведение, а где нужен кастом.
Что HIG регламентирует на практике
Safe Area и Dynamic Island. С iPhone 14 Pro safe area верхнего края изменилась из-за Dynamic Island. Контент, прибитый к UIWindow.safeAreaInsets.top без учёта этого, перекрывается островом. В Figma задаём рамки под актуальные safe area каждого устройства в линейке — SE 3, iPhone 15, 15 Plus, 15 Pro, 15 Pro Max.
Минимальный размер тач-таргета. HIG требует 44×44 pt. Иконка в 20pt с отступами меньше этого приводит к промахам. В Figma добавляем невидимый hit area слой поверх иконки — это наглядно фиксируется в Handoff-спецификации.
Typography scale. iOS поддерживает Dynamic Type: пользователь увеличивает шрифт в системных настройках, и приложение должно это уважать. Используем semantic text styles — Large Title, Headline, Body, Caption — вместо фиксированных размеров. Макет тестируем при Accessibility size AX5 (самый крупный), чтобы убедиться, что текст не обрезается.
Цветовая система. System colors (label, secondaryLabel, systemBackground, systemGroupedBackground) автоматически меняются при переключении Dark Mode. Кастомные цвета задаём через Color Sets в Asset Catalog с вариантами Any и Dark. Хардкодить #FFFFFF в коде — прямая дорога к сломанному Dark Mode.
Как строим экраны
Работаем в Figma с iOS Design Kit (Apple официальный) или Figma UI3 компонентами. Для каждого экрана — три фрейма: iPhone 15 (390pt), iPhone SE (375pt), iPhone 15 Plus (430pt). Для iPad-версии отдельный сет.
Компоненты строим через Figma Auto Layout с учётом safe area: верхний padding от navigation bar, нижний от Home Indicator (34pt на устройствах без кнопки Home). UITabBar занимает 49pt + safe area снизу — это нужно учитывать в скроллящихся списках, иначе последний элемент прячется под таббар.
Экраны с Sheet (UISheetPresentationController) проектируем в двух состояниях: .medium detent (половина экрана) и .large (почти полный экран). Ручка drag handle отображается стандартная системная — не рисуем свою без необходимости.
Навигация. Stack-навигация: стандартный chevron «Назад» с названием предыдущего экрана. Если текст не влезает — только chevron. Кастомные кнопки «X» для закрытия используем только для modal-презентаций, не для push. Это соответствует HIG и снижает когнитивную нагрузку.
Из чего складывается работа
Аудит существующих экранов на соответствие HIG — если проект уже существует. Это выявляет нарушения до начала дизайна: нестандартные паттерны навигации, некорректные отступы, проблемы с доступностью.
Дизайн новых экранов с передачей в Handoff: аннотации размеров в pt, цвета через semantic names, шрифты с указанием Dynamic Type уровня, состояния компонентов (normal, pressed, disabled, loading).
Отдельно — прохождение чеклиста Apple accessibility: контрастность (минимум 4.5:1 для текста), поддержка VoiceOver (порядок фокуса, accessibility labels), Reduce Motion (альтернативные анимации).
Сроки
Дизайн одного экрана со всеми состояниями и спецификацией: 4–8 часов. Полный комплект экранов приложения (10–20 экранов): 3–5 дней. При наличии готовой дизайн-системы — быстрее. Стоимость рассчитывается после анализа объёма и сложности экранов.