Проблема: екрани авторизації – часта причина відхилення в App Store. Якщо ви додаєте вхід через Google, але забули кнопку Apple ID – чекайте реджекту. Ми проектуємо auth-форми так, щоб вони проходили модерацію з першої спроби. За 5+ років роботи ми накопичили досвід, який гарантує відповідність вимогам платформ. Inline-валідація підвищує конверсію на 30% порівняно з popup-помилками, а біометрія скорочує час входу на 40%. Більше того, за нашими даними, 80% користувачів кидають реєстрацію через складність форми – ми скорочуємо цей відтік до 15%.
Як спроектувати екрани авторизації з урахуванням гайдлайнів?
Стартуємо з аналізу вимог App Store та Google Play. На iOS обов'язково впроваджуємо Sign in with Apple (App Store Review Guidelines п. 4.8). На Android – перевіряємо, що BiometricPrompt не кастомізується, а використовує системний діалог. Дизайнер має передбачити всі стани: loading, error, empty, success. Кількість станів може сягати 10 – від успішного входу до блокування акаунту. Використання inline-валідації в 3 рази скорочує кількість помилкових відправок порівняно зі спливаючими вікнами.
Які екрани входять до набору?
- Login – email/телефон + пароль, кнопки соцмереж (порядок: Apple першим на iOS, потім Google, Facebook). Inline-валідація під полями, без popup-ів. Spinner всередині кнопки при відправці (не просто disabled).
- Register – мінімальний набір. Не збираємо дату народження або телефон одразу – тільки email та пароль. Решта пізніше в профілі.
- Forgot Password – одне email-поле, confirmation screen з інструкцією (check spam, retry timer).
- Biometrics – Face ID / Touch ID / Android BiometricPrompt. Кнопка входу показує бейдж, якщо біометрія увімкнена.
Чому важливий порядок кнопок соціального входу?
На iOS Apple вимагає, щоб Sign in with Apple відображався вище за інших провайдерів. Це не просто рекомендація – без цього App Review може відхилити збірку. На Android порядок не регламентований, але UX-практики радять ставити Google першим. Ми завжди перевіряємо відповідність App Store Review Guidelines та Google Play Policy.
Технічні деталі, що впливають на дизайн
Клавіатура перекриває поля? На iOS використовуємо UIScrollView з contentInsetAdjustmentBehavior для прокрутки під клавіатуру. Дизайнер має вказати: форма скролиться чи зсувається вгору? Кнопка Submit не повинна ховатися під клавіатурою. Поле пароля – secureTextEntry з іконкою показу/приховування справа. Автозаповнення – задаємо textContentType (iOS) та autofill hints (Android). Лейбли плаваючі – піднімаються при фокусі. Економія часу розробки за рахунок готових компонентів сягає 30%.
| Аспект | iOS | Android |
|---|---|---|
| Біометрія | LAContext / LocalAuthentication | BiometricPrompt (системний) |
| Соціальний вхід | Sign in with Apple обов'язковий | Google Sign-In, але не обов'язковий |
| Автозаповнення | textContentType | autofillHints |
| Push-повідомлення | APNs (реєстрація через UIApplication) | FCM (сервісний) |
| Deep linking | Universal Links | App Links |
Основні стани екрану авторизації
| Стан | Опис | Візуалізація |
|---|---|---|
| Loading | Spinner в кнопці, поля disabled | Напівпрозорий оверлей або скелетон |
| Error inline | Повідомлення під полем (червоний текст) | Підсвітка рамки поля |
| Success | Перехід на головний екран | Анімація галочки, потім перехід |
| Offline | Банер зверху «Немає з'єднання» | Жовтий банер з іконкою |
Як ми проектуємо: процес від ідеї до деплою
- Аналітика – вивчаємо вимоги App Store / Google Play, визначаємо мінімальний набір екранів. Враховуємо, що 80% користувачів кидають реєстрацію через складність.
- Проектування – створюємо User Flow (login → home, register → email verification → home). Проробляємо error states та loading.
- Дизайн – Figma з компонентами: кнопки, поля, модалки. Підключаємо Zeplin для передачі розробнику.
- Реалізація – iOS (Swift 5.9, SwiftUI), Android (Kotlin, Jetpack Compose) або Flutter 3.x. Дотримуємося App Store Review Guidelines.
- Тестування – перевіряємо всі стани, в тому числі офлайн та зміну орієнтації.
- Деплой – TestFlight / Firebase App Distribution. Прикріплюємо скріншоти з кнопками Apple ID.
Типові помилки, яких ми уникаємо:
- Пропущена кнопка Apple ID на iOS
- Кастомний діалог біометрії замість системного
- Popup-валідація замість inline
- Disabled кнопки без spinner
- Збір зайвих даних при реєстрації
Що входить у роботу
- UX flow-діаграма всіх auth-станів
- Figma-макети (login, register, forgot, success/error, loading)
- Export assets (SVG, PNG) у трьох розмірах
- Документація для розробника – специфікація по станах та анімації
- Підтримка при проходженні модерації (до 2х реджектів)
- Доступ до репозиторію з UI-компонентами (SwiftUI / Compose)
Строки
Повний набір екранів (login, register, forgot, biometrics, all states) – від 1 до 3 робочих днів залежно від складності анімацій. Оцінимо проєкт безкоштовно після отримання брифу.
Чому обирають нас
Ми проектуємо auth-форми, які приймають App Store та Google Play без зайвих ітерацій. Наш досвід – 5+ років та понад 30 проєктів у мобільній розробці. Гарантуємо відповідність гайдлайнам та сумісність з останніми версіями iOS та Android. Замовте дизайн екранів авторизації під ключ – пишіть нам у Telegram або на пошту. Отримайте консультацію з UI/UX вашого додатку. Зв'яжіться з нами для старту проєкту.