Дизайн экрана авторизации и регистрации мобильного приложения
Экраны авторизации отклоняют в App Store чаще, чем кажется — не за функциональность, а за несоответствие гайдлайнам. Sign in with Apple обязателен, если в приложении есть любой другой способ входа через сторонний аккаунт (Google, Facebook). Если приложение предлагает «Войти через Google» без кнопки Apple ID — это отклонение по guideline 4.8. Дизайн должен учитывать это с самого начала.
Что проектируем
Login экран — email/телефон + пароль, кнопки социального входа (порядок имеет значение: Apple — первым на iOS), ссылка «Забыли пароль», ссылка на регистрацию. Inline validation — не popup, а подсказка под полем. Состояние loading кнопки при отправке запроса (не просто disabled, а spinner внутри кнопки).
Registration экран — минимальный набор полей: не собираем то, что не нужно прямо сейчас. Если нужно только email + пароль — только это. Дата рождения, телефон, фото профиля — можно запросить позже, в профиле.
Forgot Password — отдельный экран с одним полем. Confirmation screen после отправки. Инструкция должна объяснять, что делать, если письмо не пришло (check spam, retry timer).
Biometric auth — Face ID / Touch ID badge на кнопке входа, если biometrics включён. На Android — BiometricPrompt системный диалог, его не стилизуют.
Для каждого экрана — состояния: пустое, частично заполненное, ошибка (неверный пароль, email занят, нет сети), loading, success.
Технические детали, которые влияют на дизайн
Клавиатура перекрывает поля форм. На iOS UIScrollView со contentInsetAdjustmentBehavior решает это в коде, но дизайнер должен запроектировать поведение: форма скроллится под клавиатурой или экран сдвигается вверх? Это влияет на расположение кнопки Submit — она не должна быть «под» клавиатурой.
Password field — secureTextEntry. Иконка показать/скрыть пароль — стандарт. Размещаем справа внутри поля.
Автозаполнение — textContentType на iOS (.emailAddress, .password, .newPassword) и autofill hints на Android. Дизайн должен учитывать, что поле может заполниться автоматически — плавающий лейбл поднимается.
Сроки
Полный набор экранов авторизации/регистрации (login, register, forgot password, success states, error states) — 1 рабочий день.