Ми часто стикаємося з ситуацією, коли новий користувач відкриває додаток і не знає, з чого почати. Walk-through онбординг — це не тур по екранах, а контрольоване перше знайомство: людина виконує реальні дії, отримує контекст саме тоді, коли він потрібен, і переходить до наступного кроку лише після виконання. Технічно це складніше, ніж просто показати декілька екранів. Наш досвід показує, що якісна реалізація збільшує конверсію в цільову дію на 20–40%, а retention — на 30%. Вартість онбордингу — від $500. У цій статті ми розберемо, як правильно реалізувати walk-through онбординг на iOS та Android з використанням сучасних фреймворків: SwiftUI, Combine, Jetpack Compose та Kotlin Flow. Ми запропонуємо готову архітектуру, яка легко масштабується та підтримується.
Як правильно спроектувати архітектуру онбордингу?
Головне проектне рішення — ізолювати логіку онбордингу від екранів додатка. Найпоширеніша помилка: розкидані if isOnboardingActive { ... } перевірки по всіх контролерах. Це перетворює кожну зміну онбордингу на рефакторинг.
Координатор онбордингу. Окремий об'єкт OnboardingCoordinator / OnboardingManager знає поточний крок, керує показом оверлею та слухає події додатка. Екрани публікують події («користувач натиснув кнопку X», «елемент Y став видимим»), координатор вирішує — переходити до наступного кроку чи ні.
В iOS — Combine або NotificationCenter для подій. Координатор підписується на PassthroughSubject<OnboardingEvent, Never>. При виконанні умови кроку — викликає advanceToNextStep().
В Android — ViewModel з SharedFlow<OnboardingEvent>. Фрагменти/Composable функції emit події через viewModel.onboardingEvents.emit(...).
Конфігурація з даних. Кожен крок — структура даних:
struct OnboardingStep { let id: String let targetElementId: String // accessibility identifier цільового елемента let highlightShape: HighlightShape // .circle, .rectangle(cornerRadius:) let tooltipText: String let tooltipPosition: TooltipPosition // .above, .below, .auto let completionTrigger: CompletionTrigger // .tap(elementId:), .swipe, .timer(seconds:) let canSkip: Bool } Така структура дозволяє зберігати конфігурацію онбордингу в JSON та завантажувати з сервера — A/B тест онбордингу без деплою. Локальне зберігання простіше, але серверна конфігурація дозволяє проводити A/B-тести без деплою — це прискорює впровадження змін у 3 рази.
Як реалізувати overlay з вирізом?
Напівпрозорий overlay з вирізом над цільовим елементом — технічна основа walk-through онбордингу.
На iOS через UIKit: створюємо UIView на весь екран з альфа 0.7, додаємо в window. Виріз робимо через CAShapeLayer як маску: UIBezierPath(rect: overlayBounds) мінус UIBezierPath(roundedRect: targetFrame, cornerRadius: 8). Маска з fillRule = .evenOdd дає дірку потрібної форми.
Координати цільового елемента отримуємо через targetView.convert(targetView.bounds, to: nil) — конвертація в window-координати. Якщо елемент всередині UIScrollView, додаємо scroll offset: scrollView.convert(targetView.frame, to: nil).
В SwiftUI — Canvas з GraphicsContext.blendMode(.clear) для вирізання, або ZStack з Rectangle().fill(Color.black.opacity(0.7)).mask(...) через GeometryReader + anchorPreference. Другий варіант простіший, але anchorPreference — нетривіальний API, вимагає розуміння preference system SwiftUI.
На Android Compose: Canvas composable з drawRect для темного фону та drawRect з BlendMode.Clear для вирізу. Координати target-елемента — через onGloballyPositioned { coordinates -> ... } модифікатор з LocalDensity для переведення в пікселі.
| Підхід | Платформа | Переваги | Недоліки |
|---|---|---|---|
| UIKit CAShapeLayer | iOS | Простота, надійність | Не підходить для SwiftUI |
| SwiftUI Canvas | iOS (SwiftUI) | Не виходить з ладу при реюзі | Складніше, вимагає blendMode |
| Compose Canvas | Android | Єдиний стиль | Робота з в’юхами через onGloballyPositioned |
Анімація переходу між кроками
При переході до наступного кроку highlight має плавно переміщатися до нового елемента. Не миттєво стрибати — саме анімовано переміщатися. На iOS — UIView.animate(withDuration: 0.3) з оновленням CAShapeLayer'а. В SwiftUI — withAnimation(.easeInOut(duration: 0.3)) навколо зміни state.
Якщо наступний крок на іншому екрані — спочатку закриваємо overlay (fade out), виконуємо навігацію, чекаємо viewDidAppear / onAppear і лише потім показуємо overlay для нового кроку (fade in). Не намагайтеся анімувати overlay через навігаційний перехід — z-order і coordinate space будуть неправильними.
Управління станом проходження
Статус онбордингу — в UserDefaults / DataStore Preferences. Не просто isOnboardingCompleted: Bool, а completedStepIds: Set<String> — тоді можна додавати нові кроки до існуючого онбордингу без скидання прогресу.
При першому запуску після оновлення: якщо додали новий крок — показуємо лише його, не весь онбординг заново. Якщо суттєво змінили додаток — onboardingVersion в UserDefaults, при неспівпадінні версій перезапускаємо онбординг.
Аналітика та оптимізація
Логуємо кожен крок: час початку, час завершення, чи був пропущений. Firebase Analytics event onboarding_step_completed з параметрами step_id, duration_seconds, skipped. Будуємо воронку — де користувачі випадають, там і проблема.
Типова знахідка: крок 3 пропускають 60% користувачів — або занадто очевидно, або tooltip перекриває важливий контент на екрані. Друге лікується переглядом tooltipPosition.
Що входить у роботу (під ключ)
- Архітектура онбордингу (координатор, конфігурація, зберігання)
- Реалізація overlay з анімацією переходу
- Інтеграція аналітики (Firebase, Mixpanel тощо)
- Документація по API та конфігурації
- Навчання команди та підтримка після запуску
Наша команда має 5+ років досвіду в мобільній розробці та понад 50 успішних проєктів з онбордингом. Ми гарантуємо якість реалізації, використовуємо best practices та code review. Вартість робіт — від $500. Пишіть нам на пошту для оцінки вашого проєкту — ми підготуємо комерційну пропозицію протягом 2 робочих днів.
Строк: 2–3 дні. Базовий walk-through з 3–5 кроками та фіксованою конфігурацією — 2 дні (від $500). Динамічна конфігурація з сервера, A/B тестування, аналітика та підтримка декількох платформ — 3 дні (від $1200).