Відрисовка екранів мобільного додатка під 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 днів. При наявності готової дизайн-системи — швидше. Вартість розраховується після аналізу обсягу та складності екранів.