Яндекс Самокат

Логика

Верхняя часть

лого

Яндекс

тап на яндекс

переходит на яндекс Дзен

Самокат

Тап на самокат

переходит на главную страницу
ясндекс самокат

кнопки

Заказать

тап на заказать

действий не происходит

Статус заказа

тап на статус заказа

открывается строка ввода

В поле плейсхолдер "Введите номер заказа"

Ввести номер заказа и нажать Enter

Ввод корректных данных

Открывается окно с информацией о заказе

Ввод некорректных данных

появляется сообщение об ошибке

текст в сообщении "Такого заказа нет. Точно верный номер?"

Заголовок

Текст Для кого самокат

форма для кого самокат

поля ввода

Имя

ввод корректных значений

русские буквы

Валидация пройдена

поле подсвечивается черным

пробел

Валидация пройдена

поле подсвечивается черным

тире

валидация пройдена

поле подсвечивается черным

от 2 до 15 символов

валидация пройдена

поле подсвечивается черным

ввод некорректных значений

валидация не пройдена

поле подсвечивается красным

Введите корректное имя

Текст красного цвета

обязательное поле

фамилия

Ввод корректных значений

русские буквы

Валидация пройдена

поле подсвечивается черным

от 2 до 15 символов

Валидация пройдена

поле подсвечивается черным

Ввод некорректных значений

Валидация не пройдена

поле подсвечивается красным

Введите корректную фамилию

Текст красного цвета

Обязательное поле

адрес

Ввод корректных значений

русские буквы

Валидация пройдена

поле подсвечивается черным

цифры

Валидация пройдена

поле подсвечивается черным

пробел

Валидация пройдена

поле подсвечивается черным

тире

Валидация пройдена

поле подсвечивается черным

точка

Валидация пройдена

поле подсвечивается черным

запятая

Валидация пройдена

поле подсвечивается черным

от 5 до 50 символов

Валидация пройдена

поле подсвечивается черным

Ввод некорректных значений

Валидация не пройдена

поле подсвечивается красным

Введите корректный адрес

Текст красного цвета

Обязательное поле

станция метро

Ввод корректного значения

тап по полю

отображается выпадающий
список-саджест

Скролл списка

Справа отображается скролл
бар

Тап по станции

Выбирается станция

Поле подсвечивается синим

Ручной ввод названия станции

список подбирает станции по
совпадающим буквам

тап по совпавшей станции

выбор станции

Ввод некорректного значения

удаляет некорректно введенные
буквы после снятия фокуса

Поле остается пустым

поле подсвечивается черным

Станции Москвы зашиты на
стороне бэкенда (в API)

Обязательное поле

номер телефона

Ввод корректного значения

цифры

Валидация пройдена

поле подсвечивается черным

знак +

Валидация пройдена

поле подсвечивается черным

От 10 до 12 символов

Валидация пройдена

поле подсвечивается черным

Ввод некорректного значения

Валидация не пройдена

поле подсвечивается красным

Введите корректный номер

текст красного цвета

Обязательное поле

Кнопка Дальше

Тап по кнопке

переход на форму "Про аренду"

заголовок

Про аренду

поля ввода

когда привезти самокат

Тап по полю

выпадающий календарь

отображается текущий месяц

выделен текущий день

Выбрать дату можно только с
завтрашнего дня

выбранная дата сразу
подставляется в поле

Выбрать можно другую дату

Поле подсвечивается синим цветом

Обязательное поле

подтема

Срок аренды

тап по полю

выпадающий список

от 1 до 7 суток

Обязательное поле

Цвет самоката

Выбор цвета нажав на
наименование в чек боксе

Черный жемчуг

Серая безысходность

поле необязательное для
заполнение

оставить поле не заполненым

цвет самоката будет рандомный

Возможно выбрать два цвета в
чек боксе

Черный жемчуг

Серая безысходность

Комментарий

Ввод корректного значения

поле необязательное для
заполнения

оставить пустое поле

от 0 до 24 символов

Валидация пройдена

поле подсвечивается черным

запятая

Валидация пройдена

поле подсвечивается черным

точка

Валидация пройдена

поле подсвечивается черным

тире

Валидация пройдена

поле подсвечивается черным

пробел

Валидация пройдена

поле подсвечивается черным

цифры

Валидация пройдена

поле подсвечивается черным

русские буквы

Валидация пройдена

поле подсвечивается черным

кнопки

назад

тап по кнопке

вызвращается на форму "для
кого самокат"

При переходе между формами,
введеные данные
сохраняется

заказать

тап по кнопке

Корректный ввод данных

Появляется всплывающее окно

Текст "Номер заказа
NNNNNN. Запишите его:
пригодится, что бы отслеживать
статус

Кнопка "Посмотреть статус"

Тап по кнопке

Открывается окно "Статус
заказа" с уже заполненным
номером заказа

Некорректный ввод данных

Появляется ошибка введите
корректный "название поля"

Можно сделать несколько
заказов

Интерфейс

Верхняя часть

лого

Яндекс самокат

Яндекс

черные буквы

Жирный шрифт

Самокат

черные буквы

Учебный тренажер

буквы серого цвета

кнопки

Заказать

Буквы белые

цвет кнопки черный

Статус Заказа

буквы черные

цвет кнопки белый

углы скругленные

Форма для кого самокат

Заголовок

Для кого самокат

Черные буквы

Жирный шрифт

Поля ввода

имя

плейсхолдер имя

рамка серого цвета со
скругленными углами

фамилия

плейсхолдер фамилия

рамка серого цвета со
скругленными углами

адрес

плейсхолдер адрес: куда
привезти заказ

рамка серого цвета со
скругленными углами

станция метро

плейсхолдер стания метро

рамка серого цвета со
скругленными углами

При наведении курсора на поле курсор изменяется на указательный палец

Выпадающий список

станции метро Москвы

слева кружок цвета линии метро

справа название станции

Номер телефона

плейсхолдер телефон:на него
позвонит курьер

рамка серого цвета со
скругленными углами

кнопка дальше

буквы белого цвета

цвет кнопки черный

углы скругленные

форма Про аренду

заголовок

Про аренду

цчерные буквы

шрифт жирный

поля ввода

Когда привезти самокат

плейсхолдер когда привезти
самокат

вправой стороне изображение
календарика

серого цвета

рамка серого цвета со
скругленными углами

срок аренды

плейсхолдер Срок аренды

рамка серого цвета со
скругленными углами

Выпадающий список

сутки

двое суток

трое суток

четверо суток

пятеро суток

шестеро суток

семеро суток

цвет самоката

текст цвет самоката

рамка серого цвета со
скругленными углами

чекбокс черный жемчуг

чекбокс серая безысходность

комментарий

Плейсхолдер Комментарий для
курьера

кнопка назад

буквы черного цвета

цвет кнопки белый

Углы скругленные

При наведении курсора на поле курсор изменяется на указательный палец

кнопка заказать

буквы белого цвета

цвет кнопки черный

Углы скругленные

При наведении курсора на поле курсор изменяется на указательный палец

Всплывающее окно

Текст Заголовка "Заказ оформлен"

Черные буквы

Шрифт жирный

Текст подзаголовка "Номер заказа: NNNNNN. Запишите его:
пригодится, чтобы отслеживать статус"

Черные буквы

Шрифт жирный

Кнопка Посмотреть статус

Кнопка черного цвета с закругленными углами

Буквы белого цвета