Яндекс.самокат(Форма
заказа)
Логика
Логика "Для кого самокат
Поле "Имя"
Плейсхолдер исчезает при
заполнении
Поле обязательное для
заполнения
Только буквы русского алфавита
Можно вводить пробел
Можно вводить тире
От 2 до 15 символов
При некорректном вводе
подсвечивается красным
Текст
ошибки «Введите корректное имя».
Поле "Фамилия"
плейсхолдер исчезает при
заполнении
Границы меняются при смене
состояния
Только буквы русского алфавита
можно вводить проблем
Можно вводить тире
От 2 до 15 символов
при некорректном вводе
выходит текст
ошибки «Введите корректную фамилию».
При некорректном вводе
подсвечивается красным
Поле "Адрес"(куда привезти
самокат)
Границы меняются при смене
состояния
Только буквы русского алфавита
можно вводить пробел
можно вводить тире
От 5 до 50 символов
При некорректном вводе
подсвечивается красным
Текст
ошибки «Введите корректное адрес».
Можно вводить точку
можно вводить запятую
пробелы удаляются при снятии
фокуса
поле "станция метро"
поле обязательно для
заполнения
Плейсхолдер исчезает при
заполнении
при нажатия появляется
выпадающий список станции
метро
после снятия фокуса
содержимое удаляется
станция метро можно выбрать
нажатием из выпадающего
списка
Логотип Яндекс Самокат
учебный тренажер
Лого яндекс
Нажав, переходит на главную
старницу Яндекс
Лого самокат
нажав переходит на Яндекс
Самокат
при наведении курсор меняется
на поинтер
Кнопка "Заказать"
нажатие, переходит на страницу
"Для кого самокат"
Кнопка "Статус заказа"
Нажатие, переносит в поле
"Номер заказа"
при нажатии кнопка "Заказать"
исчезнет
поле "Номер заказа"
Валидация после нажатия на
кнопку Enter
при вводе корректного номера,
открывается страничка "Статус
Заказа"
При вводе корректного номера
заказа, открывается страница с
надписью "Такого заказа нет"
Поле "Телефон на него
позвонит курьер
Плейсхолдер исчезнет после
заполнения
Поле обязательно для
заполнения
Можно вводить цифры
можно вводить знак +
От 10 до 12 символов
При неправельном заполнении,
выходит текст ошибки «Введите
корректный телефон».
При неправильном заполнении ,
поле подсвечивается красным
Кнопка "Дальше"
При наведении цвет меняется
Если все правильно
заполненоЮ открывается
форма "про аренду"
Форма "Про аренду
Поле "Когда привезти самокат"
Границы поля меняются при
смене состояний
плейсхолдер исчезнет при
заполнении
Поле обязательное для
заполнения
Когда пользователь выбирает дату,
значение сразу подставляется в
поле
Выпадающий календарь при
клике на поле ввода выходит
Выбрать дату можно только на
след день
при открытии, видим текущий
месяц
При нажатии на календарь,
выбирается дата
Пользователь может выбрать
другую дату, поле подсвечивается
синим.
строки календаря меняют месяц
можно закрыть календарь,
повторным нажатием
Вводить значение в поле в
ручную нельзя
Поле "Когда привезти самокат"
Границы поля меняются при
смене состояний
плейсхолдер исчезнет при
заполнении
Поле обязательное для
заполнения
Когда пользователь выбирает дату,
значение сразу подставляется в
поле
Выпадающий календарь при
клике на поле ввода выходит
Выбрать дату можно только на
след день
при открытии, видим текущий
месяц
При нажатии на календарь,
выбирается дата
Пользователь может выбрать
другую дату, поле подсвечивается
синим.
строки календаря меняют месяц
можно закрыть календарь,
повторным нажатием
Вводить значение в поле в
ручную нельзя
Поле "срок аренды"
Границы поля меняются при
смене состояний
плейсхолдер исчезает при
заполнении
Выпадающий список выьора
количества дней
При выборе значения оно сразу
отображается
при повторном нажатии, окно
закрывается
Выбрать дату, можно только на
след день
Поле обязательное для
заполнения
вводить значения в поле в
ручную нельзя
поле "Цвет самоката"
Границы поля меняются при
смене состояния
плейсхолдер исчезает при
заполнении
Чек-бокс внутри поля
при выборе чекбокса, меняется
его цвет
При нажатии он включается
есть два варианта
Поле "Комментарий для
курьера
Границы поля меняют цвет, при
смене состояний
Поле не обязательно для
заполнения
Плейсхолдер исчезает при
заполнении
Только русские буквы
можно ввести цифры
можно ввести пробел
Можно вводить тире
Не более 24 символов
кнопка "Назад"
При нажатии , пользователь
возвращаются на страницу "Для
кого самокат"
При переходе между
страницами , информация
сохраняется
кнопка "Заказать "
Заказ будет оформлен, если
валидацию прошли все поля
появляется окно с текстом и
кнопкой "посмотреть статус"
Кнопка "посмотреть статус"
перекидывает на экран статус
заказа
если при заполнении была
ошибка, то при нажатии на
кнопку "Заказать" будет ошибка
Интерфейс формы "сделать
заказ"
Интерфейс "Для кого самокат"
Хедер
Кнопка "Номер заказа"
Располагается в верхней правой
части экрана после нажатия на
кнопку "статус заказа"
Надпись черного цвета
содержит плейсхолдер с
надписью "Номер заказа"
серые границы если пустой
ввод
синие границы поля при фокусе
Кнопка "статус заказа"
Расположение в правом
верхнем углу, справа от кнопки
заказать
Надпись черного цвета
Кнопка "заказать"
Текст белыми буквами
края кнопки закругленные
кнопка черного цвета
Логотип Яндекс Самоката
учебный тренажер
Яндекс Черным жирным
шрифтом
Текст самоката обычным
шрифтом
учебный тренажер изображен
серым цветом
Средний блок "Для кого
самокат"
Для кого самокат
Надпись большим шрифтом,
черными буквами
Расположение вверху над
полями
Поле ввода "Имя"
Располагается под надписью
"Для кого самокат"
Черные границы при
корректном вводе
красные границы при
некорректном вводе
Синие границы при фокусе
Надпись"введите корректное
имя" при некорректном вводе
Красного цвета
под полем слева
Если пустой ввод, границы
серые
синие границы при наведении
фокуса
Поле ввода "Фамилия"
Располагается под надписью
"Для кого самокат"
Черные границы при
корректном вводе
красные границы при
некорректном вводе
синие границы при фокусе
Надпись "введите корректное
имя" при некорректном вводе
Красного цвета
под полем слева
если пустой ввод. границы
серые
Синие границы при наведении
фокуса
Поле ввода "адрес"
Располагается под надписью
"Для кого самокат"
Черные границы при
корректном вводе
Красные границы при
некорректном вводе
Синие границы при фокусе
Надпись "введите корректное
имя" при некорректном вводе
если пустой ввод , границы
серые
Синие границы при наведении
фокуса
Поле ввода "метро"
Располагается под надписью
"Для кого самокат"
В заполненном поле,
текст\номер,черного цвета,
рамка черного цвета
Если пустой ввод, границы
серые
Выпадающий список со
станциями метро
кружок станции, цвета ветки
метро
скролл станций
Поле ввода "телефон"
Располагается под надписью
"Для кого самокат"
В заполненном поле,
текст\номер, черного цвета ,
рамка черного цвета
Черные границы при
корректном вводе
красные границы при
некорректном вводе
синие границы, при снятии
фокуса
Надпись "Введите корректное
имя" при некорректном вводе
красные границы , при
некорректном вводе
под полем слева
если пустой ввод, границы
серые
содержит плейсхолдер
"Телефон: на него позвонит
курьер"
Интерфейс "Про аренду
Про Аренду
Надпись черного цвета ,
большими буквами
Располагается вверху над
полями
Поле ввода "Когда привезти
самокат"
При выборе даты
Формат дд.мм..гг
черного цвета
Границы серого цвета при
пустом вводе
Черного цвета
Внутри спраава, иконка
календаря
Выпадающий календарь
Форма квадратная
Месяц и год располагается в
лувом углу
Текст курсивов темного цвета
Кнопки в виде <>
треугольников для смены
месяца и года , располагаются
на одном уровне как и месяц с
годом но в правом углу
Дни, недели идут в один ряд,
ниже месяца и года "ПН ВТ СР
ЧТ ПТ СБ ВС
ПН,ВТ,СР,ЧТ,ПТ, Серого цвета
СБ И ВС, красного цвета
Числа дней недели, идут по
дням и неделям
Рабочие дни черного цвета
Выходные дни, красного цвета
Выбранный день, становится
жирным
Располагается под надписью
"Про аренду"
Поле ввода "Срок Аренды"
поля на плейсхолдере серые и
закругленные
Серые границы при пустом
вводе
Черные границы при выборе
Синие границы , при фокусе
содержит плейсхолдер "Срок
Аренды"
Серые границы, при пустом
вводе
Черные границы , при выборе
Выпадающий список"Срок
аренды" надпись черного цвета
Сутки
Двое суток
Трое суток
Четверо суток
Пятеро суток
Шестеро суток
Семеро суток
Есть иконка шифрона
курсор меняется на поинтер,
при выборе дня
Поля "Цвет самоката
Располагается 3 , по списку
серая рамка с закругленными
краями
При выборе цвета , шрифт
меняется с серого цвета на
черный и рамка темнеет
Чек бокс "Черный жумчуг
Чек бокс "серая безысходность"
При выборе цвета, цвет текста
меняется на черный
Если не выбрать , текст серого
цвета
Поля "комментарий для
курьера
Располагается 4 по списку
поля с плейсхолдером, серые, с
закругленными краями
Серые границы при пустом
вводе
Черные границы при выборе
Синие границы при выборе
красные границы, при
некорректном вводе
Надпись "Введите корректный
комментарий для курьера" при
некорректном вводе
Содержит плейсхолдер
"комментарий для курьера"
Текст черного цвета
Кнопка "Назад"
снизу под полем, с
комментарием для курьера
Белого цвета
границы черные
Надпись "Назад" черного цвета
при фокусе, курсор меняется на
"Поинтер"
Форма поля, прямоугольная с
закругленными краями
Кнопка "Заказать"
Снизу под полем с
комментарием для курьера с
прпавой стороны
Границы черные
При наведении курсора,
меняются границы и заливка на
черный цвет
Текст внутри кнопка "Заказать"
белого цвета
Форма поля, прямоугольная с
закругленными краями
При фокусе , курсор меняется
на "поинтер"
Всплывающее окно "Заказ
оформлен"
Заголовок "Заказ оформлен"
Расположен вверху формы над
полями
Текст черного цвета
Текст "Номер заказа3434.
Запишите его: пригодится чтобы
отслеживать заказ"
Расположен в центре под
заголовком
Текст черного цвета и выровнен
по центру
Кнопка "посмотреть статус"
Расположена внизу в окне
справа
Текст белого цвета
края у кнопки скругленные ,
цвет черный
Рамка окна
Черного цвета , вокруг темный
оттенок