Общая информация
При входе в мобильное приложение у пользователя есть возможность войти в приложение (если он уже зарегистрирован) или зарегистрироваться.

Макет

Описание элементов на экране

Макет	Элемент	Описание элемента	Условия отображения	Поведение
Раскрыть	Название приложения	Надпись с названием приложения = "Wingly" цвет = #865DE6	Всегда	отсутствует
Раскрыть	Приветствие	Надпись приветствия цвет = #020202	Всегда	отсутствует
Раскрыть	Кнопка "Войти"	Кнопка для входа в приложение цвет кнопки = #020202 цвет текста = #F6F6F6	Всегда	при тапе на кнопку происходит переход к "Ввод номера телефона"
Раскрыть	Кнопка "Зарегистрироваться"	Кнопка для регистрации в приложение цвет кнопки = #F6F6F6 цвет обводки = #010101 цвет текста = #010101	Всегда	при тапе на кнопку происходит переход к "Ввод номера телефона"
Раскрыть	Разделительная линия между кнопками	Разделительная линия выбора действия по середине текст = "или" цвет линии = #828282 прозрачность = 20%	Всегда	отсутствует
Раскрыть	Условия сервиса	Текстовая кнопка "Условия сервиса" цвет текста = #865DE6	Всегда	при тапе открывается модальное окно с условиями использование сервиса
Раскрыть	Политика конфиденциальности	Текстовая кнопка "Политику конфиденциальности" цвет текста = #865DE6	Всегда	при тапе открывается модальное окно с условиями политики конфиденциальности
Раскрыть	Политика в отношении файлов cookie	Текстовая кнопка "Политику в отношении файлов cookie" цвет текста = #865DE6	Всегда	при тапе открывается модальное окно с условиями политики в отношении файлов cookie
Раскрыть	Модальное окно	Модальное окно с условиями соглашения использования приложения цвет текста = #010101	При тапе на "Условия сервиса" ИЛИ "Полику конфиденциальности" ИЛИ "Политику в отношении файлов cookie"	модальное окно можно скрыть свайпом

Флоу регистрации:
Ввод номера телефона -> Ввод кода подтверждения номера телефона -> Ввод никнейма -> Ввод личной информации -> Добавление фото в профиль пользователя -> Выбор интересов -> Показ главного экрана

Флоу авторизации:
Ввод номера телефона -> Ввод кода подтверждения номера телефона -> Показ главного экрана

Общая информация
Для регистрации и авторизации необходимо ввести номер телефона. При регистрации номер телефона сохраняется в базу данных. При авторизации происходит проверка на существующий номер телефона в базе данных. На введенный номер телефона придет СМС с проверочным кодом.

Макет

Описание элементов на экране

Макет	Элемент	Описание элемента	Условия отображения	Поведение
Раскрыть	Название приложения	Надпись с названием приложения = "Wingly" цвет = #865DE6	Всегда	отсутствует
Раскрыть	Надпись "Введите номер телефона"	Надпись с текстом "Введите номер телефона" цвет = #020202	Всегда	отсутствует
Раскрыть	Поле ввода номера телефона	В поле вводится номер телефона пользователя, для авторизации/регистрации плейсхолдер вида: +7 (999) 999-99-99 для РФ обводка поля = 1px цвет обводки и плейсхолдера = #828282 прозрачность обводки и плейсхолдера = 20%	Всегда	При тапе на поле плейсхолдер пропадает, остается код страны, например для РФ — "+7", и становится черным цветом (#020202)
Раскрыть	Кнопка "Получить код"	Кнопка для возможности получения кода для подтверждения авторизации/регистрации состояние inActive = если номер не введен полностью состояние Active = если номер введен полностью цвет кнопки = #010101 в состоянии inActive прозрачность = 60% цвет текста = #F6F6F6	Всегда	При тапе на кнопку происходит отправка кода подтверждения и переход на экран ввода кода

Общая информация
Для подтверждения регистрации и авторизации в приложение, необходимо ввести проверочный шестизначный код, который придет в СМС пользователю, на указанный им номер телефона.

Макет

Описание элементов на экране

Макет	Элемент	Описание элемента	Условия отображения	Поведение
Раскрыть	Название приложения	Надпись с названием приложения = "Wingly" цвет = #865DE6	Всегда	отсутствует
Раскрыть	Надпись "Введите код"	Надпись с текстом "Введите код" цвет = #020202	Всегда	отсутствует
Раскрыть	Ячейка для ввода цифры	Ячейка для ввода цифры из кода подтверждения авторизации/регистрации плейсхолдер вида: 0 На экране расположено 6 ячеек для ввода цифры, тк код подтверждения шестизначный Обводка = 1px цвет обводки и плейсхолдера = #898989 прозрачность обводки и плейсхолдера = 20%	Всегда	При вводе кода подтверждения происходит проверка на валидность кода. Если код валиден — происходит переход на следующий экран. Если код не валиден — ячейки окрашиваются в красный цвет и под ними отображается надпись "Неверный код"
Раскрыть	Текстовая кнопка "Получить код повторно"	Текстовая кнопка для повторного получения кода подтверждения цвет текста = #865DE6	Появляется, если в течении 30 секунд пользователь не ввел код подтверждения	При тапе на кнопку отправляется новый код для подтверждения авторизации/регистрации

Общая информация
Никнейм — уникальное имя пользователя, которые не может повторяться. Это необходимо, чтобы зная никнейм пользователя, можно было с легкостью его найти.

Макет

Описание элементов на экране

Макет	Элемент	Описание элемента	Условия отображения	Поведение
Раскрыть	Название приложения	Надпись с названием приложения = "Wingly" цвет = #865DE6	Всегда	отсутствует
Раскрыть	Надпись "Как вас называть"	Надпись с текстом "Как вас называть?" цвет = #020202	Всегда	отсутствует
Раскрыть	Текст с описанием про ник-нейм	Текст "Ваше имя является уникальным. Его можно изменить в любое время в настройках" цвет = #898989	Всегда	отсутствует
Раскрыть	Поле ввода никнейма	Поле для ввода уникального никнейма пользователя плейсхолдер вида: @yournickname бводка у поля = 1px цвет обводки и плейсхолдера = #828282 прозрачность обводки и плейсхолдера = 20%	Всегда	При тапе на поле пропадает плейсхолдер, но знак "@" остается в поле, стереть его нельзя. При вводе никнейма происходит проверка на уникальность и валидность введенных символом. Разрешенные символы и требования к никнейму описаны ниже в разделе "Требования к никнейму"
Раскрыть	Кнопка "Далее"	Кнопка с текстом "Далее" для подтверждения выбранного никнейма и перехода на следующий экран состояние inActive = когда пользователь не ввел логин, который соответствует требованиям состояние Active = когда пользователь ввел логин, который соответствует требованиям цвет фона = #010101 цвет текста = #F6F6F6 в состоянии inActive прозрачность = 60%	Всегда	при тапе на кнопку происходит переход на следующий экран и создание логина пользователя в приложении

Никнейм долежн состоять из 4-25 символов

Разрешенные символы:

• Ая
• Az
• 1-9
• Нижнее подчеркивание

Общая информация
На экране пользователь вводим личную информацию о себе, чтобы идентифицировать себя в приложении и другие пользователи знали, чей этот профиль, и могли познакомиться поближе с профилем/пользователем.

Макет

Описание элементов на экране

Макет	Элемент	Описание элемента	Условия отображения	Поведение
Раскрыть	Название приложения	Надпись с названием приложения = "Wingly" цвет = #865DE6	Всегда	отсутствует
Раскрыть	Надпись "Оформите профиль"	Надпись "Оформите профиль" цвет текста = #020202	Всегда	отсутствует
Раскрыть	Описание экрана	Текст "Расскажите нам и другим немного о себе. Эта информация будет видна другим пользователям" цвет текста = #898989	Всегда	отсутствует
Раскрыть	Поле "Имя"	Поле ввода имени плейсхолдер вида: "Имя" цвет плейсхолдера и обводки = #82828233 прозрачность обводки и плейсхолдера = 20%	Всегда	При тапе на поле плейсхолдер пропадает, доступен ввод
Раскрыть	Поле "Фамилия"	Поле ввода фамилии плейсхолдер вида: "Фамилия" цвет плейсхолдера и обводки = #82828233 прозрачность обводки и плейсхолдера = 20%	Всегда	При тапе на поле плейсхолдер пропадает, доступен ввод
Раскрыть	Поле "О себе"	Поле ввода информации о себе плейсхолдер вида: "О себе" цвет плейсхолдера и обводки = #82828233 прозрачность обводки и плейсхолдера = 20%	Всегда	При тапе на поле плейсхолдер пропадает, доступен ввод
Раскрыть	Кнопка "Далее"	Кнопка с текстом "Далее" для подтверждения личной информации и перехода на следующий экран состояние inActive = когда пользователь не ввел всю информацию о себе состояние Active = когда пользователь ввел всю информацию о себе цвет фона = #010101 цвет текста = #F6F6F6 в состоянии inActive прозрачность = 60%	Всегда	при тапе на кнопку происходит переход на следующий экран "Добавление фотографии профиля"

Общая информация
Пользователь может добавить в свой личный профиль любую фотографию, либо не добавлять вовсе.

Макет

Описание элементов на экране

Макет	Элемент	Описание элемента	Условия отображения	Поведение
Раскрыть	Название приложения	Надпись с названием приложения = "Wingly" цвет = #865DE6	Всегда	отсутствует
Раскрыть	Надпись "Выберите аватарку"	Надпись с описанием экрана = "Выберите аватарку" цвет текста = #020202	Всегда	отсутствует
Раскрыть	Текст с описанием действия на экране	Текст "Загрузите свое фото. Оно будет видно другим пользователям" цвет текста = #898989	Всегда	отсутствует
Раскрыть	Добавление фотографии	Элемент для добавления фотографии по середине круга отображается "+" ровно по центру цвет обводки и "+" = #898989 обводка = 1px	Всегда	При тапе на элемент открывается стандартная галерея смартфона При первом открытии запрашиваются стандартные permissions на устройстве для доступа к камере и к галерее, если permissions уже были выданы приложению, то сразу открывается галерея Если фотография была выбрана, то она отображается внутри элемента
Раскрыть	Кнопка "Сохранить"	Кнопка "Сохранить" для сохранения добавленной фотографии цвет кнопки = #010101 цвет текста = #F6F6F6 в состоянии inActive прозрачность = 60% Если фотография была добавлена, то состояние кнопки становится = Active	Всегда	состояние Avtice = при тапе на кнопку фотография пользователя сохранятся (будет отображаться в профиле пользователя), происходит переход на экран "Настройка предпочтений"
Раскрыть	Кнопка "Пропустить"	Кнопка "Пропустить" для пропуска добавления фотографии цвет обводки и текста = #010101 ширина обводки = 1px	Отображается, если не была добавлена фотография	При тапе на кнопку происходит переход на экран "Настройка предпочтений", фотография в профиле будет отсутствовать
Раскрыть	Кнопка "Заменить фотографию"	Кнопка "Заменить фотографию" для изменения выбранной фотографии цвет обводки и текста = #010101 ширина обводки = 1px	Отображается, если не была добавлена фотография	При тапе на кнопку открывается галерея устройства для выбора фотографии профиля

Общая информация
На данном экране располагаются предпочтения, которые может выбрать пользователь. Они используются для настройки ленты рекомендаций. Минимальное обязательное количество выбранных предпочтений = 3.

Макет

Описание элементов на экране

Макет	Элемент	Описание элемента	Условия отображения	Поведение
Раскрыть	Название приложения	Надпись с названием приложения = "Wingly" цвет = #865DE6	Всегда	отсутствует
Раскрыть	Надпись "Выберите, что вам интересно"	Надпись с описанием экрана = "Выберите, что вам интересно" цвет текста = #020202	Всегда	отсутствует
Раскрыть	Текст с описанием действия на экране	Текст "Выберите минимум 3 категории" цвет текста = #898989	Всегда	отсутствует
Раскрыть	Чипс интереса	Чипс с выбором интереса, для настройки ленты рекомендаций цвет фона чипса = #AFAFAF прозрачность фона чипса = 20% отображается 16 чипсов с разными категориями (см. дизайн)	Всегда	При тапе на чипс, чипс становится активным и закрашивается в цвета из дизайна. Необходимо мимнимум выбрать 3 чипса интересов.
Раскрыть	Текстовая кнопка "Выбрать все"	Кнопка "Выбрать все" для выбора всех предпочтений цвет кнопки = #865DE6	Отображается до того момента, как на нее тапнули	При тапе на кнопку "Выбрать все", выделяются все чипсы и становятся активными. Сама текстовая кнопка сменяется на текстовую кнопку "Сбросить все", с такими же характеристиками, как и текстовая кнопка "Выбрать все"
Раскрыть	Кнопка "Далее"	Кнопка с текстом "Далее" для подтверждения выбранных предпочтений и перехода на следующий экран состояние inActive = когда пользователь не выбрал минимум 3 предпочтения состояние Active = когда пользователь выбрал минимум 3 предпочтения из списка цвет фона = #010101 цвет текста = #F6F6F6 в состоянии inActive прозрачность = 60%	Всегда	при тапе на кнопку происходит переход на онбординг, для ознакомления с функционалом приложения